222 lines
8.5 KiB
TypeScript
222 lines
8.5 KiB
TypeScript
'use client';
|
|
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import DicePlane from './diceplane';
|
|
import { DEFAULT_ASSETS, getAssets } from './asset-storage';
|
|
import { useRoom } from '@/lib/rooms/client';
|
|
import { SHOW_DEBUG_UI } from '@/lib/ui/debug';
|
|
|
|
function GamePageInner() {
|
|
const searchParams = useSearchParams();
|
|
const roomId = searchParams.get('roomId');
|
|
const [backgroundSrc, setBackgroundSrc] = useState(DEFAULT_ASSETS.background);
|
|
const [ready, setReady] = useState(false);
|
|
const [simAmount, setSimAmount] = useState(1000);
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
const [addDiceCount, setAddDiceCount] = useState(1);
|
|
const [addDiceHint, setAddDiceHint] = useState<string | null>(null);
|
|
const { room, error, consumeDice, simulateDonation, addDice } = useRoom(roomId);
|
|
const chzzkOn = Boolean(room?.settings.chzzkEnabled);
|
|
const manualMode = Boolean(roomId) && room != null && !chzzkOn;
|
|
|
|
useEffect(() => {
|
|
setBackgroundSrc(getAssets().background);
|
|
setReady(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!settingsOpen) setAddDiceHint(null);
|
|
}, [settingsOpen]);
|
|
|
|
const onAddDice = async () => {
|
|
if (!roomId || !chzzkOn) return;
|
|
const count = Math.max(1, Math.trunc(addDiceCount) || 1);
|
|
const result = await addDice(count);
|
|
if (!result.ok) {
|
|
setAddDiceHint(result.error || '추가 실패');
|
|
return;
|
|
}
|
|
setAddDiceHint(`주사위 +${count} 추가했습니다.`);
|
|
};
|
|
|
|
return (
|
|
<div className="relative h-screen w-screen overflow-hidden">
|
|
{ready && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={backgroundSrc}
|
|
alt=""
|
|
aria-hidden
|
|
draggable={false}
|
|
className="pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
|
|
/>
|
|
)}
|
|
<div className="absolute inset-0 z-0 bg-black/25" aria-hidden />
|
|
|
|
{SHOW_DEBUG_UI && (
|
|
<div className="absolute top-3 left-3 z-40 flex flex-col items-start gap-2">
|
|
{roomId && chzzkOn && (
|
|
<div className="max-w-[min(100vw-2rem,20rem)] rounded-xl bg-black/75 px-3 py-2 text-xs text-white">
|
|
<p className="font-semibold">주사위 큐: {room?.diceQueue ?? '…'}</p>
|
|
{room?.settings.channelId && (
|
|
<p className="mt-1 break-all font-mono text-[10px] text-white/50">
|
|
채널 ID: {room.settings.channelId}
|
|
</p>
|
|
)}
|
|
{room && (
|
|
<p className="mt-1 text-white/70">
|
|
{room.channelName || room.settings.channelId || '—'} · {room.chatStatus}
|
|
{` · ${room.settings.cheesePerDice}원/${
|
|
room.settings.multiplyByCheese
|
|
? `배수${room.settings.maxMultiplier > 0 ? `≤${room.settings.maxMultiplier}` : ''}`
|
|
: '1회'
|
|
}`}
|
|
</p>
|
|
)}
|
|
{error && <p className="mt-1 text-red-300">{error}</p>}
|
|
{room?.chatError && <p className="mt-1 text-red-300">{room.chatError}</p>}
|
|
{room?.lastDonations?.[0] && (
|
|
<p className="mt-1 text-amber-200">
|
|
최근: {room.lastDonations[0].donatorNickname}{' '}
|
|
{room.lastDonations[0].payAmount}원 → +{room.lastDonations[0].diceAdded}
|
|
</p>
|
|
)}
|
|
<div className="mt-2 flex items-center gap-1">
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
value={simAmount}
|
|
onChange={(e) => setSimAmount(Number(e.target.value) || 1)}
|
|
className="w-24 rounded border border-white/20 bg-black/50 px-2 py-1 text-white"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="rounded bg-white/15 px-2 py-1 hover:bg-white/25"
|
|
onClick={() => void simulateDonation(simAmount).catch(() => undefined)}
|
|
>
|
|
후원 시뮬
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{manualMode && (
|
|
<div className="max-w-[min(100vw-2rem,20rem)] rounded-xl bg-black/75 px-3 py-2 text-xs text-white">
|
|
<p className="font-semibold">수동 모드</p>
|
|
<p className="mt-1 text-white/70">
|
|
치지직·채팅 연동 없음 · 주사위는 자유롭게 굴릴 수 있습니다.
|
|
</p>
|
|
{error && <p className="mt-1 text-red-300">{error}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative z-10 h-full w-full">
|
|
<DicePlane
|
|
requireDiceQueue={chzzkOn}
|
|
diceQueue={room?.diceQueue ?? 0}
|
|
onConsumeDice={consumeDice}
|
|
showChatFeed={chzzkOn}
|
|
chatFeed={chzzkOn ? room?.chatFeed ?? [] : []}
|
|
settingsButton={
|
|
<button
|
|
type="button"
|
|
aria-label="설정"
|
|
aria-expanded={settingsOpen}
|
|
onClick={() => setSettingsOpen((v) => !v)}
|
|
className="rounded-md bg-black/70 px-3 py-1.5 text-sm font-semibold text-white shadow-md hover:bg-black/85"
|
|
>
|
|
설정
|
|
</button>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{settingsOpen && (
|
|
<div
|
|
className="absolute inset-0 z-50 flex items-center justify-center bg-black/45 p-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="게임 설정"
|
|
onClick={() => setSettingsOpen(false)}
|
|
>
|
|
<div
|
|
className="w-full max-w-sm rounded-2xl border border-white/15 bg-slate-950/95 px-5 py-4 text-white shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-base font-semibold">설정</h2>
|
|
<button
|
|
type="button"
|
|
className="rounded px-2 py-1 text-sm text-white/70 hover:bg-white/10 hover:text-white"
|
|
onClick={() => setSettingsOpen(false)}
|
|
>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-col gap-3">
|
|
<Link
|
|
href="/"
|
|
className="rounded-lg bg-white/10 px-4 py-2.5 text-center text-sm font-medium hover:bg-white/15"
|
|
>
|
|
홈으로
|
|
</Link>
|
|
|
|
{roomId && chzzkOn ? (
|
|
<div className="rounded-lg border border-white/10 bg-black/30 p-3">
|
|
<p className="text-xs text-white/60">주사위 큐 수동 추가</p>
|
|
<p className="mt-1 text-sm text-white/80">
|
|
현재 큐: <span className="font-semibold">{room?.diceQueue ?? 0}</span>
|
|
</p>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
value={addDiceCount}
|
|
onChange={(e) => setAddDiceCount(Number(e.target.value) || 1)}
|
|
className="w-20 rounded border border-white/20 bg-black/50 px-2 py-1.5 text-sm text-white"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="rounded-lg bg-sky-700 px-3 py-1.5 text-sm font-medium hover:bg-sky-600"
|
|
onClick={() => void onAddDice()}
|
|
>
|
|
카운트 추가
|
|
</button>
|
|
</div>
|
|
{addDiceHint && (
|
|
<p className="mt-2 text-xs text-amber-200">{addDiceHint}</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-xs text-white/65">
|
|
{manualMode
|
|
? '수동 모드에서는 주사위 큐 없이 바로 굴릴 수 있습니다.'
|
|
: '치지직 연동 방에 입장하면 여기서 주사위 카운트를 추가할 수 있습니다.'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function GamePage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="flex h-screen items-center justify-center bg-black text-white">
|
|
불러오는 중…
|
|
</div>
|
|
}
|
|
>
|
|
<GamePageInner />
|
|
</Suspense>
|
|
);
|
|
}
|