From fb518cc56fd50060b6939a8c7e1aa17fe9acd768 Mon Sep 17 00:00:00 2001
From: Joshua Ramon Enslin <joshua@jrenslin.de>
Date: Tue, 13 May 2025 14:41:06 +0200
Subject: [PATCH] Add option to sideload js

---
 kreuzwortraetsel.js | 153 +++++++++++++++++++++++---------------------
 sample.json         |  30 +++++++++
 2 files changed, 109 insertions(+), 74 deletions(-)
 create mode 100644 sample.json

diff --git a/kreuzwortraetsel.js b/kreuzwortraetsel.js
index 43ee519..7ab5f61 100644
--- a/kreuzwortraetsel.js
+++ b/kreuzwortraetsel.js
@@ -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);
+    }
 
-}
+})();
diff --git a/sample.json b/sample.json
new file mode 100644
index 0000000..c34a2cc
--- /dev/null
+++ b/sample.json
@@ -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",
+    }
+
+}