From 85325c17ac5da877de64d5d07cbe9edff11c034f Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Sun, 19 Nov 2023 11:17:00 +0000 Subject: [PATCH] More styling, added pulse to scenic actions from (?) --- .../public/stylesheets/panels/unitcontrol.css | 83 +++++++++++++----- client/public/stylesheets/style/style.css | 85 +++++-------------- client/src/panels/unitcontrolpanel.ts | 15 ++++ client/src/unit/contextaction.ts | 15 +++- client/src/unit/contextactionset.ts | 8 +- client/src/unit/unit.ts | 10 ++- client/views/panels/unitcontrol.ejs | 2 +- 7 files changed, 128 insertions(+), 90 deletions(-) diff --git a/client/public/stylesheets/panels/unitcontrol.css b/client/public/stylesheets/panels/unitcontrol.css index 940eb0f0..c7ada90f 100644 --- a/client/public/stylesheets/panels/unitcontrol.css +++ b/client/public/stylesheets/panels/unitcontrol.css @@ -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; diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css index c73d3b8b..53d8768c 100644 --- a/client/public/stylesheets/style/style.css +++ b/client/public/stylesheets/style/style.css @@ -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; diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index 6fbb87ec..6100b84a 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -107,6 +107,19 @@ export class UnitControlPanel extends Panel { getApp().getUnitsManager().setOperateAs(value); }); + /* Mouseover of (?) highlights activation buttons */ + const operateAsQuestionMark = 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 = 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 = () => { diff --git a/client/src/unit/contextaction.ts b/client/src/unit/contextaction.ts index 32da1dc1..5d935143 100644 --- a/client/src/unit/contextaction.ts +++ b/client/src/unit/contextaction.ts @@ -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; } diff --git a/client/src/unit/contextactionset.ts b/client/src/unit/contextactionset.ts index afea52ed..60e1e88d 100644 --- a/client/src/unit/contextactionset.ts +++ b/client/src/unit/contextactionset.ts @@ -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); } diff --git a/client/src/unit/unit.ts b/client/src/unit/unit.ts index 28b3f2d3..274b08e2 100644 --- a/client/src/unit/unit.ts +++ b/client/src/unit/unit.ts @@ -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 + }); } } } diff --git a/client/views/panels/unitcontrol.ejs b/client/views/panels/unitcontrol.ejs index 2219e442..946037de 100644 --- a/client/views/panels/unitcontrol.ejs +++ b/client/views/panels/unitcontrol.ejs @@ -89,7 +89,7 @@
-
+

Operate as