mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
More styling, added pulse to scenic actions from (?)
This commit is contained in:
PeekabooSteam
parent
178706f8de
commit
85325c17ac
@ -2,6 +2,69 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
#roe-buttons-container button,
|
||||
#reaction-to-threat-buttons-container button,
|
||||
#emissions-countermeasures-buttons-container button,
|
||||
#shots-scatter-buttons-container button
|
||||
#shots-intensity-buttons-container button {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--accent-light-blue);
|
||||
display: flex;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#reaction-to-threat-buttons-container button:not(:first-child) svg {
|
||||
width: 150%;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
#unit-control-panel .ol-option-button button.selected {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
#unit-control-panel .ol-option-button button.selected svg * {
|
||||
fill: var(--background-steel);
|
||||
stroke: var(--background-steel);
|
||||
}
|
||||
|
||||
#rapid-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#rapid-controls button {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#rapid-controls button.pulse {
|
||||
animation: pulse 1.5s linear infinite;
|
||||
}
|
||||
|
||||
#rapid-controls svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
fill: white;
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
#rapid-controls button:before {
|
||||
display: inline-block;
|
||||
filter: invert(100%);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#unit-control-panel {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -229,26 +292,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
#unit-control-panel .switch-control .ol-switch-fill::after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#operate-as-switch[data-value="true"] .ol-switch-fill {
|
||||
background-color: var(--accent-light-blue);
|
||||
}
|
||||
|
||||
#operate-as-switch[data-value="false"] .ol-switch-fill {
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
#operate-as-switch[data-value="true"]>.ol-switch-fill::before {
|
||||
content: "BLUE" !important;
|
||||
}
|
||||
|
||||
#operate-as-switch[data-value="false"]>.ol-switch-fill::before {
|
||||
content: "RED" !important;
|
||||
}
|
||||
|
||||
#advanced-settings-div {
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
|
||||
@ -718,62 +718,6 @@ nav.ol-panel> :last-child {
|
||||
}
|
||||
|
||||
|
||||
|
||||
#roe-buttons-container button,
|
||||
#reaction-to-threat-buttons-container button,
|
||||
#emissions-countermeasures-buttons-container button,
|
||||
#shots-scatter-buttons-container button
|
||||
#shots-intensity-buttons-container button {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--accent-light-blue);
|
||||
display: flex;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#reaction-to-threat-buttons-container button:not(:first-child) svg {
|
||||
width: 150%;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
#unit-control-panel .ol-option-button button.selected {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
#unit-control-panel .ol-option-button button.selected svg * {
|
||||
fill: var(--background-steel);
|
||||
stroke: var(--background-steel);
|
||||
}
|
||||
|
||||
#rapid-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#rapid-controls button {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#rapid-controls svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
fill: white;
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
#rapid-controls button:before {
|
||||
display: inline-block;
|
||||
filter: invert(100%);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/****************************************************************************************/
|
||||
#splash-screen {
|
||||
border-radius: var(--border-radius-md);
|
||||
@ -1375,7 +1319,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.ol-switch-input {
|
||||
@ -1411,7 +1355,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
height: 100%;
|
||||
padding: 0px 7px;
|
||||
padding: 0px 6px;
|
||||
position: absolute;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
@ -1428,10 +1372,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
transform: translateX(calc((var(--width) - var(--height)) * 0.5));
|
||||
}
|
||||
|
||||
.switch-control.yes-no .ol-switch {
|
||||
width:45px;
|
||||
}
|
||||
|
||||
.switch-control.yes-no .ol-switch[data-value="true"] .ol-switch-fill {
|
||||
background-color: var(--accent-light-blue);
|
||||
}
|
||||
@ -1440,6 +1380,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
background-color: var(--ol-switch-off);
|
||||
}
|
||||
|
||||
.switch-control.coalition .ol-switch>.ol-switch-fill::before,
|
||||
.switch-control.yes-no .ol-switch>.ol-switch-fill::before {
|
||||
translate:-100% 0;
|
||||
transform: none;
|
||||
@ -1469,6 +1410,26 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
.ol-coalition-switch[data-value="undefined"]>.ol-switch-fill {
|
||||
background-color: var(--primary-neutral);
|
||||
}
|
||||
/*
|
||||
#unit-control-panel .switch-control .ol-switch-fill::after {
|
||||
background-color: white;
|
||||
}
|
||||
*/
|
||||
.switch-control.coalition [data-value="true"] .ol-switch-fill {
|
||||
background-color: var(--accent-light-blue);
|
||||
}
|
||||
|
||||
.switch-control.coalition [data-value="false"] .ol-switch-fill {
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
.switch-control.coalition [data-value="true"]>.ol-switch-fill::before {
|
||||
content: "BLUE" !important;
|
||||
}
|
||||
|
||||
.switch-control.coalition [data-value="false"]>.ol-switch-fill::before {
|
||||
content: "RED" !important;
|
||||
}
|
||||
|
||||
.ol-context-menu>ul {
|
||||
max-height: 200px;
|
||||
|
||||
@ -107,6 +107,19 @@ export class UnitControlPanel extends Panel {
|
||||
getApp().getUnitsManager().setOperateAs(value);
|
||||
});
|
||||
|
||||
/* Mouseover of (?) highlights activation buttons */
|
||||
const operateAsQuestionMark = <HTMLElement>this.getElement().querySelector("#operate-as h4 img");
|
||||
operateAsQuestionMark.addEventListener("mouseover", () => {
|
||||
document.querySelectorAll(`#rapid-controls button.scenic-action`).forEach((btn:Element) => {
|
||||
btn.classList.add(`pulse`);
|
||||
});
|
||||
});
|
||||
operateAsQuestionMark.addEventListener("mouseout", () => {
|
||||
document.querySelectorAll(`#rapid-controls button.scenic-action.pulse`).forEach((btn:Element) => {
|
||||
btn.classList.remove(`pulse`);
|
||||
});
|
||||
});
|
||||
|
||||
/* Advanced settings dialog */
|
||||
this.#advancedSettingsDialog = <HTMLElement> document.querySelector("#advanced-settings-dialog");
|
||||
|
||||
@ -324,6 +337,8 @@ export class UnitControlPanel extends Panel {
|
||||
let button = document.createElement("button");
|
||||
button.title = contextAction.getDescription();
|
||||
button.classList.add("ol-button", "unit-action-button");
|
||||
if (contextAction.getOptions().isScenic)
|
||||
button.classList.add("scenic-action");
|
||||
button.id = key;
|
||||
rapidControlsContainer.appendChild(button);
|
||||
button.onclick = () => {
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import { Unit } from "./unit";
|
||||
|
||||
export interface ContextActionOptionsInterface {
|
||||
isScenic?:boolean
|
||||
}
|
||||
|
||||
export class ContextAction {
|
||||
#id: string = "";
|
||||
#label: string = "";
|
||||
@ -7,13 +11,18 @@ export class ContextAction {
|
||||
#callback: CallableFunction | null = null;
|
||||
#units: Unit[] = [];
|
||||
#hideContextAfterExecution: boolean = true
|
||||
#options: ContextActionOptionsInterface;
|
||||
|
||||
constructor(id: string, label: string, description: string, callback: CallableFunction, hideContextAfterExecution: boolean = true) {
|
||||
constructor(id: string, label: string, description: string, callback: CallableFunction, hideContextAfterExecution: boolean = true, options:ContextActionOptionsInterface) {
|
||||
this.#id = id;
|
||||
this.#label = label;
|
||||
this.#description = description;
|
||||
this.#callback = callback;
|
||||
this.#hideContextAfterExecution = hideContextAfterExecution;
|
||||
this.#options = {
|
||||
"isScenic": false,
|
||||
...options
|
||||
}
|
||||
}
|
||||
|
||||
addUnit(unit: Unit) {
|
||||
@ -28,6 +37,10 @@ export class ContextAction {
|
||||
return this.#label;
|
||||
}
|
||||
|
||||
getOptions() {
|
||||
return this.#options;
|
||||
}
|
||||
|
||||
getDescription() {
|
||||
return this.#description;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ContextAction } from "./contextaction";
|
||||
import { ContextAction, ContextActionOptionsInterface } from "./contextaction";
|
||||
import { Unit } from "./unit";
|
||||
|
||||
export class ContextActionSet {
|
||||
@ -8,9 +8,11 @@ export class ContextActionSet {
|
||||
|
||||
}
|
||||
|
||||
addContextAction(unit: Unit, id: string, label: string, description: string, callback: CallableFunction, hideContextAfterExecution: boolean = true) {
|
||||
addContextAction(unit: Unit, id: string, label: string, description: string, callback: CallableFunction, hideContextAfterExecution: boolean = true, options?:ContextActionOptionsInterface) {
|
||||
options = options || {};
|
||||
|
||||
if (!(id in this.#contextActions)) {
|
||||
this.#contextActions[id] = new ContextAction(id, label, description, callback, hideContextAfterExecution);
|
||||
this.#contextActions[id] = new ContextAction(id, label, description, callback, hideContextAfterExecution, options);
|
||||
}
|
||||
this.#contextActions[id].addUnit(unit);
|
||||
}
|
||||
|
||||
@ -1549,13 +1549,17 @@ export class GroundUnit extends Unit {
|
||||
if (targetPosition !== null) {
|
||||
if (this.canTargetPoint()) {
|
||||
contextActionSet.addContextAction(this, "fire-at-area", "Fire at area", "Fire at a specific area on the ground", (units: Unit[]) => { getApp().getUnitsManager().fireAtArea(targetPosition, units) });
|
||||
contextActionSet.addContextAction(this, "simulate-fire-fight", "Simulate fire fight", "Simulate a fire fight by shooting randomly in a certain large area. WARNING: works correctly only on neutral units, blue or red units will aim", (units: Unit[]) => { getApp().getUnitsManager().fireAtArea(targetPosition, units) });
|
||||
contextActionSet.addContextAction(this, "simulate-fire-fight", "Simulate fire fight", "Simulate a fire fight by shooting randomly in a certain large area.\nWARNING: works correctly only on neutral units, blue or red units will aim", (units: Unit[]) => { getApp().getUnitsManager().fireAtArea(targetPosition, units) });
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.canAAA()) {
|
||||
contextActionSet.addContextAction(this, "scenic-aaa", "Scenic AAA", "Shoot AAA in the air without aiming at any target, when a enemy unit gets close enough. WARNING: works correctly only on neutral units, blue or red units will aim", (units: Unit[]) => { getApp().getUnitsManager().scenicAAA(units) });
|
||||
contextActionSet.addContextAction(this, "miss-aaa", "Misson on purpose", "Shoot AAA towards the closest enemy unit, but don't aim precisely. WARNING: works correctly only on neutral units, blue or red units will aim", (units: Unit[]) => { getApp().getUnitsManager().missOnPurpose(units) });
|
||||
contextActionSet.addContextAction(this, "scenic-aaa", "Scenic AAA", "Shoot AAA in the air without aiming at any target, when a enemy unit gets close enough.\nWARNING: works correctly only on neutral units, blue or red units will aim", (units: Unit[]) => { getApp().getUnitsManager().scenicAAA(units) }, undefined, {
|
||||
"isScenic": true
|
||||
});
|
||||
contextActionSet.addContextAction(this, "miss-aaa", "Miss on purpose", "Shoot AAA towards the closest enemy unit, but don't aim precisely.\nWARNING: works correctly only on neutral units, blue or red units will aim", (units: Unit[]) => { getApp().getUnitsManager().missOnPurpose(units) }, undefined, {
|
||||
"isScenic": true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
<div id="AWACS-on-switch" class="ol-switch"></div>
|
||||
</div>
|
||||
|
||||
<div id="operate-as" class="switch-control">
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user