import { confirmAction } from '@/lib/confirm-action'; import React from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { Gamepad2, Plus, Edit, Trash2, BarChart2, Flame, Users, Play, StopCircle } from 'lucide-react'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import type { PageProps } from '@/types'; import { useState } from 'react'; import ConfirmDeleteModal from '@/components/ConfirmDeleteModal'; import LearningContentFilters from '@/components/LearningContentFilters'; interface GameProps extends PageProps { subjects: Array<{ id: number; name: string }>; selectedSubject: number | null; games: { data: Array<{ id: number; title: string; subject: { name: string }; classes: Array<{ name: string }>; mode: string; game_mode: string; status: string; active_team_quest_sessions: Array<{ uuid: string; status: 'waiting' | 'question_active' | 'revealing' | 'leaderboard'; updated_at: string; synced_class?: { name: string } | null; }>; }>; links: Array<{ url: string | null; label: string; active: boolean }>; last_page: number; total: number; }; } export default function Index() { const { games, subjects, selectedSubject } = usePage().props; const emptyMessage = selectedSubject ? 'Tidak ada quiz untuk mata pelajaran ini. Pilih mapel lain atau Semua Mata Pelajaran.' : 'Belum ada quiz yang dibuat.'; const [deleteConfig, setDeleteConfig] = useState<{isOpen: boolean, url: string} | null>(null); const [endingSessionUuid, setEndingSessionUuid] = useState(null); const handleDelete = (id: number) => { setDeleteConfig({ isOpen: true, url: route('games.destroy', id) }); }; const modeLabel = (mode: string) => ({ serious: 'Serius', live: 'Live Arena', faction: 'Faction', team_live: 'Team Quest' }[mode] ?? mode); const modeClass = (mode: string) => mode === 'live' ? 'text-orange-400' : mode === 'team_live' ? 'text-emerald-400' : mode === 'faction' ? 'text-blue-400' : 'text-primary-400'; const teamQuestStatusLabel = (status: string) => ({ waiting: 'Menunggu di Lobby', question_active: 'Soal Berlangsung', revealing: 'Reveal Jawaban', leaderboard: 'Leaderboard', }[status] ?? status); const teamQuestHostRoute = (session: { uuid: string; status: string }) => ( route(session.status === 'waiting' ? 'team-quest.host.lobby' : 'team-quest.host.play', session.uuid) ); const handleEndSession = async (session: { uuid: string; synced_class?: { name: string } | null }, gameTitle: string) => { const className = session.synced_class?.name ? ` untuk kelas ${session.synced_class.name}` : ''; if (!(await confirmAction(`Yakin ingin mengakhiri sesi "${gameTitle}"${className}?`))) { return; } setEndingSessionUuid(session.uuid); router.post( route('team-quest.host.end', session.uuid), { return_to: 'games' }, { preserveScroll: true, onFinish: () => setEndingSessionUuid(null), }, ); }; return ( <>

Kelola bank soal gamifikasi dan lihat hasilnya.

Buat Quiz

{/* Desktop Table */}

{games.total} quiz ditemukan

{games.data.length > 0 ? ( games.data.map((game) => ( )) ) : ( )}

Judul Quiz	Mapel & Kelas	Status	Aksi
{game.title} Mode: {modeLabel(game.game_mode)}	{game.subject.name} {game.classes?.map((c, i) => ( {c.name} ))}	{game.status} {game.active_team_quest_sessions.length > 0 && ( {game.active_team_quest_sessions.map((session) => ( Sesi Aktif · {teamQuestStatusLabel(session.status)} {session.synced_class?.name && {session.synced_class.name} } ))} )}	{game.game_mode === 'live' && game.status === 'published' && ( Host Live )} {game.game_mode === 'team_live' && game.status === 'published' && game.active_team_quest_sessions.length === 0 && ( Host Team )} {game.active_team_quest_sessions.map((session) => ( Lanjutkan ))} Report {game.active_team_quest_sessions.length === 0 ? ( ) : ( )}
{emptyMessage}

{/* Mobile Cards */}

{games.data.length > 0 ? ( games.data.map((game) => (

{game.title}

Mode: {modeLabel(game.game_mode)}

{game.status}

{game.subject.name}

{game.classes?.map((c, i) => ( {c.name} ))}

{game.active_team_quest_sessions.length > 0 && (

{game.active_team_quest_sessions.map((session) => (

Sesi Aktif · {teamQuestStatusLabel(session.status)}

{session.synced_class?.name &&

{session.synced_class.name}

}

Lanjutkan

))}

)}

{game.game_mode === 'live' && game.status === 'published' && ( Host Live )} {game.game_mode === 'team_live' && game.status === 'published' && game.active_team_quest_sessions.length === 0 && ( Host Team )} Report

{game.active_team_quest_sessions.length === 0 ? ( ) : ( )}

)) ) : (

{emptyMessage}

)}

{games.last_page > 1 && ( )} {deleteConfig && ( setDeleteConfig(null)} onConfirm={() => router.delete(deleteConfig.url)} title="Hapus Game" message="Apakah Anda yakin ingin menghapus game ini? Semua rekaman nilai game ini akan hilang." /> )} ); } Index.layout = (page: any) => {page};