47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import type { EodDifficulty, EodStats } from "@/app/(frontend)/eod/actions";
|
|
import { useRealtimePresence } from "@/hooks/useRealtimePresence";
|
|
import { useSidebar } from "@/components/ui/sidebar";
|
|
import { EodLeaderboard } from "./EodLeaderboard";
|
|
import { MinesweeperBoard } from "./MinesweeperBoard";
|
|
|
|
export function EodArena({
|
|
initialStats,
|
|
currentUserId,
|
|
}: {
|
|
initialStats: EodStats;
|
|
currentUserId: number | string;
|
|
}) {
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
const [playing, setPlaying] = useState(false);
|
|
const [selectedDifficulty, setSelectedDifficulty] = useState<EodDifficulty>("training");
|
|
const { isMobile, setOpenMobile } = useSidebar();
|
|
const activeTeams = useRealtimePresence("eod", playing, true);
|
|
const onPhaseChange = useCallback((phase: "ready" | "playing" | "over") => {
|
|
setPlaying(phase === "playing");
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (playing && isMobile) setOpenMobile(false);
|
|
}, [isMobile, playing, setOpenMobile]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-6">
|
|
<MinesweeperBoard
|
|
initialStats={initialStats}
|
|
onGameRecorded={() => setRefreshKey((key) => key + 1)}
|
|
onPhaseChange={onPhaseChange}
|
|
onDifficultyChange={setSelectedDifficulty}
|
|
/>
|
|
<EodLeaderboard
|
|
refreshKey={refreshKey}
|
|
currentUserId={currentUserId}
|
|
activeTeams={activeTeams}
|
|
difficulty={selectedDifficulty}
|
|
onDifficultyChange={setSelectedDifficulty}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|