const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ---------- Storage ----------
const STORAGE_KEY = "db_begriffe_v2";
function loadCards() {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (raw) {
const parsed = JSON.parse(raw);
if (Array.isArray(parsed) && parsed.length) return parsed;
}
} catch (e) {}
return window.BEGRIFFE_DEFAULTS.slice();
}
function saveCards(cards) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(cards)); } catch (e) {}
}
// ---------- Utils ----------
function shuffle(arr) {
const a = arr.slice();
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
const CATEGORIES = [
"Bezugssysteme & Festpunkte",
"Trassenelemente & Achsverlauf",
"Außendienst & Instrumente",
"Sicherheit, Betrieb & Rollen",
"Richtlinie 883.9010"
];
// ---------- Root ----------
function App() {
const [cards, setCards] = useState(loadCards);
const [mode, setMode] = useState("karteikarten"); // karteikarten | memory | liste
const [activeCat, setActiveCat] = useState("Alle");
const [editingCard, setEditingCard] = useState(null); // card object or {} for new
const [showInfo, setShowInfo] = useState(false);
useEffect(() => { saveCards(cards); }, [cards]);
const visibleCards = useMemo(() => {
if (activeCat === "Alle") return cards;
return cards.filter(c => c.cat === activeCat);
}, [cards, activeCat]);
function upsertCard(card) {
setCards(prev => {
if (card.id && prev.some(c => c.id === card.id)) {
return prev.map(c => c.id === card.id ? card : c);
}
const id = Math.max(0, ...prev.map(c => c.id || 0)) + 1;
return [...prev, { ...card, id }];
});
}
function deleteCard(id) {
setCards(prev => prev.filter(c => c.id !== id));
}
function resetToDefaults() {
if (confirm("Alle Karten auf die ursprünglichen 50 zurücksetzen? Eigene Karten gehen verloren.")) {
setCards(window.BEGRIFFE_DEFAULTS.slice());
}
}
return (
setEditingCard({})}
onInfo={() => setShowInfo(true)}
/>
{mode === "karteikarten" && (
)}
{mode === "memory" && (
)}
{mode === "liste" && (
)}
{editingCard && (
{ upsertCard(c); setEditingCard(null); }}
onCancel={() => setEditingCard(null)}
onDelete={editingCard.id ? () => { deleteCard(editingCard.id); setEditingCard(null); } : null}
/>
)}
{showInfo && setShowInfo(false)} />}
);
}
// ---------- Header ----------
function Header({ mode, setMode, onAdd, onInfo }) {
return (
);
}
// ---------- Category bar ----------
function CategoryBar({ activeCat, setActiveCat, cards }) {
const counts = useMemo(() => {
const out = { Alle: cards.length };
for (const c of cards) out[c.cat] = (out[c.cat] || 0) + 1;
return out;
}, [cards]);
return (
);
}
// ---------- Footer ----------
function Footer({ count, total, onReset }) {
return (
);
}
// ============================================================
// KARTEIKARTEN MODE
// ============================================================
function KarteikartenView({ cards, onEdit, onDelete }) {
const [order, setOrder] = useState(() => cards.map((_, i) => i));
const [idx, setIdx] = useState(0);
const [flipped, setFlipped] = useState(false);
const [known, setKnown] = useState(() => new Set());
const [autoplay, setAutoplay] = useState(false);
const [direction, setDirection] = useState(1); // for animation
// Reset when card list (length / ids) changes
const sig = cards.map(c => c.id).join(",");
useEffect(() => {
setOrder(cards.map((_, i) => i));
setIdx(0); setFlipped(false); setKnown(new Set());
}, [sig]);
useEffect(() => { setFlipped(false); }, [idx]);
useEffect(() => {
if (!autoplay) return;
const t = setTimeout(() => {
if (!flipped) setFlipped(true);
else next();
}, flipped ? 3200 : 2200);
return () => clearTimeout(t);
});
const card = cards[order[idx]];
if (!card) {
return (
Keine Karten in dieser Kategorie. Wähle eine andere Kategorie oder lege eine neue Karte an.
);
}
function next() {
setDirection(1);
setIdx(i => (i + 1) % order.length);
}
function prev() {
setDirection(-1);
setIdx(i => (i - 1 + order.length) % order.length);
}
function doShuffle() {
setOrder(shuffle(cards.map((_, i) => i)));
setIdx(0); setFlipped(false);
}
function toggleKnown() {
setKnown(k => {
const n = new Set(k);
if (n.has(card.id)) n.delete(card.id); else n.add(card.id);
return n;
});
}
// Keyboard
useEffect(() => {
function onKey(e) {
if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
if (e.key === " ") { e.preventDefault(); setFlipped(f => !f); }
else if (e.key === "ArrowRight") next();
else if (e.key === "ArrowLeft") prev();
else if (e.key === "s" || e.key === "S") doShuffle();
else if (e.key === "k" || e.key === "K") toggleKnown();
}
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
});
const progress = ((idx + 1) / order.length) * 100;
const isKnown = known.has(card.id);
return (
{String(idx + 1).padStart(2, "0")}
/ {String(order.length).padStart(2, "0")}
{known.size} gewusst
0 ? "next" : "prev")}
>
setFlipped(f => !f)}
isKnown={isKnown}
onEdit={() => onEdit(card)}
/>
Leertaste umdrehen · ←/→ blättern · S mischen · K als gewusst markieren
);
}
function Flashcard({ card, flipped, onFlip, isKnown, onEdit }) {
return (
{card.cat}
№ {String(card.id).padStart(2, "0")}
Karte umdrehen ·
{isKnown && ✓ gewusst}
{card.en &&
{card.en}
}
{card.def}
№ {String(card.id).padStart(2, "0")}
Zurück ·
{isKnown && ✓ gewusst}
);
}
function Icon({ name }) {
const stroke = "currentColor";
if (name === "shuffle") return (
);
if (name === "flip") return (
);
if (name === "check") return (
);
return null;
}
// ============================================================
// MEMORY MODE
// ============================================================
function MemoryView({ cards: rawCards }) {
// Memory needs DE↔EN pairs — filter out cards without an English term
const cards = useMemo(() => rawCards.filter(c => c.en && c.en.trim()), [rawCards]);
const [pairs, setPairs] = useState(8);
const [tiles, setTiles] = useState([]);
const [opened, setOpened] = useState([]); // [tileIdx]
const [matched, setMatched] = useState(new Set());
const [moves, setMoves] = useState(0);
const [seconds, setSeconds] = useState(0);
const [running, setRunning] = useState(false);
const [done, setDone] = useState(false);
function reset(p = pairs) {
const pool = shuffle(cards).slice(0, p);
const t = shuffle(pool.flatMap((c, i) => ([
{ key: "d" + c.id, cardId: c.id, side: "de", text: c.de, idx: i*2 },
{ key: "e" + c.id, cardId: c.id, side: "en", text: c.en, idx: i*2+1 }
])));
setTiles(t);
setOpened([]); setMatched(new Set());
setMoves(0); setSeconds(0); setRunning(false); setDone(false);
}
// initialize on mount or card change
const sig = cards.map(c => c.id).join(",") + ":" + pairs;
useEffect(() => { reset(pairs); }, [sig]);
useEffect(() => {
if (!running || done) return;
const t = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(t);
}, [running, done]);
function flipTile(i) {
if (done) return;
if (opened.includes(i) || matched.has(tiles[i].cardId)) return;
if (!running) setRunning(true);
const o = [...opened, i];
if (o.length === 2) {
setMoves(m => m + 1);
const [a, b] = o.map(k => tiles[k]);
if (a.cardId === b.cardId && a.side !== b.side) {
// match
setMatched(prev => {
const n = new Set(prev); n.add(a.cardId);
if (n.size === pairs) { setDone(true); setRunning(false); }
return n;
});
setTimeout(() => setOpened([]), 600);
} else {
setTimeout(() => setOpened([]), 900);
}
setOpened(o);
} else {
setOpened(o);
}
}
const maxPairs = Math.min(cards.length, 18);
const fmtTime = (s) => `${String(Math.floor(s/60)).padStart(2,"0")}:${String(s%60).padStart(2,"0")}`;
if (cards.length < 2) {
return Diese Kategorie enthält keine Karten mit englischer Übersetzung. Memory braucht DE↔EN-Paare. Wähle eine andere Kategorie.
Paare
{matched.size} / {pairs}
{tiles.map((tile, i) => {
const isOpen = opened.includes(i);
const isMatched = matched.has(tile.cardId);
return (
);
})}
{done && (
GESCHAFFT
Stapel gelöst.
{pairs} Paare · {moves} Züge · {fmtTime(seconds)}
)}
);
}
// ============================================================
// LIST / GLOSSAR
// ============================================================
function ListView({ cards, onEdit, onDelete }) {
const [query, setQuery] = useState("");
const grouped = useMemo(() => {
const q = query.trim().toLowerCase();
const filtered = q
? cards.filter(c =>
c.de.toLowerCase().includes(q) ||
c.en.toLowerCase().includes(q) ||
c.def.toLowerCase().includes(q))
: cards;
const map = new Map();
for (const c of filtered) {
if (!map.has(c.cat)) map.set(c.cat, []);
map.get(c.cat).push(c);
}
return map;
}, [cards, query]);
return (
setQuery(e.target.value)}
/>
{[...grouped.entries()].map(([cat, items]) => (
{cat.toUpperCase()}
{items.map(c => (
{c.de}
·
{c.en}
{c.def}
))}
))}
{grouped.size === 0 && (
Keine Treffer für {query}.
)}
);
}
// ============================================================
// EDITOR MODAL
// ============================================================
function CardEditor({ card, onSave, onCancel, onDelete }) {
const [de, setDe] = useState(card.de || "");
const [en, setEn] = useState(card.en || "");
const [def, setDef] = useState(card.def || "");
const [cat, setCat] = useState(card.cat || CATEGORIES[0]);
const isNew = !card.id;
function submit(e) {
e?.preventDefault();
if (!de.trim() || !en.trim()) return;
onSave({ ...card, de: de.trim(), en: en.trim(), def: def.trim(), cat });
}
return (