Add option to sideload js
This commit is contained in:
parent
450f848fac
commit
fb518cc56f
@ -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_x" : 8,
|
||||||
"size_y" : 8,
|
"size_y" : 8,
|
||||||
|
|
||||||
"cells" : {
|
"cells" : {
|
||||||
|
|
||||||
// x-axis
|
// x-axis
|
||||||
1 : {
|
|
||||||
// y-axis
|
|
||||||
1 : {
|
1 : {
|
||||||
"character" : "a",
|
// y-axis
|
||||||
"hidden" : false,
|
1 : {
|
||||||
"hint" : 1,
|
"character" : "a",
|
||||||
"in_solution" : 3,
|
"hidden" : false,
|
||||||
},
|
"hint" : 1,
|
||||||
2 : {
|
"in_solution" : 3,
|
||||||
"character" : "b",
|
},
|
||||||
// "hidden" : true,
|
2 : {
|
||||||
|
"character" : "b",
|
||||||
|
// "hidden" : true,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
"hints" : {
|
||||||
|
1: "hallo",
|
||||||
|
2: "test",
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
};
|
||||||
|
|
||||||
"hints" : {
|
const wrap = document.createElement("div");
|
||||||
1: "hallo",
|
wrap.id = "wrap";
|
||||||
2: "test",
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
const solutionArea = document.createElement("div");
|
||||||
|
const hintsArea = document.createElement("div");
|
||||||
|
|
||||||
const wrap = document.createElement("div");
|
document.body.appendChild(wrap);
|
||||||
wrap.id = "wrap";
|
document.body.appendChild(solutionArea);
|
||||||
|
document.body.appendChild(hintsArea);
|
||||||
|
|
||||||
const solutionArea = document.createElement("div");
|
for (let i = 0; i < data.size_x; i++) {
|
||||||
const hintsArea = document.createElement("div");
|
|
||||||
|
|
||||||
document.body.appendChild(wrap);
|
/*
|
||||||
document.body.appendChild(solutionArea);
|
const row = document.createElement("div");
|
||||||
document.body.appendChild(hintsArea);
|
row.classList.add("row");
|
||||||
|
*/
|
||||||
|
|
||||||
for (let i = 0; i < data.size_x; i++) {
|
for (let j = 0; j < data.size_y; j++) {
|
||||||
|
|
||||||
/*
|
const cell = document.createElement("span");
|
||||||
const row = document.createElement("div");
|
cell.classList.add("cell");
|
||||||
row.classList.add("row");
|
cell.setAttribute("data-column", j);
|
||||||
*/
|
wrap.appendChild(cell);
|
||||||
|
|
||||||
for (let j = 0; j < data.size_y; j++) {
|
if (data.cells[i] === undefined || data.cells[i][j] === undefined) {
|
||||||
|
cell.classList.add("disabled");
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
const metadata = data.cells[i][j];
|
||||||
|
cell.setAttribute("data-correct-text", metadata.character);
|
||||||
|
|
||||||
// Add interactivity
|
if (metadata.hidden === false) {
|
||||||
cell.setAttribute("contenteditable", "true");
|
cell.textContent = metadata.character;
|
||||||
cell.setAttribute("maxlength", "1");
|
}
|
||||||
cell.addEventListener('keyup', function(e) {
|
else {
|
||||||
if (cell.textContent.length > 1) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
cell.textContent = e.key;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
// 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.textContent = hintId + ": " + hint;
|
||||||
li.id = "hint" + hintId;
|
|
||||||
|
|
||||||
li.textContent = hintId + ": " + hint;
|
hintsArea.appendChild(li);
|
||||||
|
|
||||||
hintsArea.appendChild(li);
|
}
|
||||||
|
|
||||||
}
|
})();
|
||||||
|
30
sample.json
Normal file
30
sample.json
Normal 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",
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user