6 files changed, 17 insertions, 0 deletions

diff --git a/pieces/bk_cylinder_empty.svg b/pieces/bk_cylinder_empty.svg
new file mode 100644
index 0000000..caf6a1f
--- /dev/null
+++ b/pieces/bk_cylinder_empty.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="48">
+<path fill="#008a62" stroke="#003919" d="M1.5 15 v 18 a 20.5 13.5 0 0 0 20.5 13.5 a 20.5 13.5 0 0 0 20.5 -13.5 v -18"/>
+<ellipse fill="#30b58b" stroke="#003919" cx="22" cy="15" rx="20.5" ry="13.5"/>
+</svg>
diff --git a/pieces/ds_cylinder_empty.svg b/pieces/ds_cylinder_empty.svg
new file mode 100644
index 0000000..0a27296
--- /dev/null
+++ b/pieces/ds_cylinder_empty.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="48">
+<path fill="#2f3136" stroke="#0b0c11" d="M1.5 15 v 18 a 20.5 13.5 0 0 0 20.5 13.5 a 20.5 13.5 0 0 0 20.5 -13.5 v -18"/>
+<ellipse fill="#43454b" stroke="#0b0c11" cx="22" cy="15" rx="20.5" ry="13.5"/>
+</svg>
diff --git a/pieces/ve_cylinder_empty.svg b/pieces/ve_cylinder_empty.svg
new file mode 100644
index 0000000..aded2f0
--- /dev/null
+++ b/pieces/ve_cylinder_empty.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="48">
+<path fill="#c78900" stroke="#5e2500" d="M1.5 15 v 18 a 20.5 13.5 0 0 0 20.5 13.5 a 20.5 13.5 0 0 0 20.5 -13.5 v -18"/>
+<ellipse fill="#ffbf32" stroke="#5e2500" cx="22" cy="15" rx="20.5" ry="13.5"/>
+</svg>
diff --git a/play.css b/play.css
index a70a593..f8b4ef3 100644
--- a/play.css
+++ b/play.css
@@ -338,14 +338,17 @@ path.campaign { stroke: black; stroke-dasharray: 4 4; }
 .cube { width: 29px; height: 36px; }
 
 .ds.cylinder { background-image: url(pieces/ds_cylinder.svg) }
+.ds.cylinder.empty { background-image: url(pieces/ds_cylinder_empty.svg) }
 .ds.cube { background-image: url(pieces/ds_troop.svg) }
 .ds.disc { background-image: url(pieces/ds_disk.svg) }
 .ds.governor { background-image: url(pieces/ds_governor.svg) }
 .bk.cylinder { background-image: url(pieces/bk_cylinder.svg) }
+.bk.cylinder.empty { background-image: url(pieces/bk_cylinder_empty.svg) }
 .bk.amir { background-image: url(pieces/bk_amir.svg) }
 .bk.amir.rebel { background-image: url(pieces/bk_amir_rebel.svg) }
 .bk.disc { background-image: url(pieces/bk_disk.svg) }
 .ve.cylinder { background-image: url(pieces/ve_cylinder.svg) }
+.ve.cylinder.empty { background-image: url(pieces/ve_cylinder_empty.svg) }
 .ve.raja { background-image: url(pieces/ve_raja.svg) }
 .ve.raja.rebel { background-image: url(pieces/ve_raja_rebel.svg) }
 .ve.disc { background-image: url(pieces/ve_disk.svg) }
diff --git a/play.js b/play.js
index 02badd7..85c61e3 100644
--- a/play.js
+++ b/play.js
@@ -843,6 +843,7 @@ function layout_sop() {
 				i += 1
 				z += 1
 			}
+			ui.cylinder[faction].classList.toggle("empty", view.marked & (16 << faction))
 		}
 	}
 }
diff --git a/rules.js b/rules.js
index 5bedd6e..e6137ef 100644
--- a/rules.js
+++ b/rules.js
@@ -114,6 +114,7 @@ exports.view = function (state, role) {
 		actions: null,
 		log: game.log,
 		current: game.current,
+		marked: game.marked,
 		succ: game.succ,
 		vp: game.vp,
 		resources: game.resources,