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 @@
+
+
+
\ 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();