Wide mode

index.css

@@ -1,6 +1,13 @@
 body {
 	background-color: #1f2937;
 	color: #fff;
+	--columns: 2;
+	--rows: 2;
+}
+
+body.wide {
+	--columns: 4;
+	--rows: 1;
 }
 
 .centering {
@@ -11,8 +18,8 @@ body {
 
 #main {
 	display: grid;
-	grid-template-columns: repeat(2, max-content);
+	grid-template-columns: repeat(var(--columns), max-content);
-	grid-template-rows: repeat(2, max-content);
+	grid-template-rows: repeat(var(--rows), max-content);
 	gap: 2em;
 }
 

index.html

@@ -12,6 +12,9 @@
 		<div class="keyboard-row"></div>
 		<div class="keyboard-row"></div>
 	</div>
+	<div id="options">
+		<label><input type="checkbox" id="wide">Breiter Modus</label>
+	</div>
 </div>
 
 <script src="./index.js"></script>

index.js

@@ -26,6 +26,9 @@ function mulberry32(a) {
     }
 }
 
+const LOCALSTORAGE_KEY = "qwörtle.data";
+let saveData = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY) || "{}");
+
 const daysSinceEpoch = Math.floor(new Date()/8.64e7);
 const rng = mulberry32(daysSinceEpoch);
 const chosenWords = [];
@@ -201,3 +204,19 @@ function createRow() {
 }
 const main = document.getElementById("main");
 createGameGrid(main);
+
+let wideOpt = document.getElementById("wide");
+if (saveData["wide"] !== undefined) {
+	wideOpt.checked = saveData["wide"];
+}
+function setWideMode() {
+	saveData.wide = wideOpt.checked;
+	if (saveData.wide) {
+		document.body.className = "wide";
+	} else {
+		document.body.className = "";
+	}
+	localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(saveData));
+}
+wideOpt.addEventListener("change", setWideMode);
+setWideMode();