import React, { useState, useRef, useMemo, useEffect } from "react"; import Chart from "chart.js"; export default function App() { // All user-created decks (persisted, shared across canvas) const [decks, setDecks] = useSharedStorage("flashcard_decks", []); // [{id, name, cards: [{q,a]}]} // Session: which deck is active const [activeDeckId, setActiveDeckId] = useAppStorage("flashcards_active_deck", null); // Study stats by deckId: [{timestamp, known, review}] const [stats, setStats] = useSharedStorage("flashcard_stats", {}); // { [deckId]: [{date, known, review}] } // UI state const [editingDeck, setEditingDeck] = useState(null); // deckId or 'new' or null const [studySession, setStudySession] = useState(null); // {deckId, cards: [{q,a,id}], idx, knownIds:Set, reviewIds:Set, completed:bool} const [showStats, setShowStats] = useState(false); // ---- Deck Management ---- function startEditDeck(deckId) { setEditingDeck(deckId ?? "new"); } function handleSaveDeck(deckId, name, cards) { let newDecks = [...decks]; if (deckId === "new") { const id = Date.now().toString(); newDecks.push({ id, name, cards }); setDecks(newDecks); setActiveDeckId(id); } else { newDecks = newDecks.map(d => d.id === deckId ? { ...d, name, cards } : d); setDecks(newDecks); } setEditingDeck(null); } function handleDeleteDeck(deckId) { if (!window.confirm("Delete this deck?")) return; setDecks(decks.filter(d => d.id !== deckId)); if (activeDeckId === deckId) setActiveDeckId(null); } // ---- Shuffling utils ---- function shuffle(array) { // Fisher-Yates let arr = [...array]; for (let i=arr.length-1; i>0; --i) { const j = Math.floor(Math.random()*(i+1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } // ---- Start Session ---- function startStudy(deckId) { const deck = decks.find(d=>d.id===deckId); if (!deck || !deck.cards.length) return; const cards = shuffle(deck.cards.map((c,i)=>({...c, id: i+"-"+Date.now()}))); // each card gets unique id setStudySession({ deckId, cards, idx: 0, knownIds: new Set(), reviewIds: new Set(), completed: false }); } // ---- Study: mark known/review ---- function handleStudyAction(type) { if (!studySession) return; const { idx, cards, knownIds, reviewIds, deckId } = studySession; const curr = cards[idx]; if (type === "known") knownIds.add(curr.id); else reviewIds.add(curr.id); const nextIdx = idx+1; if (nextIdx < cards.length) { setStudySession({ ...studySession, idx: nextIdx, knownIds: new Set([...knownIds]), reviewIds: new Set([...reviewIds]) }); } else { // Finished session - store stats const nowDate = new Date(); const dateKey = nowDate.toISOString().slice(0,10); setStats(prev => { const s = { ...prev }; if (!s[deckId]) s[deckId] = []; s[deckId].push({ date: dateKey, ts: nowDate.getTime(), known: knownIds.size, review: reviewIds.size }); // Keep only most recent 25 s[deckId] = s[deckId].slice(-25); return s; }); setStudySession({ ...studySession, completed: true }); } } // ---- Re-study: retry only 'review' cards ---- function retryReview() { const { cards, reviewIds, deckId } = studySession; const toReview = cards.filter(c => reviewIds.has(c.id)); if (!toReview.length) return; setStudySession({ deckId, cards: shuffle(toReview), idx: 0, knownIds: new Set(), reviewIds: new Set(), completed: false }); } // ---- Chart: Stats Visualization ---- const chartRef = useRef(null); const chartInstance = useRef(null); useEffect(() => { if (!showStats || !activeDeckId || !stats[activeDeckId]) return; if (typeof Chart === "undefined") return; const deckStats = stats[activeDeckId] || []; const labels = deckStats.map(r=>r.date); const knownData = deckStats.map(r=>r.known); const reviewData = deckStats.map(r=>r.review); if (chartInstance.current) chartInstance.current.destroy(); chartInstance.current = new Chart(chartRef.current, { type: 'line', data: { labels, datasets: [ { label: "Known", data: knownData, borderColor: "#22d3ee", tension: 0.3, backgroundColor: "#cffafe" }, { label: "Review", data: reviewData, borderColor: "#f59e42", tension: 0.3, backgroundColor: "#fef3c7" }, ] }, options: { plugins: { legend: { labels: { color: "#0c4a6e" } } }, scales: { x: { ticks: { color: "#0c4a6e" } }, y: { beginAtZero: true, ticks: { color: "#0c4a6e" } } }, animation: { duration: 400 }, responsive: true, maintainAspectRatio: false } }); return () => chartInstance.current?.destroy(); }, [showStats, activeDeckId, stats]); // ---- Stats summary ---- function StatSummary({}) { if (!activeDeckId || !stats[activeDeckId]) return null; const data = stats[activeDeckId]; if (!data.length) return

No sessions yet.

; const maxK = Math.max(...data.map(r=>r.known)); const maxR = Math.max(...data.map(r=>r.review)); const last = data[data.length-1]; return (

Last: {last.date}

{last.known} Known

{last.review} Review

Max Known

{maxK}

Max Review

{maxR}

); } // ---- Card Editor (create/edit a deck) ---- function DeckEditor({ deck, onSave, onCancel }) { const [name, setName] = useState(deck?.name || ""); const [cards, setCards] = useState(deck?.cards?.length ? deck.cards : [ { q: "", a: "" } ]); function updateCard(i, field, value) { setCards(cs => cs.map((c, idx) => idx === i ? { ...c, [field]: value } : c)); } function addCard() { setCards(cs => [...cs, { q: "", a: "" }]); } function removeCard(i) { setCards(cs => cs.length===1 ? cs : cs.filter((c, idx) => idx!==i)); } function handleSubmit(e) { e.preventDefault(); onSave(deck?.id ?? "new", name.trim(), cards.filter(c=>c.q.trim() && c.a.trim())); } return (

); } // ---- Card Flip interaction (single card) ---- function CardView({ card, showAnswer, onFlip }) { return (

{showAnswer ? {card.a} : {card.q}}

(Click to flip)

); } // ---- Study Mode ---- function StudyView({ session, onAction, onQuit, onRetry }) { const [showAnswer, setShowAnswer] = useState(false); const currCard = session.cards[session.idx]; // Animate on card change useEffect(()=>{setShowAnswer(false);}, [session.idx]); if (session.completed) { const total = session.cards.length, known = session.knownIds.size, review = session.reviewIds.size; return (

🎉 Session Complete!

{known} Known

{review} Review

({known+review} / {total} cards)

); } return (

Card {session.idx+1} / {session.cards.length}

setShowAnswer(a=>!a)}/> {showAnswer ? (

) : ()}

); } // ---- Deck List (main view) ---- function DeckList() { return (

Flashcard Sets

{decks.length===0 && (

🪄

No Flashcard Sets

Create your first flashcard set for any subject.

) } {decks.map(deck=>(

{deck.name} {deck.cards.length} cards

))}

); } // ---- MAIN ---- // If editing deck if (editingDeck !== null) { const editDeck = decks.find(d=>d.id===editingDeck) || null; return setEditingDeck(null)} /> } // If actively studying if (studySession) { return

setStudySession(null)} />

} // Stats modal if (showStats && activeDeckId) { return (

📈 Progress Stats

Session stats update each time you finish a flashcard set.

); } // ---- Default: Deck list/main ---- return (

Tip: Each study session is auto-shuffled. Flip each card, then mark as Known or Review later.

Check your progress by clicking 'Stats' in any deck!

); }