Wide mode

This commit is contained in:
Arne Keller 2022-02-23 11:26:58 +01:00
parent acf727ea56
commit ecc598d897
3 changed files with 31 additions and 2 deletions

View File

@ -1,6 +1,13 @@
body { body {
background-color: #1f2937; background-color: #1f2937;
color: #fff; color: #fff;
--columns: 2;
--rows: 2;
}
body.wide {
--columns: 4;
--rows: 1;
} }
.centering { .centering {
@ -11,8 +18,8 @@ body {
#main { #main {
display: grid; 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; gap: 2em;
} }

View File

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

View File

@ -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 daysSinceEpoch = Math.floor(new Date()/8.64e7);
const rng = mulberry32(daysSinceEpoch); const rng = mulberry32(daysSinceEpoch);
const chosenWords = []; const chosenWords = [];
@ -201,3 +204,19 @@ function createRow() {
} }
const main = document.getElementById("main"); const main = document.getElementById("main");
createGameGrid(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();