diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 7d087936..d81d1601 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -274,27 +274,25 @@ nav.ol-panel > :last-child { border-radius: var( --border-radius-sm ); } -.ol-panel .ol-group-checkbox { +.ol-panel .ol-group-button-toggle { align-items: center; - column-gap: 20px; + column-gap: 15px; display:flex; flex-wrap: nowrap; white-space: nowrap; width:fit-content; } -.ol-panel .ol-group-checkbox .ol-checkbox { +.ol-panel .ol-group-button-toggle button { align-items: center; - display:flex; - flex-direction: row; + background-image: url( "/themes/olympus/images/check_square.svg"); + background-position: 5px 50%; + background-repeat: no-repeat; + border:0; + text-indent: 15px; } -.ol-panel .ol-group-checkbox input, -.ol-panel .ol-group-checkbox .ol-checkbox label { - cursor: pointer; -} - .highlight-primary { @@ -315,6 +313,24 @@ nav.ol-panel > :last-child { color: var(--secondary-gunmetal-grey) } + +.accent-bluefor { + color: var(--primary-blue); + font-weight: var( --font-weight-bolder ); +} + +.accent-redfor { + color: var(--primary-red); + font-weight: var( --font-weight-bolder ); +} + +.accent-neutral { + color: var( --primary-grey ); + font-weight: var( --font-weight-bolder ); +} + + + .hide { display: none !important; } @@ -427,52 +443,62 @@ nav.ol-panel > :last-child { } -#visibility-control { + + + +#unit-visibility-control { align-items: center; } -#visibility-control button { +#unit-visibility-control button { border:none; height:32px; width:32px; } -#visibility-control-aircraft { +#unit-visibility-control-aircraft { background-image: var( --visibility-control-aircraft-visible-url ); } -body[data-hide-aircraft] #visibility-control-aircraft { +body[data-hide-aircraft] #unit-visibility-control-aircraft { background-image: var( --visibility-control-aircraft-hidden-url ); } -#visibility-control-ground { +#unit-visibility-control-ground { background-image: var( --visibility-control-ground-visible-url ); } -body[data-hide-ground] #visibility-control-ground { +body[data-hide-ground] #unit-visibility-control-ground { background-image: var( --visibility-control-ground-hidden-url ); } -#visibility-control-sam { +#unit-visibility-control-sam { background-image: var( --visibility-control-sam-visible-url ); } -body[data-hide-sam] #visibility-control-sam { +body[data-hide-sam] #unit-visibility-control-sam { background-image: var( --visibility-control-sam-hidden-url ); } -#visibility-control-threat { +#unit-visibility-control-threat { background-image: var( --visibility-control-threat-visible-url ); } -body[data-hide-threat] #visibility-control-threat { +body[data-hide-threat] #unit-visibility-control-threat { background-image: var( --visibility-control-threat-hidden-url ); } -#visibility-control-naval { +#unit-visibility-control-naval { background-image: var( --visibility-control-naval-visible-url ); } -body[data-hide-naval] #visibility-control-naval { +body[data-hide-naval] #unit-visibility-control-naval { background-image: var( --visibility-control-naval-hidden-url ); +} + + +[data-hide-blue] #coalition-visibility-control #coalition-visibility-control-blue, +[data-hide-red] #coalition-visibility-control #coalition-visibility-control-red, +[data-hide-neutral] #coalition-visibility-control #coalition-visibility-control-neutral { + background-image:none; } \ No newline at end of file diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index 6698c64b..e10646b8 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -21,6 +21,18 @@ div.unit { position:relative; } +[data-hide-aircraft] div.unit-air, +[data-hide-ground] div.unit-ground, +[data-hide-sam] div.unit-sam, +[data-hide-threat] div.unit-threat, +[data-hide-naval] div.unit-naval, +[data-hide-blue] div.unit[data-coalition="blue"], +[data-hide-red] div.unit[data-coalition="red"], +[data-hide-neutral] div.unit[data-coalition="neutral"] { + display:none; +} + + div.unit .unit-selected-spotlight { background-color: var( --unit-spotlight-fill ); border-radius: 50%; @@ -94,25 +106,6 @@ div.unit .unit-marker { z-index:3; } -[data-hide-aircraft] div.unit-air { - display:none; -} - -[data-hide-ground] div.unit-ground { - display:none; -} - -[data-hide-sam] div.unit-sam { - display:none; -} - -[data-hide-threat] div.unit-threat { - display:none; -} - -[data-hide-naval] div.unit-naval { - display:none; -} /* Air */ @@ -184,6 +177,44 @@ div.unit-sam[data-coalition="red"] .unit-marker { } +/* Naval */ + +div.unit-naval .unit-marker { + background-image: var( --unit-naval-marker-neutral-url ); + height: var( --unit-naval-marker-height ); + width: var( --unit-naval-marker-width ); +} + + +div.unit-naval[data-coalition="blue"] .unit-marker { + background-image: var( --unit-naval-marker-blue-url ); +} + + +div.unit-naval[data-coalition="red"] .unit-marker { + background-image: var( --unit-naval-marker-red-url ); +} + + +/* Building */ + +div.unit-building .unit-marker { + background-image: var( --unit-building-marker-neutral-url ); + height: var( --unit-building-marker-height ); + width: var( --unit-building-marker-width ); +} + + +div.unit-building[data-coalition="blue"] .unit-marker { + background-image: var( --unit-building-marker-blue-url ); +} + + +div.unit-building[data-coalition="red"] .unit-marker { + background-image: var( --unit-building-marker-red-url ); +} + + div.unit .unit-short-label { font-size: var(--unit-font-size); @@ -196,6 +227,10 @@ div.unit-sam .unit-short-label { translate:0 50%; } +div.unit-naval .unit-short-label { + translate:0 -50%; +} + div.unit .unit-fuel { background:white; diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css index 804a9215..49219cdb 100644 --- a/client/public/themes/olympus/olympus.css +++ b/client/public/themes/olympus/olympus.css @@ -144,4 +144,22 @@ --unit-sam-marker-neutral-url: url( "/themes/olympus/images/icon_sam_neutral.svg" ); --unit-sam-marker-red-url: url( "/themes/olympus/images/icon_sam_red.svg" ); + + /*** Naval ***/ + --unit-naval-marker-height: 38px; + --unit-naval-marker-width: 50px; + + --unit-naval-marker-blue-url: url( "/themes/olympus/images/icon_naval_blue.svg" ); + --unit-naval-marker-neutral-url: url( "/themes/olympus/images/icon_naval_neutral.svg" ); + --unit-naval-marker-red-url: url( "/themes/olympus/images/icon_naval_red.svg" ); + + + /*** Building ***/ + --unit-building-marker-height: 24px; + --unit-building-marker-width: 43px; + + --unit-building-marker-blue-url: url( "/themes/olympus/images/icon_building_blue.svg" ); + --unit-building-marker-neutral-url: url( "/themes/olympus/images/icon_building_neutral.svg" ); + --unit-building-marker-red-url: url( "/themes/olympus/images/icon_building_red.svg" ); + } \ No newline at end of file diff --git a/client/src/index.ts b/client/src/index.ts index a894aecb..d78a97ef 100644 --- a/client/src/index.ts +++ b/client/src/index.ts @@ -68,10 +68,12 @@ function setup() { if ( target.classList.contains( "olympus-dialog-close" ) ) { target.closest( "div.olympus-dialog" )?.classList.add( "hide" ); } - - if ( target.dataset.hasOwnProperty( "onClick" ) ) { - const eventName:string = target.dataset.onClick || ""; - const params:string = target.dataset.onClickParams || "{}"; + + const triggerElement = target.closest( "[data-on-click]" ); + + if ( triggerElement instanceof HTMLElement ) { + const eventName:string = triggerElement.dataset.onClick || ""; + const params:string = triggerElement.dataset.onClickParams || "{}"; if ( eventName ) { document.dispatchEvent( new CustomEvent( eventName, { @@ -98,10 +100,12 @@ function setup() { }); - document.addEventListener( "toggleVisibility", ( ev:CustomEventInit ) => { - - document.body.toggleAttribute( "data-hide-" + ev.detail.unitType ) + document.addEventListener( "toggleCoalitionVisibility", ( ev:CustomEventInit ) => { + document.body.toggleAttribute( "data-hide-" + ev.detail.coalition ); + }); + document.addEventListener( "toggleUnitVisibility", ( ev:CustomEventInit ) => { + document.body.toggleAttribute( "data-hide-" + ev.detail.unitType ); }); diff --git a/client/views/navbar.ejs b/client/views/navbar.ejs index c0efd87a..3b556dab 100644 --- a/client/views/navbar.ejs +++ b/client/views/navbar.ejs @@ -72,35 +72,27 @@ -
- - - - - +
+ + + + +
-
+
-
-
- -
- +
+
-
-
- -
- +
+
-
-
- -
- +
+
+
\ No newline at end of file diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs index b0a02550..fd85f549 100644 --- a/client/views/uikit.ejs +++ b/client/views/uikit.ejs @@ -250,6 +250,96 @@
+
+ +
Naval
+
+ +
+ +
Neutral
+ +
+
+
+
Z
+
+ +
+ +
+ +
Blue
+ +
+
+
+
Y
+
+ +
+ +
+ +
Red
+ +
+
+
+
X
+
+ +
+ +
+ +
+ +
+ +
Buildings
+
+ +
+ +
Neutral
+ +
+
+
+
J
+
+ +
+ +
+ +
Blue
+ +
+
+
+
K
+
+ +
+ +
+ +
Red
+ +
+
+
+
L
+
+ +
+ +
+ +
+ @@ -1631,13 +1721,17 @@ document.querySelectorAll( ".ol-select" ).forEach( select => { + select.addEventListener( "click", ev => { + ev.preventDefault(); + ev.stopPropagation(); select.classList.toggle( "is-open" ); }); select.addEventListener( "mouseleave", ev => { select.classList.remove( "is-open" ); }); + });