Add option to sideload js

This commit is contained in:
Joshua Ramon Enslin 2025-05-13 14:41:06 +02:00
parent 450f848fac
commit fb518cc56f
Signed by: jrenslin
GPG Key ID: 46016F84501B70AE
2 changed files with 109 additions and 74 deletions

View File

@ -1,107 +1,112 @@
(async function() {
const data = {
// const response = await fetch('./sample.json');
// const data = await response.json();
const data = {
"size_x" : 8,
"size_y" : 8,
"size_x" : 8,
"size_y" : 8,
"cells" : {
"cells" : {
// x-axis
1 : {
// y-axis
// x-axis
1 : {
"character" : "a",
"hidden" : false,
"hint" : 1,
"in_solution" : 3,
},
2 : {
"character" : "b",
// "hidden" : true,
// y-axis
1 : {
"character" : "a",
"hidden" : false,
"hint" : 1,
"in_solution" : 3,
},
2 : {
"character" : "b",
// "hidden" : true,
}
}
},
"hints" : {
1: "hallo",
2: "test",
}
},
};
"hints" : {
1: "hallo",
2: "test",
}
const wrap = document.createElement("div");
wrap.id = "wrap";
}
const solutionArea = document.createElement("div");
const hintsArea = document.createElement("div");
const wrap = document.createElement("div");
wrap.id = "wrap";
document.body.appendChild(wrap);
document.body.appendChild(solutionArea);
document.body.appendChild(hintsArea);
const solutionArea = document.createElement("div");
const hintsArea = document.createElement("div");
for (let i = 0; i < data.size_x; i++) {
document.body.appendChild(wrap);
document.body.appendChild(solutionArea);
document.body.appendChild(hintsArea);
/*
const row = document.createElement("div");
row.classList.add("row");
*/
for (let i = 0; i < data.size_x; i++) {
for (let j = 0; j < data.size_y; j++) {
/*
const row = document.createElement("div");
row.classList.add("row");
*/
const cell = document.createElement("span");
cell.classList.add("cell");
cell.setAttribute("data-column", j);
wrap.appendChild(cell);
for (let j = 0; j < data.size_y; j++) {
const cell = document.createElement("span");
cell.classList.add("cell");
cell.setAttribute("data-column", j);
wrap.appendChild(cell);
if (data.cells[i] === undefined || data.cells[i][j] === undefined) {
cell.classList.add("disabled");
}
else {
const metadata = data.cells[i][j];
cell.setAttribute("data-correct-text", metadata.character);
if (metadata.hidden === false) {
cell.textContent = metadata.character;
if (data.cells[i] === undefined || data.cells[i][j] === undefined) {
cell.classList.add("disabled");
}
else {
const metadata = data.cells[i][j];
cell.setAttribute("data-correct-text", metadata.character);
// Add interactivity
cell.setAttribute("contenteditable", "true");
cell.setAttribute("maxlength", "1");
cell.addEventListener('keyup', function(e) {
if (cell.textContent.length > 1) {
e.preventDefault();
}
cell.textContent = e.key;
});
if (metadata.hidden === false) {
cell.textContent = metadata.character;
}
else {
}
// Add interactivity
cell.setAttribute("contenteditable", "true");
cell.setAttribute("maxlength", "1");
cell.addEventListener('keyup', function(e) {
if (cell.textContent.length > 1) {
e.preventDefault();
}
cell.textContent = e.key;
});
}
if (metadata.hint !== undefined) {
cell.setAttribute("data-hint", metadata.hint);
cell.title = metadata.hint + ": " + data.hints[metadata.hint];
}
if (metadata.in_solution !== undefined) {
cell.setAttribute("data-in-solution", metadata.in_solution);
cell.classList.add("in_solution");
}
if (metadata.hint !== undefined) {
cell.setAttribute("data-hint", metadata.hint);
cell.title = metadata.hint + ": " + data.hints[metadata.hint];
}
if (metadata.in_solution !== undefined) {
cell.setAttribute("data-in-solution", metadata.in_solution);
cell.classList.add("in_solution");
}
}
}
}
for (const hintId in data.hints) {
for (const hintId in data.hints) {
hint = data.hints[hintId];
hint = data.hints[hintId];
const li = document.createElement("li");
li.id = "hint" + hintId;
const li = document.createElement("li");
li.id = "hint" + hintId;
li.textContent = hintId + ": " + hint;
li.textContent = hintId + ": " + hint;
hintsArea.appendChild(li);
hintsArea.appendChild(li);
}
}
})();

30
sample.json Normal file
View File

@ -0,0 +1,30 @@
{
"size_x" : 8,
"size_y" : 8,
"cells" : {
// x-axis
1 : {
// y-axis
1 : {
"character" : "a",
"hidden" : false,
"hint" : 1,
"in_solution" : 3,
},
2 : {
"character" : "b",
// "hidden" : true,
}
}
},
"hints" : {
1: "hallo",
2: "test",
}
}