Refactor App structure and add modular components
Split GamePickerCard, HelpModal, and SheetSection into separate components for better modularity and clarity. Refactored App.jsx to utilize these new components, restructured state variables, and organized functions for improved readability. Enhanced code comments for easier maintenance.
This commit is contained in:
36
frontend/src/components/GamePickerCard.jsx
Normal file
36
frontend/src/components/GamePickerCard.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// src/components/GamePickerCard.jsx
|
||||
import React from "react";
|
||||
import { styles } from "../styles/styles";
|
||||
|
||||
export default function GamePickerCard({
|
||||
games,
|
||||
gameId,
|
||||
setGameId,
|
||||
onOpenHelp,
|
||||
}) {
|
||||
return (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
<div style={styles.card}>
|
||||
<div style={styles.sectionHeader}>Spiel</div>
|
||||
|
||||
<div style={styles.cardBody}>
|
||||
<select
|
||||
value={gameId || ""}
|
||||
onChange={(e) => setGameId(e.target.value)}
|
||||
style={{ ...styles.input, flex: 1 }}
|
||||
>
|
||||
{games.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button onClick={onOpenHelp} style={styles.helpBtn} title="Hilfe">
|
||||
Hilfe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
134
frontend/src/components/HelpModal.jsx
Normal file
134
frontend/src/components/HelpModal.jsx
Normal file
@@ -0,0 +1,134 @@
|
||||
// src/components/HelpModal.jsx
|
||||
import React from "react";
|
||||
import { styles } from "../styles/styles";
|
||||
import { stylesTokens } from "../styles/theme";
|
||||
|
||||
export default function HelpModal({ open, onClose }) {
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div style={styles.modalOverlay} onMouseDown={onClose}>
|
||||
<div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
|
||||
<div style={styles.modalHeader}>
|
||||
<div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Hilfe</div>
|
||||
<button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpBody}>
|
||||
<div style={styles.helpSectionTitle}>1) Namen anklicken (Status)</div>
|
||||
<div style={styles.helpText}>
|
||||
Tippe auf einen Namen, um den Status zu wechseln. Reihenfolge:
|
||||
</div>
|
||||
|
||||
<div style={styles.helpList}>
|
||||
<div style={styles.helpListRow}>
|
||||
<span
|
||||
style={{
|
||||
...styles.helpBadge,
|
||||
background: "rgba(0,190,80,0.18)",
|
||||
color: "#baf3c9",
|
||||
}}
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<b>Grün</b> = bestätigt / fix richtig
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpListRow}>
|
||||
<span
|
||||
style={{
|
||||
...styles.helpBadge,
|
||||
background: "rgba(255,35,35,0.18)",
|
||||
color: "#ffb3b3",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
<div>
|
||||
<b>Rot</b> = ausgeschlossen / fix falsch
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpListRow}>
|
||||
<span
|
||||
style={{
|
||||
...styles.helpBadge,
|
||||
background: "rgba(140,140,140,0.14)",
|
||||
color: "rgba(233,216,166,0.85)",
|
||||
}}
|
||||
>
|
||||
?
|
||||
</span>
|
||||
<div>
|
||||
<b>Grau</b> = unsicher / „vielleicht“
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpListRow}>
|
||||
<span
|
||||
style={{
|
||||
...styles.helpBadge,
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
color: "rgba(233,216,166,0.75)",
|
||||
}}
|
||||
>
|
||||
–
|
||||
</span>
|
||||
<div>
|
||||
<b>Leer</b> = unknown / noch nicht bewertet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpDivider} />
|
||||
|
||||
<div style={styles.helpSectionTitle}>2) i / m / s Button (Notiz)</div>
|
||||
<div style={styles.helpText}>
|
||||
Rechts pro Zeile gibt es einen Button, der durch diese Werte rotiert:
|
||||
</div>
|
||||
|
||||
<div style={styles.helpList}>
|
||||
<div style={styles.helpListRow}>
|
||||
<span style={styles.helpMiniTag}>i</span>
|
||||
<div>
|
||||
<b>i</b> = „Ich habe diese Geheimkarte“
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpListRow}>
|
||||
<span style={styles.helpMiniTag}>m</span>
|
||||
<div>
|
||||
<b>m</b> = „Geheimkarte aus dem mittleren Deck“
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpListRow}>
|
||||
<span style={styles.helpMiniTag}>s</span>
|
||||
<div>
|
||||
<b>s</b> = „Ein anderer Spieler hat diese Karte“ (Chip Auswahl)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpListRow}>
|
||||
<span style={styles.helpMiniTag}>—</span>
|
||||
<div>
|
||||
<b>—</b> = keine Notiz
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.helpDivider} />
|
||||
|
||||
<div style={styles.helpText}>
|
||||
Tipp: Jeder Spieler sieht nur seine eigenen Notizen – andere Spieler können nicht in
|
||||
deinen Zettel schauen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
121
frontend/src/components/SheetSection.jsx
Normal file
121
frontend/src/components/SheetSection.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
// src/components/SheetSection.jsx
|
||||
import React from "react";
|
||||
import { styles } from "../styles/styles";
|
||||
import { stylesTokens } from "../styles/theme";
|
||||
|
||||
/**
|
||||
* props:
|
||||
* - title: string
|
||||
* - entries: array
|
||||
* - pulseId: number | null
|
||||
* - onCycleStatus(entry): fn
|
||||
* - onToggleTag(entry): fn
|
||||
* - displayTag(entry): string
|
||||
*/
|
||||
export default function SheetSection({
|
||||
title,
|
||||
entries,
|
||||
pulseId,
|
||||
onCycleStatus,
|
||||
onToggleTag,
|
||||
displayTag,
|
||||
}) {
|
||||
// --- helpers (lokal, weil sie rein UI sind) ---
|
||||
const getRowBg = (status) => {
|
||||
if (status === 1) return "rgba(255, 35, 35, 0.16)";
|
||||
if (status === 2) return "rgba(0, 190, 80, 0.16)";
|
||||
if (status === 3) return "rgba(140, 140, 140, 0.12)";
|
||||
return "rgba(255,255,255,0.06)";
|
||||
};
|
||||
|
||||
const getNameColor = (status) => {
|
||||
if (status === 1) return "#ffb3b3";
|
||||
if (status === 2) return "#baf3c9";
|
||||
if (status === 3) return "rgba(233,216,166,0.78)";
|
||||
return stylesTokens.textMain;
|
||||
};
|
||||
|
||||
const getStatusSymbol = (status) => {
|
||||
if (status === 2) return "✓";
|
||||
if (status === 1) return "✕";
|
||||
if (status === 3) return "?";
|
||||
return "–";
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
if (status === 2) return { color: "#baf3c9", background: "rgba(0,190,80,0.18)" };
|
||||
if (status === 1) return { color: "#ffb3b3", background: "rgba(255,35,35,0.18)" };
|
||||
if (status === 3)
|
||||
return { color: "rgba(233,216,166,0.85)", background: "rgba(140,140,140,0.14)" };
|
||||
return { color: "rgba(233,216,166,0.75)", background: "rgba(255,255,255,0.08)" };
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.card}>
|
||||
<div style={styles.sectionHeader}>{title}</div>
|
||||
|
||||
<div style={{ display: "grid" }}>
|
||||
{entries.map((e) => {
|
||||
// UI "rot" wenn note_tag i/m/s (Backend s wird als s.XX angezeigt)
|
||||
const isIorMorS = e.note_tag === "i" || e.note_tag === "m" || e.note_tag === "s";
|
||||
const effectiveStatus = e.status === 0 && isIorMorS ? 1 : e.status;
|
||||
|
||||
const badge = getStatusBadge(effectiveStatus);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={e.entry_id}
|
||||
className="hp-row"
|
||||
style={{
|
||||
...styles.row,
|
||||
background: getRowBg(effectiveStatus),
|
||||
animation: pulseId === e.entry_id ? "rowPulse 220ms ease-out" : "none",
|
||||
borderLeft:
|
||||
effectiveStatus === 2
|
||||
? "4px solid rgba(0,190,80,0.55)"
|
||||
: effectiveStatus === 1
|
||||
? "4px solid rgba(255,35,35,0.55)"
|
||||
: effectiveStatus === 3
|
||||
? "4px solid rgba(233,216,166,0.22)"
|
||||
: "4px solid rgba(0,0,0,0)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={() => onCycleStatus(e)}
|
||||
style={{
|
||||
...styles.name,
|
||||
textDecoration: effectiveStatus === 1 ? "line-through" : "none",
|
||||
color: getNameColor(effectiveStatus),
|
||||
opacity: effectiveStatus === 1 ? 0.8 : 1,
|
||||
}}
|
||||
title="Klick: Grün → Rot → Grau → Leer"
|
||||
>
|
||||
{e.label}
|
||||
</div>
|
||||
|
||||
<div style={styles.statusCell}>
|
||||
<span
|
||||
style={{
|
||||
...styles.statusBadge,
|
||||
color: badge.color,
|
||||
background: badge.background,
|
||||
}}
|
||||
>
|
||||
{getStatusSymbol(effectiveStatus)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onToggleTag(e)}
|
||||
style={styles.tagBtn}
|
||||
title="— → i → m → s.(Chip) → —"
|
||||
>
|
||||
{displayTag(e)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user