Add 'shift zoom' for blocks.

2 files changed, 21 insertions, 2 deletions

diff --git a/public/common/client.js b/public/common/client.js
index cee9ea5..26f953e 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -335,13 +335,26 @@ function zoom_map() {
 	}
 }
 
-window.addEventListener('resize', zoom_map);
-
 function toggle_zoom() {
 	document.querySelector(".mapwrap").classList.toggle('fit');
 	zoom_map();
 }
 
+function init_map_zoom() {
+	window.addEventListener('resize', zoom_map);
+}
+
+function init_shift_zoom() {
+	window.addEventListener("keydown", (evt) => {
+		if (evt.key === "Shift")
+			document.querySelector("body").classList.add("shift");
+	});
+	window.addEventListener("keyup", (evt) => {
+		if (evt.key === "Shift")
+			document.querySelector("body").classList.remove("shift");
+	});
+}
+
 function toggle_log() {
 	document.querySelector(".grid_window").classList.toggle("hide_log");
 	zoom_map();
diff --git a/views/about.ejs b/views/about.ejs
index 033aad8..8478301 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -22,6 +22,9 @@ Open a separate browser tab or window for each side when playing solo.
 Use the middle mouse button to drag and scroll around the map.
 
 <li>
+Hold down the Shift key when mousing over a block or counter in order to magnify it.
+
+<li>
 The <i>Enter</i> and <i>Escape</i> keys open and close the chat box.
 
 <li>
@@ -40,6 +43,9 @@ The <img src="/images/earth-africa-europe.svg"> button hides all counters and ma
 if you need to check something on the map that is obscured.
 
 <li>
+The <img src="/images/magnifying-glass.svg"> button shrinks the map to fit the screen width.
+
+<li>
 The <img src="/images/scroll-quill.svg"> button hides the game log and player status displays, so you can
 see more of the map.