Add code

2025-05-13 14:37:14 +02:00 · 2025-05-13 14:37:14 +02:00 · 450f848fac
commit 450f848fac
parent ff7eefb3bb
2 changed files with 125 additions and 0 deletions
--- a/index.htm
+++ b/index.htm
@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html id="home" lang="en">
+<head>
+    <style>
+        * { box-sizing: border-box; z-index: 1; }
+        a { text-decoration: inherit; color: inherit; }
+        #wrap { display: grid; grid-template-columns: repeat(8, 1fr); max-width: 480px; margin: 10vh auto; }
+        .cell { display: inline-block; min-width: 10px; height: 30px; border: 1px solid #000; vertical-align: column; text-align: center; }
+
+        .cell.disabled { background-color: #fff;
+opacity: 0.8;
+background: repeating-linear-gradient( 45deg, #000, #000 2px, #fff 2px, #fff 15px ); }
+    </style>
+</head>
+<body>
+    <script src="kreuzwortraetsel.js?v00062" type="text/javascript" async></script>
+</body>
+</html>
--- a/kreuzwortraetsel.js
+++ 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);
+
+}