From ecc598d897b5f7ce7d95b0339a6c70bdc6f259de Mon Sep 17 00:00:00 2001
From: Arne Keller <arne.keller@posteo.de>
Date: Wed, 23 Feb 2022 11:26:58 +0100
Subject: [PATCH] Wide mode

---
 index.css  | 11 +++++++++--
 index.html |  3 +++
 index.js   | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/index.css b/index.css
index d936940..807d832 100644
--- a/index.css
+++ b/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-rows: repeat(2, max-content);
+	grid-template-columns: repeat(var(--columns), max-content);
+	grid-template-rows: repeat(var(--rows), max-content);
 	gap: 2em;
 }
 
diff --git a/index.html b/index.html
index d8aaf51..1a1f19b 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/index.js b/index.js
index 9d107fe..4e3f7f5 100644
--- a/index.js
+++ b/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();