add button to toggle "shift" display on mobile

3 files changed, 13 insertions, 0 deletions

diff --git a/play.css b/play.css
index 98236ee..1f72299 100644
--- a/play.css
+++ b/play.css
@@ -423,6 +423,14 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 .number.france { background-color: var(--color-france); }
 */
 
+/* CARD COUNTING AIDS */
+
+@media (hover: hover) {
+	#shift_button {
+		display: none;
+	}
+}
+
 /* CARDS */
 
 .card {
diff --git a/play.html b/play.html
index d2848c9..73242cc 100644
--- a/play.html
+++ b/play.html
@@ -28,6 +28,7 @@
 			</menu>
 		</details>
 		<button onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></button>
+		<button id="shift_button" onclick="toggle_shift()"><img src="/images/all-seeing-eye.svg"></button>
 	</div>
 </header>
 
diff --git a/play.js b/play.js
index 4088a83..5d486c2 100644
--- a/play.js
+++ b/play.js
@@ -18,6 +18,10 @@ function toggle_pieces() {
 	}
 }
 
+function toggle_shift() {
+	document.body.classList.toggle("shift")
+}
+
 /* DATA */
 
 const R_FREDERICK = "Frederick"