522 lines
14 KiB
TypeScript
522 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
memo,
|
|
Suspense,
|
|
useCallback,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
|
|
import {
|
|
Physics,
|
|
RigidBody,
|
|
CuboidCollider,
|
|
type RapierRigidBody,
|
|
} from '@react-three/rapier';
|
|
import {
|
|
Quaternion,
|
|
SRGBColorSpace,
|
|
TextureLoader,
|
|
Vector3,
|
|
type OrthographicCamera,
|
|
type Texture,
|
|
} from 'three';
|
|
import {
|
|
DEFAULT_ASSETS,
|
|
DEFAULT_DICE_FLOOR_COLOR,
|
|
getAssets,
|
|
getDiceFaceTextureList,
|
|
type DiceCount,
|
|
} from './asset-storage';
|
|
|
|
const FLOOR_SIZE = 6;
|
|
const FLOOR_HALF = FLOOR_SIZE / 2;
|
|
const WALL_THICKNESS = 0.25;
|
|
const WALL_HEIGHT = 8;
|
|
const WALL_HALF_T = WALL_THICKNESS / 2;
|
|
const WALL_HALF_H = WALL_HEIGHT / 2;
|
|
|
|
const STILL_SPEED_SQ = 0.05;
|
|
const STILL_FRAMES = 18;
|
|
const MIN_VIEW_PX = 16;
|
|
|
|
const DEFAULT_DICE_FACE_TEXTURES = getDiceFaceTextureList(DEFAULT_ASSETS.dice);
|
|
|
|
const DICE_FACES = [
|
|
{ value: 1, localNormal: new Vector3(0, 1, 0) },
|
|
{ value: 6, localNormal: new Vector3(0, -1, 0) },
|
|
{ value: 2, localNormal: new Vector3(1, 0, 0) },
|
|
{ value: 5, localNormal: new Vector3(-1, 0, 0) },
|
|
{ value: 3, localNormal: new Vector3(0, 0, 1) },
|
|
{ value: 4, localNormal: new Vector3(0, 0, -1) },
|
|
];
|
|
|
|
const _quat = new Quaternion();
|
|
const _normal = new Vector3();
|
|
const WORLD_UP = new Vector3(0, 1, 0);
|
|
|
|
export type DiceRollResult = {
|
|
sum: number;
|
|
faces: number[];
|
|
};
|
|
|
|
function readTopFace(body: RapierRigidBody): number {
|
|
const r = body.rotation();
|
|
_quat.set(r.x, r.y, r.z, r.w);
|
|
|
|
let bestValue = 1;
|
|
let bestDot = -Infinity;
|
|
for (const face of DICE_FACES) {
|
|
_normal.copy(face.localNormal).applyQuaternion(_quat);
|
|
const dot = _normal.dot(WORLD_UP);
|
|
if (dot > bestDot) {
|
|
bestDot = dot;
|
|
bestValue = face.value;
|
|
}
|
|
}
|
|
return bestValue;
|
|
}
|
|
|
|
function FitSquareFloor() {
|
|
const { camera, size } = useThree();
|
|
|
|
useLayoutEffect(() => {
|
|
const cam = camera as OrthographicCamera;
|
|
cam.left = -FLOOR_HALF;
|
|
cam.right = FLOOR_HALF;
|
|
cam.top = FLOOR_HALF;
|
|
cam.bottom = -FLOOR_HALF;
|
|
cam.near = 0.1;
|
|
cam.far = 50;
|
|
cam.updateProjectionMatrix();
|
|
}, [camera, size.width, size.height]);
|
|
|
|
return null;
|
|
}
|
|
|
|
function InvisibleWalls() {
|
|
const t = WALL_HALF_T;
|
|
const h = WALL_HALF_H;
|
|
const f = FLOOR_HALF;
|
|
|
|
return (
|
|
<>
|
|
<CuboidCollider args={[t, h, f]} position={[f + t, h, 0]} />
|
|
<CuboidCollider args={[t, h, f]} position={[-(f + t), h, 0]} />
|
|
<CuboidCollider args={[f, h, t]} position={[0, h, f + t]} />
|
|
<CuboidCollider args={[f, h, t]} position={[0, h, -(f + t)]} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DiceMesh({ faceUrls }: { faceUrls: string[] }) {
|
|
const textures = useLoader(TextureLoader, faceUrls);
|
|
|
|
useLayoutEffect(() => {
|
|
for (const texture of textures) {
|
|
texture.colorSpace = SRGBColorSpace;
|
|
texture.anisotropy = 8;
|
|
texture.needsUpdate = true;
|
|
}
|
|
}, [textures]);
|
|
|
|
return (
|
|
<mesh castShadow>
|
|
<boxGeometry args={[1, 1, 1]} />
|
|
{textures.map((texture, index) => (
|
|
<meshStandardMaterial
|
|
key={`${texture.uuid}-${index}`}
|
|
attach={`material-${index}`}
|
|
map={texture}
|
|
roughness={0.55}
|
|
metalness={0.05}
|
|
/>
|
|
))}
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
function FloorMesh({
|
|
color,
|
|
imageSrc,
|
|
}: {
|
|
color: string;
|
|
imageSrc: string | null;
|
|
}) {
|
|
const texture = useLoader(
|
|
TextureLoader,
|
|
imageSrc ?? '/background/default.png',
|
|
) as Texture;
|
|
|
|
useLayoutEffect(() => {
|
|
if (!imageSrc) return;
|
|
texture.colorSpace = SRGBColorSpace;
|
|
texture.anisotropy = 8;
|
|
texture.needsUpdate = true;
|
|
}, [imageSrc, texture]);
|
|
|
|
return (
|
|
<mesh rotation={[-Math.PI / 2, 0, 0]}>
|
|
<planeGeometry args={[FLOOR_SIZE, FLOOR_SIZE]} />
|
|
{imageSrc ? (
|
|
<meshBasicMaterial map={texture} />
|
|
) : (
|
|
<meshBasicMaterial color={color} />
|
|
)}
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
function FloorSurface({
|
|
color,
|
|
imageSrc,
|
|
}: {
|
|
color: string;
|
|
imageSrc: string | null;
|
|
}) {
|
|
if (!imageSrc) {
|
|
return (
|
|
<mesh rotation={[-Math.PI / 2, 0, 0]}>
|
|
<planeGeometry args={[FLOOR_SIZE, FLOOR_SIZE]} />
|
|
<meshBasicMaterial color={color} />
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<mesh rotation={[-Math.PI / 2, 0, 0]}>
|
|
<planeGeometry args={[FLOOR_SIZE, FLOOR_SIZE]} />
|
|
<meshBasicMaterial color={color} />
|
|
</mesh>
|
|
}
|
|
>
|
|
<FloorMesh color={color} imageSrc={imageSrc} />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function isBodyStill(body: RapierRigidBody) {
|
|
const lv = body.linvel();
|
|
const av = body.angvel();
|
|
const speedSq =
|
|
lv.x * lv.x + lv.y * lv.y + lv.z * lv.z + av.x * av.x + av.y * av.y + av.z * av.z;
|
|
return speedSq < STILL_SPEED_SQ || body.isSleeping();
|
|
}
|
|
|
|
function DiceSettleWatcher({
|
|
diceRefs,
|
|
rolling,
|
|
onSettled,
|
|
}: {
|
|
diceRefs: React.RefObject<RapierRigidBody | null>[];
|
|
rolling: boolean;
|
|
onSettled: (result: DiceRollResult) => void;
|
|
}) {
|
|
const stillFrames = useRef(0);
|
|
const reported = useRef(false);
|
|
|
|
useFrame(() => {
|
|
if (!rolling) {
|
|
stillFrames.current = 0;
|
|
reported.current = false;
|
|
return;
|
|
}
|
|
|
|
const bodies = diceRefs.map((ref) => ref.current);
|
|
if (bodies.some((body) => !body)) return;
|
|
|
|
if (bodies.every((body) => isBodyStill(body!))) {
|
|
stillFrames.current += 1;
|
|
if (stillFrames.current >= STILL_FRAMES && !reported.current) {
|
|
reported.current = true;
|
|
const faces = bodies.map((body) => readTopFace(body!));
|
|
const sum = faces.reduce((a, b) => a + b, 0);
|
|
onSettled({ sum, faces });
|
|
}
|
|
} else {
|
|
stillFrames.current = 0;
|
|
}
|
|
});
|
|
|
|
return null;
|
|
}
|
|
|
|
function RapierDiceExample({
|
|
diceRefs,
|
|
diceCount,
|
|
rolling,
|
|
onSettled,
|
|
faceUrlSets,
|
|
floorColor,
|
|
floorImage,
|
|
canvasKey,
|
|
}: {
|
|
diceRefs: React.RefObject<RapierRigidBody | null>[];
|
|
diceCount: DiceCount;
|
|
rolling: boolean;
|
|
onSettled: (result: DiceRollResult) => void;
|
|
faceUrlSets: string[][];
|
|
floorColor: string;
|
|
floorImage: string | null;
|
|
canvasKey: number;
|
|
}) {
|
|
const spawnX = diceCount === 2 ? [-0.85, 0.85] : [0];
|
|
|
|
return (
|
|
<Canvas
|
|
key={canvasKey}
|
|
orthographic
|
|
camera={{ position: [0, 20, 0.01], zoom: 1 }}
|
|
className="h-full w-full"
|
|
gl={{ alpha: true, antialias: true }}
|
|
resize={{ scroll: false, debounce: { scroll: 0, resize: 0 } }}
|
|
>
|
|
<FitSquareFloor />
|
|
<ambientLight intensity={0.85} />
|
|
<directionalLight position={[4, 10, 2]} intensity={0.9} />
|
|
<Physics>
|
|
<RigidBody type="fixed" colliders={false} position={[0, 0, 0]}>
|
|
<FloorSurface
|
|
key={`${floorColor}|${floorImage ?? ''}`}
|
|
color={floorColor}
|
|
imageSrc={floorImage}
|
|
/>
|
|
<CuboidCollider args={[FLOOR_HALF, 0.05, FLOOR_HALF]} position={[0, -0.05, 0]} />
|
|
<InvisibleWalls />
|
|
</RigidBody>
|
|
|
|
{spawnX.map((x, index) => (
|
|
<RigidBody
|
|
key={`die-${index}-${diceCount}-${canvasKey}`}
|
|
ref={diceRefs[index]}
|
|
type="dynamic"
|
|
position={[x, 4, index === 0 ? 0 : 0.15]}
|
|
colliders="cuboid"
|
|
restitution={0.2}
|
|
friction={0.6}
|
|
>
|
|
<Suspense
|
|
fallback={
|
|
<mesh>
|
|
<boxGeometry args={[1, 1, 1]} />
|
|
<meshStandardMaterial color="#f8fafc" />
|
|
</mesh>
|
|
}
|
|
>
|
|
<DiceMesh
|
|
key={faceUrlSets[index]?.join('|') ?? index}
|
|
faceUrls={faceUrlSets[index] ?? DEFAULT_DICE_FACE_TEXTURES}
|
|
/>
|
|
</Suspense>
|
|
</RigidBody>
|
|
))}
|
|
|
|
<DiceSettleWatcher
|
|
diceRefs={diceRefs.slice(0, diceCount)}
|
|
rolling={rolling}
|
|
onSettled={onSettled}
|
|
/>
|
|
</Physics>
|
|
</Canvas>
|
|
);
|
|
}
|
|
|
|
function rollDice(body: RapierRigidBody | null) {
|
|
if (!body) return false;
|
|
|
|
body.wakeUp();
|
|
body.setTranslation({ x: body.translation().x, y: 4, z: body.translation().z }, true);
|
|
body.setLinvel({ x: 0, y: 0, z: 0 }, true);
|
|
body.setAngvel({ x: 0, y: 0, z: 0 }, true);
|
|
body.applyImpulse(
|
|
{ x: (Math.random() - 0.5) * 8, y: 4 + Math.random() * 4, z: (Math.random() - 0.5) * 8 },
|
|
true,
|
|
);
|
|
body.applyTorqueImpulse(
|
|
{ x: (Math.random() - 0.5) * 6, y: (Math.random() - 0.5) * 6, z: (Math.random() - 0.5) * 6 },
|
|
true,
|
|
);
|
|
return true;
|
|
}
|
|
|
|
function formatResult(result: DiceRollResult | null) {
|
|
if (!result) return '결과: —';
|
|
if (result.faces.length <= 1) return `결과: ${result.sum}`;
|
|
return `결과: ${result.faces.join(' + ')} = ${result.sum}`;
|
|
}
|
|
|
|
export default memo(function Dice({
|
|
onRolled,
|
|
disabled = false,
|
|
requireDiceQueue = false,
|
|
diceQueue = 0,
|
|
onConsumeDice,
|
|
}: {
|
|
onRolled?: (result: DiceRollResult) => void;
|
|
disabled?: boolean;
|
|
requireDiceQueue?: boolean;
|
|
diceQueue?: number;
|
|
onConsumeDice?: (count?: number) => Promise<{ ok: boolean; error?: string }>;
|
|
}) {
|
|
const hostRef = useRef<HTMLDivElement>(null);
|
|
const diceRefA = useRef<RapierRigidBody>(null);
|
|
const diceRefB = useRef<RapierRigidBody>(null);
|
|
const diceRefs = useMemo(() => [diceRefA, diceRefB], []);
|
|
|
|
const [view, setView] = useState({ w: 0, h: 0, gen: 0 });
|
|
const [rolling, setRolling] = useState(false);
|
|
const [result, setResult] = useState<DiceRollResult | null>(null);
|
|
const [diceCount, setDiceCount] = useState<DiceCount>(1);
|
|
const [faceUrlSets, setFaceUrlSets] = useState<string[][]>([
|
|
[...DEFAULT_DICE_FACE_TEXTURES],
|
|
]);
|
|
const [floorColor, setFloorColor] = useState(DEFAULT_DICE_FLOOR_COLOR);
|
|
const [floorImage, setFloorImage] = useState<string | null>(null);
|
|
const [queueHint, setQueueHint] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const assets = getAssets();
|
|
setDiceCount(assets.diceCount);
|
|
setFaceUrlSets(
|
|
assets.diceCount === 2
|
|
? [getDiceFaceTextureList(assets.dice), getDiceFaceTextureList(assets.dice2)]
|
|
: [getDiceFaceTextureList(assets.dice)],
|
|
);
|
|
setFloorColor(assets.diceFloorColor);
|
|
setFloorImage(assets.diceFloorImage);
|
|
}, []);
|
|
|
|
// 칸 크기가 잡히기 전에 Canvas가 마운트되면 WebGL이 깨져 주사위가 안 보임
|
|
useEffect(() => {
|
|
const el = hostRef.current;
|
|
if (!el || typeof ResizeObserver === 'undefined') return;
|
|
|
|
const apply = (width: number, height: number) => {
|
|
const w = Math.floor(width);
|
|
const h = Math.floor(height);
|
|
setView((prev) => {
|
|
const ready = w >= MIN_VIEW_PX && h >= MIN_VIEW_PX;
|
|
const wasReady = prev.w >= MIN_VIEW_PX && prev.h >= MIN_VIEW_PX;
|
|
if (!ready) return { w, h, gen: prev.gen };
|
|
if (!wasReady) return { w, h, gen: prev.gen + 1 };
|
|
if (Math.abs(w - prev.w) > 4 || Math.abs(h - prev.h) > 4) {
|
|
return { w, h, gen: prev.gen + 1 };
|
|
}
|
|
return prev;
|
|
});
|
|
};
|
|
|
|
apply(el.clientWidth, el.clientHeight);
|
|
const ro = new ResizeObserver((entries) => {
|
|
const cr = entries[0]?.contentRect;
|
|
if (!cr) return;
|
|
apply(cr.width, cr.height);
|
|
});
|
|
ro.observe(el);
|
|
return () => ro.disconnect();
|
|
}, []);
|
|
|
|
const onSettled = useCallback(
|
|
(next: DiceRollResult) => {
|
|
setResult(next);
|
|
setRolling(false);
|
|
onRolled?.(next);
|
|
},
|
|
[onRolled],
|
|
);
|
|
|
|
const canvasReady = view.w >= MIN_VIEW_PX && view.h >= MIN_VIEW_PX && view.gen > 0;
|
|
const busy =
|
|
rolling || disabled || !canvasReady || (requireDiceQueue && diceQueue <= 0);
|
|
|
|
return (
|
|
<div className="relative h-full w-full min-h-0 min-w-0" style={{ containerType: 'size' }}>
|
|
<div
|
|
ref={hostRef}
|
|
className="absolute top-0 left-0 aspect-square w-[min(100%,100cqh)] bg-sky-700/90"
|
|
>
|
|
{canvasReady ? (
|
|
<RapierDiceExample
|
|
diceRefs={diceRefs}
|
|
diceCount={diceCount}
|
|
rolling={rolling}
|
|
onSettled={onSettled}
|
|
faceUrlSets={faceUrlSets}
|
|
floorColor={floorColor}
|
|
floorImage={floorImage}
|
|
canvasKey={view.gen}
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center text-xs text-white/70">
|
|
주사위 준비 중…
|
|
</div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="absolute bottom-2 left-2 z-10 rounded bg-black/70 px-3 py-1 text-sm text-white disabled:opacity-50"
|
|
disabled={busy}
|
|
onClick={() => {
|
|
void (async () => {
|
|
setQueueHint(null);
|
|
if (!canvasReady) {
|
|
setQueueHint('주사위 준비 중…');
|
|
return;
|
|
}
|
|
if (requireDiceQueue) {
|
|
if (!onConsumeDice) {
|
|
setQueueHint('주사위 큐 연동 오류');
|
|
return;
|
|
}
|
|
const consumed = await onConsumeDice(1);
|
|
if (!consumed.ok) {
|
|
setQueueHint(consumed.error || '남은 주사위 없음');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 물리 바디가 아직 없으면 한 프레임 뒤 재시도
|
|
const tryRoll = (attempt: number) => {
|
|
const bodies = Array.from({ length: diceCount }, (_, i) => diceRefs[i].current);
|
|
if (bodies.some((b) => !b)) {
|
|
if (attempt < 8) {
|
|
requestAnimationFrame(() => tryRoll(attempt + 1));
|
|
return;
|
|
}
|
|
setQueueHint('주사위 준비 중…');
|
|
setRolling(false);
|
|
return;
|
|
}
|
|
setResult(null);
|
|
setRolling(true);
|
|
for (const body of bodies) rollDice(body);
|
|
};
|
|
tryRoll(0);
|
|
})();
|
|
}}
|
|
>
|
|
Roll{requireDiceQueue ? ` (${diceQueue})` : ''}
|
|
</button>
|
|
<div className="pointer-events-none absolute right-2 bottom-2 z-10 rounded bg-black/70 px-3 py-1 text-sm text-white">
|
|
{queueHint
|
|
? queueHint
|
|
: !canvasReady
|
|
? '주사위 준비 중…'
|
|
: rolling
|
|
? '굴리는 중…'
|
|
: disabled
|
|
? '이동 중…'
|
|
: requireDiceQueue && diceQueue <= 0
|
|
? '후원 대기 중…'
|
|
: formatResult(result)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|