From 875cec485f0c27919be40f2eeb3b99deeb6e37a4 Mon Sep 17 00:00:00 2001 From: Dogma <103559271+ArtificialDogma@users.noreply.github.com> Date: Mon, 13 Mar 2023 21:58:26 +1100 Subject: [PATCH 1/4] Updates to icons --- client/public/themes/olympus/images/icon_aa_blue.svg | 3 +++ .../public/themes/olympus/images/icon_aa_blue_hover.svg | 4 ++++ .../themes/olympus/images/icon_aa_blue_selected.svg | 4 ++-- client/public/themes/olympus/images/icon_aa_neutral.svg | 3 +++ .../themes/olympus/images/icon_aa_neutral_hover.svg | 4 ++++ .../themes/olympus/images/icon_aa_neutral_selected.svg | 4 ++-- client/public/themes/olympus/images/icon_aa_red.svg | 3 +++ client/public/themes/olympus/images/icon_aa_red_hover.svg | 4 ++++ .../public/themes/olympus/images/icon_aa_red_selected.svg | 4 ++-- .../themes/olympus/images/icon_aircraft_blue_hover.svg | 4 ++-- .../themes/olympus/images/icon_aircraft_blue_selected.svg | 8 ++++++++ .../themes/olympus/images/icon_aircraft_neutral_hover.svg | 4 ++-- .../olympus/images/icon_aircraft_neutral_selected.svg | 8 ++++++++ .../themes/olympus/images/icon_aircraft_red_hover.svg | 4 ++-- .../themes/olympus/images/icon_aircraft_red_selected.svg | 8 ++++++++ .../themes/olympus/images/icon_building_blue_hover.svg | 6 ++++++ .../themes/olympus/images/icon_building_blue_selected.svg | 4 ++-- .../themes/olympus/images/icon_building_neutral_hover.svg | 6 ++++++ .../olympus/images/icon_building_neutral_selected.svg | 4 ++-- .../themes/olympus/images/icon_building_red_hover.svg | 6 ++++++ .../themes/olympus/images/icon_building_red_selected.svg | 4 ++-- .../themes/olympus/images/icon_ground_blue_hover.svg | 5 +++++ .../themes/olympus/images/icon_ground_blue_selected.svg | 4 ++-- .../public/themes/olympus/images/icon_ground_neutral.svg | 2 +- .../themes/olympus/images/icon_ground_neutral_hover.svg | 5 +++++ .../olympus/images/icon_ground_neutral_selected.svg | 6 +++--- .../themes/olympus/images/icon_ground_red_hover.svg | 5 +++++ .../themes/olympus/images/icon_ground_red_selected.svg | 6 +++--- client/public/themes/olympus/images/icon_ship_blue.svg | 4 ++++ .../public/themes/olympus/images/icon_ship_blue_hover.svg | 5 +++++ .../themes/olympus/images/icon_ship_blue_selected.svg | 4 ++-- client/public/themes/olympus/images/icon_ship_neutral.svg | 4 ++++ .../themes/olympus/images/icon_ship_neutral_hover.svg | 5 +++++ .../themes/olympus/images/icon_ship_neutral_selected.svg | 4 ++-- client/public/themes/olympus/images/icon_ship_red.svg | 4 ++++ .../public/themes/olympus/images/icon_ship_red_hover.svg | 5 +++++ .../themes/olympus/images/icon_ship_red_selected.svg | 4 ++-- 37 files changed, 138 insertions(+), 33 deletions(-) create mode 100644 client/public/themes/olympus/images/icon_aa_blue.svg create mode 100644 client/public/themes/olympus/images/icon_aa_blue_hover.svg create mode 100644 client/public/themes/olympus/images/icon_aa_neutral.svg create mode 100644 client/public/themes/olympus/images/icon_aa_neutral_hover.svg create mode 100644 client/public/themes/olympus/images/icon_aa_red.svg create mode 100644 client/public/themes/olympus/images/icon_aa_red_hover.svg create mode 100644 client/public/themes/olympus/images/icon_aircraft_blue_selected.svg create mode 100644 client/public/themes/olympus/images/icon_aircraft_neutral_selected.svg create mode 100644 client/public/themes/olympus/images/icon_aircraft_red_selected.svg create mode 100644 client/public/themes/olympus/images/icon_building_blue_hover.svg create mode 100644 client/public/themes/olympus/images/icon_building_neutral_hover.svg create mode 100644 client/public/themes/olympus/images/icon_building_red_hover.svg create mode 100644 client/public/themes/olympus/images/icon_ground_blue_hover.svg create mode 100644 client/public/themes/olympus/images/icon_ground_neutral_hover.svg create mode 100644 client/public/themes/olympus/images/icon_ground_red_hover.svg create mode 100644 client/public/themes/olympus/images/icon_ship_blue.svg create mode 100644 client/public/themes/olympus/images/icon_ship_blue_hover.svg create mode 100644 client/public/themes/olympus/images/icon_ship_neutral.svg create mode 100644 client/public/themes/olympus/images/icon_ship_neutral_hover.svg create mode 100644 client/public/themes/olympus/images/icon_ship_red.svg create mode 100644 client/public/themes/olympus/images/icon_ship_red_hover.svg diff --git a/client/public/themes/olympus/images/icon_aa_blue.svg b/client/public/themes/olympus/images/icon_aa_blue.svg new file mode 100644 index 00000000..bc8729c1 --- /dev/null +++ b/client/public/themes/olympus/images/icon_aa_blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/themes/olympus/images/icon_aa_blue_hover.svg b/client/public/themes/olympus/images/icon_aa_blue_hover.svg new file mode 100644 index 00000000..194487f9 --- /dev/null +++ b/client/public/themes/olympus/images/icon_aa_blue_hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/images/icon_aa_blue_selected.svg b/client/public/themes/olympus/images/icon_aa_blue_selected.svg index 194487f9..7a4b76cc 100644 --- a/client/public/themes/olympus/images/icon_aa_blue_selected.svg +++ b/client/public/themes/olympus/images/icon_aa_blue_selected.svg @@ -1,4 +1,4 @@ - - + + diff --git a/client/public/themes/olympus/images/icon_aa_neutral.svg b/client/public/themes/olympus/images/icon_aa_neutral.svg new file mode 100644 index 00000000..9eb5ab0b --- /dev/null +++ b/client/public/themes/olympus/images/icon_aa_neutral.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/themes/olympus/images/icon_aa_neutral_hover.svg b/client/public/themes/olympus/images/icon_aa_neutral_hover.svg new file mode 100644 index 00000000..d1c6fe34 --- /dev/null +++ b/client/public/themes/olympus/images/icon_aa_neutral_hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/images/icon_aa_neutral_selected.svg b/client/public/themes/olympus/images/icon_aa_neutral_selected.svg index d1c6fe34..12e1ee97 100644 --- a/client/public/themes/olympus/images/icon_aa_neutral_selected.svg +++ b/client/public/themes/olympus/images/icon_aa_neutral_selected.svg @@ -1,4 +1,4 @@ - - + + diff --git a/client/public/themes/olympus/images/icon_aa_red.svg b/client/public/themes/olympus/images/icon_aa_red.svg new file mode 100644 index 00000000..36aac80d --- /dev/null +++ b/client/public/themes/olympus/images/icon_aa_red.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/themes/olympus/images/icon_aa_red_hover.svg b/client/public/themes/olympus/images/icon_aa_red_hover.svg new file mode 100644 index 00000000..38195a43 --- /dev/null +++ b/client/public/themes/olympus/images/icon_aa_red_hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/images/icon_aa_red_selected.svg b/client/public/themes/olympus/images/icon_aa_red_selected.svg index 38195a43..12b4eaf1 100644 --- a/client/public/themes/olympus/images/icon_aa_red_selected.svg +++ b/client/public/themes/olympus/images/icon_aa_red_selected.svg @@ -1,4 +1,4 @@ - - + + diff --git a/client/public/themes/olympus/images/icon_aircraft_blue_hover.svg b/client/public/themes/olympus/images/icon_aircraft_blue_hover.svg index 9a5f71e4..8ed72621 100644 --- a/client/public/themes/olympus/images/icon_aircraft_blue_hover.svg +++ b/client/public/themes/olympus/images/icon_aircraft_blue_hover.svg @@ -1,8 +1,8 @@ - + - + diff --git a/client/public/themes/olympus/images/icon_aircraft_blue_selected.svg b/client/public/themes/olympus/images/icon_aircraft_blue_selected.svg new file mode 100644 index 00000000..63ad915f --- /dev/null +++ b/client/public/themes/olympus/images/icon_aircraft_blue_selected.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/client/public/themes/olympus/images/icon_aircraft_neutral_hover.svg b/client/public/themes/olympus/images/icon_aircraft_neutral_hover.svg index 026f09f8..518d7f94 100644 --- a/client/public/themes/olympus/images/icon_aircraft_neutral_hover.svg +++ b/client/public/themes/olympus/images/icon_aircraft_neutral_hover.svg @@ -1,8 +1,8 @@ - + - + diff --git a/client/public/themes/olympus/images/icon_aircraft_neutral_selected.svg b/client/public/themes/olympus/images/icon_aircraft_neutral_selected.svg new file mode 100644 index 00000000..b7e989fd --- /dev/null +++ b/client/public/themes/olympus/images/icon_aircraft_neutral_selected.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/client/public/themes/olympus/images/icon_aircraft_red_hover.svg b/client/public/themes/olympus/images/icon_aircraft_red_hover.svg index e15fbbbd..988d2e8f 100644 --- a/client/public/themes/olympus/images/icon_aircraft_red_hover.svg +++ b/client/public/themes/olympus/images/icon_aircraft_red_hover.svg @@ -1,8 +1,8 @@ - + - + diff --git a/client/public/themes/olympus/images/icon_aircraft_red_selected.svg b/client/public/themes/olympus/images/icon_aircraft_red_selected.svg new file mode 100644 index 00000000..069d139c --- /dev/null +++ b/client/public/themes/olympus/images/icon_aircraft_red_selected.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/client/public/themes/olympus/images/icon_building_blue_hover.svg b/client/public/themes/olympus/images/icon_building_blue_hover.svg new file mode 100644 index 00000000..558ff2c6 --- /dev/null +++ b/client/public/themes/olympus/images/icon_building_blue_hover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/client/public/themes/olympus/images/icon_building_blue_selected.svg b/client/public/themes/olympus/images/icon_building_blue_selected.svg index 558ff2c6..b260b8cd 100644 --- a/client/public/themes/olympus/images/icon_building_blue_selected.svg +++ b/client/public/themes/olympus/images/icon_building_blue_selected.svg @@ -1,6 +1,6 @@ - + - + diff --git a/client/public/themes/olympus/images/icon_building_neutral_hover.svg b/client/public/themes/olympus/images/icon_building_neutral_hover.svg new file mode 100644 index 00000000..9cdb95ce --- /dev/null +++ b/client/public/themes/olympus/images/icon_building_neutral_hover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/client/public/themes/olympus/images/icon_building_neutral_selected.svg b/client/public/themes/olympus/images/icon_building_neutral_selected.svg index 9cdb95ce..043e8f6c 100644 --- a/client/public/themes/olympus/images/icon_building_neutral_selected.svg +++ b/client/public/themes/olympus/images/icon_building_neutral_selected.svg @@ -1,6 +1,6 @@ - + - + diff --git a/client/public/themes/olympus/images/icon_building_red_hover.svg b/client/public/themes/olympus/images/icon_building_red_hover.svg new file mode 100644 index 00000000..2e4b8305 --- /dev/null +++ b/client/public/themes/olympus/images/icon_building_red_hover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/client/public/themes/olympus/images/icon_building_red_selected.svg b/client/public/themes/olympus/images/icon_building_red_selected.svg index 2e4b8305..a14f139c 100644 --- a/client/public/themes/olympus/images/icon_building_red_selected.svg +++ b/client/public/themes/olympus/images/icon_building_red_selected.svg @@ -1,6 +1,6 @@ - + - + diff --git a/client/public/themes/olympus/images/icon_ground_blue_hover.svg b/client/public/themes/olympus/images/icon_ground_blue_hover.svg new file mode 100644 index 00000000..0a289694 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ground_blue_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/themes/olympus/images/icon_ground_blue_selected.svg b/client/public/themes/olympus/images/icon_ground_blue_selected.svg index e703ab38..c0664ffe 100644 --- a/client/public/themes/olympus/images/icon_ground_blue_selected.svg +++ b/client/public/themes/olympus/images/icon_ground_blue_selected.svg @@ -1,5 +1,5 @@ - - + + diff --git a/client/public/themes/olympus/images/icon_ground_neutral.svg b/client/public/themes/olympus/images/icon_ground_neutral.svg index dade0ddf..80422f4e 100644 --- a/client/public/themes/olympus/images/icon_ground_neutral.svg +++ b/client/public/themes/olympus/images/icon_ground_neutral.svg @@ -1,4 +1,4 @@ - + diff --git a/client/public/themes/olympus/images/icon_ground_neutral_hover.svg b/client/public/themes/olympus/images/icon_ground_neutral_hover.svg new file mode 100644 index 00000000..66e432a9 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ground_neutral_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/themes/olympus/images/icon_ground_neutral_selected.svg b/client/public/themes/olympus/images/icon_ground_neutral_selected.svg index 828bda5e..773c67ed 100644 --- a/client/public/themes/olympus/images/icon_ground_neutral_selected.svg +++ b/client/public/themes/olympus/images/icon_ground_neutral_selected.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/client/public/themes/olympus/images/icon_ground_red_hover.svg b/client/public/themes/olympus/images/icon_ground_red_hover.svg new file mode 100644 index 00000000..c6ff3e3d --- /dev/null +++ b/client/public/themes/olympus/images/icon_ground_red_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/themes/olympus/images/icon_ground_red_selected.svg b/client/public/themes/olympus/images/icon_ground_red_selected.svg index 23fa2094..0e647eb2 100644 --- a/client/public/themes/olympus/images/icon_ground_red_selected.svg +++ b/client/public/themes/olympus/images/icon_ground_red_selected.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/client/public/themes/olympus/images/icon_ship_blue.svg b/client/public/themes/olympus/images/icon_ship_blue.svg new file mode 100644 index 00000000..e2d296d0 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ship_blue.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/images/icon_ship_blue_hover.svg b/client/public/themes/olympus/images/icon_ship_blue_hover.svg new file mode 100644 index 00000000..749bdc23 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ship_blue_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/themes/olympus/images/icon_ship_blue_selected.svg b/client/public/themes/olympus/images/icon_ship_blue_selected.svg index 749bdc23..03a68121 100644 --- a/client/public/themes/olympus/images/icon_ship_blue_selected.svg +++ b/client/public/themes/olympus/images/icon_ship_blue_selected.svg @@ -1,5 +1,5 @@ - - + + diff --git a/client/public/themes/olympus/images/icon_ship_neutral.svg b/client/public/themes/olympus/images/icon_ship_neutral.svg new file mode 100644 index 00000000..13a87c0b --- /dev/null +++ b/client/public/themes/olympus/images/icon_ship_neutral.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/images/icon_ship_neutral_hover.svg b/client/public/themes/olympus/images/icon_ship_neutral_hover.svg new file mode 100644 index 00000000..0804e222 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ship_neutral_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/themes/olympus/images/icon_ship_neutral_selected.svg b/client/public/themes/olympus/images/icon_ship_neutral_selected.svg index 0804e222..b61a7be3 100644 --- a/client/public/themes/olympus/images/icon_ship_neutral_selected.svg +++ b/client/public/themes/olympus/images/icon_ship_neutral_selected.svg @@ -1,5 +1,5 @@ - - + + diff --git a/client/public/themes/olympus/images/icon_ship_red.svg b/client/public/themes/olympus/images/icon_ship_red.svg new file mode 100644 index 00000000..91a0aff9 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ship_red.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/images/icon_ship_red_hover.svg b/client/public/themes/olympus/images/icon_ship_red_hover.svg new file mode 100644 index 00000000..90d4aff8 --- /dev/null +++ b/client/public/themes/olympus/images/icon_ship_red_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/public/themes/olympus/images/icon_ship_red_selected.svg b/client/public/themes/olympus/images/icon_ship_red_selected.svg index 90d4aff8..ea79ae2d 100644 --- a/client/public/themes/olympus/images/icon_ship_red_selected.svg +++ b/client/public/themes/olympus/images/icon_ship_red_selected.svg @@ -1,5 +1,5 @@ - - + + From dedf8ab08f4b67bddce200f7a09949a6de3aa3b9 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 13 Mar 2023 11:43:50 +0000 Subject: [PATCH 2/4] Added aircraft selected states. --- client/public/stylesheets/olympus.css | 20 -------------------- client/public/stylesheets/units.css | 24 ++++++++++++++++-------- client/public/themes/olympus/olympus.css | 3 +++ 3 files changed, 19 insertions(+), 28 deletions(-) diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index eb323f3b..fd79a10c 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -442,26 +442,6 @@ nav.ol-panel> :last-child { flex-direction: column; } -.data-row { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - column-gap: 2px; -} - -.data-row>*:nth-child(2) { - width: 100px; -} - -.data-row>*:last-child { - width: 30px; - text-align: right; -} - -.data-row>.icon-small { - margin: 2px; -} .slider-container { width: 100%; diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index 8a188acd..49833165 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -53,6 +53,7 @@ padding-bottom: calc( ( var( --unit-air-width ) / 2 ) + var( --unit-stroke-width ) ); position:absolute; width: var( --unit-air-vvi-width ); + z-index: 3; } @@ -117,28 +118,40 @@ width: var( --unit-air-marker-width ); } -[data-object|="unit-air"]:hover .unit-marker, [data-object|="unit-air"][data-is-selected] .unit-marker { +[data-object|="unit-air"]:hover .unit-marker { background-image: var( --unit-air-marker-neutral-hover-url ); } +[data-object|="unit-air"][data-is-selected] .unit-marker { + background-image: var( --unit-air-marker-neutral-selected-url ); +} + [data-object|="unit-air"][data-coalition="blue"] .unit-marker { background-image: var( --unit-air-marker-blue-url ); } -[data-object|="unit-air"][data-coalition="blue"]:hover .unit-marker, [data-object|="unit-air"][data-coalition="blue"][data-is-selected] .unit-marker { +[data-object|="unit-air"][data-coalition="blue"]:hover .unit-marker { background-image: var( --unit-air-marker-blue-hover-url ); } +[data-object|="unit-air"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-air-marker-blue-selected-url ); +} + [data-object|="unit-air"][data-coalition="red"] .unit-marker { background-image: var( --unit-air-marker-red-url ); } -[data-object|="unit-air"][data-coalition="red"]:hover .unit-marker, [data-object|="unit-air"][data-coalition="red"][data-is-selected] .unit-marker { +[data-object|="unit-air"][data-coalition="red"]:hover .unit-marker { background-image: var( --unit-air-marker-red-hover-url ); } +[data-object|="unit-air"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-air-marker-red-selected-url ); +} + @@ -413,11 +426,6 @@ } -[data-object|="unit"][data-is-selected] rect.unit-marker { - fill:white; -} - - [data-object|="unit"] .unit-status { background-repeat: no-repeat; position:absolute; diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css index f03e141d..06050adb 100644 --- a/client/public/themes/olympus/olympus.css +++ b/client/public/themes/olympus/olympus.css @@ -101,14 +101,17 @@ --unit-air-marker-blue-url: url( "/themes/olympus/images/icon_aircraft_blue.svg" ); --unit-air-marker-blue-hover-url: url( "/themes/olympus/images/icon_aircraft_blue_hover.svg" ); + --unit-air-marker-blue-selected-url: url( "/themes/olympus/images/icon_aircraft_blue_selected.svg" ); --unit-air-marker-blue-dead-url: url( "/themes/olympus/images/icon_death_blue.svg" ); --unit-air-marker-neutral-url: url( "/themes/olympus/images/icon_aircraft_neutral.svg" ); --unit-air-marker-neutral-hover-url: url( "/themes/olympus/images/icon_aircraft_neutral_hover.svg" ); + --unit-air-marker-neutral-selected-url: url( "/themes/olympus/images/icon_aircraft_neutral_selected.svg" ); --unit-air-marker-neutral-dead-url: url( "/themes/olympus/images/icon_death_neutral.svg" ); --unit-air-marker-red-url: url( "/themes/olympus/images/icon_aircraft_red.svg" ); --unit-air-marker-red-hover-url: url( "/themes/olympus/images/icon_aircraft_red_hover.svg" ); + --unit-air-marker-red-selected-url: url( "/themes/olympus/images/icon_aircraft_red_selected.svg" ); --unit-air-marker-red-dead-url: url( "/themes/olympus/images/icon_death_red.svg" ); From da2dd7e0fd0f27b0b938b7a19acd096a256cf39b Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 13 Mar 2023 12:41:46 +0000 Subject: [PATCH 3/4] Updated unit icons. --- client/public/stylesheets/units.css | 116 +++++++++++++++++++---- client/public/themes/olympus/olympus.css | 50 +++++++--- 2 files changed, 137 insertions(+), 29 deletions(-) diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index 49833165..29e71d7f 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -80,7 +80,6 @@ } [data-object|="unit"] .unit-marker-border { - background-color: white; border-radius: var( --border-radius-sm ); display:none; height: calc( var( --unit-air-height ) + ( var( --unit-label-border-width ) * 2 ) ); @@ -89,11 +88,6 @@ z-index:2; } -.unit:hover .unit-marker-border, -[data-object|="unit"][data-is-selected] .unit-marker-border { - display:block; -} - /****************************** Marker @@ -158,24 +152,52 @@ /* Ground vehicles (not SAMs) */ [data-object|="unit-ground-mi"] .unit-marker { - background-image: var( --unit-ground-marker-neutral-url ); - height: var( --unit-ground-marker-height ); - width: var( --unit-ground-marker-width ); + background-image: var( --unit-ground-mi-marker-neutral-url ); + height: var( --unit-ground-mi-marker-height ); + width: var( --unit-ground-mi-marker-width ); +} + +[data-object|="unit-ground-mi"]:hover .unit-marker { + background-image: var( --unit-ground-mi-marker-neutral-hover-url ); +} + +[data-object|="unit-ground-mi"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-mi-marker-neutral-selected-url ); } [data-object|="unit-ground-mi"][data-coalition="blue"] .unit-marker { - background-image: var( --unit-ground-marker-blue-url ); + background-image: var( --unit-ground-mi-marker-blue-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="blue"]:hover .unit-marker { + background-image: var( --unit-ground-mi-marker-blue-hover-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-mi-marker-blue-selected-url ); } [data-object|="unit-ground-mi"][data-coalition="red"] .unit-marker { - background-image: var( --unit-ground-marker-red-url ); + background-image: var( --unit-ground-mi-marker-red-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="red"]:hover .unit-marker { + background-image: var( --unit-ground-mi-marker-red-hover-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-mi-marker-red-selected-url ); } /* SAMs */ +[data-object|="unit-ground-sam"] .unit-selected-spotlight { + translate:0 2px; +} + [data-object|="unit-ground-sam"] .unit-marker { background-image: var( --unit-sam-marker-neutral-url ); height: var( --unit-sam-marker-height ); @@ -183,18 +205,47 @@ } +[data-object|="unit-ground-sam"]:hover .unit-marker { + background-image: var( --unit-ground-sam-marker-neutral-hover-url ); +} + +[data-object|="unit-ground-sam"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-sam-marker-neutral-selected-url ); +} + + [data-object|="unit-ground-sam"][data-coalition="blue"] .unit-marker { - background-image: var( --unit-sam-marker-blue-url ); + background-image: var( --unit-ground-sam-marker-blue-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="blue"]:hover .unit-marker { + background-image: var( --unit-ground-sam-marker-blue-hover-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-sam-marker-blue-selected-url ); } [data-object|="unit-ground-sam"][data-coalition="red"] .unit-marker { - background-image: var( --unit-sam-marker-red-url ); + background-image: var( --unit-ground-sam-marker-red-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="red"]:hover .unit-marker { + background-image: var( --unit-ground-sam-marker-red-hover-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-sam-marker-red-selected-url ); } /* Naval */ +[data-object|="unit-naval"] .unit-selected-spotlight { + translate:0 -2px; +} + [data-object|="unit-naval"] .unit-marker { background-image: var( --unit-naval-marker-neutral-url ); height: var( --unit-naval-marker-height ); @@ -202,15 +253,40 @@ } +[data-object|="unit-naval"]:hover .unit-marker { + background-image: var( --unit-naval-marker-neutral-hover-url ); +} + +[data-object|="unit-naval"][data-is-selected] .unit-marker { + background-image: var( --unit-naval-marker-neutral-selected-url ); +} + + [data-object|="unit-naval"][data-coalition="blue"] .unit-marker { background-image: var( --unit-naval-marker-blue-url ); } +[data-object|="unit-naval"][data-coalition="blue"]:hover .unit-marker { + background-image: var( --unit-naval-marker-blue-hover-url ); +} + +[data-object|="unit-naval"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-naval-marker-blue-selected-url ); +} + [data-object|="unit-naval"][data-coalition="red"] .unit-marker { background-image: var( --unit-naval-marker-red-url ); } +[data-object|="unit-naval"][data-coalition="red"]:hover .unit-marker { + background-image: var( --unit-naval-marker-red-hover-url ); +} + +[data-object|="unit-naval"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-naval-marker-red-selected-url ); +} + /* Building */ @@ -234,19 +310,23 @@ /* Weapons */ -[data-object="unit-weapon-missile"] .unit-marker { +[data-object|="unit-weapon"] { + cursor: default; +} + +[data-object|="unit-weapon-missile"] .unit-marker { background-image: var( --unit-weapons-missile-marker-neutral-url ); height: var( --unit-weapons-missile-marker-height ); width: var( --unit-weapons-missile-marker-width ); } -[data-object="unit-weapon-missile"][data-coalition="blue"] .unit-marker { +[data-object|="unit-weapon-missile"][data-coalition="blue"] .unit-marker { background-image: var( --unit-weapons-missile-marker-blue-url ); } -[data-object="unit-weapon-missile"][data-coalition="red"] .unit-marker { +[data-object|="unit-weapon-missile"][data-coalition="red"] .unit-marker { background-image: var( --unit-weapons-missile-marker-red-url ); } @@ -469,6 +549,10 @@ /*** DEAD ***/ +[data-object|="unit-air"][ data-is-dead ] { + cursor: default; +} + [data-object|="unit-air"][ data-is-dead ] .unit-marker { background-image: var( --unit-air-marker-neutral-dead-url ); background-position: 50% 50%; diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css index 06050adb..741a00bb 100644 --- a/client/public/themes/olympus/olympus.css +++ b/client/public/themes/olympus/olympus.css @@ -134,30 +134,54 @@ /*** Ground ***/ - --unit-ground-marker-height: 43px; - --unit-ground-marker-width: 43px; + --unit-ground-mi-marker-height: 43px; + --unit-ground-mi-marker-width: 43px; - --unit-ground-marker-blue-url: url( "/themes/olympus/images/icon_ground_blue.svg" ); - --unit-ground-marker-neutral-url: url( "/themes/olympus/images/icon_ground_neutral.svg" ); - --unit-ground-marker-red-url: url( "/themes/olympus/images/icon_ground_red.svg" ); + --unit-ground-mi-marker-blue-url: url( "/themes/olympus/images/icon_ground_blue.svg" ); + --unit-ground-mi-marker-blue-hover-url: url( "/themes/olympus/images/icon_ground_blue_hover.svg" ); + --unit-ground-mi-marker-blue-selected-url: url( "/themes/olympus/images/icon_ground_blue_selected.svg" ); + + --unit-ground-mi-marker-neutral-url: url( "/themes/olympus/images/icon_ground_neutral.svg" ); + --unit-ground-mi-marker-neutral-hover-url: url( "/themes/olympus/images/icon_ground_neutral_hover.svg" ); + --unit-ground-mi-marker-neutral-selected-url: url( "/themes/olympus/images/icon_ground_neutral_selected.svg" ); + + --unit-ground-mi-marker-red-url: url( "/themes/olympus/images/icon_ground_red.svg" ); + --unit-ground-mi-marker-red-hover-url: url( "/themes/olympus/images/icon_ground_red_hover.svg" ); + --unit-ground-mi-marker-red-selected-url: url( "/themes/olympus/images/icon_ground_red_selected.svg" ); /*** SAMs ***/ - --unit-sam-marker-height: 38px; + --unit-sam-marker-height: 42px; --unit-sam-marker-width: 50px; - --unit-sam-marker-blue-url: url( "/themes/olympus/images/icon_sam_blue.svg" ); - --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" ); + --unit-ground-sam-marker-blue-url: url( "/themes/olympus/images/icon_aa_blue.svg" ); + --unit-ground-sam-marker-blue-hover-url: url( "/themes/olympus/images/icon_aa_blue_hover.svg" ); + --unit-ground-sam-marker-blue-selected-url: url( "/themes/olympus/images/icon_aa_blue_selected.svg" ); + + --unit-ground-sam-marker-neutral-url: url( "/themes/olympus/images/icon_aa_neutral.svg" ); + --unit-ground-sam-marker-neutral-hover-url: url( "/themes/olympus/images/icon_aa_neutral_hover.svg" ); + --unit-ground-sam-marker-neutral-selected-url: url( "/themes/olympus/images/icon_aa_neutral_selected.svg" ); + + --unit-ground-sam-marker-red-url: url( "/themes/olympus/images/icon_aa_red.svg" ); + --unit-ground-sam-marker-red-hover-url: url( "/themes/olympus/images/icon_aa_red_hover.svg" ); + --unit-ground-sam-marker-red-selected-url: url( "/themes/olympus/images/icon_aa_red_selected.svg" ); /*** Naval ***/ - --unit-naval-marker-height: 38px; + --unit-naval-marker-height: 42px; --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" ); + --unit-naval-marker-blue-url: url( "/themes/olympus/images/icon_ship_blue.svg" ); + --unit-naval-marker-blue-hover-url: url( "/themes/olympus/images/icon_ship_blue_hover.svg" ); + --unit-naval-marker-blue-selected-url: url( "/themes/olympus/images/icon_ship_blue_selected.svg" ); + + --unit-naval-marker-neutral-url: url( "/themes/olympus/images/icon_ship_neutral.svg" ); + --unit-naval-marker-neutral-hover-url: url( "/themes/olympus/images/icon_ship_neutral_hover.svg" ); + --unit-naval-marker-neutral-selected-url: url( "/themes/olympus/images/icon_ship_neutral_selected.svg" ); + + --unit-naval-marker-red-url: url( "/themes/olympus/images/icon_ship_red.svg" ); + --unit-naval-marker-red-hover-url: url( "/themes/olympus/images/icon_ship_red_hover.svg" ); + --unit-naval-marker-red-selected-url: url( "/themes/olympus/images/icon_ship_red_selected.svg" ); /*** Building ***/ From 1d043b1d2dd01750e7e96cf56470ebc0daf683c9 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 13 Mar 2023 15:05:54 +0000 Subject: [PATCH 4/4] Unit info panel done - probably. --- client/public/stylesheets/layout.css | 82 ++++++++++++++++++--------- client/public/stylesheets/olympus.css | 61 +++++++++----------- client/src/panels/unitinfopanel.ts | 6 +- client/views/unitinfopanel.ejs | 46 +++++++++------ 4 files changed, 113 insertions(+), 82 deletions(-) diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css index 8fe09ada..c8e31a4d 100644 --- a/client/public/stylesheets/layout.css +++ b/client/public/stylesheets/layout.css @@ -58,34 +58,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { display:block !important; } -#unit-control-panel #loadout-container { - display:flex; - flex-wrap: wrap; - row-gap: 4px; -} - -#unit-control-panel #loadout-label span { - display:block; - float:right; -} - -#unit-control-panel #loadout-label span::before { - content: url( /images/icons/fuel.svg ); - display:inline-block; - filter:invert(100%); - height:16px; - translate:-25% 5%; - width:16px; -} - -#unit-control-panel #loadout-label span::after { - content: attr( data-fuel-level ) "%"; -} - -#unit-control-panel #loadout-container .loadout-item { - background-color: black; -} - dl.data-grid { align-items: center; display:flex; @@ -155,6 +127,7 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after color: var( --accent-light-blue ); } + #unit-info-panel { bottom: 20px; font-size:12px; @@ -164,6 +137,59 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after z-index: 1000; } + +#unit-info-panel #unit-name { + line-height: 18px; + margin-bottom:10px; +} + +#unit-info-panel #current-task { + border-radius: var( --border-radius-lg ); + margin-top:15px; +} + +#unit-info-panel #current-task::after { + content: attr( data-current-task ); + display:block; +} + + +#unit-info-panel #loadout-data { + max-width: 250px; +} + +#unit-info-panel #loadout-data .data-grid { + margin: 6px 0; +} + +#unit-info-panel #loadout-data .data-grid dt:first-child { + text-indent: 5px; +} + +#unit-info-panel #loadout-data .data-grid dt:first-child::before { + content: url( /images/icons/fuel.svg ); + display:inline-block; + filter:invert(100%); + height:16px; + text-indent:5px; + translate:-10px 5%; + width:16px; +} + +#unit-info-panel #loadout-fuel-level::after { + content: attr( data-fuel-level ) "%"; +} + +#unit-info-panel #loadout-container .loadout-item { + background-color: black; +} + +#unit-info-panel #loadout-container .loadout-item::before { + content: attr( data-loadout-item ) ' \d7 ' attr( data-loadout-qty ); +} + + + #connection-status-panel { bottom: 20px; font-size:12px; diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index fd79a10c..33296617 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -66,18 +66,11 @@ button[disabled="disabled"] { .pill { background-color: var( --background-darksteel ); border-radius: var(--border-radius-sm); - padding: 2px 6px; + padding: 4px 8px; width: fit-content; } - -.loadout-item::after { - content: attr( data-qty ) 'x ' attr( data-item ); -} - - - .ol-panel { background-color: var(--background-steel); border-radius: 15px; @@ -267,25 +260,24 @@ button[disabled="disabled"] { justify-content: space-evenly; } -.ol-panel-board>.panel-section { +.ol-panel-board > .panel-section { border-right: 1px solid #555; - padding: 10px; + margin:10px 0; + padding:0 30px; } -.ol-panel-board>.panel-section:last-of-type { +.ol-panel-board > .panel-section:first-child { + padding-left:20px; +} + +.ol-panel-board > .panel-section:last-child { + padding-right:20px; +} + +.ol-panel-board > .panel-section:last-of-type { border-right-width: 0; } -.ol-panel-board h1, -.ol-panel-board h2 { - font-weight: var(--font-weight-bolder); - margin: 0; - padding: 0 0 5px 0; -} - -.ol-panel-board h2 { - font-size: 14px; -} h1, h2, @@ -335,16 +327,19 @@ nav.ol-panel> :last-child { .ol-panel .ol-group { + border-radius: var(--border-radius-sm); column-gap: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; + row-gap: 4px; } -.ol-panel .ol-group { - border-radius: var(--border-radius-sm); +.ol-panel .ol-group.wrap { + flex-wrap: wrap; } + .ol-panel .ol-group-button-toggle { align-items: center; column-gap: 15px; @@ -385,20 +380,20 @@ nav.ol-panel> :last-child { background-color: var(--secondary-light-grey); } -.highlight-bluefor { - background-color: var(--primary-blue); - color: var(--background-steel) -} - -.highlight-redfor { - background-color: var(--primary-red); -} - -.highlight-neutral { +.highlight-coalition, .highlight-neutral { background-color: var(--primary-grey); color: var(--secondary-gunmetal-grey) } +.highlight-coalition[data-coalition="blue"], .highlight-bluefor { + background-color: var(--primary-blue); + color: white; +} + +.highlight-coalition[data-coalition="red"], .highlight-redfor { + background-color: var(--primary-red); +} + .accent-green { color: var(--accent-green); diff --git a/client/src/panels/unitinfopanel.ts b/client/src/panels/unitinfopanel.ts index 0505ea7e..1b95e60b 100644 --- a/client/src/panels/unitinfopanel.ts +++ b/client/src/panels/unitinfopanel.ts @@ -44,9 +44,9 @@ export class UnitInfoPanel extends Panel { this.#unitName.innerText = unit.getBaseData().unitName; this.#groupName.innerText = unit.getBaseData().groupName; this.#name.innerText = unit.getBaseData().name; - this.#heading.innerText = String(Math.floor(rad2deg(unit.getFlightData().heading)) + " °"); - this.#altitude.innerText = String(Math.floor(unit.getFlightData().altitude / 0.3048) + " ft"); - this.#groundSpeed.innerText = String(Math.floor(unit.getFlightData().speed * 1.94384) + " kts"); + //this.#heading.innerText = String(Math.floor(rad2deg(unit.getFlightData().heading)) + " °"); + //this.#altitude.innerText = String(Math.floor(unit.getFlightData().altitude / 0.3048) + " ft"); + //this.#groundSpeed.innerText = String(Math.floor(unit.getFlightData().speed * 1.94384) + " kts"); //this.#fuel.innerText = String(unit.getMissionData().fuel + "%"); //this.#latitude.innerText = ConvertDDToDMS(unit.getFlightData().latitude, false); //this.#longitude.innerText = ConvertDDToDMS(unit.getFlightData().longitude, true); diff --git a/client/views/unitinfopanel.ejs b/client/views/unitinfopanel.ejs index 1f0bb900..73c37155 100644 --- a/client/views/unitinfopanel.ejs +++ b/client/views/unitinfopanel.ejs @@ -1,25 +1,35 @@
+
+
-

Olympus 1-1

-
Name
-
Group
-
Task
-
-
-
-
Heading
-
123°
-
Speed
-
323kts
-
Altitude
-
27,414ft
-
-
-
-

Loadout

-
+

Olympus 1-1

+
+
Name
+
Group
+
Task
+
+ +
+ +

Loadout

+ +
+
Fuel
+
+
+ +
+
+
+
+
+
+ +
+
+
\ No newline at end of file