import { Head, router, usePage } from '@inertiajs/react'; import axios from 'axios'; import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; import { RefreshCw, Save, Smartphone, Users } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; import { toast } from 'sonner'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; interface Member { id: number; student_id: number; name: string; turn_order: number; squad_number: number } interface Team { id: number; name: string; color: string; connected: boolean; last_seen_at?: string | null; members: Member[] } interface Session { uuid: string; pin: string; status: string; class_name: string; game: { id: number; title: string; subject?: string } } interface Props { session: Session; teams: Team[] } export default function Lobby({ session, teams: initialTeams }: Props) { const { pusher } = usePage().props as any; const [teams, setTeams] = useState(initialTeams); const [saving, setSaving] = useState(false); const [dirty, setDirty] = useState(false); useEffect(() => { if (!dirty) setTeams(initialTeams); }, [dirty, initialTeams]); const refreshState = useCallback(async () => { const response = await axios.get(route('team-quest.host.state', session.uuid)); if (!dirty) setTeams(response.data.teams); }, [dirty, session.uuid]); useEffect(() => { const timer = window.setInterval(() => void refreshState(), 2000); if (!pusher?.key) return () => window.clearInterval(timer); (window as any).Pusher = Pusher; const echo = new Echo({ broadcaster: 'pusher', key: pusher.key, cluster: pusher.cluster, forceTLS: true }); const channel = echo.private(`team-quest.host.${session.uuid}`); channel.listen('TeamDeviceJoined', () => void refreshState()); return () => { window.clearInterval(timer); echo.leave(`team-quest.host.${session.uuid}`); }; }, [pusher, refreshState, session.uuid]); const moveMember = (memberId: number, sourceTeamId: number, targetTeamId: number) => { if (sourceTeamId === targetTeamId) return; setDirty(true); setTeams((current) => { const source = current.find((team) => team.id === sourceTeamId); const member = source?.members.find((item) => item.id === memberId); if (!member) return current; return current.map((team) => { if (team.id === sourceTeamId) return { ...team, members: team.members.filter((item) => item.id !== memberId) }; if (team.id === targetTeamId) return { ...team, members: [...team.members, member] }; return team; }); }); }; const saveGroups = () => { setSaving(true); router.put(route('team-quest.host.groups.update', session.uuid), { groups: teams.map((team) => ({ name: team.name, color: team.color, student_ids: team.members.map((member) => member.student_id) })), }, { preserveScroll: true, onSuccess: () => { setDirty(false); toast.success('Pembagian kelompok disimpan.'); }, onFinish: () => setSaving(false), }); }; return (

{session.game.title} · {session.class_name}

PIN Kelompok

{session.pin}

{teams.map((team) => (

{team.name}

{team.members.length} anggota

{team.connected ? 'Siap' : 'Belum join'}

{team.members.map((member) => (

{member.name}

Squad {member.squad_number}

))}

{team.connected && ( )}

))}

Pastikan setiap kelompok memiliki 2–10 anggota dan satu HP.

); }