first commit

playwithalgos · Dec 19, 2023 · bb702fd · bb702fd
1 parent 388f6ef
commit bb702fd
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
-# dancing-links-game
-A game to play with dancing links
+# dancing-links- game
+
+The user can play with the nodes, put them outside and inside the structure of the dancing links.
diff --git a/index.html b/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<body>
+    <style>
+        rect {
+            stroke: black;
+            fill: white;
+            cursor: pointer;
+        }
+
+        rect:hover {
+            stroke: blue;
+        }
+
+        line {
+            stroke: black;
+        }
+
+        .element {
+            fill: yellow;
+        }
+
+        .header {
+            fill: grey;
+        }
+
+        .node {
+            fill: orange;
+            transition: all 500ms;
+        }
+
+        .node.out {
+            fill: orange;
+            transform: translate(8px, 0px);
+        }
+
+        .element.out {
+            transform: translate(0px, 8px);
+        }
+
+        text {
+            font-size: 8px;
+        }
+
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+
+    <svg id="svg" width=640 height=480 viewBox="0 0 640 480">
+    </svg>
+    <script>
+        function createMatrix(w, h) {
+            return Array(w).fill().map(() => Array(h).fill(0));
+        }
+
+        const input = [[1, 4, 7], [1, 4], [4, 5, 7], [3, 5, 6], [2, 3, 6, 7], [2, 7]];
+
+        let M = createMatrix(8, input.length + 1);
+        let S = createMatrix(8, input.length + 1);
+
+        for (let x = 0; x < M.length; x++)
+            for (let y = 0; y < M[0].length; y++)
+                M[x][y] = 0;
+
+        M[0][0] = "h";
+        for (let x = 1; x < M.length; x++)
+            M[x][0] = 1;
+
+
+
+
+        for (let y = 0; y < input.length; y++)
+            for (let x of input[y])
+                M[x][y + 1] = "n";
+
+        function click(x, y) {
+            S[x][y] = 1 - S[x][y];
+            update();
+        }
+
+        function update() {
+            svg.innerHTML = "";
+            for (let x = 1; x < M.length; x++)
+                svg.innerHTML += `<line x1=${32 + x * 32 + 4} y1=0 x2=${32 + x * 32 + 4} y2="${32 + M[0].length * 32}"/>`;
+            for (let y = 0; y < M[0].length; y++)
+                svg.innerHTML += `<line x1=0 y1=${32 + y * 32 + 4} x2="${32 + M.length * 32}" y2="${32 + y * 32 + 4}"/>`;
+
+            for (let x = 0; x < M.length; x++)
+                for (let y = 0; y < M[0].length; y++) switch (M[x][y]) {
+                    case 0: break;
+                    case "n":
+                        svg.innerHTML += `<rect class="node ${S[x][y] ? "out" : ""}" x="${32 + x * 32}" y="${32 + y * 32}" width="8" height="8" onclick="click(${x}, ${y})"/>`;
+                        break;
+                    case "h":
+                        svg.innerHTML += `<rect class="header" x="${32 + x * 32}" y="${32 + y * 32}" width="8" height="8"/>`;
+                        break;
+                    default:
+                        svg.innerHTML += `<rect class="element ${S[x][y] ? "out" : ""}" x="${32 + x * 32}" y="${32 + y * 32}" width="8" height="8" onclick="click(${x}, ${y})"/>`;
+                }
+        }
+
+        update();
+
+    </script>
+</body>