Update 2025-04-13_16:25:39

static/help.js

@@ -0,0 +1,30 @@
+import { DEBUG } from "./config.js";
+
+export function showHelp() {
+  if (DEBUG) console.log("❔ showHelp() opened");
+  const helpOverlay = document.createElement("div");
+  helpOverlay.id = "help-overlay";
+  helpOverlay.innerHTML = `
+    <div class="help-content">
+      <h2>🧠 How to Play</h2>
+      <p>This is a memory game with 4 dimensions:</p>
+      <ul>
+        <li><b>Position</b> – where the tile appears</li>
+        <li><b>Color</b> – the color of the emoji</li>
+        <li><b>Shape</b> – the emoji symbol</li>
+        <li><b>Number</b> – the digit inside</li>
+      </ul>
+      <p>You see one tile – then after a short pause the board changes. Your task: guess which <b>dimension stayed the same</b>.</p>
+      <p>Use the buttons to select the unchanged dimension. You can only pick once per round.</p>
+      <button id="close-help">Close</button>
+    </div>
+  `;
+
+  document.body.appendChild(helpOverlay);
+
+  document.getElementById("close-help").onclick = () => {
+    helpOverlay.remove();
+    if (DEBUG) console.log("❌ showHelp() closed");
+  };
+}
+