@licklist/design 0.78.5-dev.107 → 0.78.5-dev.108

package/src/v2/shadcn/_reference/games/MazeGame.tsx

@@ -0,0 +1,394 @@
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { useIsMobile } from '../../hooks/use-mobile';
+
+const CELL_SIZE = 16;
+const PLAYER_SIZE = 12;
+const CHUNK_SIZE = 12;
+const VISIBLE_COLS = 20;
+const VISIBLE_ROWS = 16;
+
+interface Cell {
+  x: number;
+  y: number;
+  walls: { top: boolean; right: boolean; bottom: boolean; left: boolean };
+  visited: boolean;
+}
+
+type WallSide = 'top' | 'right' | 'bottom' | 'left';
+type Direction = 'up' | 'down' | 'left' | 'right';
+
+const generateMazeChunk = (
+  chunkX: number,
+  chunkY: number,
+  existingCells: Map<string, Cell>
+): Map<string, Cell> => {
+  const cells = new Map<string, Cell>();
+  const startX = chunkX * CHUNK_SIZE;
+  const startY = chunkY * CHUNK_SIZE;
+
+  // Create fresh cells for this chunk only
+  for (let y = startY; y < startY + CHUNK_SIZE; y++) {
+    for (let x = startX; x < startX + CHUNK_SIZE; x++) {
+      const key = `${x},${y}`;
+      if (existingCells.has(key)) {
+        // Already generated — skip entirely
+        continue;
+      }
+      cells.set(key, { x, y, walls: { top: true, right: true, bottom: true, left: true }, visited: false });
+    }
+  }
+
+  // If all cells already existed, nothing to do
+  if (cells.size === 0) return cells;
+
+  // Run DFS only on new (unvisited) cells
+  const allNewKeys = Array.from(cells.keys());
+  const firstKey = allNewKeys[0];
+  const stack: Cell[] = [];
+  const first = cells.get(firstKey)!;
+  first.visited = true;
+  stack.push(first);
+
+  const oppMap: Record<WallSide, WallSide> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+
+  while (stack.length > 0) {
+    const current = stack[stack.length - 1];
+    const neighbors: { cell: Cell; dir: WallSide }[] = [];
+    const dirs: { dx: number; dy: number; dir: WallSide }[] = [
+      { dx: 0, dy: -1, dir: 'top' },
+      { dx: 1, dy: 0, dir: 'right' },
+      { dx: 0, dy: 1, dir: 'bottom' },
+      { dx: -1, dy: 0, dir: 'left' },
+    ];
+
+    for (const { dx, dy, dir } of dirs) {
+      const nx = current.x + dx;
+      const ny = current.y + dy;
+      const key = `${nx},${ny}`;
+      const neighbor = cells.get(key);
+      if (neighbor && !neighbor.visited) {
+        neighbors.push({ cell: neighbor, dir });
+      }
+    }
+
+    if (neighbors.length > 0) {
+      const { cell: next, dir } = neighbors[Math.floor(Math.random() * neighbors.length)];
+      current.walls[dir] = false;
+      next.walls[oppMap[dir]] = false;
+      next.visited = true;
+      stack.push(next);
+    } else {
+      stack.pop();
+    }
+  }
+
+  // Open passages at chunk borders and sync with existing neighbors
+  for (let i = 0; i < CHUNK_SIZE; i++) {
+    // Right border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX + CHUNK_SIZE - 1},${startY + i}`);
+      const neighborKey = `${startX + CHUNK_SIZE},${startY + i}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.right = false;
+        if (neighbor) neighbor.walls.left = false;
+      }
+    }
+    // Bottom border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX + i},${startY + CHUNK_SIZE - 1}`);
+      const neighborKey = `${startX + i},${startY + CHUNK_SIZE}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.bottom = false;
+        if (neighbor) neighbor.walls.top = false;
+      }
+    }
+    // Left border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX},${startY + i}`);
+      const neighborKey = `${startX - 1},${startY + i}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.left = false;
+        if (neighbor) neighbor.walls.right = false;
+      }
+    }
+    // Top border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX + i},${startY}`);
+      const neighborKey = `${startX + i},${startY - 1}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.top = false;
+        if (neighbor) neighbor.walls.bottom = false;
+      }
+    }
+  }
+
+  // CRITICAL: Sync walls with any pre-existing neighbor cells.
+  // If an existing neighbor already has a wall open toward us, we must match it.
+  cells.forEach((cell) => {
+    const syncDirs: { dx: number; dy: number; wall: WallSide; oppWall: WallSide }[] = [
+      { dx: 0, dy: -1, wall: 'top', oppWall: 'bottom' },
+      { dx: 1, dy: 0, wall: 'right', oppWall: 'left' },
+      { dx: 0, dy: 1, wall: 'bottom', oppWall: 'top' },
+      { dx: -1, dy: 0, wall: 'left', oppWall: 'right' },
+    ];
+    for (const { dx, dy, wall, oppWall } of syncDirs) {
+      const neighborKey = `${cell.x + dx},${cell.y + dy}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (neighbor) {
+        // If neighbor has its wall open toward us, open our wall too
+        if (!neighbor.walls[oppWall]) {
+          cell.walls[wall] = false;
+        }
+        // If we have our wall open toward neighbor, open their wall too
+        if (!cell.walls[wall]) {
+          neighbor.walls[oppWall] = false;
+        }
+      }
+    }
+  });
+
+  return cells;
+};
+
+const DPad: React.FC<{ onDirection: (dir: Direction) => void }> = ({ onDirection }) => {
+  const btnClass = "w-10 h-10 flex items-center justify-center border border-border-primary rounded-lg bg-surface-secondary text-label-primary text-base font-mono active:bg-surface-tertiary select-none touch-manipulation";
+
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <button
+        className={btnClass}
+        onTouchStart={(e) => { e.preventDefault(); onDirection('up'); }}
+        onMouseDown={() => onDirection('up')}
+        type="button"
+      >↑</button>
+      <div className="flex gap-1">
+        <button
+          className={btnClass}
+          onTouchStart={(e) => { e.preventDefault(); onDirection('left'); }}
+          onMouseDown={() => onDirection('left')}
+          type="button"
+        >←</button>
+        <button
+          className={btnClass}
+          onTouchStart={(e) => { e.preventDefault(); onDirection('down'); }}
+          onMouseDown={() => onDirection('down')}
+          type="button"
+        >↓</button>
+        <button
+          className={btnClass}
+          onTouchStart={(e) => { e.preventDefault(); onDirection('right'); }}
+          onMouseDown={() => onDirection('right')}
+          type="button"
+        >→</button>
+      </div>
+    </div>
+  );
+};
+
+const MazeGame: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const isMobile = useIsMobile();
+  const gameStateRef = useRef({
+    playerX: 1,
+    playerY: 1,
+    visualX: 1,
+    visualY: 1,
+    cells: new Map<string, Cell>(),
+    loadedChunks: new Set<string>(),
+    moveQueue: [] as Direction[],
+    isAnimating: false,
+  });
+  const animFrameRef = useRef<number>(0);
+  const [gameStarted, setGameStarted] = useState(false);
+
+  const ensureChunksAround = useCallback((px: number, py: number) => {
+    const state = gameStateRef.current;
+    const cx = Math.floor(px / CHUNK_SIZE);
+    const cy = Math.floor(py / CHUNK_SIZE);
+
+    for (let dy = -1; dy <= 1; dy++) {
+      for (let dx = -1; dx <= 1; dx++) {
+        const key = `${cx + dx},${cy + dy}`;
+        if (!state.loadedChunks.has(key)) {
+          state.loadedChunks.add(key);
+          const newCells = generateMazeChunk(cx + dx, cy + dy, state.cells);
+          newCells.forEach((cell, k) => {
+            state.cells.set(k, cell);
+          });
+        }
+      }
+    }
+  }, []);
+
+  const dirToWall: Record<Direction, WallSide> = { up: 'top', down: 'bottom', left: 'left', right: 'right' };
+
+  const canMoveDir = useCallback((x: number, y: number, dir: Direction): boolean => {
+    const state = gameStateRef.current;
+    const cell = state.cells.get(`${x},${y}`);
+    if (!cell) return false;
+    if (cell.walls[dirToWall[dir]]) return false;
+
+    // Also check the destination cell's opposing wall
+    const moveMap: Record<Direction, { dx: number; dy: number }> = {
+      up: { dx: 0, dy: -1 }, down: { dx: 0, dy: 1 },
+      left: { dx: -1, dy: 0 }, right: { dx: 1, dy: 0 },
+    };
+    const oppWall: Record<Direction, WallSide> = { up: 'bottom', down: 'top', left: 'right', right: 'left' };
+    const dest = state.cells.get(`${x + moveMap[dir].dx},${y + moveMap[dir].dy}`);
+    if (!dest) return false;
+    return !dest.walls[oppWall[dir]];
+  }, []);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const state = gameStateRef.current;
+    const { visualX, visualY } = state;
+
+    const computedStyle = getComputedStyle(document.documentElement);
+    const wallColor = computedStyle.getPropertyValue('--fill-secondary').trim();
+    const playerColor = computedStyle.getPropertyValue('--fill-primary').trim();
+    const bgColor = computedStyle.getPropertyValue('--surface-primary').trim();
+
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const offsetX = visualX - Math.floor(VISIBLE_COLS / 2);
+    const offsetY = visualY - Math.floor(VISIBLE_ROWS / 2);
+
+    const fracX = offsetX % 1;
+    const fracY = offsetY % 1;
+    const baseX = Math.floor(offsetX);
+    const baseY = Math.floor(offsetY);
+
+    for (let vy = -2; vy <= VISIBLE_ROWS + 2; vy++) {
+      for (let vx = -2; vx <= VISIBLE_COLS + 2; vx++) {
+        const cellX = baseX + vx;
+        const cellY = baseY + vy;
+        const cell = state.cells.get(`${cellX},${cellY}`);
+        if (!cell) continue;
+
+        const sx = (vx - fracX) * CELL_SIZE;
+        const sy = (vy - fracY) * CELL_SIZE;
+
+        ctx.strokeStyle = wallColor;
+        ctx.lineWidth = 2;
+
+        if (cell.walls.top) { ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(sx + CELL_SIZE, sy); ctx.stroke(); }
+        if (cell.walls.right) { ctx.beginPath(); ctx.moveTo(sx + CELL_SIZE, sy); ctx.lineTo(sx + CELL_SIZE, sy + CELL_SIZE); ctx.stroke(); }
+        if (cell.walls.bottom) { ctx.beginPath(); ctx.moveTo(sx, sy + CELL_SIZE); ctx.lineTo(sx + CELL_SIZE, sy + CELL_SIZE); ctx.stroke(); }
+        if (cell.walls.left) { ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(sx, sy + CELL_SIZE); ctx.stroke(); }
+      }
+    }
+
+    const px = Math.floor(VISIBLE_COLS / 2) * CELL_SIZE + (CELL_SIZE - PLAYER_SIZE) / 2;
+    const py = Math.floor(VISIBLE_ROWS / 2) * CELL_SIZE + (CELL_SIZE - PLAYER_SIZE) / 2;
+    ctx.fillStyle = playerColor;
+    ctx.fillRect(px, py, PLAYER_SIZE, PLAYER_SIZE);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(px + 2, py + 3, 3, 3);
+    ctx.fillRect(px + PLAYER_SIZE - 5, py + 3, 3, 3);
+  }, []);
+
+  const animate = useCallback(() => {
+    const state = gameStateRef.current;
+    const lerp = 0.25;
+    const dx = state.playerX - state.visualX;
+    const dy = state.playerY - state.visualY;
+
+    if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01) {
+      state.visualX = state.playerX;
+      state.visualY = state.playerY;
+      state.isAnimating = false;
+      draw();
+      return;
+    }
+
+    state.visualX += dx * lerp;
+    state.visualY += dy * lerp;
+    draw();
+    animFrameRef.current = requestAnimationFrame(animate);
+  }, [draw]);
+
+  const startAnimation = useCallback(() => {
+    const state = gameStateRef.current;
+    if (!state.isAnimating) {
+      state.isAnimating = true;
+      animFrameRef.current = requestAnimationFrame(animate);
+    }
+  }, [animate]);
+
+  const movePlayer = useCallback((dir: Direction) => {
+    const state = gameStateRef.current;
+    const moveMap: Record<Direction, { dx: number; dy: number }> = {
+      up: { dx: 0, dy: -1 }, down: { dx: 0, dy: 1 },
+      left: { dx: -1, dy: 0 }, right: { dx: 1, dy: 0 },
+    };
+
+    if (!gameStarted) setGameStarted(true);
+
+    if (canMoveDir(state.playerX, state.playerY, dir)) {
+      state.playerX += moveMap[dir].dx;
+      state.playerY += moveMap[dir].dy;
+      ensureChunksAround(state.playerX, state.playerY);
+      startAnimation();
+    }
+  }, [canMoveDir, ensureChunksAround, gameStarted, startAnimation]);
+
+  useEffect(() => {
+    const state = gameStateRef.current;
+    ensureChunksAround(state.playerX, state.playerY);
+    draw();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const dirMap: Record<string, Direction> = {
+        ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right',
+        w: 'up', s: 'down', a: 'left', d: 'right',
+        W: 'up', S: 'down', A: 'left', D: 'right',
+      };
+      const dir = dirMap[e.key];
+      if (!dir) return;
+      e.preventDefault();
+      movePlayer(dir);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      cancelAnimationFrame(animFrameRef.current);
+    };
+  }, [draw, ensureChunksAround, movePlayer]);
+
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <p className="text-[13px] leading-4 font-mono text-label-secondary">
+        {gameStarted
+          ? "Escape the maze and we'll grant you access."
+          : isMobile ? "Tap the arrows to start" : "Use arrow keys to start"
+        }
+      </p>
+      <div className="border-2 border-border-primary rounded-lg overflow-hidden relative">
+        <canvas
+          ref={canvasRef}
+          width={VISIBLE_COLS * CELL_SIZE}
+          height={VISIBLE_ROWS * CELL_SIZE}
+          className="block"
+          style={{ imageRendering: 'pixelated' }}
+        />
+      </div>
+
+      {isMobile && (
+        <DPad onDirection={movePlayer} />
+      )}
+    </div>
+  );
+};
+
+export default MazeGame;