weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

RuLes Of EngAGEmeNT iCoNs & ThrEAt ReAcTIoNs.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-10 15:47:03 +00:00
parent ceec65fb37
commit 2ef76a619b
3 changed files with 131 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/public/stylesheets/layout.css
View File

@ -150,20 +150,11 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
}
.ol-button-box button {
background-repeat: no-repeat;;
border:1px solid var( --accent-light-blue );
color: var( --accent-light-blue );
}
.ol-button-box button:first-of-type, .ol-button-box button.selected {
border-color: white;
background-color: white;
color: var( --background-steel );
}
.ol-button-box button:after {
content: "[]";
}
#connection-status-panel {
bottom: 20px;

110
client/public/stylesheets/olympus.css
View File

@ -54,7 +54,7 @@ button {
color: whitesmoke;
cursor: pointer;
font-weight: var(--font-weight-bolder);
padding: 8px;
padding: 6px;
}
button[disabled="disabled"] {
@ -668,3 +668,111 @@ body[data-hide-naval] #unit-visibility-control-naval {
.toggle-input:checked ~ .toggle-fill::after {
transform: translateX(var(--height));
}
#roe-buttons-container button {
background-color:transparent;
border:1px solid var( --accent-light-blue );
}
#roe-buttons-container button.selected, #reaction-to-threat-buttons-container button.selected {
background-color: white;
border-color: white;
}
#roe-buttons-container button::before, #reaction-to-threat-buttons-container button::before {
background-repeat: no-repeat;
background-size:16px 16px;
content: "";
display:block;
height:16px;
width:16px;
}
#roe-buttons-container button[title="Free"]::before {
background-image: url( "/themes/olympus/images/icons_roe_free_light.svg");
}
#roe-buttons-container button[title="Designated free"]::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
}
#roe-buttons-container button[title="Designated"]::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
}
#roe-buttons-container button[title="Return"]::before {
background-image: url( "/themes/olympus/images/icons_roe_target_light.svg");
}
#roe-buttons-container button[title="Hold"]::before {
background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg");
}
#roe-buttons-container button[title="Free"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_free_dark.svg");
}
#roe-buttons-container button[title="Designated free"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
}
#roe-buttons-container button[title="Designated"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
}
#roe-buttons-container button[title="Return"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_target_dark.svg");
}
#roe-buttons-container button[title="Hold"].selected::before {
background-image: url( "/themes/olympus/images/icons_actions_nothing_dark.svg");
}
#reaction-to-threat-buttons-container button[title="None"]::before {
background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg");
}
#reaction-to-threat-buttons-container button[title="Passive"]::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
}
#reaction-to-threat-buttons-container button[title="Evade"]::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
}
#reaction-to-threat-buttons-container button[title="Escape"]::before {
background-image: url( "/themes/olympus/images/icons_threat_retreat_light.svg");
}
#reaction-to-threat-buttons-container button[title="Abort"]::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
}
#reaction-to-threat-buttons-container button[title="None"]::before {
background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg");
}
#reaction-to-threat-buttons-container button[title="None"].selected::before {
background-image: url( "/themes/olympus/images/icons_actions_nothing_dark.svg");
}
#reaction-to-threat-buttons-container button[title="Passive"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
}
#reaction-to-threat-buttons-container button[title="Evade"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
}
#reaction-to-threat-buttons-container button[title="Escape"].selected::before {
background-image: url( "/themes/olympus/images/icons_threat_retreat_dark.svg");
}
#reaction-to-threat-buttons-container button[title="Abort"].selected::before {
background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
}

27
client/src/panels/unitcontrolpanel.ts
View File

@ -23,19 +23,34 @@ export class UnitControlPanel extends Panel {
this.#airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384));
/* Option buttons */
this.#optionButtons["ROE"] = ROEs.map((option: string) => {
this.#optionButtons["ROE"] = ROEs.map((option: string, index:number) => {
var button = document.createElement("button");
button.title = option;
button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
if ( index === 0 ) {
button.classList.add( "selected" );
}
button.addEventListener("click", () => {
this.getElement().querySelector("#roe-buttons-container button.selected")?.classList.remove( "selected" );
button.classList.add( "selected" );
getUnitsManager().selectedUnitsSetROE(button.title);
});
return button;
})
});
this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string) => {
this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index:number) => {
var button = document.createElement("button");
button.title = option;
button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
if ( index === 0 ) {
button.classList.add( "selected" );
}
button.addEventListener("click", () => {
this.getElement().querySelector("#reaction-to-threat-buttons-container button.selected")?.classList.remove( "selected" );
button.classList.add( "selected" );
getUnitsManager().selectedUnitsSetROE(button.title);
});
return button;
})
});
this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]);
this.getElement().querySelector("#reaction-to-threat-buttons-container")?.append(...this.#optionButtons["reactionToThreat"]);