vocab

import React, { useState, useEffect, useMemo } from 'react'; import { Volume2, ArrowLeft, Book, Activity, Trophy, LogIn, RefreshCcw, XCircle, Award, CheckCircle2, ChevronRight, PlayCircle, Headphones } from 'lucide-react'; const App = () => { // --- STATE --- const [view, setView] = useState('login'); const [userName, setUserName] = useState(''); const [category, setCategory] = useState(null); const [questions, setQuestions] = useState([]); const [quizIndex, setQuizIndex] = useState(0); const [score, setScore] = useState(0); const [timeLeft, setTimeLeft] = useState(10); const [isFinished, setIsFinished] = useState(false); const [feedback, setFeedback] = useState(null); // --- DATA (Sesuai vocabulary_list.md) --- const vocabData = { noun: [ { en: "Book", id: "Buku" }, { en: "Pen", id: "Pena" }, { en: "Pencil", id: "Pensil" }, { en: "Bag", id: "Tas" }, { en: "Table", id: "Meja" }, { en: "Chair", id: "Kursi" }, { en: "Phone", id: "HP" }, { en: "Laptop", id: "Laptop" }, { en: "Door", id: "Pintu" }, { en: "Window", id: "Jendela" }, { en: "School", id: "Sekolah" }, { en: "Classroom", id: "Kelas" }, { en: "Teacher", id: "Guru" }, { en: "Student", id: "Siswa" }, { en: "Friend", id: "Teman" }, { en: "Food", id: "Makanan" }, { en: "Water", id: "Air" }, { en: "House", id: "Rumah" }, { en: "Car", id: "Mobil" }, { en: "Road", id: "Jalan" }, { en: "Library", id: "Perpustakaan" }, { en: "Park", id: "Taman" }, { en: "Market", id: "Pasar" }, { en: "Office", id: "Kantor" }, { en: "Store", id: "Toko" }, { en: "Bed", id: "Tempat tidur" }, { en: "Pillow", id: "Bantal" }, { en: "Blanket", id: "Selimut" }, { en: "Clock", id: "Jam" }, { en: "Mirror", id: "Cermin" }, { en: "Shoes", id: "Sepatu" }, { en: "Clothes", id: "Pakaian" }, { en: "Hat", id: "Topi" }, { en: "Bottle", id: "Botol" }, { en: "Glass", id: "Gelas" }, { en: "Computer", id: "Komputer" }, { en: "Internet", id: "Internet" }, { en: "Game", id: "Permainan" }, { en: "Music", id: "Musik" }, { en: "Movie", id: "Film" }, { en: "Teacher’s desk", id: "Meja guru" }, { en: "Whiteboard", id: "Papan tulis" }, { en: "Eraser", id: "Penghapus" }, { en: "Ruler", id: "Penggaris" }, { en: "Notebook", id: "Buku catatan" }, { en: "City", id: "Kota" }, { en: "Village", id: "Desa" }, { en: "Beach", id: "Pantai" }, { en: "Mountain", id: "Gunung" }, { en: "River", id: "Sungai" } ], verb: [ { en: "Go", id: "Pergi" }, { en: "Come", id: "Datang" }, { en: "Eat", id: "Makan" }, { en: "Drink", id: "Minum" }, { en: "Study", id: "Belajar" }, { en: "Read", id: "Membaca" }, { en: "Write", id: "Menulis" }, { en: "Speak", id: "Berbicara" }, { en: "Listen", id: "Mendengar" }, { en: "Watch", id: "Menonton" }, { en: "Play", id: "Bermain" }, { en: "Run", id: "Berlari" }, { en: "Walk", id: "Berjalan" }, { en: "Sit", id: "Duduk" }, { en: "Stand", id: "Berdiri" }, { en: "Open", id: "Membuka" }, { en: "Close", id: "Menutup" }, { en: "Bring", id: "Membawa" }, { en: "Take", id: "Mengambil" }, { en: "Give", id: "Memberi" }, { en: "Help", id: "Membantu" }, { en: "Ask", id: "Bertanya" }, { en: "Answer", id: "Menjawab" }, { en: "Learn", id: "Belajar" }, { en: "Try", id: "Mencoba" }, { en: "Make", id: "Membuat" }, { en: "Clean", id: "Membersihkan" }, { en: "Cook", id: "Memasak" }, { en: "Buy", id: "Membeli" }, { en: "Sell", id: "Menjual" }, { en: "Call", id: "Menelepon" }, { en: "Send", id: "Mengirim" }, { en: "Wait", id: "Menunggu" }, { en: "Meet", id: "Bertemu" }, { en: "Visit", id: "Mengunjungi" }, { en: "Think", id: "Berpikir" }, { en: "Know", id: "Mengetahui" }, { en: "Understand", id: "Mengerti" }, { en: "Remember", id: "Mengingat" }, { en: "Forget", id: "Lupa" }, { en: "Start", id: "Memulai" }, { en: "Finish", id: "Menyelesaikan" }, { en: "Stop", id: "Berhenti" }, { en: "Continue", id: "Melanjutkan" }, { en: "Change", id: "Mengubah" }, { en: "Work", id: "Bekerja" }, { en: "Rest", id: "Istirahat" }, { en: "Sleep", id: "Tidur" }, { en: "Wake up", id: "Bangun" }, { en: "Travel", id: "Bepergian" } ] }; // --- AUDIO --- const speak = (text) => { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'en-US'; window.speechSynthesis.speak(utterance); }; // --- LOGIC --- const shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5); const prepareQuiz = () => { const pool = vocabData[category]; const selected = shuffle(pool).slice(0, 25); const quizItems = selected.map((item) => { const others = pool.filter(p => p.en !== item.en); const wrongOptions = shuffle(others).slice(0, 3).map(o => o.id); const options = shuffle([item.id, ...wrongOptions]); return { word: item.en, correct: item.id, options: options }; }); setQuestions(quizItems); setQuizIndex(0); setScore(0); setTimeLeft(10); setIsFinished(false); setFeedback(null); setView('quiz'); }; useEffect(() => { let timer; if (view === 'quiz' && !isFinished && !feedback) { if (timeLeft > 0) { timer = setInterval(() => setTimeLeft(prev => prev - 1), 1000); } else { handleAnswer(-1); } } return () => clearInterval(timer); }, [view, timeLeft, isFinished, feedback]); const handleAnswer = (idx) => { const currentQ = questions[quizIndex]; const isCorrect = idx !== -1 && currentQ.options[idx] === currentQ.correct; setFeedback({ isCorrect, selectedIdx: idx }); if (isCorrect) setScore(s => s + 1); setTimeout(() => { if (quizIndex < questions.length - 1) { setQuizIndex(prev => prev + 1); setTimeLeft(10); setFeedback(null); } else { setIsFinished(true); setView('result'); } }, 1200); }; // --- VIEWS --- if (view === 'login') return (

VocabQuest

Kuasai 100 kosakata bahasa Inggris utama!

setUserName(e.target.value)} />

); if (view === 'dashboard') return (

Halo, {userName}! 👋

Pilih kategori kosakata untuk dipelajari.

100 Kata

{ setCategory('noun'); setView('study'); }} className="bg-white p-10 rounded-[2.5rem] shadow-sm border-b-8 border-orange-500 hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group" >

Noun

Mempelajari 50 kata benda seperti Buku, HP, dan Tempat Umum.

PELAJARI SEKARANG

{ setCategory('verb'); setView('study'); }} className="bg-white p-10 rounded-[2.5rem] shadow-sm border-b-8 border-emerald-500 hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group" >

Verb

Mempelajari 50 kata kerja aksi seperti Makan, Lari, dan Belajar.

PELAJARI SEKARANG

); if (view === 'study') { const list = vocabData[category]; return (

KATEGORI: {category}

Daftar Hafalan

Klik ikon suara untuk mendengarkan

50 Kata

{list.map((item, idx) => (

{item.en}

{item.id}

))}

); } if (view === 'quiz') { const currentQ = questions[quizIndex]; return (

{quizIndex + 1}

PROGRES

{timeLeft}

{feedback && (

{feedback.isCorrect ? : }

)}

{currentQ.word}

Pilih arti yang benar

{currentQ.options.map((opt, idx) => ( ))}

); } if (view === 'result') { const accuracy = Math.round((score / 25) * 100); return (

Hebat, {userName}!

Hasil Latihan {category}

{score}

Benar

{accuracy}%

Akurasi

); } return null; }; export default App;