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();