diff --git a/frontend/react/public/images/buttons/context/diamond.svg b/frontend/react/public/images/buttons/context/diamond.svg deleted file mode 100644 index 280cf5a9..00000000 --- a/frontend/react/public/images/buttons/context/diamond.svg +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/buttons/context/echelon-lh.svg b/frontend/react/public/images/buttons/context/echelon-lh.svg deleted file mode 100644 index 1e858b89..00000000 --- a/frontend/react/public/images/buttons/context/echelon-lh.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/buttons/context/echelon-rh.svg b/frontend/react/public/images/buttons/context/echelon-rh.svg deleted file mode 100644 index ed2d7c99..00000000 --- a/frontend/react/public/images/buttons/context/echelon-rh.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/buttons/context/echelon.svg b/frontend/react/public/images/buttons/context/echelon.svg deleted file mode 100644 index 0aebcc15..00000000 --- a/frontend/react/public/images/buttons/context/echelon.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/buttons/context/front.svg b/frontend/react/public/images/buttons/context/front.svg deleted file mode 100644 index c96b0dbf..00000000 --- a/frontend/react/public/images/buttons/context/front.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/buttons/context/line-abreast.svg b/frontend/react/public/images/buttons/context/line-abreast.svg deleted file mode 100644 index cf26c2fd..00000000 --- a/frontend/react/public/images/buttons/context/line-abreast.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/buttons/context/trail.svg b/frontend/react/public/images/buttons/context/trail.svg deleted file mode 100644 index 2d312dd6..00000000 --- a/frontend/react/public/images/buttons/context/trail.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - \ No newline at end of file diff --git a/frontend/react/public/images/cursors/attack.svg b/frontend/react/public/images/cursors/attack.svg new file mode 100644 index 00000000..e8f5e280 --- /dev/null +++ b/frontend/react/public/images/cursors/attack.svg @@ -0,0 +1,55 @@ + + diff --git a/frontend/react/public/images/cursors/explosion.svg b/frontend/react/public/images/cursors/explosion.svg new file mode 100644 index 00000000..629c368b --- /dev/null +++ b/frontend/react/public/images/cursors/explosion.svg @@ -0,0 +1,53 @@ + +image/svg+xml diff --git a/frontend/react/public/images/cursors/fire-at-area.svg b/frontend/react/public/images/cursors/fire-at-area.svg new file mode 100644 index 00000000..e08b94f8 --- /dev/null +++ b/frontend/react/public/images/cursors/fire-at-area.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/react/public/images/cursors/follow.svg b/frontend/react/public/images/cursors/follow.svg new file mode 100644 index 00000000..dfb2fa1d --- /dev/null +++ b/frontend/react/public/images/cursors/follow.svg @@ -0,0 +1,64 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/frontend/react/public/images/cursors/grab.svg b/frontend/react/public/images/cursors/grab.svg new file mode 100644 index 00000000..9990c87c --- /dev/null +++ b/frontend/react/public/images/cursors/grab.svg @@ -0,0 +1,35 @@ + + diff --git a/frontend/react/public/images/cursors/land-at-point.svg b/frontend/react/public/images/cursors/land-at-point.svg new file mode 100644 index 00000000..2b621afe --- /dev/null +++ b/frontend/react/public/images/cursors/land-at-point.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/frontend/react/public/images/cursors/land.svg b/frontend/react/public/images/cursors/land.svg new file mode 100644 index 00000000..1bfa8d00 --- /dev/null +++ b/frontend/react/public/images/cursors/land.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/frontend/react/public/images/cursors/pointer.svg b/frontend/react/public/images/cursors/pointer.svg new file mode 100644 index 00000000..ac437072 --- /dev/null +++ b/frontend/react/public/images/cursors/pointer.svg @@ -0,0 +1,35 @@ + + diff --git a/frontend/react/public/images/cursors/simulate-fire-fight.svg b/frontend/react/public/images/cursors/simulate-fire-fight.svg new file mode 100644 index 00000000..bceabc2c --- /dev/null +++ b/frontend/react/public/images/cursors/simulate-fire-fight.svg @@ -0,0 +1,48 @@ + + diff --git a/frontend/react/public/images/cursors/smoke-blue.svg b/frontend/react/public/images/cursors/smoke-blue.svg new file mode 100644 index 00000000..be3ce67b --- /dev/null +++ b/frontend/react/public/images/cursors/smoke-blue.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/frontend/react/public/images/cursors/smoke-green.svg b/frontend/react/public/images/cursors/smoke-green.svg new file mode 100644 index 00000000..caafc284 --- /dev/null +++ b/frontend/react/public/images/cursors/smoke-green.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/frontend/react/public/images/cursors/smoke-orange.svg b/frontend/react/public/images/cursors/smoke-orange.svg new file mode 100644 index 00000000..93b64e77 --- /dev/null +++ b/frontend/react/public/images/cursors/smoke-orange.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/frontend/react/public/images/cursors/smoke-red.svg b/frontend/react/public/images/cursors/smoke-red.svg new file mode 100644 index 00000000..7f3a7bdd --- /dev/null +++ b/frontend/react/public/images/cursors/smoke-red.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/frontend/react/public/images/cursors/smoke-white.svg b/frontend/react/public/images/cursors/smoke-white.svg new file mode 100644 index 00000000..f5667d26 --- /dev/null +++ b/frontend/react/public/images/cursors/smoke-white.svg @@ -0,0 +1,48 @@ + +image/svg+xml diff --git a/frontend/react/src/map/map.ts b/frontend/react/src/map/map.ts index d3b35120..92d07e2e 100644 --- a/frontend/react/src/map/map.ts +++ b/frontend/react/src/map/map.ts @@ -578,17 +578,20 @@ export class Map extends L.Map { } setContextAction(contextAction: ContextAction | null) { - //if (contextAction) { - // this.getContainer().classList.add(`${contextAction.getId()}-cursor`); - // Object.values(getApp().getUnitsManager().getUnits()).forEach((node) => { - // if (node instanceof Unit) node.getElement()?.classList.add(`${contextAction.getId()}-cursor`); - // }); - //} else if (this.#contextAction) { - // this.getContainer().classList.remove(`${this.#contextAction.getId()}-cursor`); - // Object.values(getApp().getUnitsManager().getUnits()).forEach((node) => { - // if (node instanceof Unit) node.getElement()?.classList.remove(`${this.#contextAction?.getId()}-cursor`); - // }); - //} + if (this.#contextAction) { + this.getContainer().classList.remove(`${this.#contextAction.getId()}-cursor`); + Object.values(getApp().getUnitsManager().getUnits()).forEach((unit) => { + unit.getElement()?.querySelector(`[data-object|="unit"]`)?.classList.remove(`${this.#contextAction?.getId()}-cursor`); + }); + } + + if (contextAction) { + this.getContainer().classList.add(`${contextAction.getId()}-cursor`); + Object.values(getApp().getUnitsManager().getUnits()).forEach((unit) => { + unit.getElement()?.querySelector(`[data-object|="unit"]`)?.classList.add(`${contextAction.getId()}-cursor`); + }); + } + this.#contextAction = contextAction; ContextActionChangedEvent.dispatch(this.#contextAction); } @@ -802,8 +805,11 @@ export class Map extends L.Map { this.#currentSpawnMarker = null; this.#currentEffectMarker?.removeFrom(this); this.#currentEffectMarker = null; + this.setContextAction(null); if (state !== OlympusState.UNIT_CONTROL) getApp().getUnitsManager().deselectAllUnits(); if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState !== DrawSubState.EDIT)) this.deselectAllCoalitionAreas(); + this.getContainer().classList.remove(`explosion-cursor`); + ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`)); /* Operations to perform when entering a state */ if (state === OlympusState.IDLE) { @@ -821,10 +827,11 @@ export class Map extends L.Map { } else if (subState === SpawnSubState.SPAWN_EFFECT) { console.log(`Effect request table:`); console.log(this.#effectRequestTable); - if (this.#effectRequestTable?.type === "explosion") this.#currentEffectMarker = new ExplosionMarker(new L.LatLng(0, 0)); - else if (this.#effectRequestTable?.type === "smoke") - this.#currentEffectMarker = new SmokeMarker(new L.LatLng(0, 0), this.#effectRequestTable.smokeColor ?? "white"); - this.#currentEffectMarker?.addTo(this); + if (this.#effectRequestTable?.type === "explosion") { + this.getContainer().classList.add(`explosion-cursor`); + } else if (this.#effectRequestTable?.type === "smoke") { + this.getContainer().classList.add(`smoke-${this.#effectRequestTable?.smokeColor?.toLowerCase()}-cursor`); + } } } else if (state === OlympusState.UNIT_CONTROL) { console.log(`Context action:`); diff --git a/frontend/react/src/map/markers/stylesheets/airbase.css b/frontend/react/src/map/markers/stylesheets/airbase.css index 6b7a6f7d..2bbdfa32 100644 --- a/frontend/react/src/map/markers/stylesheets/airbase.css +++ b/frontend/react/src/map/markers/stylesheets/airbase.css @@ -1,6 +1,6 @@ .airbase-icon { align-items: center; - cursor: pointer; + cursor: url("./images/cursors/pointer.svg"), auto; display: flex; justify-content: center; position: relative; diff --git a/frontend/react/src/map/markers/stylesheets/bullseye.css b/frontend/react/src/map/markers/stylesheets/bullseye.css index f26302ac..ca807c3a 100644 --- a/frontend/react/src/map/markers/stylesheets/bullseye.css +++ b/frontend/react/src/map/markers/stylesheets/bullseye.css @@ -1,6 +1,6 @@ .bullseye-icon { align-items: center; - cursor: pointer; + cursor: url("./images/cursors/pointer.svg"), auto; display: flex; justify-content: center; position: relative; diff --git a/frontend/react/src/map/markers/stylesheets/units.css b/frontend/react/src/map/markers/stylesheets/units.css index 99217c65..ad15e2f6 100644 --- a/frontend/react/src/map/markers/stylesheets/units.css +++ b/frontend/react/src/map/markers/stylesheets/units.css @@ -1,6 +1,6 @@ /*** Unit marker elements ***/ [data-object|="unit"] { - /*cursor: pointer;*/ + cursor: url("./images/cursors/pointer.svg"), auto; display: flex; height: 100%; justify-content: center; @@ -8,6 +8,32 @@ width: 100%; } +[data-object|="unit"].attack-cursor { + cursor: url("./images/cursors/attack.svg"), auto !important; +} + +[data-object|="unit"].follow-cursor { + cursor: url("./images/cursors/follow.svg"), auto !important; +} + +[data-object|="unit"].fire-at-area-cursor, +[data-object|="unit"].bomb-cursor, +[data-object|="unit"].carpet-bomb-cursor { + cursor: url("./images/cursors/fire-at-area.svg"), auto !important; +} + +[data-object|="unit"].land-cursor { + cursor: url("./images/cursors/land.svg"), auto !important; +} + +[data-object|="unit"].land-at-point-cursor { + cursor: url("./images/cursors/land-at-point.svg"), auto !important; +} + +[data-object|="unit"].simulate-fire-fight-cursor { + cursor: url("./images/cursors/simulate-fire-fight.svg"), auto !important; +} + [data-awacs-mode] .unit-short-label { color: transparent !important; } @@ -113,35 +139,35 @@ stroke: white; } -[data-awacs-mode] [data-coalition="blue"] .unit-icon svg { +[data-awacs-mode] [data-coalition="blue"] .unit-icon svg { fill: transparent !important; stroke: var(--unit-background-blue) !important; } -[data-awacs-mode] [data-coalition="red"] .unit-icon svg { +[data-awacs-mode] [data-coalition="red"] .unit-icon svg { fill: transparent !important; stroke: var(--unit-background-red) !important; } -[data-awacs-mode] [data-coalition="neutral"] .unit-icon svg { +[data-awacs-mode] [data-coalition="neutral"] .unit-icon svg { fill: transparent !important; stroke: var(--unit-background-neutral) !important; } [data-awacs-mode] [data-is-selected] .unit-icon svg { - stroke: #FF0 !important; + stroke: #ff0 !important; } [data-awacs-mode] [data-is-selected] .unit-vvi { - background-color: #FF0 !important; + background-color: #ff0 !important; } [data-awacs-mode] [data-is-selected] .unit-summary { - color: #FF0 !important; + color: #ff0 !important; } [data-awacs-mode] [data-is-selected] .unit-summary::after { - background-color: #FF0 !important; + background-color: #ff0 !important; } /*** Cursors ***/ @@ -236,7 +262,7 @@ translate: 80px 10px; } -[data-awacs-mode] [data-object|="unit"] .unit-summary.cluster-north { +[data-awacs-mode] [data-object|="unit"] .unit-summary.cluster-north { translate: 50px -45px; } @@ -276,7 +302,7 @@ position: absolute; z-index: -1; transform-origin: 0% 0%; - top: 30px + top: 30px; } [data-awacs-mode] [data-object|="unit"] .unit-summary.cluster-north::after { @@ -367,25 +393,16 @@ background-color: var(--secondary-gunmetal-grey); } -[data-object|="unit"][data-coalition="blue"][data-is-selected] - .unit-short-label { +[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label { color: var(--secondary-blue-text); } [data-object|="unit"][data-coalition="blue"] .unit-fuel-level, [data-object|="unit"][data-coalition="blue"] .unit-health-level, -[data-object|="unit"][data-coalition="blue"][data-has-fox-1] - .unit-ammo - > div:nth-child(1), -[data-object|="unit"][data-coalition="blue"][data-has-fox-2] - .unit-ammo - > div:nth-child(2), -[data-object|="unit"][data-coalition="blue"][data-has-fox-3] - .unit-ammo - > div:nth-child(3), -[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] - .unit-ammo - > div:nth-child(4) { +[data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo > div:nth-child(1), +[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo > div:nth-child(2), +[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo > div:nth-child(3), +[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo > div:nth-child(4) { background-color: var(--primary-blue); } @@ -393,25 +410,16 @@ background-color: var(--secondary-blue-outline); } -[data-object|="unit"][data-coalition="red"][data-is-selected] - .unit-short-label { +[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label { color: var(--secondary-red-text); } [data-object|="unit"][data-coalition="red"] .unit-fuel-level, [data-object|="unit"][data-coalition="red"] .unit-health-level, -[data-object|="unit"][data-coalition="red"][data-has-fox-1] - .unit-ammo - > div:nth-child(1), -[data-object|="unit"][data-coalition="red"][data-has-fox-2] - .unit-ammo - > div:nth-child(2), -[data-object|="unit"][data-coalition="red"][data-has-fox-3] - .unit-ammo - > div:nth-child(3), -[data-object|="unit"][data-coalition="red"][data-has-other-ammo] - .unit-ammo - > div:nth-child(4) { +[data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo > div:nth-child(1), +[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo > div:nth-child(2), +[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo > div:nth-child(3), +[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo > div:nth-child(4) { background-color: var(--primary-red); } @@ -541,11 +549,12 @@ opacity: 0.5; } -.unit-bullseye, .unit-braa { +.unit-bullseye, +.unit-braa { display: none; } -[data-awacs-mode] .unit-bullseye, +[data-awacs-mode] .unit-bullseye, [data-awacs-mode] .unit-braa { display: inline; } diff --git a/frontend/react/src/map/stylesheets/map.css b/frontend/react/src/map/stylesheets/map.css index d13348e2..be3be801 100644 --- a/frontend/react/src/map/stylesheets/map.css +++ b/frontend/react/src/map/stylesheets/map.css @@ -184,5 +184,53 @@ path.leaflet-interactive:focus { } .attack-cursor { - cursor: url("./images/buttons/context/attack.svg"), auto !important; + cursor: url("./images/cursors/attack.svg"), auto !important; +} + +.follow-cursor { + cursor: url("./images/cursors/follow.svg"), auto !important; +} + +.fire-at-area-cursor, .bomb-cursor, .carpet-bomb-cursor { + cursor: url("./images/cursors/fire-at-area.svg"), auto !important; +} + +.land-cursor { + cursor: url("./images/cursors/land.svg"), auto !important; +} + +.land-at-point-cursor { + cursor: url("./images/cursors/land-at-point.svg"), auto !important; +} + +.simulate-fire-fight-cursor { + cursor: url("./images/cursors/simulate-fire-fight.svg"), auto !important; +} + +#map-container.leaflet-grab { + cursor: url("./images/cursors/grab.svg") 16 16, auto; +} + +.explosion-cursor { + cursor: url("./images/cursors/explosion.svg"), auto !important; +} + +.smoke-white-cursor { + cursor: url("./images/cursors/smoke-white.svg"), auto !important; +} + +.smoke-blue-cursor { + cursor: url("./images/cursors/smoke-blue.svg"), auto !important; +} + +.smoke-red-cursor { + cursor: url("./images/cursors/smoke-red.svg"), auto !important; +} + +.smoke-green-cursor { + cursor: url("./images/cursors/smoke-green.svg"), auto !important; +} + +.smoke-orange-cursor { + cursor: url("./images/cursors/smoke-orange.svg"), auto !important; }