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

Refactor HUD styling for cleaner and simpler design.

Browse Source 
Simplified the background, padding, and shadow styles while adjusting dimensions for a more refined appearance. These changes improve maintainability and provide a sleeker visual presentation.
This commit is contained in:
Sascha Nesterovic
2026-02-07 12:39:14 +01:00
parent 145af05471
commit 0fa26ddf5a
1 changed files with 91 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
frontend/src/App.jsx
View File

@@ -424,143 +424,124 @@ export default function App() {
}; };
const HogwartsPointsCard = ({ value = 0 }) => { const HogwartsPointsCard = ({ value = 0 }) => {
const GOLD = "#f2d27a"; const GOLD = "#f2d27a";
return ( return (
// SLOT: gleiche "Card"-Geometrie wie deine Placeholders (Spacing/Radius) <div
style={{
height: "100%",
minHeight: 0,
minWidth: 0,
background: "transparent",
border: "none",
boxShadow: "none",
display: "grid",
alignItems: "center", // ✅ dünnes Paper in der HUD-Zelle schön mittig
justifyItems: "stretch",
padding: 0,
}}
>
{/* Dünnes Pergament */}
<div <div
style={{ style={{
height: "100%", height: 88, // ✅ "dünn" (kannst du 80–96 spielen)
minHeight: 0, width: "100%",
minWidth: 0, borderRadius: 16,
borderRadius: 18, background: `
border: `1px solid ${stylesTokens.panelBorder}`, radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)),
background: "rgba(0,0,0,0.10)", radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
backdropFilter: "blur(8px)", linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
boxShadow: "0 12px 30px rgba(0,0,0,0.30)", `,
padding: 12, boxShadow:
overflow: "visible", // ✅ statt hidden "inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 18px 40px rgba(0,0,0,0.18), 0 16px 40px rgba(0,0,0,0.40)",
position: "relative",
overflow: "hidden",
display: "grid", display: "grid",
placeItems: "stretch", placeItems: "center",
padding: "14px 16px",
}} }}
> >
{/* PAPER inset: füllt den Slot, aber mit eigenen Rundungen */} {/* Papier-Flecken */}
<div <div
style={{ style={{
width: "100%", position: "absolute",
height: "100%", inset: 0,
minHeight: 0,
borderRadius: 16, // ✅ klare Rundung sichtbar
background: ` background: `
radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)), radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%),
radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%), radial-gradient(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%),
linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26)) radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%)
`, `,
boxShadow: opacity: 0.65,
"inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 20px 45px rgba(0,0,0,0.24), 0 16px 40px rgba(0,0,0,0.35)", pointerEvents: "none",
position: "relative",
overflow: "hidden",
display: "grid",
placeItems: "center",
padding: "16px 16px",
}} }}
> />
{/* Papier-Flecken */}
<div
style={{
position: "absolute",
inset: 0,
background: `
radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%),
radial-gradient(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%),
radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%)
`,
opacity: 0.65,
pointerEvents: "none",
}}
/>
{/* Innere Goldlinie */} {/* Innere Goldlinie */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
inset: 12, inset: 10,
borderRadius: 14, borderRadius: 12,
border: "1px solid rgba(202,162,74,0.40)", border: "1px solid rgba(202,162,74,0.40)",
boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)", boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
pointerEvents: "none", pointerEvents: "none",
}} }}
/> />
{/* Wert */} {/* Wert */}
<div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
<div <div
style={{ style={{
display: "flex", color: GOLD,
alignItems: "baseline", fontWeight: 900,
gap: 10, fontSize: 44,
position: "relative", letterSpacing: 0.6,
lineHeight: 1,
textShadow: "0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
}} }}
> >
<div {value}
style={{
color: GOLD,
fontWeight: 900,
fontSize: 52,
letterSpacing: 0.6,
lineHeight: 1,
textShadow:
"0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
}}
>
{value}
</div>
<div
style={{
color: GOLD,
fontWeight: 900,
fontSize: 19,
letterSpacing: 1.4,
transform: "translateY(-7px)",
textShadow:
"0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
opacity: 0.95,
}}
>
HP
</div>
</div> </div>
{/* Siegel */}
<div <div
style={{ style={{
position: "absolute", color: GOLD,
bottom: 14,
right: 14,
color: "rgba(60,40,18,0.55)",
fontSize: 11,
fontWeight: 900, fontWeight: 900,
letterSpacing: 1.6, fontSize: 18,
textTransform: "uppercase", letterSpacing: 1.4,
transform: "rotate(-6deg)", transform: "translateY(-6px)",
border: "1px solid rgba(60,40,18,0.25)", textShadow: "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
borderRadius: 999, opacity: 0.95,
padding: "3px 8px",
background: "rgba(255,255,255,0.10)",
}} }}
> >
SCORE HP
</div> </div>
</div> </div>
{/* Siegel */}
<div
style={{
position: "absolute",
bottom: 10,
right: 12,
color: "rgba(60,40,18,0.55)",
fontSize: 11,
fontWeight: 900,
letterSpacing: 1.6,
textTransform: "uppercase",
transform: "rotate(-6deg)",
border: "1px solid rgba(60,40,18,0.25)",
borderRadius: 999,
padding: "3px 8px",
background: "rgba(255,255,255,0.10)",
}}
>
SCORE
</div>
</div> </div>
); </div>
}; );
};
return ( return (
<div style={styles.page}> <div style={styles.page}>