Pretty political shift buttons.

13 files changed, 79 insertions, 15 deletions

diff --git a/images/track_box_italy.png b/images/track_box_italy.png
new file mode 100644
index 0000000..7253980
--- /dev/null
+++ b/images/track_box_italy.png
diff --git a/images/track_box_russia.png b/images/track_box_russia.png
new file mode 100644
index 0000000..dfc33cd
--- /dev/null
+++ b/images/track_box_russia.png
diff --git a/images/track_box_saxony.png b/images/track_box_saxony.png
new file mode 100644
index 0000000..5ce8df6
--- /dev/null
+++ b/images/track_box_saxony.png
diff --git a/images/track_left_italy.svg b/images/track_left_italy.svg
new file mode 100644
index 0000000..92df4a7
--- /dev/null
+++ b/images/track_left_italy.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="24" viewBox="0 0 56 48">
+<path fill="#9e2864" stroke="#222" stroke-linejoin="bevel" stroke-opacity="1" stroke-width="3" d="m53 33-9-9 9-9H25V3L3 24l22 21V33Z"/>
+</svg>
diff --git a/images/track_left_russia.svg b/images/track_left_russia.svg
new file mode 100644
index 0000000..7746d37
--- /dev/null
+++ b/images/track_left_russia.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="24" viewBox="0 0 56 48">
+<path fill="#835639" stroke="#222" stroke-linejoin="bevel" stroke-opacity="1" stroke-width="3" d="m53 33-9-9 9-9H25V3L3 24l22 21V33Z"/>
+</svg>
diff --git a/images/track_left_saxony.svg b/images/track_left_saxony.svg
new file mode 100644
index 0000000..e8fb651
--- /dev/null
+++ b/images/track_left_saxony.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="24" viewBox="0 0 56 48">
+<path fill="#147b33" stroke="#222" stroke-linejoin="bevel" stroke-opacity="1" stroke-width="3" d="m53 33-9-9 9-9H25V3L3 24l22 21V33Z"/>
+</svg>
diff --git a/images/track_right_italy.svg b/images/track_right_italy.svg
new file mode 100644
index 0000000..28e0cd8
--- /dev/null
+++ b/images/track_right_italy.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="24" viewBox="0 0 56 48">
+<path fill="#9e2864" stroke="#222" stroke-linejoin="bevel" stroke-width="3" d="m3 33 9-9-9-9h28V3l22 21-22 21V33Z"/>
+</svg>
diff --git a/images/track_right_russia.svg b/images/track_right_russia.svg
new file mode 100644
index 0000000..7a1ca5b
--- /dev/null
+++ b/images/track_right_russia.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="24" viewBox="0 0 56 48">
+<path fill="#835639" stroke="#222" stroke-linejoin="bevel" stroke-width="3" d="m3 33 9-9-9-9h28V3l22 21-22 21V33Z"/>
+</svg>
diff --git a/images/track_right_saxony.svg b/images/track_right_saxony.svg
new file mode 100644
index 0000000..fd52d87
--- /dev/null
+++ b/images/track_right_saxony.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="24" viewBox="0 0 56 48">
+<path fill="#147b33" stroke="#222" stroke-linejoin="bevel" stroke-width="3" d="m3 33 9-9-9-9h28V3l22 21-22 21V33Z"/>
+</svg>
diff --git a/play.css b/play.css
index 5ad6c16..a597107 100644
--- a/play.css
+++ b/play.css
@@ -61,6 +61,20 @@ button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406
 button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; }
 button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; }
 
+button:not(.hide):has(img) {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px;
+}
+.shift_track {
+	display: block;
+	border: 1px solid black;
+}
+.shift_arrow {
+	display: block;
+}
+
 .role_marker {
 	display: inline-block;
 	width: 30px;
diff --git a/play.js b/play.js
index 77d71a4..8ebe698 100644
--- a/play.js
+++ b/play.js
@@ -685,6 +685,16 @@ const power_image = [
 	'<img class="saxony" height="24" src="images/role_saxony.2x.png" alt="Saxony">',
 ]
 
+const RU_LEFT = '<img class="shift_arrow" height="18" src="images/track_left_russia.svg">'
+const IT_LEFT = '<img class="shift_arrow" height="18" src="images/track_left_italy.svg">'
+const SX_LEFT = '<img class="shift_arrow" height="18" src="images/track_left_saxony.svg">'
+const RU_RIGHT = '<img class="shift_arrow" height="18" src="images/track_right_russia.svg">'
+const IT_RIGHT = '<img class="shift_arrow" height="18" src="images/track_right_italy.svg">'
+const SX_RIGHT = '<img class="shift_arrow" height="18" src="images/track_right_saxony.svg">'
+const SX_BOX = '<img class="shift_track" height="20" src="images/track_box_saxony.png">'
+const IT_BOX = '<img class="shift_track" height="20" src="images/track_box_italy.png">'
+const RU_BOX = '<img class="shift_track" height="20" src="images/track_box_russia.png">'
+
 const power_badge = [
 	make_badge("france"),
 	make_badge("prussia"),
@@ -1552,14 +1562,23 @@ function on_update() {
 	action_button_with_argument("suit", HEARTS, colorize_H)
 	action_button_with_argument("suit", DIAMONDS, colorize_D)
 
-	action_button_with_argument("shift", -2, "\u2b05\u2b05")
-	action_button_with_argument("shift", -1, "\u2b05")
-	action_button_with_argument("shift", +1, "\u27a1")
-	action_button_with_argument("shift", +2, "\u27a1\u27a1")
-	action_button_with_argument("shift", +3, "\u27a1\u27a1\u27a1")
-	action_button_with_argument("shift", +4, "\u27a1\u27a1\u27a1\u27a1")
-	action_button_with_argument("shift", +5, "\u27a1\u27a1\u27a1\u27a1")
-	action_button_with_argument("shift", +6, "\u27a1\u27a1\u27a1\u27a1")
+	action_button_with_argument("shift_russia", -2, RU_LEFT + RU_LEFT + RU_BOX)
+	action_button_with_argument("shift_russia", -1, RU_LEFT + RU_BOX)
+	action_button_with_argument("shift_russia", 1, RU_BOX + RU_RIGHT)
+	action_button_with_argument("shift_russia", 2, RU_BOX + RU_RIGHT + RU_RIGHT)
+
+	action_button_with_argument("shift_italy", -2, IT_LEFT + IT_LEFT + IT_BOX)
+	action_button_with_argument("shift_italy", -1, IT_LEFT + IT_BOX)
+	action_button_with_argument("shift_italy", 1, IT_BOX + IT_RIGHT)
+	action_button_with_argument("shift_italy", 2, IT_BOX + IT_RIGHT + IT_RIGHT)
+
+	action_button_with_argument("shift_saxony", -1, SX_LEFT + SX_BOX)
+	action_button_with_argument("shift_saxony", 1, SX_BOX + SX_RIGHT)
+	action_button_with_argument("shift_saxony", 2, SX_BOX + SX_RIGHT + SX_RIGHT)
+	action_button_with_argument("shift_saxony", 3, SX_BOX + SX_RIGHT + SX_RIGHT + SX_RIGHT)
+	action_button_with_argument("shift_saxony", 4, SX_BOX + SX_RIGHT + SX_RIGHT + SX_RIGHT + SX_RIGHT)
+	action_button_with_argument("shift_saxony", 5, SX_BOX + SX_RIGHT + SX_RIGHT + SX_RIGHT + SX_RIGHT + SX_RIGHT)
+	action_button_with_argument("shift_saxony", 6, SX_BOX + SX_RIGHT + SX_RIGHT + SX_RIGHT + SX_RIGHT + SX_RIGHT + SX_RIGHT)
 
 	for (let v = 16; v >= 0; --v)
 		action_button_with_argument("value", v, v)
diff --git a/rules.js b/rules.js
index d29a7d7..21262a8 100644
--- a/rules.js
+++ b/rules.js
@@ -4891,11 +4891,20 @@ states.political_shift = {
 	prompt() {
 		let info = event_shift[current_political_effect()]
 		prompt("Shift " + TRACK_NAME[info.track] + ".")
-		if (info.condition === undefined || info.condition())
-			view.actions.shift = info.amount
+		if (info.condition === undefined || info.condition()) {
+			if (info.track === "saxony")
+				view.actions.shift_saxony = info.amount
+			if (info.track === "russia")
+				view.actions.shift_russia = info.amount
+			if (info.track === "italy")
+				view.actions.shift_italy = info.amount
+		}
 		view.actions.pass = 1
 		view.pc = game.pc
 	},
+	shift_italy(n) { this.shift(n) },
+	shift_russia(n) { this.shift(n) },
+	shift_saxony(n) { this.shift(n) },
 	shift(n) {
 		push_undo()
 		let info = event_shift[current_political_effect()]
@@ -5079,10 +5088,10 @@ states.saxony_shift_battle = {
 	inactive: "shift Saxony marker",
 	prompt() {
 		prompt(`Shift Saxony marker ${game.count} to the right.`)
-		view.actions.shift = [ 1 ]
+		view.actions.shift_saxony = [ 1 ]
 		view.actions.pass = 1
 	},
-	shift(_) {
+	shift_saxony(_) {
 		log("Saxony marker " + game.count + " right.")
 		let save_saxony = game.saxony
 		game.saxony = Math.max(1, Math.min(5, game.saxony + game.count))
@@ -5107,12 +5116,12 @@ states.saxony_shift_supply = {
 	inactive: "shift Saxony marker",
 	prompt() {
 		prompt(`Shift Saxony marker up to ${game.count} to the right.`)
-		view.actions.shift = []
+		view.actions.shift_saxony = []
 		for (let i = 1; i <= game.count; ++i)
-			view.actions.shift.push(i)
+			view.actions.shift_saxony.push(i)
 		view.actions.pass = 1
 	},
-	shift(n) {
+	shift_saxony(n) {
 		log("Saxony marker " + n + " right.")
 		let save_saxony = game.saxony
 		game.saxony = Math.max(1, Math.min(5, game.saxony + n))
diff --git a/tools/track.sh b/tools/track.sh
new file mode 100644
index 0000000..338f10e
--- /dev/null
+++ b/tools/track.sh
@@ -0,0 +1,4 @@
+resize.sh 48x48 tools/markers/political_marker_russia.png images/track_box_russia.png
+resize.sh 48x48 tools/markers/political_marker_italy.png images/track_box_italy.png
+resize.sh 48x48 tools/markers/political_marker_saxony.png images/track_box_saxony.png
+mogrify -crop 40x40+4+4 images/track_box_*.png