Mini RTS Mejorado

De acuerdo, vamos a mejorar la estructura visual y añadir un poco más de interactividad básica. Aquí tienes las actualizaciones para `index.html`, `style.css` y `script.js`: Mini RTS Mejorado

100

- Ninguno -

:root { --primary-bg: #282c34; --secondary-bg: #3a3f4a; --tertiary-bg: #4a4f5a; --map-bg: #5a8a5a; --text-color: #e0e0e0; --border-color: #555; --highlight-color: yellow; --selection-bg: #4f5563; --button-bg: #6a6f7a; --button-hover-bg: #7a7f8a; --button-disabled-bg: #555; --button-disabled-color: #999; --worker-color: #add8e6; /* Light blue */ --base-color: #a9a9a9; /* Dark Gray */ --move-marker-color: rgba(255, 255, 0, 0.5); } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--primary-bg); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } #game-container { border: 2px solid var(--border-color); display: flex; flex-direction: column; width: 80vw; /* Use viewport width */ max-width: 900px; height: 80vh; /* Use viewport height */ max-height: 700px; background-color: var(--secondary-bg); position: relative; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } #map { flex-grow: 1; background-color: var(--map-bg); position: relative; overflow: hidden; border-bottom: 2px solid var(--border-color); cursor: crosshair; /* Default cursor for map */ } #ui-panel { height: 130px; background-color: var(--tertiary-bg); padding: 15px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; } #resource-display { display: flex; flex-direction: column; gap: 10px; /* Space between resources */ } #resource-display span { display: flex; align-items: center; font-size: 1.1em; } .resource-icon { width: 20px; height: 20px; margin-right: 8px; background-color: #ccc; /* Placeholder color */ border: 1px solid #888; display: inline-block; /* Needed for size */ } /* Specific icon looks (if you had real images) */ img[alt="Oro"] { background-color: gold; } img[alt="Madera"] { background-color: saddlebrown; } #selection-panel { display: flex; align-items: center; background-color: var(--selection-bg); padding: 10px; border-radius: 5px; border: 1px solid var(--border-color); min-width: 200px; } #selection-icon { width: 50px; height: 50px; background-color: #666; border: 1px solid #888; display: flex; justify-content: center; align-items: center; font-size: 1.5em; margin-right: 15px; border-radius: 3px; } #selection-details p { margin: 2px 0; font-size: 0.9em; } #selected-name { font-weight: bold; font-size: 1em; } #actions { display: flex; flex-direction: column; /* Stack buttons vertically */ gap: 8px; /* Space between buttons */ } #actions button { padding: 8px 12px; cursor: pointer; background-color: var(--button-bg); border: 1px solid #888; color: var(--text-color); border-radius: 3px; transition: background-color 0.2s ease; min-width: 100px; /* Ensure buttons have some width */ text-align: left; } #actions button:hover:not(:disabled) { background-color: var(--button-hover-bg); } #actions button:disabled { background-color: var(--button-disabled-bg); color: var(--button-disabled-color); cursor: not-allowed; } /* Units and Buildings */ .unit, .building { position: absolute; box-sizing: border-box; cursor: pointer; user-select: none; border-radius: 4px; /* Slightly rounded corners */ transition: transform 0.1s ease-out; /* Smooth selection effect */ display: flex; /* Use flexbox for centering icon */ justify-content: center; align-items: center; } .unit .icon, .building .icon { font-weight: bold; font-size: 1.1em; color: #111; /* Darker text on icon */ } .unit.selected, .building.selected { outline: 3px solid var(--highlight-color); outline-offset: 2px; transform: scale(1.05); /* Slightly larger when selected */ } .worker { width: 30px; height: 30px; background: linear-gradient(to bottom, var(--worker-color), darken(var(--worker-color), 15%)); border: 1px solid darken(var(--worker-color), 25%); border-radius: 50%; /* Keep workers circular */ } .base { width: 70px; height: 70px; background: linear-gradient(to bottom, var(--base-color), darken(var(--base-color), 15%)); border: 2px solid darken(var(--base-color), 25%); } .base .icon { font-size: 1.8em; } /* Move Marker */ #move-marker { position: absolute; width: 20px; height: 20px; border: 3px solid var(--move-marker-color); border-radius: 50%; transform: translate(-50%, -50%); /* Center on click point */ pointer-events: none; /* Don't interfere with clicks */ box-sizing: border-box; animation: pulse 1s infinite alternate; } .hidden { display: none; } @keyframes pulse { from { opacity: 0.3; } to { opacity: 0.8; } } /* Helper function for CSS */ /* You might need a preprocessor for this in a real project */ /* Simulating darken for JS-less CSS */ :root { /* Define darker versions manually if not using SASS/LESS */ --worker-color-darker-15: #87ceeb; /* Example */ --worker-color-darker-25: #70c1e3; /* Example */ --base-color-darker-15: #909090; /* Example */ --base-color-darker-25: #787878; /* Example */ } .worker { background: linear-gradient(to bottom, var(--worker-color), var(--worker-color-darker-15)); border: 1px solid var(--worker-color-darker-25); } .base { background: linear-gradient(to bottom, var(--base-color), var(--base-color-darker-15)); border: 2px solid var(--base-color-darker-25); } // --- DOM Elements --- const map = document.getElementById('map'); const uiPanel = document.getElementById('ui-panel'); const selectionPanel = document.getElementById('selection-panel'); const selectionIcon = document.getElementById('selection-icon'); const selectionName = document.getElementById('selected-name'); const selectionHp = document.getElementById('selected-hp'); const actionButtons = { move: document.getElementById('move-button'), attack: document.getElementById('attack-button'), build: document.getElementById('build-button') }; const goldDisplay = document.getElementById('gold'); const woodDisplay = document.getElementById('wood'); // Assuming you might add wood later const moveMarker = document.getElementById('move-marker'); // --- Game State --- let selectedElement = null; let resources = { gold: 100, wood: 50 }; let isMoveCommandActive = false; // Flag to check if we are waiting for move target click // --- Initialization --- initializeEntities(); disableAllActions(); updateResourceDisplay(); setInterval(passiveGoldIncome, 5000); // Add 5 gold every 5 seconds // --- Event Listeners --- map.addEventListener('click', handleMapClick); actionButtons.move.addEventListener('click', activateMoveCommand); // Add listeners for other action buttons later // --- Functions --- function initializeEntities() { document.querySelectorAll('.unit, .building').forEach(el => { // Store data directly on the element for easy access el.dataset.name = el.getAttribute('data-name') || 'Unknown'; el.dataset.hp = el.getAttribute('data-hp') || '??'; el.dataset.type = el.getAttribute('data-type') || 'object'; el.addEventListener('click', (event) => { event.stopPropagation(); // Prevent map click when clicking entity selectElement(el); }); }); } function selectElement(element) { if (selectedElement === element) return; // Already selected deselectElement(); // Deselect previous selectedElement = element; selectedElement.classList.add('selected'); isMoveCommandActive = false; // Cancel move command on new selection map.style.cursor = 'default'; // Reset cursor hideMoveMarker(); updateSelectionPanel(element); enableActions(element.dataset.type); } function deselectElement() { if (selectedElement) { selectedElement.classList.remove('selected'); } selectedElement = null; isMoveCommandActive = false; map.style.cursor = 'crosshair'; // Reset cursor hideMoveMarker(); updateSelectionPanel(null); disableAllActions(); } function updateSelectionPanel(element) { if (element) { selectionName.textContent = element.dataset.name; selectionHp.textContent = `HP: ${element.dataset.hp}`; // Update icon (basic text for now) selectionIcon.textContent = element.querySelector('.icon')?.textContent || '?'; selectionIcon.style.backgroundColor = getComputedStyle(element).backgroundColor; // Match color selectionPanel.style.opacity = 1; } else { selectionName.textContent = '- Ninguno -'; selectionHp.textContent = ''; selectionIcon.textContent = '?'; selectionIcon.style.backgroundColor = '#666'; // Default color selectionPanel.style.opacity = 0.7; // Fade out slightly } } function enableActions(type) { disableAllActions(); // Reset first if (type === 'unit') { actionButtons.move.disabled = false; actionButtons.attack.disabled = false; // Check if it's a worker specifically for build action if (selectedElement && selectedElement.classList.contains('worker')) { actionButtons.build.disabled = false; } } else if (type === 'building') { // Example: Enable unit creation if it's a base if (selectedElement && selectedElement.classList.contains('base')) { // actionButtons.createWorker.disabled = false; // If such a button existed } } } function disableAllActions() { Object.values(actionButtons).forEach(button => button.disabled = true); } function updateResourceDisplay() { goldDisplay.textContent = resources.gold; woodDisplay.textContent = resources.wood; } function passiveGoldIncome() { resources.gold += 5; updateResourceDisplay(); } function activateMoveCommand() { if (!selectedElement || selectedElement.dataset.type !== 'unit') return; isMoveCommandActive = true; map.style.cursor = 'move'; // Change cursor to indicate move command console.log("Move command activated. Click on the map to set destination."); // Optionally highlight the move button } function handleMapClick(event) { if (isMoveCommandActive && selectedElement) { // --- Execute Move --- const mapRect = map.getBoundingClientRect(); // Calculate click position relative to the map const targetX = event.clientX - mapRect.left; const targetY = event.clientY - mapRect.top; console.log(`Move ${selectedElement.id} to (${targetX.toFixed(0)}, ${targetY.toFixed(0)})`); showMoveMarker(targetX, targetY); // Reset move command state isMoveCommandActive = false; map.style.cursor = 'default'; // Back to default cursor for selected unit // --- TODO: Implement actual unit movement logic here --- // This would involve: // 1. Calculating path (optional, for complex maps) // 2. Starting an animation loop (e.g., using requestAnimationFrame) // 3. Updating the element's 'top' and 'left' style properties over time // 4. Stopping the animation when the destination is reached } else { // If not issuing a move command, deselect any selected element deselectElement(); } } function showMoveMarker(x, y) { moveMarker.style.left = `${x}px`; moveMarker.style.top = `${y}px`; moveMarker.classList.remove('hidden'); // Optional: Hide marker after a short delay // setTimeout(hideMoveMarker, 1500); } function hideMoveMarker() { moveMarker.classList.add('hidden'); } **Cambios clave:** 1. **HTML:** * Añadido `data-*` attributes a las unidades/edificios para almacenar su información (nombre, HP, tipo) directamente en el HTML. * Añadido un `div` para el `move-marker` (inicialmente oculto). * Añadido un segundo trabajador (`worker-2`). * Reestructurado el panel de selección (`selection-panel`) para incluir un icono y detalles. * Añadido `id`s a los botones de acción. * Añadido `img` tags para iconos de recursos (con un script para crear archivos vacíos si no existen, solo para evitar errores 404). * Añadido un `div` con clase `icon` dentro de las unidades/edificios para estilizar el texto interior. 2. **CSS:** * Introducido **CSS Variables** (`:root`) para colores y tamaños, facilitando cambios de tema. * Mejorado el estilo general (sombras, bordes redondeados, fuentes). * Estilos más definidos para unidades y edificios usando gradientes y bordes. * Estilo para el `move-marker` (un círculo amarillo semitransparente que parpadea). * Mejorado el diseño del panel de UI (recursos, panel de selección, botones). * Añadido un ligero efecto de escala (`transform: scale(1.05)`) al seleccionar. * Estilos básicos para los iconos de recursos. 3. **JavaScript:** * Refactorizado para usar los `data-*` attributes del HTML. * Función `initializeEntities` para configurar las unidades/edificios al inicio. * Mejorada la función `updateSelectionPanel` para mostrar icono y detalles. * Implementada la generación pasiva de oro (`passiveGoldIncome`). * **Lógica básica de "Mover":** * Al hacer clic en el botón "Mover", se activa el modo `isMoveCommandActive` y cambia el cursor. * Al hacer clic en el mapa *mientras* `isMoveCommandActive` está activo: * Se calcula la posición del clic. * Se muestra el `move-marker` en esa posición. * Se imprime un mensaje en la consola indicando la acción (el movimiento real no está implementado). * Se desactiva el modo `isMoveCommandActive`. * El clic normal en el mapa ahora deselecciona la unidad. * Se usan los `id`s de los botones para añadir listeners específicos. Ahora la interfaz es un poco más atractiva, hay un recurso que aumenta con el tiempo y puedes simular dar una orden de movimiento (verás un marcador en el mapa y un mensaje en la consola).