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 Roll | 1 | 2-4 | 5-8 | 9-15 | 16-24 | 25-36 | 37-50 | 51+
+ |
---|
1 | - | - | - | - | 1 | 1 | 1 | 2
+ |
2 | - | - | - | 1 | 1 | 1 | 2 | 2
+ |
3 | - | - | 1 | 1 | 2 | 2 | 2 | 3
+ |
4 | - | 1 | 1 | 2 | 2 | 2 | 3 | 4
+ |
5 | 1 | 1 | 2 | 2 | 2 | 3 | 4 | 4
+ |
6 | 1 | 2 | 2 | 2 | 3 | 4 | 4 | 5
+ |
+
+FLN AP Cost & Sources
+
+
+
+Activity | APs | Units | Comments
+ |
---|
Build | 3 (2) | 0 | non-neutralized Front needed; only Cadres or Companies may be build. Only 2 AP to build in Morocco or Tunisia
+ |
Augment | 3 | 1 Cadre | Cadre augments to Front; only one Front per area and not in Remote
+ |
Harass | 0 | 1 Company | roll on Combat Results Table; French fire back at half firepower. May do any number in area per turn but Companies attack singly.
+ |
Propaganda | 1 | 1 (any unit will do) | any FLN unit will do; one per area, not in Remote
+ |
Strike (urban only) | 5 | 1 Front + Cadres | non-neutralized Front needed; each Cadre assisting gives +1 DRM
+ |
Intimidate | 3 | 1 (any mobile unit) | only one area per turn
+ |
Movement | 0 | 1 (any mobile unit) | units attempt movement one at a time
+ |
+
+
+
+Source | APs 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:
+
+ |
Foreign Governments | per random event: AP arrive by sea and some may be intercepted by French Navy (11.7)
+ |
FLN PSL | AP = 10% of current FLN PSL (round fractions down)
+ |
+
+
+Mission Success
+
+
+
+Die Roll | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+ |
---|
Result | 0+ | 0+ | 1+ | 1 | 1 | 2 | 2 | 3@ | 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
+
+
+
+
+
+
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 }