nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #3

Merged
nessi merged 7 commits from dev into main 2026-02-06 09:43:03 +00:00
Conversation 0 Commits 7 Files Changed 15 +74 -74
4 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6e460b69b4 - Show all commits

35
frontend/src/components/SheetSection.jsx
View File

@@ -3,15 +3,6 @@ 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,
@@ -20,7 +11,6 @@ export default function SheetSection({
onToggleTag,
displayTag,
}) {
// --- helpers (lokal, weil sie rein UI sind) ---
const getRowBg = (status) => {
if (status === 1) return stylesTokens.rowNoBg;
if (status === 2) return stylesTokens.rowOkBg;
@@ -44,10 +34,17 @@ export default function SheetSection({
};
const getStatusBadge = (status) => {
if (status === 2) return { color: stylesTokens.rowOkText, background: stylesTokens.rowOkBg };
if (status === 1) return { color: stylesTokens.rowNoText, background: stylesTokens.rowNoBg };
if (status === 3) return { color: stylesTokens.rowMaybeText, background: stylesTokens.rowMaybeBg };
return { color: stylesTokens.rowEmptyText, background: stylesTokens.rowEmptyBg };
if (status === 2) return { color: stylesTokens.badgeOkText, background: stylesTokens.badgeOkBg };
if (status === 1) return { color: stylesTokens.badgeNoText, background: stylesTokens.badgeNoBg };
if (status === 3) return { color: stylesTokens.badgeMaybeText, background: stylesTokens.badgeMaybeBg };
return { color: stylesTokens.badgeEmptyText, background: stylesTokens.badgeEmptyBg };
};
const getBorderLeft = (status) => {
if (status === 2) return `4px solid ${stylesTokens.rowOkBorder}`;
if (status === 1) return `4px solid ${stylesTokens.rowNoBorder}`;
if (status === 3) return `4px solid ${stylesTokens.rowMaybeBorder}`;
return `4px solid ${stylesTokens.rowEmptyBorder}`;
};
return (
@@ -56,7 +53,6 @@ export default function SheetSection({
<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;
@@ -70,14 +66,7 @@ export default function SheetSection({
...styles.row,
background: getRowBg(effectiveStatus),
animation: pulseId === e.entry_id ? "rowPulse 220ms ease-out" : "none",
borderLeft:
effectiveStatus === 2
? `4px solid ${stylesTokens.rowOkBorder}`
: effectiveStatus === 1
? `4px solid ${stylesTokens.rowNoBorder}`
: effectiveStatus === 3
? `4px solid ${stylesTokens.rowMaybeBorder}`
: `4px solid ${stylesTokens.rowEmptyBorder}`,
borderLeft: getBorderLeft(effectiveStatus),
}}
>
<div

6
frontend/src/styles/styles.js
View File

@@ -48,9 +48,9 @@ export const styles = {
fontWeight: 1000,
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
letterSpacing: 1.0,
color: stylesTokens.textGold,
background: "linear-gradient(180deg, rgba(32,32,36,0.92), rgba(14,14,16,0.92))",
borderBottom: `1px solid ${stylesTokens.goldLine}`,
color: stylesTokens.sectionHeaderText,
background: `linear-gradient(180deg, ${stylesTokens.sectionHeaderBgTop}, ${stylesTokens.sectionHeaderBgBottom})`,
borderBottom: `1px solid ${stylesTokens.sectionHeaderBorder}`,
textTransform: "uppercase",
textShadow: "0 1px 0 rgba(0,0,0,0.6)",
},

25
frontend/src/styles/theme.js
View File

@@ -10,30 +10,41 @@ export const stylesTokens = {
goldLine: "var(--hp-goldLine)",
// ===== NEW: Row/Table colors so themes affect tables =====
// ===== Section Header (NEW) =====
sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)",
sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)",
sectionHeaderText: "var(--hp-sectionHeaderText)",
sectionHeaderBorder: "var(--hp-sectionHeaderBorder)",
// ===== Row/Table colors =====
rowDefaultBg: "var(--hp-rowDefaultBg)",
rowOkBg: "var(--hp-rowOkBg)",
rowOkBorder: "var(--hp-rowOkBorder)",
rowOkText: "var(--hp-rowOkText)",
badgeOkBg: "var(--hp-badgeOkBg)",
badgeOkText: "var(--hp-badgeOkText)",
rowNoBg: "var(--hp-rowNoBg)",
rowNoBorder: "var(--hp-rowNoBorder)",
rowNoText: "var(--hp-rowNoText)",
badgeNoBg: "var(--hp-badgeNoBg)",
badgeNoText: "var(--hp-badgeNoText)",
rowMaybeBg: "var(--hp-rowMaybeBg)",
rowMaybeBorder: "var(--hp-rowMaybeBorder)",
rowMaybeText: "var(--hp-rowMaybeText)",
badgeMaybeBg: "var(--hp-badgeMaybeBg)",
badgeMaybeText: "var(--hp-badgeMaybeText)",
rowEmptyBg: "var(--hp-rowEmptyBg)",
rowEmptyBorder: "var(--hp-rowEmptyBorder)",
rowEmptyText: "var(--hp-rowEmptyText)",
// ===== Badge colors (NEW: getrennt von row*) =====
badgeOkBg: "var(--hp-badgeOkBg)",
badgeOkText: "var(--hp-badgeOkText)",
badgeNoBg: "var(--hp-badgeNoBg)",
badgeNoText: "var(--hp-badgeNoText)",
badgeMaybeBg: "var(--hp-badgeMaybeBg)",
badgeMaybeText: "var(--hp-badgeMaybeText)",
badgeEmptyBg: "var(--hp-badgeEmptyBg)",
badgeEmptyText: "var(--hp-badgeEmptyText)",
};

82
frontend/src/styles/themes.js
View File

@@ -20,10 +20,10 @@ export const THEMES = {
badgeOkBg: "rgba(0,190,80,0.18)",
badgeOkText: "#baf3c9",
rowNoBg: "rgba(255,35,35,0.16)",
rowNoBorder: "rgba(255,35,35,0.55)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.18)",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(140,140,140,0.12)",
@@ -60,17 +60,17 @@ export const THEMES = {
badgeOkBg: "rgba(255, 184, 107, 0.20)",
badgeOkText: "rgba(255, 235, 210, 0.95)",
rowNoBg: "rgba(200, 40, 40, 0.26)",
rowNoBorder: "rgba(200, 40, 40, 0.70)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(200, 40, 40, 0.22)",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(255, 210, 140, 0.14)",
rowMaybeBorder: "rgba(255, 210, 140, 0.30)",
rowMaybeText: "rgba(255, 235, 210, 0.88)",
badgeMaybeBg: "rgba(255, 210, 140, 0.16)",
badgeMaybeText: "rgba(255, 235, 210, 0.88)",
rowMaybeBg: "rgba(140,140,140,0.12)",
rowMaybeBorder: "rgba(233,216,166,0.22)",
rowMaybeText: "rgba(233,216,166,0.85)",
badgeMaybeBg: "rgba(140,140,140,0.14)",
badgeMaybeText: "rgba(233,216,166,0.85)",
rowEmptyBg: "rgba(255,255,255,0.06)",
rowEmptyBorder: "rgba(0,0,0,0)",
@@ -100,17 +100,17 @@ export const THEMES = {
badgeOkBg: "rgba(124, 255, 182, 0.18)",
badgeOkText: "rgba(210, 255, 235, 0.95)",
rowNoBg: "rgba(40, 120, 80, 0.28)",
rowNoBorder: "rgba(40, 120, 80, 0.70)",
rowNoText: "rgba(190, 245, 220, 0.88)",
badgeNoBg: "rgba(40, 120, 80, 0.22)",
badgeNoText: "rgba(190, 245, 220, 0.88)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(124, 255, 182, 0.10)",
rowMaybeBorder: "rgba(124, 255, 182, 0.28)",
rowMaybeText: "rgba(200, 255, 230, 0.85)",
badgeMaybeBg: "rgba(124, 255, 182, 0.12)",
badgeMaybeText: "rgba(200, 255, 230, 0.85)",
rowMaybeBg: "rgba(140,140,140,0.12)",
rowMaybeBorder: "rgba(233,216,166,0.22)",
rowMaybeText: "rgba(233,216,166,0.85)",
badgeMaybeBg: "rgba(140,140,140,0.14)",
badgeMaybeText: "rgba(233,216,166,0.85)",
rowEmptyBg: "rgba(255,255,255,0.05)",
rowEmptyBorder: "rgba(0,0,0,0)",
@@ -140,17 +140,17 @@ export const THEMES = {
badgeOkBg: "rgba(143, 182, 255, 0.18)",
badgeOkText: "rgba(225, 235, 255, 0.95)",
rowNoBg: "rgba(70, 95, 160, 0.28)",
rowNoBorder: "rgba(70, 95, 160, 0.70)",
rowNoText: "rgba(205, 220, 255, 0.90)",
badgeNoBg: "rgba(70, 95, 160, 0.22)",
badgeNoText: "rgba(205, 220, 255, 0.90)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(143, 182, 255, 0.10)",
rowMaybeBorder: "rgba(143, 182, 255, 0.28)",
rowMaybeText: "rgba(210, 225, 255, 0.88)",
badgeMaybeBg: "rgba(143, 182, 255, 0.12)",
badgeMaybeText: "rgba(210, 225, 255, 0.88)",
rowMaybeBg: "rgba(140,140,140,0.12)",
rowMaybeBorder: "rgba(233,216,166,0.22)",
rowMaybeText: "rgba(233,216,166,0.85)",
badgeMaybeBg: "rgba(140,140,140,0.14)",
badgeMaybeText: "rgba(233,216,166,0.85)",
rowEmptyBg: "rgba(255,255,255,0.05)",
rowEmptyBorder: "rgba(0,0,0,0)",
@@ -180,17 +180,17 @@ export const THEMES = {
badgeOkBg: "rgba(255, 226, 122, 0.20)",
badgeOkText: "rgba(255, 245, 210, 0.95)",
rowNoBg: "rgba(160, 120, 40, 0.28)",
rowNoBorder: "rgba(160, 120, 40, 0.70)",
rowNoText: "rgba(255, 230, 170, 0.90)",
badgeNoBg: "rgba(160, 120, 40, 0.22)",
badgeNoText: "rgba(255, 230, 170, 0.90)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(255, 226, 122, 0.10)",
rowMaybeBorder: "rgba(255, 226, 122, 0.28)",
rowMaybeText: "rgba(255, 245, 210, 0.88)",
badgeMaybeBg: "rgba(255, 226, 122, 0.12)",
badgeMaybeText: "rgba(255, 245, 210, 0.88)",
rowMaybeBg: "rgba(140,140,140,0.12)",
rowMaybeBorder: "rgba(233,216,166,0.22)",
rowMaybeText: "rgba(233,216,166,0.85)",
badgeMaybeBg: "rgba(140,140,140,0.14)",
badgeMaybeText: "rgba(233,216,166,0.85)",
rowEmptyBg: "rgba(255,255,255,0.05)",
rowEmptyBorder: "rgba(0,0,0,0)",