import React, { useState, useEffect, useCallback } from 'react'; import { Trophy, Timer, Play, RotateCcw, Check, X, AlertCircle } from 'lucide-react'; // Data Besaran Pokok dan Turunan const dataBesaran = [ { nama: "Panjang", tipe: "pokok", satuan: "Meter (m)" }, { nama: "Massa", tipe: "pokok", satuan: "Kilogram (kg)" }, { nama: "Waktu", tipe: "pokok", satuan: "Sekon (s)" }, { nama: "Suhu", tipe: "pokok", satuan: "Kelvin (K)" }, { nama: "Kuat Arus Listrik", tipe: "pokok", satuan: "Ampere (A)" }, { nama: "Intensitas Cahaya", tipe: "pokok", satuan: "Kandela (cd)" }, { nama: "Jumlah Zat", tipe: "pokok", satuan: "Mol (mol)" }, { nama: "Luas", tipe: "turunan", satuan: "m²" }, { nama: "Volume", tipe: "turunan", satuan: "m³" }, { nama: "Kecepatan", tipe: "turunan", satuan: "m/s" }, { nama: "Percepatan", tipe: "turunan", satuan: "m/s²" }, { nama: "Gaya", tipe: "turunan", satuan: "Newton (N)" }, { nama: "Usaha", tipe: "turunan", satuan: "Joule (J)" }, { nama: "Energi", tipe: "turunan", satuan: "Joule (J)" }, { nama: "Daya", tipe: "turunan", satuan: "Watt (W)" }, { nama: "Tekanan", tipe: "turunan", satuan: "Pascal (Pa)" }, { nama: "Massa Jenis", tipe: "turunan", satuan: "kg/m³" }, { nama: "Momentum", tipe: "turunan", satuan: "kg·m/s" } ]; const WAKTU_BERMAIN = 45; // 45 detik export default function App() { const [gameState, setGameState] = useState('start'); // 'start', 'playing', 'end' const [skor, setSkor] = useState(0); const [waktu, setWaktu] = useState(WAKTU_BERMAIN); const [besaranSaatIni, setBesaranSaatIni] = useState(null); const [feedback, setFeedback] = useState(null); // 'benar', 'salah' const [combo, setCombo] = useState(0); const [skorTertinggi, setSkorTertinggi] = useState(0); // Mengambil soal acak const ambilSoalBaru = useCallback(() => { const indeksAcak = Math.floor(Math.random() * dataBesaran.length); setBesaranSaatIni(dataBesaran[indeksAcak]); setFeedback(null); }, []); // Memulai game const mulaiGame = () => { setSkor(0); setWaktu(WAKTU_BERMAIN); setCombo(0); setGameState('playing'); ambilSoalBaru(); }; // Logika Waktu Mundur useEffect(() => { let interval = null; if (gameState === 'playing' && waktu > 0) { interval = setInterval(() => { setWaktu((w) => w - 1); }, 1000); } else if (waktu === 0 && gameState === 'playing') { akhiriGame(); } return () => clearInterval(interval); }, [gameState, waktu]); // Mengakhiri game const akhiriGame = () => { setGameState('end'); if (skor > skorTertinggi) { setSkorTertinggi(skor); } }; // Menangani jawaban pemain const jawab = (tebakanTipe) => { if (gameState !== 'playing' || !besaranSaatIni) return; const apakahBenar = besaranSaatIni.tipe === tebakanTipe; if (apakahBenar) { const poinTambahan = 10 + (combo * 2); // Bonus kombo setSkor(skor + poinTambahan); setCombo(combo + 1); setFeedback('benar'); } else { setSkor(skor > 5 ? skor - 5 : 0); // Pengurangan nilai jika salah setCombo(0); setFeedback('salah'); } // Tahan sedikit sebelum ganti soal agar animasi feedback terlihat setTimeout(() => { ambilSoalBaru(); }, 400); }; return (

{/* Header (Info Skor & Waktu) */}

Skor {skor}

{combo > 1 && ( {combo}x Combo! )}

Waktu {waktu}s

{/* LAYAR MULAI */} {gameState === 'start' && (

Kuis Besaran Fisika

Uji pengetahuanmu! Tentukan apakah besaran yang muncul merupakan Besaran Pokok atau Besaran Turunan sebelum waktu habis.

)} {/* LAYAR BERMAIN */} {gameState === 'playing' && besaranSaatIni && (

Tebak Besaran Berikut:

{/* Efek visual feedback (benar/salah) */}

{besaranSaatIni.nama}

{/* Satuan sengaja disembunyikan agar menantang, atau ditampilkan sbg petunjuk */} {/*

Satuan SI: {besaranSaatIni.satuan}

*/}

{/* Indikator jawaban benar/salah singkat */}

{feedback === 'benar' && Benar! +{10 + ((combo-1) * 2)}} {feedback === 'salah' && Salah! -5}

)} {/* LAYAR SELESAI */} {gameState === 'end' && (

Waktu Habis!

Skor Akhir Anda

{skor}

{skor >= skorTertinggi && skor > 0 && (

Rekor Baru! 🎉

)}

{/* Footer */}

); }

Rancangan Aktualisasi CPNS 2021

Kuis Besaran Fisika

{besaranSaatIni.nama}

Waktu Habis!

نموذج الاتصال