mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added frontend controls for emissions and countermeasures
This commit is contained in:
Pax1601
parent
98a6053a85
commit
71ef292763
@ -109,7 +109,7 @@ dl.ol-data-grid dd {
|
||||
}
|
||||
|
||||
.ol-panel.ol-dialog {
|
||||
padding: 20px;
|
||||
padding: 24px 30px;
|
||||
}
|
||||
|
||||
.ol-dialog-close {
|
||||
|
||||
@ -645,13 +645,15 @@ body[data-hide-navyunit] #unit-visibility-control-navyunit {
|
||||
}
|
||||
|
||||
#roe-buttons-container button.selected,
|
||||
#reaction-to-threat-buttons-container button.selected {
|
||||
#reaction-to-threat-buttons-container button.selected,
|
||||
#emissions-countermeasures-buttons-container button.selected {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
#roe-buttons-container button::before,
|
||||
#reaction-to-threat-buttons-container button::before {
|
||||
#reaction-to-threat-buttons-container button::before,
|
||||
#emissions-countermeasures-buttons-container button::before {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
@ -660,68 +662,104 @@ body[data-hide-navyunit] #unit-visibility-control-navyunit {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
#roe-buttons-container button[title="Hold"]::before {
|
||||
#roe-buttons-container button[value="Hold"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_stop_light.svg");
|
||||
}
|
||||
|
||||
#roe-buttons-container button[title="Hold"].selected::before {
|
||||
#roe-buttons-container button[value="Hold"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_stop_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#roe-buttons-container button[title="Return"]::before {
|
||||
#roe-buttons-container button[value="Return"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_defend_light.svg");
|
||||
}
|
||||
|
||||
#roe-buttons-container button[title="Return"].selected::before {
|
||||
#roe-buttons-container button[value="Return"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_defend_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#roe-buttons-container button[title="Designated"]::before {
|
||||
#roe-buttons-container button[value="Designated"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_target_light.svg");
|
||||
}
|
||||
|
||||
#roe-buttons-container button[title="Designated"].selected::before {
|
||||
#roe-buttons-container button[value="Designated"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_target_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#roe-buttons-container button[title="Free"]::before {
|
||||
#roe-buttons-container button[value="Free"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_free_light.svg");
|
||||
}
|
||||
|
||||
#roe-buttons-container button[title="Free"].selected::before {
|
||||
#roe-buttons-container button[value="Free"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_free_dark.svg");
|
||||
}
|
||||
|
||||
/****************************************************************************************/
|
||||
#reaction-to-threat-buttons-container button[title="None"]::before {
|
||||
#reaction-to-threat-buttons-container button[value="None"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_threat_nothing_light.svg");
|
||||
}
|
||||
|
||||
#reaction-to-threat-buttons-container button[title="None"].selected::before {
|
||||
#reaction-to-threat-buttons-container button[value="None"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_threat_nothing_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#reaction-to-threat-buttons-container button[title="Passive"]::before {
|
||||
#reaction-to-threat-buttons-container button[value="Passive"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_threat_cms_light.svg");
|
||||
}
|
||||
|
||||
#reaction-to-threat-buttons-container button[title="Passive"].selected::before {
|
||||
#reaction-to-threat-buttons-container button[value="Passive"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_threat_cms_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#reaction-to-threat-buttons-container button[title="Evade"]::before {
|
||||
#reaction-to-threat-buttons-container button[value="Evade"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_threat_defend_light.svg");
|
||||
}
|
||||
|
||||
#reaction-to-threat-buttons-container button[title="Evade"].selected::before {
|
||||
#reaction-to-threat-buttons-container button[value="Evade"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_threat_defend_dark.svg");
|
||||
}
|
||||
|
||||
/****************************************************************************************/
|
||||
#emissions-countermeasures-buttons-container button[value="Silent"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_stop_light.svg");
|
||||
}
|
||||
|
||||
#emissions-countermeasures-buttons-container button[value="Silent"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_stop_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#emissions-countermeasures-buttons-container button[value="Defend"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_defend_light.svg");
|
||||
}
|
||||
|
||||
#emissions-countermeasures-buttons-container button[value="Defend"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_defend_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#emissions-countermeasures-buttons-container button[value="Attack"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_target_light.svg");
|
||||
}
|
||||
|
||||
#emissions-countermeasures-buttons-container button[value="Attack"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_target_dark.svg");
|
||||
}
|
||||
|
||||
/**/
|
||||
#emissions-countermeasures-buttons-container button[value="Free"]::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_free_light.svg");
|
||||
}
|
||||
|
||||
#emissions-countermeasures-buttons-container button[value="Free"].selected::before {
|
||||
background-image: url("/themes/olympus/images/icons_roe_free_dark.svg");
|
||||
}
|
||||
|
||||
/****************************************************************************************/
|
||||
#splash-screen {
|
||||
background-image: url("/images/splash/splash_pic_ship.png");
|
||||
|
||||
@ -8,7 +8,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 250px;
|
||||
width: 260px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@ -94,7 +94,8 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
}
|
||||
|
||||
#unit-control-panel #threat,
|
||||
#unit-control-panel #roe {
|
||||
#unit-control-panel #roe,
|
||||
#unit-control-panel #emissions-countermeasures {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@ -113,4 +114,24 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
|
||||
#advanced-settings-dialog>.ol-dialog-content>.ol-group {
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
#advanced-settings-dialog h4 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog hr {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#advanced-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#advanced-options-grid>div {
|
||||
width: 49%;
|
||||
}
|
||||
@ -89,7 +89,7 @@ function readConfig(config: any) {
|
||||
setAddress(address == "*" ? window.location.hostname : address, <number>port);
|
||||
}
|
||||
else {
|
||||
throw new Error('Could not read configuration file!');
|
||||
throw new Error('Could not read configuration file');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { getUnitsManager } from "..";
|
||||
import { Dropdown } from "../controls/dropdown";
|
||||
import { Slider } from "../controls/slider";
|
||||
import { dataPointMap } from "../other/utils";
|
||||
import { aircraftDatabase } from "../units/aircraftdatabase";
|
||||
import { groundUnitsDatabase } from "../units/groundunitsdatabase";
|
||||
import { Aircraft, GroundUnit, Unit } from "../units/unit";
|
||||
@ -10,6 +9,11 @@ import { Panel } from "./panel";
|
||||
|
||||
const ROEs: string[] = ["Hold", "Return", "Designated", "Free"];
|
||||
const reactionsToThreat: string[] = ["None", "Passive", "Evade"];
|
||||
const emissionsCountermeasures: string[] = ["Silent", "Attack", "Defend", "Free"];
|
||||
|
||||
const ROEDescriptions: string[] = ["Hold (Never fire)", "Return (Only fire if fired upon)", "Designated (Attack the designated target only)", "Free (Attack anyone)"];
|
||||
const reactionsToThreatDescriptions: string[] = ["None (No reaction)", "Passive (Countermeasures only, no manoeuvre)", "Evade (Countermeasures and manoeuvers)"];
|
||||
const emissionsCountermeasuresDescriptions: string[] = ["Silent (Radar off, no countermeasures)", "Attack (Radar only for targeting, countermeasures only if attacked/locked)", "Defend (Radar for searching, jammer if locked, countermeasures inside WEZ)", "Always on (Radar and jammer always on, countermeasures when hostile detected)"];
|
||||
|
||||
const minSpeedValues: { [key: string]: number } = { Aircraft: 100, Helicopter: 0, NavyUnit: 0, GroundUnit: 0 };
|
||||
const maxSpeedValues: { [key: string]: number } = { Aircraft: 800, Helicopter: 300, NavyUnit: 60, GroundUnit: 60 };
|
||||
@ -52,23 +56,20 @@ export class UnitControlPanel extends Panel {
|
||||
|
||||
/* Option buttons */
|
||||
this.#optionButtons["ROE"] = ROEs.map((option: string, index: number) => {
|
||||
var button = document.createElement("button");
|
||||
button.title = option;
|
||||
button.value = option;
|
||||
button.addEventListener("click", () => { getUnitsManager().selectedUnitsSetROE(button.title); });
|
||||
return button;
|
||||
return this.#createOptionButton(option, ROEDescriptions[index], () => { getUnitsManager().selectedUnitsSetROE(option); });
|
||||
});
|
||||
|
||||
this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index: number) => {
|
||||
var button = document.createElement("button");
|
||||
button.title = option;
|
||||
button.value = option;
|
||||
button.addEventListener("click", () => { getUnitsManager().selectedUnitsSetReactionToThreat(button.title); });
|
||||
return button;
|
||||
return this.#createOptionButton(option, reactionsToThreatDescriptions[index],() => { getUnitsManager().selectedUnitsSetReactionToThreat(option); });
|
||||
});
|
||||
|
||||
this.#optionButtons["emissionsCountermeasures"] = emissionsCountermeasures.map((option: string, index: number) => {
|
||||
return this.#createOptionButton(option, emissionsCountermeasuresDescriptions[index],() => { getUnitsManager().selectedUnitsSetEmissionsCountermeasures(option); });
|
||||
});
|
||||
|
||||
this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]);
|
||||
this.getElement().querySelector("#reaction-to-threat-buttons-container")?.append(...this.#optionButtons["reactionToThreat"]);
|
||||
this.getElement().querySelector("#emissions-countermeasures-buttons-container")?.append(...this.#optionButtons["emissionsCountermeasures"]);
|
||||
|
||||
this.#advancedSettingsDialog = <HTMLElement> document.querySelector("#advanced-settings-dialog");
|
||||
|
||||
@ -122,7 +123,7 @@ export class UnitControlPanel extends Panel {
|
||||
}));
|
||||
} else {
|
||||
var el = document.createElement("div");
|
||||
el.innerText = "Too many units selected"
|
||||
el.innerText = "Too many units selected";
|
||||
this.getElement().querySelector("#selected-units-container")?.replaceChildren(el);
|
||||
}
|
||||
}
|
||||
@ -298,4 +299,12 @@ export class UnitControlPanel extends Panel {
|
||||
|
||||
this.#advancedSettingsDialog.classList.add("hide");
|
||||
}
|
||||
|
||||
#createOptionButton(option: string, title: string, callback: EventListenerOrEventListenerObject) {
|
||||
var button = document.createElement("button");
|
||||
button.value = option;
|
||||
button.title = title;
|
||||
button.addEventListener("click", callback);
|
||||
return button;
|
||||
}
|
||||
}
|
||||
@ -209,6 +209,12 @@ export function setReactionToThreat(ID: number, reactionToThreat: string) {
|
||||
POST(data, () => { });
|
||||
}
|
||||
|
||||
export function setEmissionsCountermeasures(ID: number, emissionCountermeasure: string) {
|
||||
var command = {"ID": ID, "emissionCountermeasure": emissionCountermeasure}
|
||||
var data = {"setEmissionsCountermeasures": command}
|
||||
POST(data, () => { });
|
||||
}
|
||||
|
||||
export function refuel(ID: number) {
|
||||
var command = { "ID": ID };
|
||||
var data = { "refuel": command }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Marker, LatLng, Polyline, Icon, DivIcon, CircleMarker, Map } from 'leaflet';
|
||||
import { getMap, getUnitsManager } from '..';
|
||||
import { rad2deg } from '../other/utils';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, getUnits, landAt, setAltitude, setReactionToThreat, setROE, setSpeed, refuel, setAdvacedOptions, followUnit } from '../server/server';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, getUnits, landAt, setAltitude, setReactionToThreat, setROE, setSpeed, refuel, setAdvacedOptions, followUnit, setEmissionsCountermeasures } from '../server/server';
|
||||
import { aircraftDatabase } from './aircraftdatabase';
|
||||
import { groundUnitsDatabase } from './groundunitsdatabase';
|
||||
import { field } from 'geomag'
|
||||
@ -365,6 +365,11 @@ export class Unit extends Marker {
|
||||
setReactionToThreat(this.ID, reactionToThreat);
|
||||
}
|
||||
|
||||
setEmissionsCountermeasures(emissionCountermeasure: string) {
|
||||
if (!this.getMissionData().flags.Human)
|
||||
setEmissionsCountermeasures(this.ID, emissionCountermeasure);
|
||||
}
|
||||
|
||||
setLeader(isLeader: boolean, wingmenIDs: number[] = []) {
|
||||
if (!this.getMissionData().flags.Human)
|
||||
setLeader(this.ID, isLeader, wingmenIDs);
|
||||
|
||||
@ -242,6 +242,15 @@ export class UnitsManager {
|
||||
this.#showActionMessage(selectedUnits, `reaction to threat set to ${reactionToThreat}`);
|
||||
}
|
||||
|
||||
selectedUnitsSetEmissionsCountermeasures(emissionCountermeasure: string) {
|
||||
var selectedUnits = this.getSelectedUnits({excludeHumans: true});
|
||||
for (let idx in selectedUnits) {
|
||||
selectedUnits[idx].setEmissionsCountermeasures(emissionCountermeasure);
|
||||
}
|
||||
this.#showActionMessage(selectedUnits, `reaction to threat set to ${emissionCountermeasure}`);
|
||||
}
|
||||
|
||||
|
||||
selectedUnitsAttackUnit(ID: number) {
|
||||
var selectedUnits = this.getSelectedUnits({excludeHumans: true});
|
||||
for (let idx in selectedUnits) {
|
||||
|
||||
@ -30,43 +30,46 @@
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
<!--
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Use ECM when available
|
||||
</label>
|
||||
<div class="ol-group">
|
||||
<h4>General settings</h4>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit jettison
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit afterburner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/A
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/G
|
||||
</label>
|
||||
</div>
|
||||
-->
|
||||
<div id="advanced-options-grid">
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit jettison
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit afterburner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/A
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/G
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<h4>Tasking</h4>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="tanker-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
@ -81,6 +84,10 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<h4>Radio options</h4>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="ol-group">
|
||||
<label>A/A TACAN: </label>
|
||||
|
||||
|
||||
@ -52,6 +52,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="emissions-countermeasures">
|
||||
<h4>Emissions & countermeasures</h4>
|
||||
<div id="emissions-countermeasures-buttons-container" class="ol-group ol-button-box">
|
||||
<!-- This is where the emissions/countermeasures buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id="advanced-settings-div">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user