diff --git a/client/app.js b/client/app.js index 8fbd41c1..a10aaf2f 100644 --- a/client/app.js +++ b/client/app.js @@ -9,6 +9,7 @@ var atcRouter = require('./routes/api/atc'); var indexRouter = require('./routes/index'); var uikitRouter = require('./routes/uikit'); var usersRouter = require('./routes/users'); +var resourcesRouter = require('./routes/resources'); var app = express(); @@ -22,6 +23,7 @@ app.use('/', indexRouter); app.use('/api/atc', atcRouter); app.use('/users', usersRouter); app.use('/uikit', uikitRouter); +app.use('/resources', resourcesRouter); app.set('view engine', 'ejs'); diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 3478faa6..b23a92a8 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -4,7 +4,7 @@ @import url("connectionstatuspanel.css"); @import url("contextmenus.css"); @import url("mouseinfopanel.css"); -@import url("units.css"); +@import url("/stylesheets/units.css"); @import url("unitdatatable.css"); @import url("unitcontrolpanel.css"); @import url("unitinfopanel.css"); diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index b48389d6..4bdb7666 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -81,55 +81,34 @@ /****************************** Marker ******************************/ - -[data-object|="unit"] .unit-marker { - background-color: transparent; - background-repeat: no-repeat; - background-size: cover; +.unit-marker { position: absolute; transform-origin: center; z-index: 3; + height: var(--unit-height); + width: var(--unit-width); } -/* Air */ +[data-is-highlighted] .unit-marker { + stroke: white; +} +[data-is-selected] .unit-marker { +} + +[data-coalition="blue"] .unit-marker { +} + +[data-coalition="red"] .unit-marker { +} + +[data-coalition="neutral"] .unit-marker { + +} + +/* Aircraft */ [data-object|="unit-aircraft"] .unit-marker { - background-image: var(--unit-aircraft-marker-neutral-url); - height: var(--unit-aircraft-marker-height); - width: var(--unit-aircraft-marker-width); -} - -[data-object|="unit-aircraft"][data-is-highlighted] .unit-marker { - background-image: var(--unit-aircraft-marker-neutral-hover-url); -} - -[data-object|="unit-aircraft"][data-is-selected] .unit-marker { - background-image: var(--unit-aircraft-marker-neutral-selected-url); -} - -[data-object|="unit-aircraft"][data-coalition="blue"] .unit-marker { - background-image: var(--unit-aircraft-marker-blue-url); -} - -[data-object|="unit-aircraft"][data-coalition="blue"][data-is-highlighted] .unit-marker { - background-image: var(--unit-aircraft-marker-blue-hover-url); -} - -[data-object|="unit-aircraft"][data-coalition="blue"][data-is-selected] .unit-marker { - background-image: var(--unit-aircraft-marker-blue-selected-url); -} - - -[data-object|="unit-aircraft"][data-coalition="red"] .unit-marker { - background-image: var(--unit-aircraft-marker-red-url); -} - -[data-object|="unit-aircraft"][data-coalition="red"][data-is-highlighted] .unit-marker { - background-image: var(--unit-aircraft-marker-red-hover-url); -} - -[data-object|="unit-aircraft"][data-coalition="red"][data-is-selected] .unit-marker { - background-image: var(--unit-aircraft-marker-red-selected-url); + } /* Ground vehicles (not SAMs) */ @@ -561,7 +540,7 @@ [data-object|="unit-aircraft"][data-is-dead] .unit-ammo, [data-object|="unit-aircraft"][data-is-dead]:hover .unit-fuel, [data-object|="unit-aircraft"][data-is-dead]:hover .unit-ammo { - display: none !important; + display: none; } [data-object|="unit-aircraft"][ data-is-dead] .unit-summary>* { diff --git a/client/public/themes/olympus/images/units/aircraft.svg b/client/public/themes/olympus/images/units/aircraft.svg new file mode 100644 index 00000000..f714a9af --- /dev/null +++ b/client/public/themes/olympus/images/units/aircraft.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css deleted file mode 100644 index ed623daa..00000000 --- a/client/public/themes/olympus/olympus.css +++ /dev/null @@ -1,226 +0,0 @@ -:root { - - /** Colours **/ - - /*** Coalition: neutral **/ - --primary-neutral : #949ba7; - --secondary-neutral-outline : #111111; - --secondary-neutral-text : #111111; - - /*** Coalition: blue **/ - --primary-blue : #247be2; - --secondary-blue-outline : #082e44; - --secondary-blue-text : #017DC1; - - /*** Coalition: red **/ - --primary-red : #ff5858; - --secondary-red-outline : #262222; - --secondary-red-text : #D42121; - - --accent-green : #8bff63; - --accent-light-blue : #5ca7ff; - --accent-light-red : #F5B6B6; - - --background-grey : #3d4651; - --background-slate-blue : #363c43; - --background-offwhite : #f2f2f3; - --background-steel : #202831; - - --secondary-dark-steel : #181e25; - --secondary-gunmetal-grey : #2f2f2f; - --secondary-light-grey : #797e83; - --secondary-yellow : #ffd46893; - - --background-hover : #f2f2f333; - - --nav-text : #ECECEC; - - - --ol-select-secondary: #545F6C; - - - /*** General border radii **/ - - --border-radius-xs : 2px; - --border-radius-sm : 5px; - --border-radius-md : 10px; - --border-radius-lg : 15px; - - - /*** Font stuff **/ - --font-weight-bolder : 600; - - - - /*** Navbar ***/ - - --visibility-control-aircraft-visible-url: url( "/themes/olympus/images/visibility_aircraft_visible.svg" ); - --visibility-control-aircraft-hidden-url: url( "/themes/olympus/images/visibility_aircraft_hidden.svg" ); - - --visibility-control-groundunit-visible-url: url( "/themes/olympus/images/visibility_ground_visible.svg" ); - --visibility-control-groundunit-hidden-url: url( "/themes/olympus/images/visibility_ground_hidden.svg" ); - - --visibility-control-sam-visible-url: url( "/themes/olympus/images/visibility_sam_visible.svg" ); - --visibility-control-sam-hidden-url: url( "/themes/olympus/images/visibility_sam_hidden.svg" ); - - --visibility-control-navyunit-visible-url: url( "/themes/olympus/images/visibility_navyunit_visible.svg" ); - --visibility-control-navyunit-hidden-url: url( "/themes/olympus/images/visibility_navyunit_hidden.svg" ); - - --visibility-control-threat-visible-url: url( "/themes/olympus/images/visibility_threat_visible.svg" ); - --visibility-control-threat-hidden-url: url( "/themes/olympus/images/visibility_threat_hidden.svg" ); - - - - /*** Unit marker settings ***/ - - - /*** All markers **/ - --unit-border-radius: var( --border-radius-xs ); - --unit-font-size: 14px; - --unit-font-weight: bolder; - --unit-height: 32px; - --unit-label-border-width: 2px; - --unit-spotlight-fill: var( --secondary-yellow ); - --unit-spotlight-radius: 26px; - --unit-stroke-width: 3px; - --unit-width: 32px; - - - /*** Air units ***/ - --unit-aircraft-ammo-gap: calc( 2px + var( --unit-stroke-width ) ); - --unit-aircraft-ammo-border-radius: 50%; - --unit-aircraft-ammo-border-width: 2px; - --unit-aircraft-ammo-radius: 2px; - --unit-aircraft-ammo-spacing: 2px; - --unit-aircraft-ammo-x:0px; - --unit-aircraft-ammo-y:30px; - --unit-aircraft-fuel-border-width: 2px; - --unit-aircraft-fuel-height: 6px; - --unit-aircraft-fuel-width: 36px; - --unit-aircraft-fuel-x:0px; - --unit-aircraft-fuel-y:22px; - --unit-aircraft-height: 28px; - --unit-aircraft-vvi-width: 4px; - --unit-aircraft-width: var( --unit-aircraft-height ); - - --unit-aircraft-marker-height: 50px; - --unit-aircraft-marker-width: 50px; - - --unit-aircraft-marker-blue-url: url( "/themes/olympus/images/icon_aircraft_blue.svg" ); - --unit-aircraft-marker-blue-hover-url: url( "/themes/olympus/images/icon_aircraft_blue_hover.svg" ); - --unit-aircraft-marker-blue-selected-url: url( "/themes/olympus/images/icon_aircraft_blue_selected.svg" ); - --unit-aircraft-marker-blue-dead-url: url( "/themes/olympus/images/icon_death_blue.svg" ); - - --unit-aircraft-marker-neutral-url: url( "/themes/olympus/images/icon_aircraft_neutral.svg" ); - --unit-aircraft-marker-neutral-hover-url: url( "/themes/olympus/images/icon_aircraft_neutral_hover.svg" ); - --unit-aircraft-marker-neutral-selected-url: url( "/themes/olympus/images/icon_aircraft_neutral_selected.svg" ); - --unit-aircraft-marker-neutral-dead-url: url( "/themes/olympus/images/icon_death_neutral.svg" ); - - --unit-aircraft-marker-red-url: url( "/themes/olympus/images/icon_aircraft_red.svg" ); - --unit-aircraft-marker-red-hover-url: url( "/themes/olympus/images/icon_aircraft_red_hover.svg" ); - --unit-aircraft-marker-red-selected-url: url( "/themes/olympus/images/icon_aircraft_red_selected.svg" ); - --unit-aircraft-marker-red-dead-url: url( "/themes/olympus/images/icon_death_red.svg" ); - - - /*** Air units' states ***/ - - --unit-aircraft-state-height: 50px; - --unit-aircraft-state-width: 50px; - - --unit-aircraft-state-rtb: url( "/themes/olympus/images/state_rtb.svg" ); - --unit-aircraft-state-idle: url( "/themes/olympus/images/state_idle.svg" ); - --unit-aircraft-state-attack: url( "/themes/olympus/images/state_attack.svg" ); - --unit-aircraft-state-follow: url( "/themes/olympus/images/state_follow.svg" ); - --unit-aircraft-state-refuel: url( "/themes/olympus/images/state_refuel.svg" ); - --unit-aircraft-state-human: url( "/themes/olympus/images/state_human.svg" ); - --unit-aircraft-state-dcs: url( "/themes/olympus/images/state_dcs.svg" ); - - /*** Ground ***/ - --unit-groundunit-marker-height: 50px; - --unit-groundunit-marker-width: 50px; - - --unit-groundunit-marker-blue-url: url( "/themes/olympus/images/icon_ground_blue.svg" ); - --unit-groundunit-marker-blue-hover-url: url( "/themes/olympus/images/icon_ground_blue_hover.svg" ); - --unit-groundunit-marker-blue-selected-url: url( "/themes/olympus/images/icon_ground_blue_selected.svg" ); - - --unit-groundunit-marker-neutral-url: url( "/themes/olympus/images/icon_ground_neutral.svg" ); - --unit-groundunit-marker-neutral-hover-url: url( "/themes/olympus/images/icon_ground_neutral_hover.svg" ); - --unit-groundunit-marker-neutral-selected-url: url( "/themes/olympus/images/icon_ground_neutral_selected.svg" ); - - --unit-groundunit-marker-red-url: url( "/themes/olympus/images/icon_ground_red.svg" ); - --unit-groundunit-marker-red-hover-url: url( "/themes/olympus/images/icon_ground_red_hover.svg" ); - --unit-groundunit-marker-red-selected-url: url( "/themes/olympus/images/icon_ground_red_selected.svg" ); - - - /*** SAMs ***/ - --unit-sam-marker-height: 50px; - --unit-sam-marker-width: 50px; - - --unit-sam-marker-blue-url: url( "/themes/olympus/images/icon_aa_blue.svg" ); - --unit-sam-marker-blue-hover-url: url( "/themes/olympus/images/icon_aa_blue_hover.svg" ); - --unit-sam-marker-blue-selected-url: url( "/themes/olympus/images/icon_aa_blue_selected.svg" ); - - --unit-sam-marker-neutral-url: url( "/themes/olympus/images/icon_aa_neutral.svg" ); - --unit-sam-marker-neutral-hover-url: url( "/themes/olympus/images/icon_aa_neutral_hover.svg" ); - --unit-sam-marker-neutral-selected-url: url( "/themes/olympus/images/icon_aa_neutral_selected.svg" ); - - --unit-sam-marker-red-url: url( "/themes/olympus/images/icon_aa_red.svg" ); - --unit-sam-marker-red-hover-url: url( "/themes/olympus/images/icon_aa_red_hover.svg" ); - --unit-sam-marker-red-selected-url: url( "/themes/olympus/images/icon_aa_red_selected.svg" ); - - - /*** navyunit ***/ - --unit-navyunit-marker-height: 50px; - --unit-navyunit-marker-width: 50px; - - --unit-navyunit-marker-blue-url: url( "/themes/olympus/images/icon_ship_blue.svg" ); - --unit-navyunit-marker-blue-hover-url: url( "/themes/olympus/images/icon_ship_blue_hover.svg" ); - --unit-navyunit-marker-blue-selected-url: url( "/themes/olympus/images/icon_ship_blue_selected.svg" ); - - --unit-navyunit-marker-neutral-url: url( "/themes/olympus/images/icon_ship_neutral.svg" ); - --unit-navyunit-marker-neutral-hover-url: url( "/themes/olympus/images/icon_ship_neutral_hover.svg" ); - --unit-navyunit-marker-neutral-selected-url: url( "/themes/olympus/images/icon_ship_neutral_selected.svg" ); - - --unit-navyunit-marker-red-url: url( "/themes/olympus/images/icon_ship_red.svg" ); - --unit-navyunit-marker-red-hover-url: url( "/themes/olympus/images/icon_ship_red_hover.svg" ); - --unit-navyunit-marker-red-selected-url: url( "/themes/olympus/images/icon_ship_red_selected.svg" ); - - - /*** Building ***/ - --unit-building-marker-height: 50px; - --unit-building-marker-width: 50px; - - --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" ); - - - /*** Weapons ***/ - --unit-missile-marker-height: 50px; - --unit-missile-marker-width: 50px; - - --unit-missile-marker-blue-url: url( "/themes/olympus/images/icon_missile_blue.svg" ); - --unit-missile-marker-neutral-url: url( "/themes/olympus/images/icon_missile_neutral.svg" ); - --unit-missile-marker-red-url: url( "/themes/olympus/images/icon_missile_red.svg" ); - - --unit-bomb-marker-height: 50px; - --unit-bomb-marker-width: 50px; - - --unit-bomb-marker-blue-url: url( "/themes/olympus/images/icon_bomb_blue.svg" ); - --unit-bomb-marker-neutral-url: url( "/themes/olympus/images/icon_bomb_neutral.svg" ); - --unit-bomb-marker-red-url: url( "/themes/olympus/images/icon_bomb_red.svg" ); - - - /*** Context menu ***/ - --spawn-aircraft-url: url( "/themes/olympus/images/spawn_aircraft.svg" ); - --spawn-groundunit-url: url( "/themes/olympus/images/spawn_ground.svg" ); - --spawn-smoke-url: url( "/themes/olympus/images/spawn_smoke.svg" ); - - /*** Airbase ***/ - --airbase-marker-height: 63px; - --airbase-marker-width: 63px; - - --airbase-marker-blue-url: url( "/themes/olympus/images/icon_airbase_blue.svg" ); - --airbase-marker-neutral-url: url( "/themes/olympus/images/icon_airbase_neutral.svg" ); - --airbase-marker-red-url: url( "/themes/olympus/images/icon_airbase_red.svg" ); -} \ No newline at end of file diff --git a/client/public/themes/olympus/theme.css b/client/public/themes/olympus/theme.css new file mode 100644 index 00000000..06595b96 --- /dev/null +++ b/client/public/themes/olympus/theme.css @@ -0,0 +1,199 @@ +:root { + + /** Colours **/ + + /*** Coalition: neutral **/ + --primary-neutral: #949ba7; + --secondary-neutral-outline: #111111; + --secondary-neutral-text: #111111; + + /*** Coalition: blue **/ + --primary-blue: #247be2; + --secondary-blue-outline: #082e44; + --secondary-blue-text: #017DC1; + + /*** Coalition: red **/ + --primary-red: #ff5858; + --secondary-red-outline: #262222; + --secondary-red-text: #D42121; + + --accent-green: #8bff63; + --accent-light-blue: #5ca7ff; + --accent-light-red: #F5B6B6; + + --background-grey: #3d4651; + --background-slate-blue: #363c43; + --background-offwhite: #f2f2f3; + --background-steel: #202831; + + --secondary-dark-steel: #181e25; + --secondary-gunmetal-grey: #2f2f2f; + --secondary-light-grey: #797e83; + --secondary-yellow: #ffd46893; + + --background-hover: #f2f2f333; + + --nav-text: #ECECEC; + + --ol-select-secondary: #545F6C; + + /*** General border radii **/ + --border-radius-xs: 2px; + --border-radius-sm: 5px; + --border-radius-md: 10px; + --border-radius-lg: 15px; + + /*** Font stuff **/ + --font-weight-bolder: 600; + + /*** Navbar ***/ + --visibility-control-aircraft-visible-url: url("/themes/olympus/images/visibility_aircraft_visible.svg"); + --visibility-control-aircraft-hidden-url: url("/themes/olympus/images/visibility_aircraft_hidden.svg"); + + --visibility-control-groundunit-visible-url: url("/themes/olympus/images/visibility_ground_visible.svg"); + --visibility-control-groundunit-hidden-url: url("/themes/olympus/images/visibility_ground_hidden.svg"); + + --visibility-control-sam-visible-url: url("/themes/olympus/images/visibility_sam_visible.svg"); + --visibility-control-sam-hidden-url: url("/themes/olympus/images/visibility_sam_hidden.svg"); + + --visibility-control-navyunit-visible-url: url("/themes/olympus/images/visibility_navyunit_visible.svg"); + --visibility-control-navyunit-hidden-url: url("/themes/olympus/images/visibility_navyunit_hidden.svg"); + + --visibility-control-threat-visible-url: url("/themes/olympus/images/visibility_threat_visible.svg"); + --visibility-control-threat-hidden-url: url("/themes/olympus/images/visibility_threat_hidden.svg"); + + /*** Unit marker settings ***/ + /*** All markers **/ + --unit-border-radius: var(--border-radius-xs); + --unit-font-size: 14px; + --unit-font-weight: bolder; + --unit-label-border-width: 2px; + --unit-spotlight-fill: var(--secondary-yellow); + --unit-spotlight-radius: 26px; + --unit-stroke-width: 3px; + --unit-height: 50px; + --unit-width: 50px; + + /*** Air units ***/ + --unit-aircraft-ammo-gap: calc(2px + var(--unit-stroke-width)); + --unit-aircraft-ammo-border-radius: 50%; + --unit-aircraft-ammo-border-width: 2px; + --unit-aircraft-ammo-radius: 2px; + --unit-aircraft-ammo-spacing: 2px; + --unit-aircraft-ammo-x: 0px; + --unit-aircraft-ammo-y: 30px; + --unit-aircraft-fuel-border-width: 2px; + --unit-aircraft-fuel-height: 6px; + --unit-aircraft-fuel-width: 36px; + --unit-aircraft-fuel-x: 0px; + --unit-aircraft-fuel-y: 22px; + --unit-aircraft-height: 28px; + --unit-aircraft-vvi-width: 4px; + --unit-aircraft-width: var(--unit-aircraft-height); + + --unit-aircraft-marker-height: 50px; + --unit-aircraft-marker-width: 50px; + + --unit-aircraft-icon: url("/resources/theme/images/units/aircraft.svg"); + + /*** Air units' states ***/ + --unit-aircraft-state-height: 50px; + --unit-aircraft-state-width: 50px; + + --unit-aircraft-state-rtb: url("/themes/olympus/images/state_rtb.svg"); + --unit-aircraft-state-idle: url("/themes/olympus/images/state_idle.svg"); + --unit-aircraft-state-attack: url("/themes/olympus/images/state_attack.svg"); + --unit-aircraft-state-follow: url("/themes/olympus/images/state_follow.svg"); + --unit-aircraft-state-refuel: url("/themes/olympus/images/state_refuel.svg"); + --unit-aircraft-state-human: url("/themes/olympus/images/state_human.svg"); + --unit-aircraft-state-dcs: url("/themes/olympus/images/state_dcs.svg"); + + /*** Ground ***/ + --unit-groundunit-marker-height: 50px; + --unit-groundunit-marker-width: 50px; + + --unit-groundunit-marker-blue-url: url("/themes/olympus/images/icon_ground_blue.svg"); + --unit-groundunit-marker-blue-hover-url: url("/themes/olympus/images/icon_ground_blue_hover.svg"); + --unit-groundunit-marker-blue-selected-url: url("/themes/olympus/images/icon_ground_blue_selected.svg"); + + --unit-groundunit-marker-neutral-url: url("/themes/olympus/images/icon_ground_neutral.svg"); + --unit-groundunit-marker-neutral-hover-url: url("/themes/olympus/images/icon_ground_neutral_hover.svg"); + --unit-groundunit-marker-neutral-selected-url: url("/themes/olympus/images/icon_ground_neutral_selected.svg"); + + --unit-groundunit-marker-red-url: url("/themes/olympus/images/icon_ground_red.svg"); + --unit-groundunit-marker-red-hover-url: url("/themes/olympus/images/icon_ground_red_hover.svg"); + --unit-groundunit-marker-red-selected-url: url("/themes/olympus/images/icon_ground_red_selected.svg"); + + + /*** SAMs ***/ + --unit-sam-marker-height: 50px; + --unit-sam-marker-width: 50px; + + --unit-sam-marker-blue-url: url("/themes/olympus/images/icon_aa_blue.svg"); + --unit-sam-marker-blue-hover-url: url("/themes/olympus/images/icon_aa_blue_hover.svg"); + --unit-sam-marker-blue-selected-url: url("/themes/olympus/images/icon_aa_blue_selected.svg"); + + --unit-sam-marker-neutral-url: url("/themes/olympus/images/icon_aa_neutral.svg"); + --unit-sam-marker-neutral-hover-url: url("/themes/olympus/images/icon_aa_neutral_hover.svg"); + --unit-sam-marker-neutral-selected-url: url("/themes/olympus/images/icon_aa_neutral_selected.svg"); + + --unit-sam-marker-red-url: url("/themes/olympus/images/icon_aa_red.svg"); + --unit-sam-marker-red-hover-url: url("/themes/olympus/images/icon_aa_red_hover.svg"); + --unit-sam-marker-red-selected-url: url("/themes/olympus/images/icon_aa_red_selected.svg"); + + + /*** navyunit ***/ + --unit-navyunit-marker-height: 50px; + --unit-navyunit-marker-width: 50px; + + --unit-navyunit-marker-blue-url: url("/themes/olympus/images/icon_ship_blue.svg"); + --unit-navyunit-marker-blue-hover-url: url("/themes/olympus/images/icon_ship_blue_hover.svg"); + --unit-navyunit-marker-blue-selected-url: url("/themes/olympus/images/icon_ship_blue_selected.svg"); + + --unit-navyunit-marker-neutral-url: url("/themes/olympus/images/icon_ship_neutral.svg"); + --unit-navyunit-marker-neutral-hover-url: url("/themes/olympus/images/icon_ship_neutral_hover.svg"); + --unit-navyunit-marker-neutral-selected-url: url("/themes/olympus/images/icon_ship_neutral_selected.svg"); + + --unit-navyunit-marker-red-url: url("/themes/olympus/images/icon_ship_red.svg"); + --unit-navyunit-marker-red-hover-url: url("/themes/olympus/images/icon_ship_red_hover.svg"); + --unit-navyunit-marker-red-selected-url: url("/themes/olympus/images/icon_ship_red_selected.svg"); + + + /*** Building ***/ + --unit-building-marker-height: 50px; + --unit-building-marker-width: 50px; + + --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"); + + + /*** Weapons ***/ + --unit-missile-marker-height: 50px; + --unit-missile-marker-width: 50px; + + --unit-missile-marker-blue-url: url("/themes/olympus/images/icon_missile_blue.svg"); + --unit-missile-marker-neutral-url: url("/themes/olympus/images/icon_missile_neutral.svg"); + --unit-missile-marker-red-url: url("/themes/olympus/images/icon_missile_red.svg"); + + --unit-bomb-marker-height: 50px; + --unit-bomb-marker-width: 50px; + + --unit-bomb-marker-blue-url: url("/themes/olympus/images/icon_bomb_blue.svg"); + --unit-bomb-marker-neutral-url: url("/themes/olympus/images/icon_bomb_neutral.svg"); + --unit-bomb-marker-red-url: url("/themes/olympus/images/icon_bomb_red.svg"); + + + /*** Context menu ***/ + --spawn-aircraft-url: url("/themes/olympus/images/spawn_aircraft.svg"); + --spawn-groundunit-url: url("/themes/olympus/images/spawn_ground.svg"); + --spawn-smoke-url: url("/themes/olympus/images/spawn_smoke.svg"); + + /*** Airbase ***/ + --airbase-marker-height: 63px; + --airbase-marker-width: 63px; + + --airbase-marker-blue-url: url("/themes/olympus/images/icon_airbase_blue.svg"); + --airbase-marker-neutral-url: url("/themes/olympus/images/icon_airbase_neutral.svg"); + --airbase-marker-red-url: url("/themes/olympus/images/icon_airbase_red.svg"); +} \ No newline at end of file diff --git a/client/routes/resources.js b/client/routes/resources.js new file mode 100644 index 00000000..6e6778bb --- /dev/null +++ b/client/routes/resources.js @@ -0,0 +1,31 @@ +const express = require('express'); +const router = express.Router(); +const fs = require('fs'); +const path = require('path'); +const url = require('url'); + +var theme = "olympus"; + +router.get('/theme/*', function (req, res, next) { + if (url.parse(req.url).pathname.slice(-4).toLowerCase() === ".svg") + { + const localPath = path.join(__dirname, '..', 'public', url.parse(req.url).pathname.replace("theme", "themes/" + theme)); + fs.readFile(localPath, function(err, data) { + if (err) { + res.sendStatus(404); + } else { + var svgString = data.toString('utf8'); + for (key in req.query) + svgString = svgString.replaceAll(key, req.query[key]); + + res.header('Content-Type', 'image/svg+xml'); + res.send(svgString); + } + }); + } + else { + res.redirect(req.url.replace("theme", "themes/" + theme)); + } +}); + +module.exports = router; diff --git a/client/src/units/unit.ts b/client/src/units/unit.ts index 161d7fd4..f98dff6e 100644 --- a/client/src/units/unit.ts +++ b/client/src/units/unit.ts @@ -141,7 +141,7 @@ export class Unit extends Marker { /* 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"); + this.getElement()?.querySelector(`[data-object|="unit"]`)?.toggleAttribute("data-is-selected", selected); if (selected) document.dispatchEvent(new CustomEvent("unitSelection", { detail: this })); else @@ -539,6 +539,15 @@ export class Unit extends Marker { var element = this.getElement(); if (element != null) { + /* Set the element styling */ + const unitMarker = element.querySelector(".unit-marker") as HTMLElement; + + const styles = getComputedStyle(document.documentElement); + const primaryBlue = styles.getPropertyValue('--primary-blue'); + + if (unitMarker) + unitMarker.style.backgroundImage = `url("/resources/theme/images/units/aircraft.svg?background-colour=${primaryBlue}")`; + /* Draw the velocity vector */ element.querySelector(".unit-vvi")?.setAttribute("style", `height: ${15 + this.getFlightData().speed / 5}px;`); diff --git a/client/views/index.ejs b/client/views/index.ejs index afb19752..80ac37c0 100644 --- a/client/views/index.ejs +++ b/client/views/index.ejs @@ -2,8 +2,8 @@ Olympus client - - + +