# Overhaul Live Arena Game Mechanism

Tujuan: Memperbaiki mekanisme permainan live (mirip Kahoot) agar tampilan guru (LCD) lebih interaktif dengan statistik jawaban (berapa yang memilih A/B/C/D) dan tampilan jawaban benar. Selain itu, memperbaiki bug di mana siswa stuck (tidak ada efek) saat sesi live diakhiri oleh guru, dan memberikan tombol kembali ke Dashboard.

## Overview
Proyek: WEB
Prioritas Agent: frontend-specialist (karena ini mayoritas UI/UX web).

## Success Criteria
- [ ] Layar guru menampilkan rekap statistik jawaban saat soal ditutup.
- [ ] Opsi jawaban yang benar di-highlight jelas.
- [ ] Siswa otomatis diarahkan ke halaman Game Berakhir (bukan stuck).
- [ ] Siswa memiliki tombol 'Kembali ke Dashboard'.

## File Structure
Modifikasi akan dilakukan pada file-file berikut:
- `app/Events/AnswerSubmitted.php`
- `app/Http/Controllers/ArenaPlayController.php`
- `app/Events/GameEnded.php`
- `resources/js/Pages/Game/Host/LiveDashboard.tsx`
- `resources/js/Pages/Arena/LivePlay.tsx`

## Task Breakdown

### 1. Fix Event `GameEnded` (Backend)
- **Agent:** backend-specialist
- **Input:** File `GameEnded.php`.
- **Output:** Hapus method `broadcastAs()` yang menyebabkan string event `.GameEnded` tidak tersinkronisasi default dengan Laravel Echo frontend.
- **Verify:** Frontend bisa menangkap event `GameEnded` tanpa `.`.

### 2. Update Event & Controller untuk Statistik (Backend)
- **Agent:** backend-specialist
- **Input:** `AnswerSubmitted.php`, `ArenaPlayController.php`.
- **Output:** 
  - Tambah property `$selectedOptionIndex` di constructor event.
  - Lempar data `$validated['selected_option_index']` saat broadcast `AnswerSubmitted` di controller.
- **Verify:** Websocket inspector atau console log frontend menerima `selectedOptionIndex` di payload.

### 3. Tampilan Statistik Host (Frontend)
- **Agent:** frontend-specialist
- **Input:** `LiveDashboard.tsx`.
- **Output:** 
  - State `optionStats` untuk menghitung berapa banyak siswa memilih opsi A/B/C/D.
  - UI Bar/Chart sederhana (CSS) untuk menampilkannya saat tombol "Tutup Soal" diklik.
  - Tampilkan & highlight jawaban yang benar untuk LCD.
- **Verify:** Tampilan jelas terlihat di resolusi besar dan angka update secara realtime ketika siswa klik opsi.

### 4. Halaman Game Berakhir Siswa (Frontend)
- **Agent:** frontend-specialist
- **Input:** `LivePlay.tsx`.
- **Output:** 
  - State `isGameEnded` yang true bila terima event `GameEnded`.
  - Tampilkan halaman "Terima kasih telah berpartisipasi" dengan skor final dan tombol "Kembali ke Dashboard" (`route('dashboard')`).
- **Verify:** Tidak lagi stuck. Tombol bisa diklik mengarah ke halaman Dashboard yang ada sidebarnya.

## Phase X
- [ ] **Lint:** `npm run lint && npx tsc --noEmit`
- [ ] **Security:** `python .agent/skills/vulnerability-scanner/scripts/security_scan.py .`
- [ ] **Build:** `npm run build`
- [ ] **UX Audit:** `python .agent/skills/frontend-design/scripts/ux_audit.py .`