Wide mode
This commit is contained in:
parent
acf727ea56
commit
ecc598d897
11
index.css
11
index.css
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
19
index.js
19
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 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();
|
||||||
|
Loading…
Reference in New Issue
Block a user