60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import { useAppContext } from '@/app/AppContext';
|
|
import { Eye } from 'lucide-react';
|
|
|
|
import CardSelect from '@/components/CardSelect';
|
|
import CopyButton from '@/components/CopyButton';
|
|
import Notes from '@/components/Notes';
|
|
import NotFound from '@/components/NotFound';
|
|
import Settings from '@/components/Settings';
|
|
import TarokkaGrid from '@/components/TarokkaGrid';
|
|
|
|
import type { Deck } from '@/types';
|
|
|
|
export default function GamePage() {
|
|
const { gameData, noGame, handleSettings, select, setGameID } = useAppContext();
|
|
const { gameID } = useParams();
|
|
|
|
const [selectCard, setSelectCard] = useState(-1);
|
|
|
|
const { dmID, cards, settings } = gameData;
|
|
const isDM = !!dmID;
|
|
const selectDeck: Deck | null = selectCard >= 0 ? cards[selectCard].deck : null;
|
|
|
|
useEffect(() => {
|
|
if (gameID) {
|
|
setGameID(Array.isArray(gameID) ? gameID[0] : gameID);
|
|
}
|
|
}, [gameID]);
|
|
|
|
return noGame ? (
|
|
<NotFound />
|
|
) : cards ? (
|
|
<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
|
|
{isDM && (
|
|
<CopyButton
|
|
copy={`${location.origin}/${gameData.spectatorID}`}
|
|
tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
|
|
Icon={Eye}
|
|
className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
|
|
size={24}
|
|
/>
|
|
)}
|
|
|
|
{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
|
|
<TarokkaGrid />
|
|
<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
|
|
<CardSelect
|
|
show={selectDeck}
|
|
hand={cards}
|
|
settings={settings}
|
|
closeAction={() => setSelectCard(-1)}
|
|
selectAction={select}
|
|
/>
|
|
</main>
|
|
) : null;
|
|
}
|