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 --- about.html | 3 +- info/charts.html | 54 ++++++++++++- info/legend.html | 12 +++ map.jpg | Bin 0 -> 674398 bytes map.png | Bin 0 -> 4462084 bytes play.html | 242 ++++++++++++++++++++++++++++++++++++++++++------------- play.js | 84 +++++++++++++++++++ rules.js | 207 +++++++++++++++++++++++++++++++++++++++++------ 8 files changed, 521 insertions(+), 81 deletions(-) create mode 100644 info/legend.html create mode 100644 map.jpg create mode 100644 map.png create mode 100644 play.js diff --git a/about.html b/about.html index 06831ff..75a46fb 100644 --- a/about.html +++ b/about.html @@ -10,6 +10,7 @@ Algeria makes the transition from being the 10th department of France to nationa Game Design by Brian Train. diff --git a/info/charts.html b/info/charts.html index 201024b..ccb2618 100644 --- a/info/charts.html +++ b/info/charts.html @@ -1,12 +1,64 @@ Algeria Chart +

Algeria Charts

+

Combat Results Table

+ +

+ +
Die Roll12-45-89-1516-2425-3637-5051+ +
1----1112 +
2---11122 +
3--112223 +
4-1122234 +
511222344 +
612223445 +
+ +

FLN AP Cost & Sources

+ +

+ +
ActivityAPsUnitsComments +
Build3 (2)0non-neutralized Front needed; only Cadres or Companies may be build. Only 2 AP to build in Morocco or Tunisia +
Augment31 CadreCadre augments to Front; only one Front per area and not in Remote +
Harass01 Companyroll on Combat Results Table; French fire back at half firepower. May do any number in area per turn but Companies attack singly. +
Propaganda11 (any unit will do)any FLN unit will do; one per area, not in Remote +
Strike (urban only)51 Front + Cadresnon-neutralized Front needed; each Cadre assisting gives +1 DRM +
Intimidate31 (any mobile unit)only one area per turn +
Movement01 (any mobile unit)units attempt movement one at a time +
+ +

+ + +
SourceAPs Received +
Areas under FLN Control (-1 AP if area is terrorized) +Urban: +
  • 5 if controlled
  • 2 if contested but non-neutralized FLN units are present
+
Rural: +
  • 2 if controlled
  • 1 if contested but non-neutralized FLN units are present
+
Remote: +
  • 0
+
Foreign Governmentsper random event: AP arrive by sea and some may be intercepted by French Navy (11.7) +
FLN PSLAP = 10% of current FLN PSL (round fractions down) +
+ +

Mission Success

+ +

+ +
Die Roll-1012345678 +
Result0+0+1+11223@4@5@ +
+

diff --git a/info/legend.html b/info/legend.html new file mode 100644 index 0000000..d762aeb --- /dev/null +++ b/info/legend.html @@ -0,0 +1,12 @@ + +Algeria Legend + + +
+[Algeria Legend] +
+ diff --git a/map.jpg b/map.jpg new file mode 100644 index 0000000..da42e1e Binary files /dev/null and b/map.jpg differ diff --git a/map.png b/map.png new file mode 100644 index 0000000..dbc22ca Binary files /dev/null and b/map.png differ 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 }