From 450f848fac55d0f5b37737b8a5dd22cdc3b01ad5 Mon Sep 17 00:00:00 2001 From: Joshua Ramon Enslin Date: Tue, 13 May 2025 14:37:14 +0200 Subject: [PATCH] Add code --- index.htm | 18 ++++++++ kreuzwortraetsel.js | 107 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 index.htm create mode 100644 kreuzwortraetsel.js diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..4e6ea27 --- /dev/null +++ b/index.htm @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/kreuzwortraetsel.js b/kreuzwortraetsel.js new file mode 100644 index 0000000..43ee519 --- /dev/null +++ b/kreuzwortraetsel.js @@ -0,0 +1,107 @@ + +const data = { + + "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", + } + +} + +const wrap = document.createElement("div"); +wrap.id = "wrap"; + +const solutionArea = document.createElement("div"); +const hintsArea = document.createElement("div"); + +document.body.appendChild(wrap); +document.body.appendChild(solutionArea); +document.body.appendChild(hintsArea); + +for (let i = 0; i < data.size_x; i++) { + + /* + const row = document.createElement("div"); + row.classList.add("row"); + */ + + 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; + } + 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"); + } + + } + + } + +} + +for (const hintId in data.hints) { + + hint = data.hints[hintId]; + + const li = document.createElement("li"); + li.id = "hint" + hintId; + + li.textContent = hintId + ": " + hint; + + hintsArea.appendChild(li); + +}