162 lines
7.7 KiB
HTML
162 lines
7.7 KiB
HTML
<div id="rts-main-container" class="wide100p height100p">
|
|
<!-- RTS Header -->
|
|
<div id="rts-header" class="fa-solid fa-grip drag-grabber"></div>
|
|
|
|
<!-- Main RTS Game Area -->
|
|
<div id="rts-game-area" class="flex-container wide100p height100p">
|
|
<!-- Left Panel: Resources and Units -->
|
|
<div id="rts-left-panel" class="rts-panel flex-container flexFlowColumn">
|
|
<div class="rts-panel-header">
|
|
<h3>Game Status</h3>
|
|
</div>
|
|
|
|
<!-- Resources Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Resources</h4>
|
|
<div id="rts-resources" class="rts-resources-grid">
|
|
<div class="rts-resource-item">
|
|
<i class="fa-solid fa-coins"></i>
|
|
<span>Gold: <span id="rts-gold">100</span></span>
|
|
</div>
|
|
<div class="rts-resource-item">
|
|
<i class="fa-solid fa-tree"></i>
|
|
<span>Wood: <span id="rts-wood">50</span></span>
|
|
</div>
|
|
<div class="rts-resource-item">
|
|
<i class="fa-solid fa-mountain"></i>
|
|
<span>Stone: <span id="rts-stone">25</span></span>
|
|
</div>
|
|
<div class="rts-resource-item">
|
|
<i class="fa-solid fa-seedling"></i>
|
|
<span>Food: <span id="rts-food">75</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Units Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Army</h4>
|
|
<div id="rts-units" class="rts-units-list">
|
|
<div class="rts-unit-item">
|
|
<i class="fa-solid fa-user-shield"></i>
|
|
<span>Warriors: <span id="rts-warriors">5</span></span>
|
|
</div>
|
|
<div class="rts-unit-item">
|
|
<i class="fa-solid fa-bow-and-arrow"></i>
|
|
<span>Archers: <span id="rts-archers">3</span></span>
|
|
</div>
|
|
<div class="rts-unit-item">
|
|
<i class="fa-solid fa-horse"></i>
|
|
<span>Cavalry: <span id="rts-cavalry">2</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buildings Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Buildings</h4>
|
|
<div id="rts-buildings" class="rts-buildings-list">
|
|
<div class="rts-building-item">
|
|
<i class="fa-solid fa-home"></i>
|
|
<span>Town Hall: Level <span id="rts-town-hall">1</span></span>
|
|
</div>
|
|
<div class="rts-building-item">
|
|
<i class="fa-solid fa-hammer"></i>
|
|
<span>Barracks: <span id="rts-barracks">1</span></span>
|
|
</div>
|
|
<div class="rts-building-item">
|
|
<i class="fa-solid fa-warehouse"></i>
|
|
<span>Storage: <span id="rts-storage">1</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center: Game Map -->
|
|
<div id="rts-map-container" class="flex1 flex-container flexFlowColumn">
|
|
<div class="rts-map-header">
|
|
<h3>Battle Map</h3>
|
|
<div class="rts-map-controls">
|
|
<button id="rts-zoom-in" class="menu_button menu_button_icon" title="Zoom In">
|
|
<i class="fa-solid fa-magnifying-glass-plus"></i>
|
|
</button>
|
|
<button id="rts-zoom-out" class="menu_button menu_button_icon" title="Zoom Out">
|
|
<i class="fa-solid fa-magnifying-glass-minus"></i>
|
|
</button>
|
|
<button id="rts-center-map" class="menu_button menu_button_icon" title="Center Map">
|
|
<i class="fa-solid fa-crosshairs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="rts-map-wrapper" class="flex1 rts-map-wrapper">
|
|
<canvas id="rts-game-map" width="800" height="600"></canvas>
|
|
<div id="rts-map-overlay" class="rts-map-overlay">
|
|
<!-- Selected unit/building info will appear here -->
|
|
</div>
|
|
</div>
|
|
<div class="rts-map-footer">
|
|
<div class="rts-turn-info">
|
|
<span>Turn: <span id="rts-current-turn">1</span></span>
|
|
<span class="rts-separator">|</span>
|
|
<span>Season: <span id="rts-season">Spring</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel: Commands and Log -->
|
|
<div id="rts-right-panel" class="rts-panel flex-container flexFlowColumn">
|
|
<div class="rts-panel-header">
|
|
<h3>Command Center</h3>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Quick Actions</h4>
|
|
<div class="rts-quick-actions">
|
|
<button id="rts-build-btn" class="menu_button" title="Build Structure">
|
|
<i class="fa-solid fa-hammer"></i> Build
|
|
</button>
|
|
<button id="rts-recruit-btn" class="menu_button" title="Recruit Units">
|
|
<i class="fa-solid fa-user-plus"></i> Recruit
|
|
</button>
|
|
<button id="rts-explore-btn" class="menu_button" title="Explore Territory">
|
|
<i class="fa-solid fa-compass"></i> Explore
|
|
</button>
|
|
<button id="rts-trade-btn" class="menu_button" title="Trade Resources">
|
|
<i class="fa-solid fa-handshake"></i> Trade
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Command Input -->
|
|
<div class="rts-section flex1">
|
|
<h4 class="rts-section-title">Command Input</h4>
|
|
<div class="rts-command-input-area">
|
|
<textarea id="rts-command-input"
|
|
placeholder="Enter your strategy commands here... (e.g., 'Build a barracks north of the town hall' or 'Send 3 warriors to explore the eastern forest')"
|
|
class="text_pole textarea_compact"
|
|
rows="3"></textarea>
|
|
<div class="rts-command-controls">
|
|
<button id="rts-execute-btn" class="menu_button menu_button_bold">
|
|
<i class="fa-solid fa-play"></i> Execute Turn
|
|
</button>
|
|
<button id="rts-clear-btn" class="menu_button menu_button_icon" title="Clear Input">
|
|
<i class="fa-solid fa-eraser"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Log -->
|
|
<div class="rts-section flex1">
|
|
<h4 class="rts-section-title">Battle Log</h4>
|
|
<div id="rts-game-log" class="rts-game-log scrollY">
|
|
<div class="rts-log-entry rts-log-system">
|
|
<span class="rts-log-timestamp">[Turn 1]</span>
|
|
<span class="rts-log-message">Welcome to RTS Mode! Your settlement awaits your commands.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |