From 179dd134a17a27fbf18d55cd40b802eeb8925f90 Mon Sep 17 00:00:00 2001
From: Kai Piper <kai9987kai@gmail.com>
Date: Wed, 13 Nov 2024 23:51:17 +0000
Subject: [PATCH] Create Labyrinth.html

---
 Labyrinth.html | 441 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 441 insertions(+)
 create mode 100644 Labyrinth.html
diff --git a/Labyrinth.html b/Labyrinth.html
new file mode 100644
index 0000000..d23d368
--- /dev/null
+++ b/Labyrinth.html
@@ -0,0 +1,441 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cognitive Labyrinth</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f5f5;
+    }
+
+    h1, p {
+      text-align: center;
+      margin: 0.5rem;
+    }
+
+    #maze {
+      display: grid;
+      grid-template-columns: repeat(20, 1fr); /* Larger maze for complexity */
+      gap: 2px;
+      max-width: 90vw;
+      max-height: 90vw;
+      margin-top: 10px;
+      border: 2px solid #333;
+      background-color: #333;
+      position: relative;
+    }
+
+    .cell {
+      width: 100%;
+      height: 0;
+      padding-top: 100%;
+      position: relative;
+      background-color: #eee;
+      box-sizing: border-box;
+    }
+
+    .cell:after {
+      content: "";
+      display: block;
+      margin-top: 100%;
+    }
+
+    .cell.path {
+      background-color: #f5f5f5;
+    }
+
+    .cell.current {
+      background-color: #4CAF50;
+      border: 2px solid #388E3C;
+    }
+
+    .cell.node {
+      background-color: #8e44ad;
+      color: white;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .cell.end {
+      background-color: #ff6f61;
+      color: white;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .wall {
+      background-color: #333;
+    }
+
+    #prompt {
+      margin-top: 20px;
+      padding: 10px;
+      border: 1px solid #333;
+      width: 90vw;
+      max-width: 400px;
+      background-color: #ffffff;
+      border-radius: 8px;
+    }
+
+    #prompt p {
+      margin: 5px 0;
+    }
+
+    textarea, button, #apiKey {
+      width: 100%;
+      margin-top: 10px;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #888;
+      font-size: 1rem;
+      box-sizing: border-box;
+    }
+
+    #controls {
+      display: flex;
+      justify-content: space-around;
+      width: 90vw;
+      max-width: 400px;
+      margin-top: 10px;
+    }
+
+    .control-btn {
+      background-color: #3f51b5;
+      color: white;
+      padding: 15px;
+      border: none;
+      border-radius: 8px;
+      font-size: 1.2rem;
+      flex: 1;
+      margin: 0 5px;
+    }
+
+    #winMessage {
+      margin-top: 10px;
+      padding: 10px;
+      border: 1px solid #4CAF50;
+      background-color: #C8E6C9;
+      width: 90vw;
+      max-width: 400px;
+      border-radius: 8px;
+      text-align: center;
+      display: none;
+    }
+
+    #restartButton {
+      display: none;
+      margin-top: 10px;
+      background-color: #FF5722;
+      color: #fff;
+      border: none;
+      padding: 10px;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    @media screen and (max-width: 600px) {
+      /* Adjust the layout for mobile screens */
+      #maze {
+        grid-template-columns: repeat(10, 1fr);
+      }
+    }
+  </style>
+</head>
+<body>
+  <h1>Cognitive Labyrinth</h1>
+  <p>Navigate the maze and engage with reflective prompts at each node. Reach the end to complete the journey.</p>
+  <input id="apiKey" type="password" placeholder="Enter your OpenAI API Key" />
+  <button id="restartButton" onclick="restartMaze()">Restart Maze</button>
+  <div id="maze"></div>
+  <div id="prompt">
+    <p id="promptText">Start your journey by moving through the maze.</p>
+    <textarea id="response" placeholder="Your reflection here..."></textarea>
+    <button onclick="submitResponse()">Submit Reflection</button>
+  </div>
+
+  <!-- Mobile Touch Controls -->
+  <div id="controls">
+    <button class="control-btn" onclick="move('up')">↑</button>
+    <button class="control-btn" onclick="move('left')">←</button>
+    <button class="control-btn" onclick="move('down')">↓</button>
+    <button class="control-btn" onclick="move('right')">→</button>
+  </div>
+
+  <div id="winMessage">Congratulations! You've reached the end of the Cognitive Labyrinth.</div>
+
+  <script>
+    const mazeContainer = document.getElementById("maze");
+    const promptText = document.getElementById("promptText");
+    const winMessage = document.getElementById("winMessage");
+    const restartButton = document.getElementById("restartButton");
+    const mazeSize = 20;
+    let maze = [];
+    let playerPosition = { x: 0, y: 0 };
+
+    // Maze generation using Randomized Prim's Algorithm
+    function generateMaze() {
+      maze = Array.from({ length: mazeSize }, () => Array(mazeSize).fill("wall"));
+
+      // Start the maze from top-left cell
+      let start = { x: 0, y: 0 };
+      maze[start.y][start.x] = "path";
+
+      // List of frontier cells
+      let frontier = getNeighbors(start.x, start.y);
+
+      while (frontier.length > 0) {
+        // Get a random frontier cell
+        let rndIndex = Math.floor(Math.random() * frontier.length);
+        let { x, y } = frontier[rndIndex];
+        frontier.splice(rndIndex, 1);
+
+        let neighbors = getPathNeighbors(x, y);
+        if (neighbors.length > 0) {
+          let { x: nx, y: ny } = neighbors[Math.floor(Math.random() * neighbors.length)];
+          maze[y][x] = "path";
+          maze[(y + ny) / 2][(x + nx) / 2] = "path";
+          frontier.push(...getNeighbors(x, y));
+        }
+      }
+
+      // Mark some random path cells as nodes
+      let nodeCount = 5;
+      while (nodeCount > 0) {
+        const nx = Math.floor(Math.random() * mazeSize);
+        const ny = Math.floor(Math.random() * mazeSize);
+        if (maze[ny][nx] === "path" && !(nx === 0 && ny === 0) && !(nx === mazeSize - 1 && ny === mazeSize - 1)) {
+          maze[ny][nx] = "node";
+          nodeCount--;
+        }
+      }
+
+      // Set the end cell
+      maze[mazeSize - 1][mazeSize - 1] = "end";
+    }
+
+    function getNeighbors(x, y) {
+      let neighbors = [];
+      if (y - 2 >= 0 && maze[y - 2][x] === "wall") neighbors.push({ x: x, y: y - 2 });
+      if (y + 2 < mazeSize && maze[y + 2][x] === "wall") neighbors.push({ x: x, y: y + 2 });
+      if (x - 2 >= 0 && maze[y][x - 2] === "wall") neighbors.push({ x: x - 2, y: y });
+      if (x + 2 < mazeSize && maze[y][x + 2] === "wall") neighbors.push({ x: x + 2, y: y });
+      return neighbors;
+    }
+
+    function getPathNeighbors(x, y) {
+      let neighbors = [];
+      if (y - 2 >= 0 && maze[y - 2][x] === "path") neighbors.push({ x: x, y: y - 2 });
+      if (y + 2 < mazeSize && maze[y + 2][x] === "path") neighbors.push({ x: x, y: y + 2 });
+      if (x - 2 >= 0 && maze[y][x - 2] === "path") neighbors.push({ x: x - 2, y: y });
+      if (x + 2 < mazeSize && maze[y][x + 2] === "path") neighbors.push({ x: x + 2, y: y });
+      return neighbors;
+    }
+
+    function renderMaze() {
+      mazeContainer.innerHTML = '';
+      for (let y = 0; y < mazeSize; y++) {
+        for (let x = 0; x < mazeSize; x++) {
+          const cellType = maze[y][x];
+          const div = document.createElement("div");
+          div.classList.add("cell");
+
+          if (cellType === "path") {
+            div.classList.add("path");
+          } else if (cellType === "end") {
+            div.classList.add("end");
+            div.textContent = "END";
+          } else if (cellType === "node") {
+            div.classList.add("node");
+            div.textContent = "NODE";
+          } else if (cellType === "wall") {
+            div.classList.add("wall");
+          }
+
+          div.dataset.x = x;
+          div.dataset.y = y;
+          mazeContainer.appendChild(div);
+        }
+      }
+      // Mark the player's starting position
+      setCurrentPlayerPosition();
+    }
+
+    function setCurrentPlayerPosition() {
+      const cellDiv = mazeContainer.querySelector(`.cell[data-x="${playerPosition.x}"][data-y="${playerPosition.y}"]`);
+      cellDiv.classList.add("current");
+    }
+
+    function clearWinState() {
+      winMessage.style.display = "none";
+      promptText.textContent = "Start your journey by moving through the maze.";
+      restartButton.style.display = "none";
+    }
+
+    // Initialize and render the maze
+    generateMaze();
+    renderMaze();
+
+    // Movement logic for the player
+    function move(direction) {
+      const { x, y } = playerPosition;
+      let nx = x, ny = y;
+
+      if (direction === "up") ny--;
+      if (direction === "down") ny++;
+      if (direction === "left") nx--;
+      if (direction === "right") nx++;
+
+      if (nx >= 0 && nx < mazeSize && ny >= 0 && ny < mazeSize) {
+        const nextCellType = maze[ny][nx];
+        if (["path", "node", "end"].includes(nextCellType)) {
+          // Move the player
+          const currentCellDiv = mazeContainer.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
+          currentCellDiv.classList.remove("current");
+
+          playerPosition = { x: nx, y: ny };
+          const nextCellDiv = mazeContainer.querySelector(`.cell[data-x="${nx}"][data-y="${ny}"]`);
+          nextCellDiv.classList.add("current");
+
+          if (nextCellType === "end") {
+            // Player reached the end
+            handleWin();
+          } else {
+            updatePrompt(nextCellType);
+          }
+        } else {
+          promptText.textContent = "You hit a wall! Reflect and try another direction.";
+        }
+      }
+    }
+
+    function updatePrompt(cellType) {
+      if (cellType === "node") {
+        promptText.textContent = getRandomPrompt();
+      } else {
+        promptText.textContent = "Keep exploring the maze...";
+      }
+    }
+
+    // Random prompt generator
+    function getRandomPrompt() {
+      const prompts = [
+        "What aspect of your studies are you focusing on now?",
+        "Reflect on a recent project challenge you've faced.",
+        "Think about an idea you encountered in game design.",
+        "What are you curious about in creative technology?",
+        "What are your goals in 3D modeling or design?"
+      ];
+      return prompts[Math.floor(Math.random() * prompts.length)];
+    }
+
+    // Use OpenAI Chat Completion API for flexible response generation
+    async function submitResponse() {
+      const userResponse = document.getElementById("response").value;
+      const apiKey = document.getElementById("apiKey").value.trim();
+
+      if (!apiKey) {
+        promptText.textContent = "Please enter your API key.";
+        return;
+      }
+
+      if (!userResponse) {
+        promptText.textContent = "Please write a reflection before submitting.";
+        return;
+      }
+
+      try {
+        const res = await fetch('https://api.openai.com/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+          },
+          body: JSON.stringify({
+            model: "gpt-3.5-turbo",
+            messages: [{ role: "user", content: userResponse }],
+            max_tokens: 150,
+            temperature: 0.7
+          })
+        });
+        const data = await res.json();
+        if (data.error) {
+          promptText.textContent = `Error: ${data.error.message}`;
+        } else {
+          promptText.textContent = data.choices[0].message.content.trim();
+        }
+      } catch (error) {
+        promptText.textContent = "Error: Could not generate a response.";
+      }
+      document.getElementById("response").value = "";
+    }
+
+    function handleWin() {
+      winMessage.style.display = "block";
+      promptText.textContent = "Congratulations! You've reached the end of the Cognitive Labyrinth. Share your thoughts below.";
+      restartButton.style.display = "inline-block";
+    }
+
+    function restartMaze() {
+      playerPosition = { x: 0, y: 0 };
+      clearWinState();
+      generateMaze();
+      renderMaze();
+    }
+
+    // Add mobile swipe gesture support
+    let startX, startY, endX, endY;
+
+    document.addEventListener('touchstart', handleTouchStart, false);
+    document.addEventListener('touchmove', handleTouchMove, false);
+    document.addEventListener('touchend', handleTouchEnd, false);
+
+    function handleTouchStart(event) {
+      startX = event.touches[0].clientX;
+      startY = event.touches[0].clientY;
+    }
+
+    function handleTouchMove(event) {
+      endX = event.touches[0].clientX;
+      endY = event.touches[0].clientY;
+    }
+
+    function handleTouchEnd() {
+      const deltaX = endX - startX;
+      const deltaY = endY - startY;
+
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        // Horizontal swipe
+        if (deltaX > 0) {
+          move('right');
+        } else {
+          move('left');
+        }
+      } else {
+        // Vertical swipe
+        if (deltaY > 0) {
+          move('down');
+        } else {
+          move('up');
+        }
+      }
+
+      // Reset the values
+      startX = null;
+      startY = null;
+      endX = null;
+      endY = null;
+    }
+  </script>
+</body>
+</html>
