Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RTS Game - Real-Time Strategy</title> | |
| <!-- CJK Font Support --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"> | |
| <!-- HF Spaces iframe fix --> | |
| <style> | |
| /* Force full viewport in iframe */ | |
| html, body { | |
| height: 100vh ; | |
| width: 100vw ; | |
| overflow: hidden ; | |
| margin: 0 ; | |
| padding: 0 ; | |
| } | |
| /* Ensure desktop layout in iframe */ | |
| @media screen and (min-width: 1200px) { | |
| #left-sidebar, #right-sidebar { | |
| width: 320px ; | |
| min-width: 320px ; | |
| } | |
| #canvas-container { | |
| min-width: calc(100vw - 640px) ; | |
| flex: 1 ; | |
| } | |
| } | |
| </style> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| <link rel="stylesheet" href="/static/nl_interface.css"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- Top Bar --> | |
| <div id="topbar"> | |
| <div class="topbar-left"> | |
| <h1>๐ฎ RTS Commander</h1> | |
| <div id="game-info"> | |
| <span class="info-badge">Tick: <span id="tick">0</span></span> | |
| <span class="info-badge">Units: <span id="unit-count">0</span></span> | |
| </div> | |
| </div> | |
| <div class="topbar-right"> | |
| <div class="resource-display"> | |
| <div class="resource-item"> | |
| <span class="resource-icon">๐ฐ</span> | |
| <span id="credits">5000</span> | |
| </div> | |
| <div class="resource-item"> | |
| <span class="resource-icon">โก</span> | |
| <span id="power">100</span>/<span id="power-max">100</span> | |
| </div> | |
| </div> | |
| <div id="nuke-indicator"> | |
| <div class="nuke-status">Charging: 0%</div> | |
| <div class="nuke-charge-container"> | |
| <div class="nuke-charge-bar"></div> | |
| </div> | |
| </div> | |
| <div class="sound-control"> | |
| <button id="sound-toggle" class="sound-btn" title="Toggle Sound"> | |
| <span class="sound-icon">๐</span> | |
| </button> | |
| </div> | |
| <div class="language-selector"> | |
| <label for="language-select">๐</label> | |
| <select id="language-select"> | |
| <option value="en">English</option> | |
| <option value="fr">Franรงais</option> | |
| <option value="zh-TW">็น้ซไธญๆ</option> | |
| </select> | |
| </div> | |
| <div class="connection-status" id="connection-status"> | |
| <span class="status-dot disconnected"></span> | |
| <span id="status-text">Connecting...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Game Area --> | |
| <div id="game-container"> | |
| <!-- Left Sidebar - Unit/Building Selection --> | |
| <div id="left-sidebar"> | |
| <div class="sidebar-section"> | |
| <h3>๐๏ธ Build Menu</h3> | |
| <div class="build-buttons"> | |
| <button class="build-btn" data-type="barracks" title="Barracks (500๐ฐ)"> | |
| <span class="build-icon">๐๏ธ</span> | |
| <span class="build-name">Barracks</span> | |
| <span class="build-cost">500</span> | |
| </button> | |
| <button class="build-btn" data-type="war_factory" title="War Factory (800๐ฐ)"> | |
| <span class="build-icon">๐ญ</span> | |
| <span class="build-name">Factory</span> | |
| <span class="build-cost">800</span> | |
| </button> | |
| <button class="build-btn" data-type="power_plant" title="Power Plant (300๐ฐ)"> | |
| <span class="build-icon">โก</span> | |
| <span class="build-name">Power</span> | |
| <span class="build-cost">300</span> | |
| </button> | |
| <button class="build-btn" data-type="refinery" title="Refinery (600๐ฐ)"> | |
| <span class="build-icon">๐ญ</span> | |
| <span class="build-name">Refinery</span> | |
| <span class="build-cost">600</span> | |
| </button> | |
| <button class="build-btn" data-type="defense_turret" title="Turret (400๐ฐ)"> | |
| <span class="build-icon">๐ผ</span> | |
| <span class="build-name">Turret</span> | |
| <span class="build-cost">400</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>โ๏ธ Train Units</h3> | |
| <div id="production-source" class="production-source"> | |
| <span class="label">๐ญ Using:</span> | |
| <span id="production-source-name">Auto</span> | |
| <button id="production-source-clear" title="Clear selection">โ</button> | |
| </div> | |
| <div class="unit-buttons"> | |
| <button class="unit-btn" data-type="infantry" title="Infantry (100๐ฐ)"> | |
| <span class="unit-icon">๐ถ</span> | |
| <span class="unit-name">Infantry</span> | |
| <span class="unit-cost">100</span> | |
| </button> | |
| <button class="unit-btn" data-type="tank" title="Tank (500๐ฐ)"> | |
| <span class="unit-icon">๐</span> | |
| <span class="unit-name">Tank</span> | |
| <span class="unit-cost">500</span> | |
| </button> | |
| <button class="unit-btn" data-type="harvester" title="Harvester (200๐ฐ)"> | |
| <span class="unit-icon">๐</span> | |
| <span class="unit-name">Harvester</span> | |
| <span class="unit-cost">200</span> | |
| </button> | |
| <button class="unit-btn" data-type="helicopter" title="Helicopter (800๐ฐ)"> | |
| <span class="unit-icon">๐</span> | |
| <span class="unit-name">Heli</span> | |
| <span class="unit-cost">800</span> | |
| </button> | |
| <button class="unit-btn" data-type="artillery" title="Artillery (600๐ฐ)"> | |
| <span class="unit-icon">๐ฃ</span> | |
| <span class="unit-name">Artillery</span> | |
| <span class="unit-cost">600</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>๐ Selection Info</h3> | |
| <div id="selection-info"> | |
| <p class="no-selection">No units selected</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Canvas --> | |
| <div id="canvas-container"> | |
| <canvas id="game-canvas"></canvas> | |
| <div id="minimap-container"> | |
| <canvas id="minimap"></canvas> | |
| <div id="minimap-viewport"></div> | |
| </div> | |
| <!-- Camera Controls --> | |
| <div id="camera-controls"> | |
| <button class="camera-btn" id="zoom-in" title="Zoom In">๐+</button> | |
| <button class="camera-btn" id="zoom-out" title="Zoom Out">๐-</button> | |
| <button class="camera-btn" id="reset-view" title="Reset View">๐ฏ</button> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar - Action Queue & Stats --> | |
| <div id="right-sidebar"> | |
| <!-- Intel/AI Analysis Panel --> | |
| <div class="sidebar-section intel-section"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px;"> | |
| <h3 id="intel-header" style="margin: 0; display:flex; align-items:center; gap:8px;">๐ค Intel: Offline <span id="intel-source" class="intel-source-badge" title="Source">โ</span></h3> | |
| <button id="refresh-intel" class="intel-refresh-btn" title="Refresh Intel">๐</button> | |
| </div> | |
| <div id="intel-panel"> | |
| <div id="intel-status" class="intel-status">Awaiting AI analysis...</div> | |
| <div id="intel-summary" class="intel-summary"></div> | |
| <div id="intel-tips" class="intel-tips"></div> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>๐ Production Queue</h3> | |
| <div id="production-queue"> | |
| <p class="empty-queue">Queue is empty</p> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>๐ฏ Quick Actions</h3> | |
| <div class="action-buttons"> | |
| <button class="action-btn" id="select-all">Select All Units</button> | |
| <button class="action-btn" id="stop-units">Stop Selected</button> | |
| <button class="action-btn" id="attack-move">Attack Move</button> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3>๐ Game Stats</h3> | |
| <div id="game-stats"> | |
| <div class="stat-row"> | |
| <span>Player Units:</span> | |
| <span id="player-units">0</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span>Enemy Units:</span> | |
| <span id="enemy-units">0</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span>Buildings:</span> | |
| <span id="player-buildings">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notifications --> | |
| <div id="notifications"></div> | |
| <!-- Loading Screen --> | |
| <div id="loading-screen"> | |
| <div class="loading-content"> | |
| <h2>๐ฎ Loading RTS Game...</h2> | |
| <div class="loading-bar"> | |
| <div class="loading-progress"></div> | |
| </div> | |
| <p>Connecting to server...</p> | |
| </div> | |
| </div> | |
| <!-- Game Over Overlay --> | |
| <div id="game-over-overlay" class="hidden"> | |
| <div class="game-over-content"> | |
| <h2 id="game-over-message">Game Over</h2> | |
| <div class="game-over-actions"> | |
| <button id="game-over-restart">Restart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/sounds.js"></script> | |
| <script src="/static/hints.js"></script> | |
| <script src="/static/game.js"></script> | |
| <script src="/static/nl_interface.js"></script> | |
| </body> | |
| </html> | |