Board style

src/main/resources/webroot/static/index.html

@@ -16,7 +16,11 @@
 		<h2 id="turn-label">Please wait...</h2>
 		<h3 id="move-points-title">Move points remaining: <span id="move-points-value">0</span></h3>
 		<div id="board-viewer">
-			<div id="board"></div>
+			<div id="board-3d-space">
+				<div id="board-plane">
+					<div id="board"></div>
+				</div>
+			</div>
 		</div>
 		<div id="buttons-container">
 			<button id="rotate-left" class="btn">↺</button>

src/main/resources/webroot/static/style.css

@@ -1,45 +1,57 @@
 body {
-  font-family: sans-serif;
+    font-family: sans-serif;
+    --board-size: 40rem;
 }
 
 h1 {
-  user-select: none;
+    user-select: none;
 }
 
 #main-body:not(.js-loaded) {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 #game-code {
-  white-space: pre;
-  font-family: monospace;
-  user-select: all;
-  background: #ffeb3b63;
-  color: black;
-  border-radius: 5px;
-  padding: 2px 5px;
-  font-size: 75%;
-  font-weight: bold;
+    white-space: pre;
+    font-family: monospace;
+    user-select: all;
+    background: #ffeb3b63;
+    color: black;
+    border-radius: 5px;
+    padding: 2px 5px;
+    font-size: 75%;
+    font-weight: bold;
 }
 
 #game {
-    perspective: 2000px;
 }
 
 #board-viewer {
-    width: 82vmin;
-    height: 82vmin;
+    zoom: 1;
+    user-select: none;
+}
+
+#board-3d-space {
+    perspective: 80rem;
+    width: 100%;
+    height: calc(var(--board-size) / 1.5);
+}
+
+#board-plane {
+    width: var(--board-size);
+    height: var(--board-size);
+    transform: rotate3d(1, 0, 0, 55deg);
     margin: auto;
     position: relative;
-    transform: translateY(-10vmin) rotate3d(1, 0, 0, 55deg);
+    top: calc(var(--board-size) / -4);
 }
 
 #board {
     display: grid;
     background: black;
     box-sizing: border-box;
-    width: 82vmin;
-    height: 82vmin;
+    width: var(--board-size);
+    height: var(--board-size);
     grid-column-gap: 0.13rem;
     grid-row-gap: 0.13rem;
     padding: 0.52rem;
@@ -77,4 +89,38 @@ h1 {
 .square[data-square_type="occupiable"][data-occupation_state="occupied"][data-occupied_by="1"] {
     background: rgb(122, 215, 0);
 }
-
+@media (width <= 900px) or (height <= 650px) {
+    #board-viewer {
+        zoom: 0.75;
+    }
+}
+@media (width <= 650px) or (height <= 500px) {
+    #board-viewer {
+        zoom: 0.5;
+    }
+}
+@media (width <= 450px) or (height <= 400px) {
+    #board-viewer {
+        zoom: 0.3;
+    }
+}
+@media (width <= 300px) or (height <= 250px) {
+    #board-viewer {
+        zoom: 0.25;
+    }
+}
+@media (width >= 1300px) and (height >= 900px) {
+    #board-viewer {
+        zoom: 1.5;
+    }
+}
+@media (width >= 1800px) and (height >= 1200px) {
+    #board-viewer {
+        zoom: 2;
+    }
+}
+@media (width >= 2400px) and (height >= 1700px) {
+    #board-viewer {
+        zoom: 2.8;
+    }
+}