155 lines
7.4 KiB
HTML
155 lines
7.4 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>
|
|
|
|
<!-- Status Overview Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Status Overview</h4>
|
|
<div id="rts-overview-stats">
|
|
<div class="stat-item">Turn: <span id="turn-counter">1</span></div>
|
|
<div class="stat-item">Zone: <span id="current-zone">Unknown</span></div>
|
|
<div class="stat-item">Threat: <span id="threat-level">Low</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Casualties Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Casualties</h4>
|
|
<div id="rts-casualties-stats">
|
|
<div class="stat-item">Total Deaths: <span id="total-deaths">0</span></div>
|
|
<div class="stat-item">Recent: <span id="recent-deaths">0</span></div>
|
|
</div>
|
|
<div id="rts-recent-casualties" class="scrollable-list"></div>
|
|
</div>
|
|
|
|
<!-- Escaped Animals Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Escaped Animals</h4>
|
|
<div id="rts-animals-stats">
|
|
<div class="stat-item">Active Threats: <span id="active-animals">0</span></div>
|
|
</div>
|
|
<div id="rts-escaped-animals" class="scrollable-list"></div>
|
|
</div>
|
|
|
|
<!-- Personnel Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Personnel</h4>
|
|
<div id="rts-personnel-stats">
|
|
<div class="stat-item">Alive: <span id="alive-personnel">0</span></div>
|
|
<div class="stat-item">Injured: <span id="injured-personnel">0</span></div>
|
|
<div class="stat-item">Missing: <span id="missing-personnel">0</span></div>
|
|
</div>
|
|
<div id="rts-personnel-list" class="scrollable-list"></div>
|
|
</div>
|
|
|
|
<!-- Active Incidents Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Active Incidents</h4>
|
|
<div id="rts-incidents-stats">
|
|
<div class="stat-item">Emergency: <span id="emergency-incidents">0</span></div>
|
|
<div class="stat-item">Ongoing: <span id="ongoing-incidents">0</span></div>
|
|
</div>
|
|
<div id="rts-incidents-list" class="scrollable-list"></div>
|
|
</div>
|
|
|
|
<!-- Threat Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Threat</h4>
|
|
<div id="rts-threat" class="rts-threat-display">
|
|
<div class="rts-threat-item">
|
|
<i class="fa-solid fa-location-crosshairs"></i>
|
|
<span>Zone: <span id="rts-current-zone">Entrance</span></span>
|
|
</div>
|
|
<div class="rts-threat-item">
|
|
<i class="fa-solid fa-triangle-exclamation"></i>
|
|
<span>Threat: <span id="rts-threat-level">Low</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>
|
|
<div id="rts-map-overlay" class="rts-map-overlay">
|
|
<!-- Selected unit/building info will appear here -->
|
|
</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 id="rts-quick-actions" class="rts-quick-actions">
|
|
<!-- Quick action buttons will be dynamically inserted here -->
|
|
</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> |