Split client into frontend website and server

This commit is contained in:
Pax1601
2024-02-08 22:04:23 +01:00
parent 55f3bd5adb
commit 5ca6c97cbe
792 changed files with 149898 additions and 13872 deletions

View File

@@ -0,0 +1,7 @@
<div id="connection-status-panel" class="ol-panel" oncontextmenu="return false;">
<div id="connection-status-message">
<abbr title="Elapsed time. Click to toggle." class="time-display mission-elapsed-time"></abbr>
<abbr title="Mission time (local). Click to toggle." class="time-display mission-time"></abbr>
</div>
<div id="connection-status-light"></div>
</div>

View File

@@ -0,0 +1,3 @@
<div id="hotgroup-panel">
<!-- Here is where the various hotgroup buttons will show up -->
</div>

View File

@@ -0,0 +1,22 @@
<div id="log-panel" oncontextmenu="return false;">
<div class="ol-panel" data-on-click="toggleLogPanel">
<div id="log-panel-header">Server log</div>
<div id="log-panel-header-right">
<div id="server-status-panel" oncontextmenu="return false;">
<dl>
<dt><abbr title="Server frame rate (approx)">FPS</abbr>:</dt>
<dd id="server-frame-rate"></dd>
</dl>
<dl>
<dt><abbr title="Server load">Load</abbr>:</dt>
<dd id="server-load"></dd>
</dl>
</div>
<img src="/resources/theme/images/icons/chevron-down.svg" inject-svg>
</div>
</div>
<div class="ol-panel ol-scrollable closed">
</div>
</div>

View File

@@ -0,0 +1,63 @@
<div id="mouse-info-panel" class="ol-panel" oncontextmenu="return false;">
<div id="measuring-tool" class="mouse-tool hide">
<div class="mouse-tool-item">
<div id="ref-measure-position" class="svg-icon"><img src="/resources/theme/images/icons/pin.svg" inject-svg></div>
<div id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
</div>
</div>
<div id="unit-bullseye-tool" class="mouse-tool hide">
<div class="mouse-tool-item">
<div id="ref-unit-position" class="svg-icon" data-tooltip="Bearing/range from selected unit"><img src="/resources/theme/images/icons/plane.svg" inject-svg></div>
<div id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
</div>
</div>
<div id="bullseyes-tool" class="mouse-tool">
<div class="mouse-tool-item">
<div id="ref-bullseye-2" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="blue"></div>
<div id="bullseye-2" class="br-info" data-coalition="blue" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
</div>
<div class="mouse-tool-item">
<div id="ref-bullseye-1" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="red"></div>
<div id="bullseye-1" class="br-info" data-coalition="red" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
</div>
</div>
<div id="coordinates-tool" class="mouse-tool" data-location-system="LatLng">
<div class="mouse-tool-item" data-location-system="MGRS">
<div id="ref-mouse-position-mgrs"></div>
<div id="mouse-position-mgrs" class="coordinates"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-mouse-position-latitude" data-location-system="LatLng"></div>
<div id="mouse-position-latitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-mouse-position-longitude" data-location-system="LatLng"></div>
<div id="mouse-position-longitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-mouse-position-utm-northing" data-location-system="UTM"></div>
<div id="mouse-position-utm-northing" class="coordinates" data-location-system="UTM"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-mouse-position-utm-easting" data-location-system="UTM"></div>
<div id="mouse-position-utm-easting" class="coordinates" data-location-system="UTM"></div>
</div>
<div>
<div class="mouse-tool-item">
<div id="ref-mouse-position-elevation" data-label="H"></div>
<div id="mouse-position-elevation" class="elevation" data-value="---"></div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,10 @@
<div id="server-status-panel" class="ol-panel" oncontextmenu="return false;">
<dl class="ol-data-grid">
<dt>Server frame rate:</dt>
<dd id="server-frame-rate"></dd>
</dl>
<dl class="ol-data-grid">
<dt>Olympus load:</dt>
<dd id="server-load"></dd>
</dl>
</div>

View File

@@ -0,0 +1,135 @@
<div id="unit-control-panel" oncontextmenu="return false;">
<div class="ol-panel"><img src="resources/theme/images/icons/gamepad-solid.svg" inject-svg></div>
<div class="ol-panel ol-panel-padding-lg" id="unit-control-panel-content">
<h3>Selected Units</h3>
<div id="unit-selection">
<div id="selected-units-container" class="ol-scrollable">
<!-- This is where all the unit selection buttons will be shown-->
<!-- <button class="pill highlight-coalition" data-coalition="blue" data-label="18">Olympus 1-1</button> -->
</div>
</div>
<hr />
<div id="unit-controls" class="ol-scrollable">
<div id="flight-data">
<div id="speed-slider" class="ol-slider-container flight-control-ol-slider">
<dl class="ol-data-grid">
<dt>Speed</dt>
<dd>
<div class="ol-slider-value"></div>
<div id="speed-type-switch" class="ol-switch"></div>
</dd>
</dl>
<input type="range" min="0" max="100" value="0" class="ol-slider">
<div class="ol-slider-min-max"></div>
</div>
<div id="altitude-slider" class="ol-slider-container flight-control-ol-slider">
<dl class="ol-data-grid">
<dt> Altitude
</dt>
<dd>
<div class="ol-slider-value"></div>
<div id="altitude-type-switch" class="ol-switch"></div>
</dd>
</dl>
<input type="range" min="0" max="100" value="0" class="ol-slider">
<div class="ol-slider-min-max"></div>
</div>
<h5 id="categories-tooltip">Multiple categories selected</h5>
</div>
<hr />
<div id="roe">
<h4>Rules of engagement</h4>
<div id="roe-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the roe buttons will be shown -->
</div>
</div>
<div id="threat">
<h4>Reaction to threat</h4>
<div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the reaction to threat buttons will be shown -->
</div>
</div>
<div id="emissions-countermeasures">
<h4>Radar & ECM</h4>
<div id="emissions-countermeasures-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the emissions/countermeasures buttons will be shown -->
</div>
</div>
<div id="shots-scatter">
<h4>Shots scatter</h4>
<div id="shots-scatter-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the shots scatter buttons will be shown -->
</div>
</div>
<div id="shots-intensity">
<h4>Shots intensity</h4>
<div id="shots-intensity-buttons-container" class="ol-group ol-button-box ol-option-button">
<!-- This is where the shots intensity buttons will be shown -->
</div>
</div>
<div id="tanker-on" class="switch-control yes-no">
<h4>Enable tanker <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Instructs the unit to operate as AAR tanker. A/A TACAN, radio frequency and callsign set in Settings dialog."></h4>
<div id="tanker-on-switch" class="ol-switch"></div>
</div>
<div id="AWACS-on" class="switch-control yes-no">
<h4>Airborne Early Warning <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Enables datalink and AI radio calls. Radio frequency and callsign set in Settings dialog."></h4>
<div id="AWACS-on-switch" class="ol-switch"></div>
</div>
<div id="operate-as" class="switch-control coalition">
<h4>Operate as <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Determines if the unit will target red or blue units when performing scenic tasks."></h4>
<div id="operate-as-switch" class="ol-switch"></div>
</div>
<div id="ai-on-off" class="switch-control yes-no">
<h4>Unit active <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Toggling this disables unit AI completely. It will no longer move, react or emit radio waves."></h4>
<div id="on-off-switch" class="ol-switch" title=""></div>
</div>
<div id="follow-roads" class="switch-control yes-no">
<h4>Follow roads <img src="/resources/theme/images/icons/circle-question-regular.svg" title="WARNING: follow roads movements can cause lag"></h4>
<div id="follow-roads-switch" class="ol-switch"></div>
</div>
</div>
<hr />
<div id="advanced-settings-div">
<button id="advanced-settings-button" class="ol-button-settings ol-box-shadow" data-on-click="showAdvancedSettings">Settings</button>
<div id="delete-options" class="ol-select">
<div class="ol-select-value ol-select-warning">
Delete unit
</div>
<div class="ol-select-options">
<div><button class="ol-button-white" data-on-click="deleteSelectedUnits" title="Immediately remove the unit from the simulation"><img src="/resources/theme/images/icons/trash-can-regular.svg" inject-svg>Delete</button></div>
<div class="hr"><hr></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "normal" }' title="Normal explosion"><img src="/resources/theme/images/icons/explosion-solid.svg" inject-svg>Blow up</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "secondary" }' title="Small explosion with debries"><img src="/resources/theme/images/icons/burst-solid.svg" inject-svg>Cook off</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "phosphorous" }' title="White phosphorous explosion"><img src="/resources/theme/images/icons/smog-solid.svg" inject-svg>Phosp.</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "napalm" }' title="Napalm"><img src="/resources/theme/images/icons/fire-solid.svg" inject-svg>Napalm</button></div>
</div>
</div>
</div>
</div>
<div id="rapid-controls" class="ol-panel">
<button id="climb" title="Increase units altitude" class="ol-button" data-on-click="selectedUnitsChangeAltitude" data-on-click-params='{ "type": "climb" }'><img src="/resources/theme/images/icons/climb.svg" inject-svg></button>
<button id="descend" title="Descrease units altitude" class="ol-button" data-on-click="selectedUnitsChangeAltitude" data-on-click-params='{ "type": "descend" }'><img src="/resources/theme/images/icons/descent.svg" inject-svg></button>
<button id="fast" title="Increase units speed" class="ol-button" data-on-click="selectedUnitsChangeSpeed" data-on-click-params='{ "type": "fast" }'><img src="/resources/theme/images/icons/speed-increase.svg" inject-svg></button>
<button id="slow" title="Decrease units speed" class="ol-button" data-on-click="selectedUnitsChangeSpeed" data-on-click-params='{ "type": "slow" }'><img src="/resources/theme/images/icons/speed-decrease.svg" inject-svg></button>
<button id="stop" title="Stop unit and go back to idle state" class="ol-button" data-on-click="selectedUnitsChangeSpeed" data-on-click-params='{ "type": "stop" }'><img src="/resources/theme/images/icons/hand-solid.svg" inject-svg></button>
</div>
</div>

View File

@@ -0,0 +1,29 @@
<div id="unit-info-panel" class="ol-panel" oncontextmenu="return false;">
<img src="resources/theme/images/icons/circle-info-solid.svg" inject-svg>
<div id="general" class="panel-section">
<h3 id="unit-name"></h3>
<div class="ol-group">
<div id="unit-label"></div>
<div id="unit-control"></div>
</div>
<div id="unit-group" class="pill" data-group-name=""></div>
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task=""></div>
</div>
<div id="loadout-container" class="panel-section">
<div id="loadout">
<img id="loadout-silhouette"/>
<div id="loadout-items" class="ol-scrollable">
</div>
</div>
<div id="fuel-percentage" data-percentage=""></div>
<div id="fuel-display">
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:30%;"></div>
</div>
</div>
</div>

View File

@@ -0,0 +1,11 @@
<div id="unit-list-panel" class="ol-panel hide">
<h3>Unit List</h3>
<div class="unit-list-unit headers">
<div data-sort-field="unitName">Name</div>
<div data-sort-field="name">Vehicle</div>
<div data-sort-field="category">Category</div>
<div data-sort-field="coalition">Coalition</div>
<div>Human/AI</div>
</div>
<div id="unit-list-panel-content" class="ol-scrollable"></div>
</div>