주루마블 기본 알고리즘 생성중.

- 시작위치 생성 - 각 위치별 추가 이벤트시 사용될 이벤트 알고리즘 - Rapier, Three.js를 통한 주사위.
2026-09-07 20:50:21 +09:00
parent 7608b166b3
commit fc6eb5fce1
17 changed files with 1430 additions and 56 deletions
--- a/app/game/diceplane.tsx
+++ b/app/game/diceplane.tsx
@@ -1,77 +1,307 @@
 'use client';

-import { useState } from 'react';
-
-type PlaneCell = { id: number; x: number; y: number; type: string };
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Dice from './dice';
+import { Chessman } from './chessman';
+import ChessmanPiece from './chessman-piece';
+import {
+  applyLandEvent,
+  type PlaneCell,
+} from './cell-event';

 const PLANE_SIZE = { width: 9, height: 7 } as const;
+const STEP_MS = 280;

 const CELL_TYPES = ['한잔', '안주', '모두한잔', '두잔', '벌칙1', '벌칙2'] as const;

+/** 특수 칸 배치 (28칸 기준 인덱스) */
+const SPECIAL_CELLS: Record<number, { type: string; eventId: string }> = {
+  7: { type: '무인도', eventId: 'island' },
+  14: { type: '역방향', eventId: 'reverse' },
+  21: { type: '비행기', eventId: 'airplane' }, // → 시작(0)
+};
+
 function randomType() {
  return CELL_TYPES[Math.floor(Math.random() * CELL_TYPES.length)];
 }

+function cellLabel(cell: PlaneCell | undefined, index: number) {
+  if (!cell) return '';
+  return index === 0 ? '시작' : cell.type;
+}
+
+function cellColor(cell: PlaneCell, index: number) {
+  if (index === 0) return '#059669';
+  switch (cell.eventId) {
+    case 'island':
+      return '#0f766e';
+    case 'reverse':
+      return '#7c3aed';
+    case 'airplane':
+      return '#0284c7';
+    default:
+      return '#e11d48';
+  }
+}
+
 /** 시계방향 둘레 칸. 모서리는 한 번만 넣어서 9x7 기준 28칸이 된다. */
-function buildPerimeter(width: number, height: number): PlaneCell[] {
+function buildPerimeter(width: number, height: number, assignType: () => string): PlaneCell[] {
  const cells: PlaneCell[] = [];
  let id = 0;

  for (let x = 0; x < width; x++) {
-    cells.push({ id: id++, x, y: 0, type: randomType() });
+    cells.push({ id: id++, x, y: 0, type: assignType() });
  }
  for (let y = 1; y < height; y++) {
-    cells.push({ id: id++, x: width - 1, y, type: randomType() });
+    cells.push({ id: id++, x: width - 1, y, type: assignType() });
  }
  for (let x = width - 2; x >= 0; x--) {
-    cells.push({ id: id++, x, y: height - 1, type: randomType() });
+    cells.push({ id: id++, x, y: height - 1, type: assignType() });
  }
  for (let y = height - 2; y >= 1; y--) {
-    cells.push({ id: id++, x: 0, y, type: randomType() });
+    cells.push({ id: id++, x: 0, y, type: assignType() });
+  }
+
+  if (cells[0]) {
+    cells[0].type = '시작';
+    cells[0].eventId = null;
+  }
+
+  for (const [indexText, special] of Object.entries(SPECIAL_CELLS)) {
+    const index = Number(indexText);
+    if (cells[index]) {
+      cells[index].type = special.type;
+      cells[index].eventId = special.eventId;
+    }
  }

  return cells;
 }

 export default function DicePlane() {
-  const [dicePlaneArray] = useState(() =>
-    buildPerimeter(PLANE_SIZE.width, PLANE_SIZE.height),
+  const [dicePlaneArray, setDicePlaneArray] = useState(() =>
+    buildPerimeter(PLANE_SIZE.width, PLANE_SIZE.height, () => 'none'),
+  );
+  const chessmanRef = useRef(new Chessman(28));
+  const boardRef = useRef(dicePlaneArray);
+  const [chessmanIndex, setChessmanIndex] = useState(0);
+  const [hopKey, setHopKey] = useState(0);
+  const [moving, setMoving] = useState(false);
+  const [landedLabel, setLandedLabel] = useState<string | null>(null);
+  const [landedKey, setLandedKey] = useState(0);
+  const [statusText, setStatusText] = useState('시계방향');
+  const [islandTurnsLeft, setIslandTurnsLeft] = useState(0);
+  const moveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const cells = buildPerimeter(PLANE_SIZE.width, PLANE_SIZE.height, randomType);
+    chessmanRef.current = new Chessman(cells.length, 0);
+    boardRef.current = cells;
+    setChessmanIndex(0);
+    setHopKey(0);
+    setLandedLabel(null);
+    setStatusText('시계방향');
+    setIslandTurnsLeft(0);
+    setDicePlaneArray(cells);
+  }, []);
+
+  useEffect(() => {
+    boardRef.current = dicePlaneArray;
+  }, [dicePlaneArray]);
+
+  useEffect(() => {
+    return () => {
+      if (moveTimerRef.current) clearTimeout(moveTimerRef.current);
+    };
+  }, []);
+
+  const showBanner = useCallback((message: string) => {
+    setLandedLabel(message);
+    setLandedKey((k) => k + 1);
+  }, []);
+
+  const applyLanding = useCallback(
+    (landIndex: number, roll: number) => {
+      const man = chessmanRef.current;
+      const result = applyLandEvent({
+        chessman: man,
+        board: boardRef.current,
+        roll,
+        landIndex,
+      });
+
+      setStatusText(man.facing === 1 ? '시계방향' : '반시계방향');
+      setIslandTurnsLeft(man.islandTurnsLeft);
+
+      if (result?.teleportTo != null) {
+        setChessmanIndex(result.teleportTo);
+        setHopKey((k) => k + 1);
+        showBanner(result.message);
+        return;
+      }
+
+      showBanner(result?.message ?? cellLabel(boardRef.current[landIndex], landIndex));
+    },
+    [showBanner],
  );

+  const animateMove = useCallback(
+    (steps: number, roll: number) => {
+      const amount = Math.max(0, Math.trunc(steps));
+      if (amount === 0) {
+        setMoving(false);
+        return;
+      }
+
+      setMoving(true);
+      let remaining = amount;
+
+      const stepOnce = () => {
+        const next = chessmanRef.current.moveOne();
+        setChessmanIndex(next);
+        setHopKey((k) => k + 1);
+        remaining -= 1;
+
+        if (remaining > 0) {
+          moveTimerRef.current = setTimeout(stepOnce, STEP_MS);
+        } else {
+          moveTimerRef.current = null;
+          setMoving(false);
+          applyLanding(next, roll);
+        }
+      };
+
+      stepOnce();
+    },
+    [applyLanding],
+  );
+
+  const onDiceRolled = useCallback(
+    (value: number) => {
+      const roll = Math.max(0, Math.trunc(value));
+      if (roll === 0) return;
+
+      setLandedLabel(null);
+      const man = chessmanRef.current;
+
+      if (man.isOnIsland) {
+        const outcome = man.resolveIslandRoll(roll);
+        setIslandTurnsLeft(man.islandTurnsLeft);
+        if (outcome === 'wait') {
+          showBanner(
+            man.isOnIsland
+              ? `무인도 대기 (남은 ${man.islandTurnsLeft}턴)`
+              : '무인도 3턴 종료!',
+          );
+          return;
+        }
+        // escape with 6
+        showBanner('무인도 탈출!');
+      }
+
+      animateMove(roll, roll);
+    },
+    [animateMove, showBanner],
+  );
+
+  const chessmanCell = dicePlaneArray[chessmanIndex] ?? dicePlaneArray[0];
+
  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: `repeat(${PLANE_SIZE.width}, minmax(0, 1fr))`,
-        gridTemplateRows: `repeat(${PLANE_SIZE.height}, minmax(0, 1fr))`,
-        gap: 'clamp(6px, 1vw, 12px)',
-        padding: 'clamp(8px, 1.2vw, 16px)',
-        width: '100%',
-        height: '100%',
-        boxSizing: 'border-box',
-      }}
-    >
-      {dicePlaneArray.map((plane) => (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${PLANE_SIZE.width}, minmax(0, 1fr))`,
+          gridTemplateRows: `repeat(${PLANE_SIZE.height}, minmax(0, 1fr))`,
+          gap: 'clamp(6px, 1vw, 12px)',
+          padding: 'clamp(8px, 1.2vw, 16px)',
+          width: '100%',
+          height: '100%',
+          boxSizing: 'border-box',
+        }}
+      >
+        {dicePlaneArray.map((plane, index) => {
+          const isStart = index === 0;
+          const isLanded = !moving && index === chessmanIndex && landedLabel != null;
+          return (
+            <div
+              key={plane.id}
+              style={{
+                gridColumn: plane.x + 1,
+                gridRow: plane.y + 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: cellColor(plane, index),
+                color: 'white',
+                borderRadius: 8,
+                fontSize: 'clamp(11px, 1.6vw, 16px)',
+                fontWeight: 600,
+                textAlign: 'center',
+                padding: 4,
+                boxShadow: isLanded
+                  ? '0 0 0 3px #fde68a, 0 0 18px rgba(253, 224, 71, 0.75)'
+                  : isStart
+                    ? 'inset 0 0 0 2px #a7f3d0'
+                    : undefined,
+                transform: isLanded ? 'scale(1.04)' : undefined,
+                transition: 'box-shadow 180ms ease, transform 180ms ease',
+                zIndex: isLanded ? 4 : undefined,
+              }}
+            >
+              {isStart ? '시작' : plane.type}
+            </div>
+          );
+        })}
+
+        {chessmanCell && (
+          <ChessmanPiece x={chessmanCell.x} y={chessmanCell.y} hopKey={hopKey} />
+        )}
+
        <div
-          key={plane.id}
          style={{
-            gridColumn: plane.x + 1,
-            gridRow: plane.y + 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: '#e11d48',
-            color: 'white',
-            borderRadius: 8,
-            fontSize: 'clamp(11px, 1.6vw, 16px)',
-            fontWeight: 600,
-            textAlign: 'center',
-            padding: 4,
+            gridColumn: '2 / 4',
+            gridRow: '2 / 4',
+            minWidth: 0,
+            minHeight: 0,
+            zIndex: 6,
          }}
        >
-          {plane.type}
+          <Dice onRolled={onDiceRolled} disabled={moving} />
        </div>
-      ))}
+      </div>
+
+      <div className="pointer-events-none absolute top-3 right-3 z-20 rounded bg-black/65 px-3 py-1 text-sm text-white">
+        {statusText}
+        {islandTurnsLeft > 0 ? ` · 무인도 ${islandTurnsLeft}턴` : ''}
+      </div>
+
+      {landedLabel && (
+        <div
+          className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center"
+          aria-live="polite"
+        >
+          <div
+            key={landedKey}
+            style={{
+              padding: 'clamp(12px, 2vw, 28px) clamp(20px, 4vw, 48px)',
+              borderRadius: 16,
+              background: 'rgba(15, 23, 42, 0.78)',
+              color: '#fff7ed',
+              fontSize: 'clamp(1.6rem, 6vw, 4rem)',
+              fontWeight: 800,
+              letterSpacing: '0.04em',
+              textShadow: '0 4px 24px rgba(0,0,0,0.45)',
+              boxShadow: '0 12px 40px rgba(0,0,0,0.35)',
+              animation: 'drinkmarble-landed-pop 420ms ease-out',
+              maxWidth: '80%',
+              textAlign: 'center',
+            }}
+          >
+            {landedLabel}
+          </div>
+        </div>
+      )}
    </div>
  );
 }