From 9eb295d9a1c8465634518074a52fd2d46d6016fc Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Thu, 18 May 2023 17:48:03 +0200 Subject: [PATCH] Added auto selection of units in group --- client/demo.js | 2 +- .../public/stylesheets/unitcontrolpanel.css | 37 +++----- client/src/panels/unitcontrolpanel.ts | 6 +- client/src/units/unit.ts | 91 ++++++++++--------- client/views/dialogs.ejs | 2 +- client/views/unitcontrolpanel.ejs | 2 +- 6 files changed, 70 insertions(+), 70 deletions(-) diff --git a/client/demo.js b/client/demo.js index 2c113e9f..2f178cf6 100644 --- a/client/demo.js +++ b/client/demo.js @@ -4,7 +4,7 @@ const DEMO_UNIT_DATA = { baseData: { AI: false, name: "KC-135", - unitName: "Olympus 1-1", + unitName: "Olympus 1-1 aka Mr. Very long name", groupName: "Group 1", alive: true, category: "Aircraft", diff --git a/client/public/stylesheets/unitcontrolpanel.css b/client/public/stylesheets/unitcontrolpanel.css index a0f7b507..c3942ee8 100644 --- a/client/public/stylesheets/unitcontrolpanel.css +++ b/client/public/stylesheets/unitcontrolpanel.css @@ -21,7 +21,8 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { border-radius: var(--border-radius-md); display: flex; flex-direction: column; - max-height: 136px; + max-height: 215px; + overflow-x: hidden; overflow-y: auto; row-gap: 4px; } @@ -34,19 +35,29 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { height: 32px; padding: 8px 0; position: relative; - width: 100%; + width: calc(100% - 5px); + margin-right: 5px; } #unit-control-panel #selected-units-container button::before { background-color: var( --primary-neutral ); border-radius: 999px; content: attr(data-short-label); - margin: 0 5px; + margin: 2px 4px; padding: 4px 6px; white-space: nowrap; - width: 30px; + width: fit-content; + min-width: 20px; + max-width: 30px; text-overflow: ellipsis; overflow: hidden; + font-size: 10px; +} + +#unit-control-panel #selected-units-container button:hover::before { + max-width: 100%; + text-overflow: unset; + background-color: black; } #unit-control-panel #selected-units-container button[data-coalition="blue"]::before { @@ -71,24 +82,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { width: fit-content; } - -#unit-control-panel #selected-units-container button:hover::after { - overflow: visible; - text-overflow: initial; -} - -#unit-control-panel #selected-units-container button:hover::after { - background-color: var(--background-grey); -} - -#unit-control-panel #selected-units-container button[data-coalition="blue"]:hover::after { - background-color: var(--primary-blue); -} - -#unit-control-panel #selected-units-container button[data-coalition="red"]:hover::after { - background-color: var(--primary-red); -} - #unit-control-panel h4 { margin-bottom: 8px; } diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index a205669e..db1df72d 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -8,12 +8,12 @@ import { UnitDatabase } from "../units/unitdatabase"; import { Panel } from "./panel"; const ROEs: string[] = ["Hold", "Return", "Designated", "Free"]; -const reactionsToThreat: string[] = ["None", "Passive", "Evade"]; +const reactionsToThreat: string[] = ["None", "Manoeuvre", "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 reactionsToThreatDescriptions: string[] = ["None (No reaction)", "Manoeuvre (no countermeasures)", "Passive (Countermeasures only, no manoeuvre)", "Evade (Countermeasures and manoeuvers)"]; +const emissionsCountermeasuresDescriptions: string[] = ["Silent (Radar OFF, no ECM)", "Attack (Radar only for targeting, ECM only if locked)", "Defend (Radar for searching, ECM if locked)", "Always on (Radar and ECM always on)"]; 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 }; diff --git a/client/src/units/unit.ts b/client/src/units/unit.ts index 5140b021..e5bfc296 100644 --- a/client/src/units/unit.ts +++ b/client/src/units/unit.ts @@ -137,8 +137,56 @@ export class Unit extends Marker { return ""; } - /********************** Unit data *************************/ + setSelected(selected: boolean) { + /* Only alive units can be selected. Some units are not selectable (weapons) */ + if ((this.getBaseData().alive || !selected) && this.getSelectable() && this.getSelected() != selected) { + this.#selected = selected; + this.getElement()?.querySelector(`[data-object|="unit"]`)?.toggleAttribute("data-is-selected"); + if (selected){ + document.dispatchEvent(new CustomEvent("unitSelection", { detail: this })); + this.getGroupMembers().forEach((unit: Unit) => unit.setSelected(true)); + } + else { + document.dispatchEvent(new CustomEvent("unitDeselection", { detail: this })); + this.getGroupMembers().forEach((unit: Unit) => unit.setSelected(false)); + } + } + } + getSelected() { + return this.#selected; + } + + setSelectable(selectable: boolean) { + this.#selectable = selectable; + } + + getSelectable() { + return this.#selectable; + } + + setHotgroup(hotgroup: number | null) { + this.#hotgroup = hotgroup; + } + + getHotgroup() { + return this.#hotgroup; + } + + setHighlighted(highlighted: boolean) { + this.getElement()?.querySelector(`[data-object|="unit"]`)?.toggleAttribute("data-is-highlighted", highlighted); + this.#highlighted = highlighted; + } + + getHighlighted() { + return this.#highlighted; + } + + getGroupMembers() { + return Object.values(getUnitsManager().getUnits()).filter((unit: Unit) => {return unit != this && unit.getBaseData().groupName === this.getBaseData().groupName;}); + } + + /********************** Unit data *************************/ setData(data: UpdateData) { /* Check if data has changed comparing new values to old values */ const positionChanged = (data.flightData != undefined && data.flightData.latitude != undefined && data.flightData.longitude != undefined && (this.getFlightData().latitude != data.flightData.latitude || this.getFlightData().longitude != data.flightData.longitude)); @@ -237,47 +285,6 @@ export class Unit extends Marker { return this.getData().optionsData; } - setSelected(selected: boolean) { - /* Only alive units can be selected. Some units are not selectable (weapons) */ - if ((this.getBaseData().alive || !selected) && this.getSelectable() && this.getSelected() != selected) { - this.#selected = selected; - this.getElement()?.querySelector(`[data-object|="unit"]`)?.toggleAttribute("data-is-selected"); - if (selected) - document.dispatchEvent(new CustomEvent("unitSelection", { detail: this })); - else - document.dispatchEvent(new CustomEvent("unitDeselection", { detail: this })); - } - } - - getSelected() { - return this.#selected; - } - - setSelectable(selectable: boolean) { - this.#selectable = selectable; - } - - getSelectable() { - return this.#selectable; - } - - setHotgroup(hotgroup: number | null) { - this.#hotgroup = hotgroup; - } - - getHotgroup() { - return this.#hotgroup; - } - - setHighlighted(highlighted: boolean) { - this.getElement()?.querySelector(`[data-object|="unit"]`)?.toggleAttribute("data-is-highlighted", highlighted); - this.#highlighted = highlighted; - } - - getHighlighted() { - return this.#highlighted; - } - /********************** Visibility *************************/ updateVisibility() { this.setHidden(document.body.getAttribute(`data-hide-${this.getMissionData().coalition}`) != null || diff --git a/client/views/dialogs.ejs b/client/views/dialogs.ejs index 2421f78a..41ba1d34 100644 --- a/client/views/dialogs.ejs +++ b/client/views/dialogs.ejs @@ -67,7 +67,7 @@
-
-

Emissions & countermeasures

+

Radar & ECM