import React, { useEffect } from 'react'; import { Head, router, usePage } from '@inertiajs/react'; import { UserCheck, Sparkles } from 'lucide-react'; import GameLayout from '@/layouts/GameLayout'; import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; import { toast } from 'sonner'; export default function LiveWait({ game, student }: any) { const { pusher } = usePage().props as any; useEffect(() => { (window as any).Pusher = Pusher; const echo = new Echo({ broadcaster: 'pusher', key: pusher.key, cluster: pusher.cluster, forceTLS: true, }); // Listen to the specific game lobby channel for GameStarted const channel = echo.channel(`lobby.${game.id}`); channel.listen('GameStarted', (e: any) => { console.log('Game is starting!', e); // Redirect to start endpoint or directly to play UI router.get(route('arena.live.play', game.id)); }); channel.listen('GameReset', (e: any) => { console.log('Game was reset by host'); toast.error('Sesi game di-reset oleh guru. Silakan masukkan PIN yang baru.'); router.get(route('arena.lobby', game.id)); }); channel.listen('GameEnded', (e: any) => { console.log('Game was ended by host'); toast.error('Sesi Live Arena telah dibatalkan/diakhiri oleh guru.'); router.get(route('dashboard')); }); return () => { echo.leaveChannel(`lobby.${game.id}`); }; }, [game.id, pusher]); return (

Kamu berhasil bergabung!

{student.full_name}

Menunggu Kakak Guru memulai permainan...

); }