173 lines
8.8 KiB
HTML
173 lines
8.8 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: Zoo Status -->
|
|
<div id="rts-left-panel" class="rts-panel flex-container flexFlowColumn">
|
|
<div class="rts-panel-header">
|
|
<h3>Escape Status</h3>
|
|
</div>
|
|
|
|
<!-- Overall Status Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Overall Status</h4>
|
|
<div id="rts-zoo-status" class="rts-zoo-status">
|
|
<div class="rts-status-item">
|
|
<i class="fa-solid fa-clock"></i>
|
|
<span>Turn: <span id="turn-counter">1</span></span>
|
|
</div>
|
|
<div class="rts-status-item">
|
|
<i class="fa-solid fa-location-crosshairs"></i>
|
|
<span>Zone: <span id="current-zone">Unknown</span></span>
|
|
</div>
|
|
<div class="rts-status-item">
|
|
<i class="fa-solid fa-exclamation-triangle" style="color: #dc2626;"></i>
|
|
<span>Threat: <span id="threat-level">Low</span></span>
|
|
</div>
|
|
<div class="rts-status-item">
|
|
<i class="fa-solid fa-skull" style="color: #dc2626;"></i>
|
|
<span>Casualties: <span id="rts-casualties"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Casualties Detail Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Recent 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 scrollY"></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="rts-animals-list scrollY scrollable-list"></div>
|
|
</div>
|
|
|
|
<!-- Personnel Status Section -->
|
|
<div class="rts-section">
|
|
<h4 class="rts-section-title">Personnel Status</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-people-status" class="rts-people-list scrollY"></div>
|
|
<div id="rts-personnel-list" class="rts-people-list scrollY 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-active-incidents" class="rts-incidents-list scrollY"></div>
|
|
<div id="rts-incidents-list" class="rts-incidents-list scrollY scrollable-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center: Zoo Map -->
|
|
<div id="rts-map-container" class="flex1 flex-container flexFlowColumn">
|
|
<div class="rts-map-header">
|
|
<h3>Zoo Escape 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"></canvas>
|
|
<div id="rts-map-overlay"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel: Actions and Event Log -->
|
|
<div id="rts-right-panel" class="rts-panel flex-container flexFlowColumn">
|
|
<div class="rts-panel-header">
|
|
<h3>Action Center</h3>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<div class="rts-section">
|
|
<details>
|
|
<summary class="rts-section-title">Settings</summary>
|
|
<div style="padding: 10px 0;">
|
|
<div>
|
|
<h2>Preset Selection</h2>
|
|
<p>Select a scenario preset to begin.</p>
|
|
<select id="rts-preset-select">
|
|
<option value="/scripts/extensions/rts-mode/presets/zoo_escape.json">Zoo Escape</option>
|
|
<option value="/scripts/extensions/rts-mode/presets/classic_rts.json">Classic RTS</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 10px 0;">
|
|
<div>
|
|
<h2>Content Filter</h2>
|
|
<p>Enable to allow graphic descriptions of violence and sexual themes.</p>
|
|
<div class="rts-settings-toggle">
|
|
<label for="rts-content-filter-toggle" class="rts-toggle-label">Explicit Content</label>
|
|
<label class="rts-switch">
|
|
<input type="checkbox" id="rts-content-filter-toggle" checked>
|
|
<span class="rts-slider round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 10px 0;">
|
|
<div>
|
|
<h2>Model Settings</h2>
|
|
<p>Use structured output for models that support it (e.g., OpenAI, Gemini, Anthropic).</p>
|
|
<div class="rts-settings-toggle">
|
|
<label for="rts-structured-output-toggle" class="rts-toggle-label">Structured Output</label>
|
|
<label class="rts-switch">
|
|
<input type="checkbox" id="rts-structured-output-toggle">
|
|
<span class="rts-slider round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</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>
|
|
|
|
<!-- Action Input -->
|
|
<div class="rts-section flex1">
|
|
<h4 class="rts-section-title">Action Input</h4>
|
|
<div class="rts-command-input-area">
|
|
<textarea id="rts-command-input" placeholder="Describe your action..." 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> Take Action</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>
|
|
|
|
<!-- Event Log -->
|
|
<div class="rts-section flex1">
|
|
<h4 class="rts-section-title">Event Log</h4>
|
|
<div id="rts-game-log" class="rts-game-log scrollY"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |