import React, { useState, useEffect, useRef } from 'react';
// --- ICONS (SVG Internal agar kompatibel di semua hosting) ---
const BookOpen = ({ size = 24, className = "" }) => (
);
const Gamepad2 = ({ size = 24, className = "" }) => (
);
const BrainCircuit = ({ size = 24, className = "" }) => (
);
const User = ({ size = 24, className = "" }) => (
);
const Star = ({ size = 24, className = "" }) => (
);
const CheckCircle = ({ size = 24, className = "" }) => (
);
const XCircle = ({ size = 24, className = "" }) => (
);
const RefreshCw = ({ size = 24, className = "" }) => (
);
const Volume2 = ({ size = 24, className = "" }) => (
);
const ArrowRight = ({ size = 24, className = "" }) => (
);
const Target = ({ size = 24, className = "" }) => (
);
const ListCheck = ({ size = 24, className = "" }) => (
);
const MousePointer2 = ({ size = 24, className = "" }) => (
);
// --- DATA & ASSETS ---
const regularVerbs = [
{ base: "Play", past: "Played", translation: "Bermain" },
{ base: "Watch", past: "Watched", translation: "Menonton" },
{ base: "Cook", past: "Cooked", translation: "Memasak" },
{ base: "Clean", past: "Cleaned", translation: "Membersihkan" },
{ base: "Visit", past: "Visited", translation: "Mengunjungi" },
];
const irregularVerbs = [
{ base: "Go", past: "Went", translation: "Pergi" },
{ base: "Eat", past: "Ate", translation: "Makan" },
{ base: "Drink", past: "Drank", translation: "Minum" },
{ base: "Buy", past: "Bought", translation: "Membeli" },
{ base: "Sleep", past: "Slept", translation: "Tidur" },
];
const matchingData = [
{ id: 1, text: "Go", type: "base", pair: 1 },
{ id: 2, text: "Went", type: "past", pair: 1 },
{ id: 3, text: "See", type: "base", pair: 2 },
{ id: 4, text: "Saw", type: "past", pair: 2 },
{ id: 5, text: "Study", type: "base", pair: 3 },
{ id: 6, text: "Studied", type: "past", pair: 3 },
{ id: 7, text: "Make", type: "base", pair: 4 },
{ id: 8, text: "Made", type: "past", pair: 4 },
];
const dragDropData = [
{
id: 1,
sentence: "I ___ football yesterday.",
correct: "played",
options: ["played", "play", "plays"]
},
{
id: 2,
sentence: "She ___ to the market last week.",
correct: "went",
options: ["go", "goes", "went"]
},
{
id: 3,
sentence: "We ___ pizza last night.",
correct: "ate",
options: ["eat", "ate", "eating"]
}
];
const balloonWords = [
{ id: 1, word: "Went", isPast: true },
{ id: 2, word: "Go", isPast: false },
{ id: 3, word: "Played", isPast: true },
{ id: 4, word: "Drink", isPast: false },
{ id: 5, word: "Bought", isPast: true },
{ id: 6, word: "Cooked", isPast: true },
{ id: 7, word: "Sleep", isPast: false },
{ id: 8, word: "Saw", isPast: true },
{ id: 9, word: "Run", isPast: false },
{ id: 10, word: "Drank", isPast: true },
];
const mcqData = [
{
question: "Apa bentuk lampau (V2) dari 'Write'?",
options: ["Writed", "Wrote", "Written", "Writing"],
correct: 1
},
{
question: "She _____ happy yesterday.",
options: ["is", "are", "was", "were"],
correct: 2
},
{
question: "They _____ to the zoo last Sunday.",
options: ["go", "went", "gone", "going"],
correct: 1
},
{
question: "Kata keterangan waktu untuk Simple Past Tense adalah...",
options: ["Tomorrow", "Now", "Next Week", "Yesterday"],
correct: 3
}
];
// --- COMPONENTS ---
// 1. MEMAHAMI SECTION
const SectionUnderstanding = () => {
const [simulationVerb, setSimulationVerb] = useState("Play");
const [simulationTense, setSimulationTense] = useState("Present");
const getTransformedSentence = () => {
if (simulationTense === "Present") {
return `I usually ${simulationVerb} football every day.`;
} else {
let pastForm = "";
if (simulationVerb === "Play") pastForm = "Played";
if (simulationVerb === "Eat") pastForm = "Ate";
if (simulationVerb === "Go") pastForm = "Went";
return `I ${pastForm} football yesterday.`;
}
};
return (
Apa itu Simple Past Tense?
Simple Past Tense digunakan untuk membicarakan kejadian yang
sudah terjadi
di masa lalu dan sudah selesai.
Yesterday (Kemarin)
Last Week (Minggu Lalu)
Two days ago (2 hari lalu)
Regular Verbs (Beraturan)
Tambahkan -ed atau -d di akhir kata.
{regularVerbs.map((v, i) => (
-
{v.base} {v.past}
))}
Irregular Verbs (Tidak Beraturan)
Bentuk katanya berubah total.
{irregularVerbs.map((v, i) => (
-
{v.base} {v.past}
))}
{/* Simulation Area */}
Simulasi Mesin Waktu
Ubah waktunya dan lihat apa yang terjadi pada kata kerja!
"{getTransformedSentence()}"
);
};
// 2. MENGAPLIKASI GAMES
// Game 1: Matching
const GameMatching = () => {
const [items, setItems] = useState(matchingData.sort(() => Math.random() - 0.5));
const [selected, setSelected] = useState(null);
const [matched, setMatched] = useState([]);
const handleCardClick = (item) => {
if (matched.includes(item.id)) return;
if (selected === null) {
setSelected(item);
} else {
if (selected.id === item.id) {
setSelected(null); // Clicked same card
} else if (selected.pair === item.pair) {
setMatched([...matched, selected.id, item.id]);
setSelected(null);
} else {
// Wrong match visual feedback could go here
setSelected(null);
}
}
};
const resetGame = () => {
setMatched([]);
setSelected(null);
setItems([...matchingData].sort(() => Math.random() - 0.5));
};
return (
Jodohkan Kata (V1 - V2)
{items.map((item) => {
const isMatched = matched.includes(item.id);
const isSelected = selected?.id === item.id;
return (
);
})}
{matched.length === items.length && (
Hebat! Semua Pasangan Ditemukan! 🎉
)}
);
};
// Game 2: Drag and Drop (Click to Fill)
const GameDragDrop = () => {
const [currentQ, setCurrentQ] = useState(0);
const [feedback, setFeedback] = useState(null);
const handleOptionClick = (option) => {
if (option === dragDropData[currentQ].correct) {
setFeedback("correct");
setTimeout(() => {
setFeedback(null);
if (currentQ < dragDropData.length - 1) setCurrentQ(curr => curr + 1);
else setFeedback("finished");
}, 1000);
} else {
setFeedback("wrong");
setTimeout(() => setFeedback(null), 1000);
}
};
if (feedback === "finished") {
return (
Luar Biasa!
);
}
const question = dragDropData[currentQ];
return (
Lengkapi Kalimat
{question.sentence.replace("___", "________")}
{question.options.map((opt, idx) => (
))}
{feedback === "correct" &&
Benar!
}
{feedback === "wrong" &&
Coba lagi!
}
);
};
// Game 3: Tembak Kata (Simple Clicker)
const GameShooter = () => {
const [score, setScore] = useState(0);
const [targets, setTargets] = useState([]);
const [gameActive, setGameActive] = useState(false);
const timerRef = useRef(null);
const startGame = () => {
setScore(0);
setGameActive(true);
setTargets([]);
let interval = setInterval(() => {
const newTarget = {
...balloonWords[Math.floor(Math.random() * balloonWords.length)],
id: Date.now() + Math.random(),
left: Math.random() * 80 + 10, // 10% to 90%
};
setTargets(prev => [...prev, newTarget]);
}, 1000);
timerRef.current = interval;
setTimeout(() => {
clearInterval(interval);
setGameActive(false);
}, 15000); // 15 seconds game
};
useEffect(() => {
return () => clearInterval(timerRef.current);
}, []);
const shootTarget = (target) => {
if (!gameActive) return;
if (target.isPast) {
setScore(s => s + 10);
} else {
setScore(s => Math.max(0, s - 5));
}
setTargets(prev => prev.filter(t => t.id !== target.id));
};
return (
{!gameActive ? (
Tembak Kata Past Tense!
Klik kata kerja Lampau (V2). Jangan klik V1!
{score > 0 &&
Skor Terakhir: {score}
}
) : (
<>
Skor: {score}
{targets.map(target => (
shootTarget(target)}
className="absolute cursor-pointer px-4 py-2 bg-white rounded-full shadow-md font-bold text-sky-700 hover:bg-red-100 border-2 border-sky-200 animate-floatUp"
style={{ left: `${target.left}%`, bottom: '-50px', animationDuration: '4s' }}
>
{target.word}
))}
)}
Kuis Selesai!
🏆
Kamu menjawab benar {score} dari {mcqData.length} soal.
);
}
return (
Soal {qIndex + 1} dari {mcqData.length}
Skor Sementara: {score}
{mcqData[qIndex].question}
{mcqData[qIndex].options.map((opt, i) => (
))}
);
};
const SectionApplying = () => {
const [gameMode, setGameMode] = useState('match');
return (
Zona Bermain & Berlatih
{[
{ id: 'match', label: 'Menjodohkan', icon: },
{ id: 'drag', label: 'Isi Kalimat', icon: },
{ id: 'shoot', label: 'Tembak Kata', icon: },
{ id: 'mcq', label: 'Pilihan Ganda', icon: },
].map(mode => (
))}
{gameMode === 'match' && }
{gameMode === 'drag' && }
{gameMode === 'shoot' && }
{gameMode === 'mcq' && }
);
};
// 3. REFLEKSI SECTION
const SectionReflection = () => {
const [answers, setAnswers] = useState({ q1: "", q2: "", q3: "" });
const [submitted, setSubmitted] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
setSubmitted(true);
};
if (submitted) {
return (
Terima Kasih!
Refleksimu telah disimpan. Teruslah berlatih menggunakan Simple Past Tense!
);
}
return (