From bbce7a8179cad39feafe3f98026c5321ace6c7e8 Mon Sep 17 00:00:00 2001 From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com> Date: Tue, 5 Sep 2023 16:34:12 +0200 Subject: map and counters --- play.html | 242 ++++++++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 188 insertions(+), 54 deletions(-) (limited to 'play.html') diff --git a/play.html b/play.html index bddb39b..726f03d 100644 --- a/play.html +++ b/play.html @@ -5,7 +5,6 @@ ALGERIA - @@ -14,19 +13,21 @@ main { background-color: dimgray } -#role_Red .role_name { background-color: salmon; } -#role_Blue .role_name { background-color: skyblue; } +#role_FLN .role_name { background-color: #006633; color: white;} +#role_FRA .role_name { background-color: #002654; color: white; } #mapwrap { - width: 1100px; - height: 850px; + width: 1400px; + height: 824px; box-shadow: 0px 1px 10px #0008; } #map { - width: 1100px; - height: 850px; - background-image: url(map100.png); + width: 1400px; + height: 824px; + background-size: 1400px 824px; + background-position: center; + background-image: url(map.jpg); } #map div { @@ -36,42 +37,96 @@ main { background-color: dimgray } transition-timing-function: ease; } -.token { - width: 58px; - height: 64px; - background-size: 58px 64px; - filter: drop-shadow(0px 2px 4px #0008); -} - -.tile { - width: 75px; - height: 75px; +.counter { + width: 68px; + height: 68px; background-repeat: no-repeat; - background-size: 50px 50px; + background-size: 68px 68px; background-position: center; border-width: 2px; border-style: solid; box-shadow: 0 0 0 1px #222, 1px 2px 4px #0008; } -.token.white { background-image: url(images/token_white.svg) } -.token.red { background-image: url(images/token_red.svg) } -.token.blue { background-image: url(images/token_blue.svg) } +.counter-map { + width: 48px; + height: 48px; + background-size: 48px 48px; + border-width: 1px; +} + +.counter-med { + width: 35px; + height: 35px; + background-size: 35px 35px; + border-width: 1px; +} + +.counter-mini { + width: 24px; + height: 24px; + background-size: 24px 24px; + border-width: 1px; +} + +.selected { + border-color: yellow; +} + +.counter.fr_al_5_mob_inf { background-image: url(counters/fr_al_5_mob_inf.png) } +.counter.fr_al_7_mob_arm { background-image: url(counters/fr_al_7_mob_arm.png) } +.counter.fr_al_static { background-image: url(counters/fr_al_static.png) } +.counter.fr_div_7_inf { background-image: url(counters/fr_div_7_inf.png) } +.counter.fr_div_25 { background-image: url(counters/fr_div_25.png) } +.counter.fr_elite_9_inf { background-image: url(counters/fr_elite_9_inf.png) } +.counter.fr_elite_9_mar { background-image: url(counters/fr_elite_9_mar.png) } +.counter.fr_elite_9_para { background-image: url(counters/fr_elite_9_para.png) } +.counter.fr_elite_10 { background-image: url(counters/fr_elite_10.png) } +.counter.fr_reg_6_inf { background-image: url(counters/fr_reg_6_inf.png) } + +.counter.fr_al_5_mob_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_al_5_mob_inf.png) } +.counter.fr_al_7_mob_arm.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_al_7_mob_arm.png) } +.counter.fr_al_static.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_al_static.png) } +.counter.fr_div_7_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_div_7_inf.png) } +.counter.fr_div_25.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_div_25.png) } +.counter.fr_elite_9_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_9_inf.png) } +.counter.fr_elite_9_mar.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_9_mar.png) } +.counter.fr_elite_9_para.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_9_para.png) } +.counter.fr_elite_10.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_10.png) } +.counter.fr_reg_6_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_reg_6_inf.png) } + +.counter.front { background-image: url(counters/front.png) } +.counter.cadre { background-image: url(counters/cadre.png) } +.counter.company { background-image: url(counters/company.png) } -.tile.white { background-image: url(images/tile_white.png) } -.tile.red { background-image: url(images/tile_red.png) } -.tile.blue { background-image: url(images/tile_blue.png) } -.tile.gold { background-image: url(images/tile_gold.png) } -.tile.green { background-image: url(images/tile_green.png) } +.counter.front.neutralized { background-image: url(counters/neutralized.png), url(counters/front.png) } +.counter.cadre.neutralized { background-image: url(counters/neutralized.png), url(counters/cadre.png) } +.counter.company.neutralized { background-image: url(counters/neutralized.png), url(counters/company.png) } -.tile.red { background-color: hsl(0,90%,49%); border-color: hsl(0,90%,59%) hsl(0,90%,39%) hsl(0,90%,39%) hsl(0,90%,59%); } -.tile.white { background-color: hsl(0,0%,94%); border-color: hsl(0,0%,100%) hsl(0,0%,84%) hsl(0,0%,84%) hsl(0,0%,100%); } -.tile.blue { background-color: hsl(201,80%,47%); border-color: hsl(201,80%,57%) hsl(201,80%,37%) hsl(201,80%,37%) hsl(201,80%,57%); } -.tile.gold { background-color: hsl(50,81%,59%); border-color: hsl(50,81%,69%) hsl(50,81%,49%) hsl(50,81%,49%) hsl(50,81%,69%); } -.tile.green { background-color: hsl(125,21%,33%); border-color: hsl(125,21%,43%) hsl(125,21%,23%) hsl(125,21%,23%) hsl(125,21%,43%); } +.counter.psl-fln { background-image: url(counters/psl.png) } +.counter.psl-fra { background-image: url(counters/psl_fr.png) } +.counter.ap { background-image: url(counters/ap.png) } + +.counter.naval-pts { background-image: url(counters/naval.png) } +.counter.helo-pts-max { background-image: url(counters/helo_max.png) } +.counter.helo-pts-avail { background-image: url(counters/helo_avail.png) } +.counter.air-pts-max { background-image: url(counters/air_max.png) } +.counter.air-pts-avail { background-image: url(counters/air_avail.png) } + +.counter.border_zone { background-image: url(counters/border.png)} +.counter.remote { background-image: url(counters/remote.png)} +.counter.terror { background-image: url(counters/terror.png)} + +.counter.control_fln { background-image: url(counters/control.png)} +.counter.control_fra { background-image: url(counters/control_fr.png)} +.counter.control_neut { background-image: url(counters/neut.png)} + +.counter.oas_fln { background-image: url(counters/oas_fln.png)} +.counter.oas_fra { background-image: url(counters/oas_fr.png)} +.counter.oas { background-image: url(counters/oas.png)} .panel { - max-width: 1100px; + max-width: 900px; margin: 36px auto; background-color: #555; } @@ -90,7 +145,29 @@ main { background-color: dimgray } justify-content: start; flex-wrap: wrap; padding: 20px; - gap: 20px; + gap: 14px; +} + +.track { + position: relative; +} + +.track div { + position: absolute; +} + +#psl_track { + width: 868px; + height: 821px; + background-size: 868px 821px; + background-image: url(psl_track.png); +} + +#air_naval_track { + width: 813px; + height: 112px; + background-size: 813px 112px; + background-image: url(air-helo_track.png); } @@ -102,8 +179,10 @@ main { background-color: dimgray }
- Rules + Rules + Legend Charts +
Resign
@@ -116,15 +195,15 @@ main { background-color: dimgray }