dynamic positioning of improvements (prepare for v2 playtest)

14 files changed, 61 insertions, 45 deletions

diff --git a/cards.1x/influence_s4b.jpg b/cards.1x/influence_s4_v2.jpg
index a360e4e..a360e4e 100644
--- a/cards.1x/influence_s4b.jpg
+++ b/cards.1x/influence_s4_v2.jpg
diff --git a/cards.1x/influence_s4b.png b/cards.1x/influence_s4_v2.png
index 2301a54..2301a54 100644
--- a/cards.1x/influence_s4b.png
+++ b/cards.1x/influence_s4_v2.png
diff --git a/cards.2x/influence_s4b.jpg b/cards.2x/influence_s4_v2.jpg
index 15928c4..15928c4 100644
--- a/cards.2x/influence_s4b.jpg
+++ b/cards.2x/influence_s4_v2.jpg
diff --git a/cards.2x/influence_s4b.png b/cards.2x/influence_s4_v2.png
index 9776c4e..9776c4e 100644
--- a/cards.2x/influence_s4b.png
+++ b/cards.2x/influence_s4_v2.png
diff --git a/images/amphitheater_back.png b/images/amphitheater_back.png
deleted file mode 100644
index 2dd84c3..0000000
--- a/images/amphitheater_back.png
+++ /dev/null
diff --git a/images/basilica_back.png b/images/basilica_back.png
deleted file mode 100644
index 70b9ecf..0000000
--- a/images/basilica_back.png
+++ /dev/null
diff --git a/images/amphitheater.png b/images/improvement_amphitheater.png
index 848f2a1..848f2a1 100644
--- a/images/amphitheater.png
+++ b/images/improvement_amphitheater.png
diff --git a/images/basilica.png b/images/improvement_basilica.png
index a315c0c..a315c0c 100644
--- a/images/basilica.png
+++ b/images/improvement_basilica.png
diff --git a/images/limes.png b/images/improvement_limes.png
index 0ae67c6..0ae67c6 100644
--- a/images/limes.png
+++ b/images/improvement_limes.png
diff --git a/images/limes_back.png b/images/limes_back.png
deleted file mode 100644
index c2958a5..0000000
--- a/images/limes_back.png
+++ /dev/null
diff --git a/info/cards.html b/info/cards.html
index 0c04635..955be11 100644
--- a/info/cards.html
+++ b/info/cards.html
@@ -67,7 +67,7 @@ h2 {
 .card.influence_s2{background-image:url(../cards.1x/influence_s2.jpg)}
 .card.influence_s3{background-image:url(../cards.1x/influence_s3.jpg)}
 .card.influence_s4{background-image:url(../cards.1x/influence_s4.jpg)}
-.card.influence_s4b{background-image:url(../cards.1x/influence_s4b.jpg)}
+.card.influence_s4_v2{background-image:url(../cards.1x/influence_s4_v2.jpg)}
 .card.influence_m2x{background-image:url(../cards.1x/influence_m2x.jpg)}
 .card.influence_m3x{background-image:url(../cards.1x/influence_m3x.jpg)}
 .card.influence_m4x{background-image:url(../cards.1x/influence_m4x.jpg)}
@@ -112,7 +112,7 @@ h2 {
 .card.influence_s2{background-image:url(../cards.2x/influence_s2.jpg)}
 .card.influence_s3{background-image:url(../cards.2x/influence_s3.jpg)}
 .card.influence_s4{background-image:url(../cards.2x/influence_s4.jpg)}
-.card.influence_s4b{background-image:url(../cards.2x/influence_s4b.jpg)}
+.card.influence_s4_v2{background-image:url(../cards.2x/influence_s4_v2.jpg)}
 .card.influence_m2x{background-image:url(../cards.2x/influence_m2x.jpg)}
 .card.influence_m3x{background-image:url(../cards.2x/influence_m3x.jpg)}
 .card.influence_m4x{background-image:url(../cards.2x/influence_m4x.jpg)}
@@ -160,7 +160,7 @@ h2 {
 <div class="card influence influence_s2x"></div>
 <div class="card influence influence_s3x"></div>
 <div class="card influence influence_s4x"></div>
-<div class="card influence influence_s4b"></div>
+<div class="card influence influence_s4_v2"></div>
 </div>
 <div class="list">
 <div class="card influence influence_p2x"></div>
diff --git a/play.css b/play.css
index 338230d..7c0835c 100644
--- a/play.css
+++ b/play.css
@@ -285,7 +285,7 @@ body.p2 #npg_galatia { display: block }
 
 /* COUNTERS */
 
-.amphitheater, .basilica, .limes { background-color: #efebea; }
+.improvement { background-color: #efebea; }
 .red { background-color: #ed1b2f; }
 .blue { background-color: #a0caec; }
 .yellow { background-color: #ffe175; }
@@ -301,7 +301,7 @@ body.p2 #npg_galatia { display: block }
 .no_place_governor { background-color: #6e6e6e; }
 
 /* :r !node tools/gencolors.js */
-.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, var(--box-shadow); }
+.improvement { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, var(--box-shadow); }
 .red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, var(--box-shadow); }
 .blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, var(--box-shadow); }
 .yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, var(--box-shadow); }
@@ -372,7 +372,7 @@ body.tint .militia.selected,
 #legion_31 { background-position: -220px -165px }
 #legion_32 { background-position: -275px -165px }
 
-.amphitheater, .basilica, .limes {
+.improvement {
 	width: 92px;
 	height: 46px;
 	background-size: 92px 46px;
@@ -449,9 +449,9 @@ body.tint .militia.selected,
 .no_place_governor { background-image: url(images/no_place_governor.png) }
 .legion { background-image: url(images/legion_full.png) }
 .legion.reduced { background-image: url(images/legion_reduced.png) }
-.amphitheater { background-image: url(images/amphitheater.png) }
-.basilica { background-image: url(images/basilica.png) }
-.limes { background-image: url(images/limes.png) }
+.amphitheater { background-image: url(images/improvement_amphitheater.png) }
+.basilica { background-image: url(images/improvement_basilica.png) }
+.limes { background-image: url(images/improvement_limes.png) }
 .militia { background-image: url(images/militia.png) }
 .alamanni { background-image: url(images/alamanni_active.png) }
 .franks { background-image: url(images/franks_active.png) }
@@ -623,7 +623,7 @@ body.tint .legion.reduced {
 .card.influence_s2{background-image:url(cards.1x/influence_s2.jpg)}
 .card.influence_s3{background-image:url(cards.1x/influence_s3.jpg)}
 .card.influence_s4{background-image:url(cards.1x/influence_s4.jpg)}
-.card.influence_s4b{background-image:url(cards.1x/influence_s4b.jpg)}
+.card.influence_s4_v2{background-image:url(cards.1x/influence_s4_v2.jpg)}
 .card.influence_m2x{background-image:url(cards.1x/influence_m2x.jpg)}
 .card.influence_m3x{background-image:url(cards.1x/influence_m3x.jpg)}
 .card.influence_m4x{background-image:url(cards.1x/influence_m4x.jpg)}
@@ -664,7 +664,7 @@ body.tint .legion.reduced {
 .card.influence_s2{background-image:url(cards.2x/influence_s2.jpg)}
 .card.influence_s3{background-image:url(cards.2x/influence_s3.jpg)}
 .card.influence_s4{background-image:url(cards.2x/influence_s4.jpg)}
-.card.influence_s4b{background-image:url(cards.2x/influence_s4b.jpg)}
+.card.influence_s4_v2{background-image:url(cards.2x/influence_s4_v2.jpg)}
 .card.influence_m2x{background-image:url(cards.2x/influence_m2x.jpg)}
 .card.influence_m3x{background-image:url(cards.2x/influence_m3x.jpg)}
 .card.influence_m4x{background-image:url(cards.2x/influence_m4x.jpg)}
diff --git a/play.js b/play.js
index 75a6fa2..8afb8ad 100644
--- a/play.js
+++ b/play.js
@@ -77,7 +77,7 @@ const CARD_S3X = [ 122, 129 ]
 const CARD_P3X = [ 130, 137 ]
 const CARD_M4 = [ 138, 143 ]
 const CARD_S4 = [ 144, 149 ]
-const CARD_S4B = [ 150, 155 ]
+const CARD_S4_V2 = [ 150, 155 ] // updated damnatio
 const CARD_P4 = [ 156, 161 ]
 const CARD_M4X = [ 162, 167 ]
 const CARD_S4X = [ 168, 173 ]
@@ -110,7 +110,7 @@ const CARD_CLASS = [
 	"influence_p3x",
 	"influence_m4",
 	"influence_s4",
-	"influence_s4b",
+	"influence_s4_v2",
 	"influence_p4",
 	"influence_m4x",
 	"influence_s4x",
@@ -760,9 +760,9 @@ let ui = {
 		document.getElementById("capital_hispania"),
 	],
 	quaestor: [],
-	amphitheater: [],
-	basilica: [],
-	limes: [],
+	imp_amphitheater: [],
+	imp_basilica: [],
+	imp_limes: [],
 	crisis: document.getElementById("crisis_highlight"),
 	dice: [
 		document.getElementById("crisis_die_1"),
@@ -799,6 +799,27 @@ function is_neutral_province(where) {
 	return get_province_governor_player(where) < 0
 }
 
+function show_improvement(elt, off) {
+	let x = 0, y = 0
+	switch (off) {
+	case 1:
+		x = -48 - 3
+		y = 6
+		break
+	case 2:
+		x = 48 + 3
+		y = 6
+		break
+	case 3:
+		x = 0
+		y = 6 + 25
+		break
+	}
+	elt.style.left = elt.my_x + x + "px"
+	elt.style.top = elt.my_y + y + "px"
+	elt.classList.remove("hide")
+}
+
 function show(elt) {
 	elt.classList.remove("hide")
 }
@@ -848,8 +869,8 @@ function create_building(region, className, xoff, yoff) {
 	if (region === ITALIA)
 		y += 52
 	let e = create_thing({ className })
-	e.style.left = x + (w >> 1) + xoff - 46 + "px"
-	e.style.top = y + h + yoff + "px"
+	e.my_x = x + (w >> 1) - 46
+	e.my_y = y + h
 	return e
 }
 
@@ -925,15 +946,9 @@ function on_init() {
 		ui.mobs[region * 3 + 1] = create_piece(region, "mob", "mob")
 		ui.mobs[region * 3 + 2] = create_piece(region, "mob", "mob")
 
-		if (true) {
-			ui.amphitheater[region] = create_building(region, "amphitheater hide", -48 - 3, 6)
-			ui.basilica[region] = create_building(region, "basilica hide", 48 + 3, 6)
-			ui.limes[region] = create_building(region, "limes hide", 0, 6 + 25)
-		} else {
-			ui.amphitheater[region] = create_building(region, "amphitheater hide", -96 - 5, 6)
-			ui.basilica[region] = create_building(region, "basilica hide", 0, 6)
-			ui.limes[region] = create_building(region, "limes hide", 96 + 5, 6)
-		}
+		ui.imp_amphitheater[region] = create_building(region, "improvement amphitheater hide")
+		ui.imp_basilica[region] = create_building(region, "improvement basilica hide")
+		ui.imp_limes[region] = create_building(region, "improvement limes hide")
 
 		register_action(ui.capital[region], "capital", region)
 		register_action(ui.regions[region], "region", region)
@@ -1203,27 +1218,30 @@ function on_update() {
 			ui.quaestor[region].classList.remove("pretender")
 		}
 
+		if (has_militia(region))
+			show(ui.militia[region])
+		else
+			hide(ui.militia[region])
+
+		ui.militia[region].classList.toggle("selected", view.selected_militia === region)
+
+		let imp_off = 0
+
 		if (has_amphitheater(region))
-			show(ui.amphitheater[region])
+			show_improvement(ui.imp_amphitheater[region], ++imp_off)
 		else
-			hide(ui.amphitheater[region])
+			hide(ui.imp_amphitheater[region])
 
 		if (has_basilica(region))
-			show(ui.basilica[region])
+			show_improvement(ui.imp_basilica[region], ++imp_off)
 		else
-			hide(ui.basilica[region])
+			hide(ui.imp_basilica[region])
 
 		if (has_limes(region))
-			show(ui.limes[region])
+			show_improvement(ui.imp_limes[region], ++imp_off)
 		else
-			hide(ui.limes[region])
+			hide(ui.imp_limes[region])
 
-		if (has_militia(region))
-			show(ui.militia[region])
-		else
-			hide(ui.militia[region])
-
-		ui.militia[region].classList.toggle("selected", view.selected_militia === region)
 	}
 
 	for (let i = 0; i < LEGION_COUNT; ++i) {
@@ -1556,6 +1574,9 @@ function on_update() {
 	action_button("reroll", "Re-roll")
 	action_button("roll", "Roll")
 
+	action_button("amphitheater", "Amphitheater")
+	action_button("basilica", "Basilica")
+	action_button("limes", "Limes")
 	action_button("disperse_mob", "Disperse Mob")
 	action_button("train_legions", "Train Legions")
 	action_button("add_legion_to_army", "Add Legion to Army")
@@ -1565,14 +1586,9 @@ function on_update() {
 	action_button("place_militia", "Place Militia")
 	action_button("build_improvement", "Build Improvement")
 
-	action_button("amphitheater", "Amphitheater")
-	action_button("basilica", "Basilica")
-	action_button("limes", "Limes")
-
 	action_button("end_actions", "End Actions")
 	action_button("end_turn", "End Turn")
 
-
 	action_button("pass", "Pass")
 	action_button("done", "Done")
 	action_button("undo", "Undo")
diff --git a/tools/gencolors.js b/tools/gencolors.js
index eaff630..c6eb2b0 100644
--- a/tools/gencolors.js
+++ b/tools/gencolors.js
@@ -67,7 +67,7 @@ function gencss(color, sel) {
 	print(`${sel} { border-color: ${hi} ${lo} ${lo} ${hi}; box-shadow: 0 0 0 1px ${sh}, 1px 2px 4px #0008; }`)
 }
 
-gencss("#efebea", ".amphitheater, .basilica, .limes")
+gencss("#efebea", ".improvement")
 gencss("#ed1b2f", ".red")
 gencss("#a0caec", ".blue")
 gencss("#ffe175", ".yellow")