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

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

@@ -1,394 +0,0 @@
-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;