From a05ebb0e24cd34cfc47d726089a2922bb5a47c53 Mon Sep 17 00:00:00 2001 From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com> Date: Fri, 15 Sep 2023 19:56:47 +0200 Subject: cleanup counters --- play.html | 480 ++++++++++++++------------------------------------------------ 1 file changed, 109 insertions(+), 371 deletions(-) diff --git a/play.html b/play.html index c022279..2182e31 100644 --- a/play.html +++ b/play.html @@ -39,330 +39,100 @@ main { background-color: dimgray } transition-timing-function: ease; } -.counter { - width: 68px; - height: 68px; - background-repeat: no-repeat; - background-size: 68px 68px; - background-position: center; - border-width: 2px; - border-style: solid; - box-shadow: 0 0 0 1px #222, 1px 2px 4px #0008; -} - -.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; -} +/* COUNTERS */ -.selected { - border-color: yellow; -} - -/* UNITS */ - -#map .unit { +#map .counter { position: absolute; } -.unit { +.counter { background-size: 1000%; background-repeat: no-repeat; border-style: solid; transition: top 200ms, left 200ms, transform 200ms; } -.unit { +.counter { width: 39px; height: 39px; border-width: 3px; border-radius: 8px; + background-image: url(counters.svg); } -.unit.m { +.counter.m { width: 42px; height: 42px; border-width: 4px; } -.unit.revealed { - background-image: url(counters.svg); -} - -/* #mapwrap.fit .unit.revealed { - background-image: url(units-simple.svg); +/* #mapwrap.fit .counter { + background-image: url(counters-simple.svg); } */ -.unit.axis { - background-color: hsl(80, 20%, 60%); - border-color: hsl(80, 20%, 50%); - box-shadow: 0 0 2px 1px hsl(80, 20%, 20%); -} - -.unit.axis.eliminated, -.unit.axis.fired, -.unit.axis.moved:not(.disrupted):not(.unsupplied) { - border-color: hsl(80, 20%, 40%); -} - -.unit.axis.eliminated:not(.revealed), -.unit.axis.fired:not(.revealed), -.unit.axis.moved:not(.revealed) { - background-color: hsl(80, 20%, 50%); -} - -.unit.allied { - background-color: hsl(35, 40%, 60%); - border-color: hsl(35, 40%, 50%); - box-shadow: 0 0 2px 1px hsl(30, 40%, 20%); -} - -.unit.allied.eliminated, -.unit.allied.fired, -.unit.allied.moved:not(.disrupted):not(.unsupplied) { - border-color: hsl(35, 40%, 40%); -} - -.unit.allied.eliminated:not(.revealed), -.unit.allied.fired:not(.revealed), -.unit.allied.moved:not(.revealed) { - background-color: hsl(35, 40%, 50%); -} - -.unit.moved:not(.revealed) { - background-image: url(moved.svg); - background-size: 75%; - background-position: center bottom; -} - -.unit.eliminated:not(.revealed) { - background-image: url(eliminated.svg); - background-size: 60%; - background-position: center; -} - -.unit.axis.revealed { - background-color: #abba8e; -} - -.unit.axis.italian.revealed { - background-color: #f9e3b3; -} - -.unit.allied.revealed { - background-color: #e4d1ab; -} - -.unit.disrupted { - border-color: #222; - box-shadow: 0 0 2px 1px black; -} - -.unit.disrupted:not(.revealed) { - background-image: url(disrupted.svg); - background-size: 75%; - background-position: center; -} - -.unit.unsupplied { - border-color: #c00; - box-shadow: 0 0 2px 1px darkred; -} - -.unit.unsupplied:not(.revealed) { - background-image: url(unsupplied.svg); - background-size: 75%; - background-position: center; -} - -.unit.disrupted.unsupplied { - border-color: #222 #c00; -} - -.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 { - border-color: #c00 #222; -} - -.unit.disrupted.unsupplied:not(.revealed) { - background-image: url(unsupplied.svg), url(disrupted.svg); - background-size: 50%, 50%; - background-position: 0% 90%, 90% 10%; -} - -.unit.action { +.counter.action { box-shadow: 0 0 0 2px white; } -.unit.action.hit { - box-shadow: 0 0 0 2px white, 0 0 0 4px black; -} - -.unit.selected { +.counter.selected { box-shadow: 0 0 0 2px yellow; } -.unit.u0{background-position:0% 0%} -.unit.u1{background-position:11.11111111111111% 0%} -.unit.u2{background-position:22.22222222222222% 0%} -.unit.u3{background-position:33.33333333333333% 0%} -.unit.u4{background-position:44.44444444444444% 0%} -.unit.u5{background-position:55.55555555555556% 0%} -.unit.u6{background-position:66.66666666666666% 0%} -.unit.u7{background-position:77.77777777777777% 0%} -.unit.u8{background-position:88.88888888888889% 0%} -.unit.u9{background-position:100% 0%} -.unit.u10{background-position:0% 11.11111111111111%} -.unit.u11{background-position:11.11111111111111% 11.11111111111111%} -.unit.u12{background-position:22.22222222222222% 11.11111111111111%} -.unit.u13{background-position:33.33333333333333% 11.11111111111111%} -.unit.u14{background-position:44.44444444444444% 11.11111111111111%} -.unit.u15{background-position:55.55555555555556% 11.11111111111111%} -.unit.u16{background-position:66.66666666666666% 11.11111111111111%} -.unit.u17{background-position:77.77777777777777% 11.11111111111111%} -.unit.u18{background-position:88.88888888888889% 11.11111111111111%} -.unit.u19{background-position:100% 11.11111111111111%} -.unit.u20{background-position:0% 22.22222222222222%} -.unit.u21{background-position:11.11111111111111% 22.22222222222222%} -.unit.u22{background-position:22.22222222222222% 22.22222222222222%} -.unit.u23{background-position:33.33333333333333% 22.22222222222222%} -.unit.u24{background-position:44.44444444444444% 22.22222222222222%} -.unit.u25{background-position:55.55555555555556% 22.22222222222222%} -.unit.u26{background-position:66.66666666666666% 22.22222222222222%} -.unit.u27{background-position:77.77777777777777% 22.22222222222222%} -.unit.u28{background-position:88.88888888888889% 22.22222222222222%} -.unit.u29{background-position:100% 22.22222222222222%} -.unit.u30{background-position:0% 33.33333333333333%} -.unit.u31{background-position:11.11111111111111% 33.33333333333333%} -.unit.u32{background-position:22.22222222222222% 33.33333333333333%} -.unit.u33{background-position:33.33333333333333% 33.33333333333333%} -.unit.u34{background-position:44.44444444444444% 33.33333333333333%} -.unit.u35{background-position:55.55555555555556% 33.33333333333333%} -.unit.u36{background-position:66.66666666666666% 33.33333333333333%} -.unit.u37{background-position:77.77777777777777% 33.33333333333333%} -.unit.u38{background-position:88.88888888888889% 33.33333333333333%} -.unit.u39{background-position:100% 33.33333333333333%} -.unit.u40{background-position:0% 44.44444444444444%} -.unit.u41{background-position:11.11111111111111% 44.44444444444444%} -.unit.u42{background-position:22.22222222222222% 44.44444444444444%} -.unit.u43{background-position:33.33333333333333% 44.44444444444444%} -.unit.u44{background-position:44.44444444444444% 44.44444444444444%} -.unit.u45{background-position:55.55555555555556% 44.44444444444444%} -.unit.u46{background-position:66.66666666666666% 44.44444444444444%} -.unit.u47{background-position:77.77777777777777% 44.44444444444444%} -.unit.u48{background-position:88.88888888888889% 44.44444444444444%} -.unit.u49{background-position:100% 44.44444444444444%} -.unit.u50{background-position:0% 55.55555555555556%} -.unit.u51{background-position:11.11111111111111% 55.55555555555556%} -.unit.u52{background-position:22.22222222222222% 55.55555555555556%} -.unit.u53{background-position:33.33333333333333% 55.55555555555556%} -.unit.u54{background-position:44.44444444444444% 55.55555555555556%} -.unit.u55{background-position:55.55555555555556% 55.55555555555556%} -.unit.u56{background-position:66.66666666666666% 55.55555555555556%} -.unit.u57{background-position:77.77777777777777% 55.55555555555556%} -.unit.u58{background-position:88.88888888888889% 55.55555555555556%} -.unit.u59{background-position:100% 55.55555555555556%} -.unit.u60{background-position:0% 66.66666666666666%} -.unit.u61{background-position:11.11111111111111% 66.66666666666666%} -.unit.u62{background-position:22.22222222222222% 66.66666666666666%} -.unit.u63{background-position:33.33333333333333% 66.66666666666666%} -.unit.u64{background-position:44.44444444444444% 66.66666666666666%} -.unit.u65{background-position:55.55555555555556% 66.66666666666666%} -.unit.u66{background-position:66.66666666666666% 66.66666666666666%} -.unit.u67{background-position:77.77777777777777% 66.66666666666666%} -.unit.u68{background-position:88.88888888888889% 66.66666666666666%} -.unit.u69{background-position:100% 66.66666666666666%} -.unit.u70{background-position:0% 77.77777777777777%} -.unit.u71{background-position:11.11111111111111% 77.77777777777777%} -.unit.u72{background-position:22.22222222222222% 77.77777777777777%} -.unit.u73{background-position:33.33333333333333% 77.77777777777777%} -.unit.u74{background-position:44.44444444444444% 77.77777777777777%} -.unit.u75{background-position:55.55555555555556% 77.77777777777777%} -.unit.u76{background-position:66.66666666666666% 77.77777777777777%} -.unit.u77{background-position:77.77777777777777% 77.77777777777777%} -.unit.u78{background-position:88.88888888888889% 77.77777777777777%} -.unit.u79{background-position:100% 77.77777777777777%} -.unit.u80{background-position:0% 88.88888888888889%} -.unit.u81{background-position:11.11111111111111% 88.88888888888889%} -.unit.u82{background-position:22.22222222222222% 88.88888888888889%} -.unit.u83{background-position:33.33333333333333% 88.88888888888889%} -.unit.u84{background-position:44.44444444444444% 88.88888888888889%} -.unit.u85{background-position:55.55555555555556% 88.88888888888889%} -.unit.u86{background-position:66.66666666666666% 88.88888888888889%} -.unit.u87{background-position:77.77777777777777% 88.88888888888889%} -.unit.u88{background-position:88.88888888888889% 88.88888888888889%} -.unit.u89{background-position:100% 88.88888888888889%} -.unit.u90{background-position:0% 100%} -.unit.u91{background-position:11.11111111111111% 100%} -.unit.u92{background-position:22.22222222222222% 100%} -.unit.u93{background-position:33.33333333333333% 100%} - -.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) } - -.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) } - -.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)} +.counter.turn_now{background-position:0% 0%} +.counter.fln_psl{background-position:11.11111111111111% 0%} +.counter.fln_ap{background-position:22.22222222222222% 0%} +.counter.gov_psl{background-position:33.33333333333333% 0%} +.counter.fln_control{background-position:44.44444444444444% 0%} +.counter.gov_control{background-position:55.55555555555556% 0%} +.counter.oas_active{background-position:66.66666666666666% 0%} +.counter.remote{background-position:77.77777777777777% 0%} +.counter.terror{background-position:88.88888888888889% 0%} + +.counter.air_avail{background-position:0% 11.11111111111111%} +.counter.air_max{background-position:11.11111111111111% 11.11111111111111%} +.counter.helo_avail{background-position:22.22222222222222% 11.11111111111111%} +.counter.helo_max{background-position:33.33333333333333% 11.11111111111111%} +.counter.naval_pts{background-position:44.44444444444444% 11.11111111111111%} +.counter.border_zone{background-position:55.55555555555556% 11.11111111111111%} + +.counter.fr_xx_2{background-position:0% 22.22222222222222%} +.counter.fr_xx_4{background-position:11.11111111111111% 22.22222222222222%} +.counter.fr_xx_9{background-position:22.22222222222222% 22.22222222222222%} +.counter.fr_xx_12{background-position:33.33333333333333% 22.22222222222222%} +.counter.fr_xx_13{background-position:44.44444444444444% 22.22222222222222%} +.counter.fr_xx_14{background-position:55.55555555555556% 22.22222222222222%} +.counter.fr_xx_19{background-position:66.66666666666666% 22.22222222222222%} +.counter.fr_xx_20{background-position:77.77777777777777% 22.22222222222222%} +.counter.fr_xx_21{background-position:88.88888888888889% 22.22222222222222%} +.counter.fr_xx_29{background-position:100% 22.22222222222222%} + +.counter.fr_xx_27{background-position:0% 33.33333333333333%} +.counter.fr_xx_5{background-position:11.11111111111111% 33.33333333333333%} +.counter.fr_xx_7{background-position:22.22222222222222% 33.33333333333333%} +.counter.fr_xx_dispersed{background-position:33.33333333333333% 33.33333333333333%} +.counter.fr_x{background-position:44.44444444444444% 33.33333333333333%} +.counter.fr_x_airmobile{background-position:55.55555555555556% 33.33333333333333%} + +.counter.fr_elite_x_para{background-position:0% 44.44444444444444%} +.counter.fr_elite_x_inf{background-position:11.11111111111111% 44.44444444444444%} +.counter.fr_elite_x_marine{background-position:22.22222222222222% 44.44444444444444%} +.counter.fr_elite_x_airmobile{background-position:33.33333333333333% 44.44444444444444%} +.counter.alg_x{background-position:44.44444444444444% 44.44444444444444%} +.counter.alg_x_airmobile{background-position:55.55555555555556% 44.44444444444444%} +.counter.alg_police{background-position:66.66666666666666% 44.44444444444444%} +/* .counter.alg_neut{background-position:77.77777777777777% 44.44444444444444%} */ + +.counter.fln_failek{background-position:0% 55.55555555555556%} +.counter.fln_band{background-position:11.11111111111111% 55.55555555555556%} +.counter.fln_cadre{background-position:22.22222222222222% 55.55555555555556%} +.counter.fln_front{background-position:33.33333333333333% 55.55555555555556%} +/* .counter.neut{background-position:44.44444444444444% 55.55555555555556%} */ + +.counter.neutralized { + background-color: rgba(255,255,255,0.6); + background-blend-mode: lighten; + border-color:grey; +} .panel { max-width: 900px; @@ -387,28 +157,6 @@ main { background-color: dimgray } 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); -} - @@ -419,7 +167,6 @@ main { background-color: dimgray } @@ -530,9 +267,10 @@ main { background-color: dimgray }
FLN Supply
-
-
-
+
+
+
+
-- cgit v1.2.3