import React, { useEffect } from 'react'; import { Head, Link, usePage } from '@inertiajs/react'; import { Trophy, Target, Flame, ArrowLeft, RotateCcw } from 'lucide-react'; import confetti from 'canvas-confetti'; import type { PageProps } from '@/types'; interface ResultProps extends PageProps { attempt: { id: number; total_score: number; total_correct: number; total_questions: number; accuracy_percentage: number; longest_streak: number; average_speed_ms: number; game: { id: number; title: string; game_mode: string; }; }; factionLeaderboard?: Array<{ class_id: number; class_name: string; total_score: number; }> | null; } export default function Result() { const { attempt, factionLeaderboard } = usePage().props; useEffect(() => { // Ultimate confetti burst on load const duration = 3000; const end = Date.now() + duration; const frame = () => { confetti({ particleCount: 5, angle: 60, spread: 55, origin: { x: 0 }, colors: ['#10b981', '#fbbf24'] }); confetti({ particleCount: 5, angle: 120, spread: 55, origin: { x: 1 }, colors: ['#3b82f6', '#ef4444'] }); if (Date.now() < end) { requestAnimationFrame(frame); } }; frame(); }, []); const isPerfect = attempt.accuracy_percentage === 100; const isGood = attempt.accuracy_percentage >= 70; return (

{isPerfect ? 'SEMPURNA! 🎉' : isGood ? 'KERJA BAGUS! 👍' : 'COBA LAGI! 💪'}

{attempt.game.title}

Total Skor
{attempt.total_score.toLocaleString()}
Akurasi
{attempt.accuracy_percentage}%
{attempt.total_correct} dari {attempt.total_questions} benar
Streak Terbaik
{attempt.longest_streak}
jawaban beruntun
{attempt.game.game_mode === 'faction' && factionLeaderboard && (
⚔️ Klasemen Faction Wars Saat Ini
{factionLeaderboard.map((faction, index) => (
{index + 1}
{faction.class_name}
{faction.total_score.toLocaleString()} poin total
))}
)}
Main Lagi Ke Dashboard
); }