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

61
frontend/src/App.jsx
View File

@@ -427,42 +427,38 @@ export default function App() {
const GOLD = "#f2d27a";
return (
// SLOT: gleiche "Card"-Geometrie wie deine Placeholders (Spacing/Radius)
<div
style={{
height: "100%",
minHeight: 0,
minWidth: 0,
borderRadius: 18,
border: `1px solid ${stylesTokens.panelBorder}`,
background: "rgba(0,0,0,0.10)",
backdropFilter: "blur(8px)",
boxShadow: "0 12px 30px rgba(0,0,0,0.30)",
padding: 12,
overflow: "visible", // ✅ statt hidden
background: "transparent",
border: "none",
boxShadow: "none",
display: "grid",
placeItems: "stretch",
alignItems: "center", // ✅ dünnes Paper in der HUD-Zelle schön mittig
justifyItems: "stretch",
padding: 0,
}}
>
{/* PAPER inset: füllt den Slot, aber mit eigenen Rundungen */}
{/* Dünnes Pergament */}
<div
style={{
height: 88, // ✅ "dünn" (kannst du 80–96 spielen)
width: "100%",
height: "100%",
minHeight: 0,
borderRadius: 16, // ✅ klare Rundung sichtbar
borderRadius: 16,
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(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
`,
boxShadow:
"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)",
"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",
placeItems: "center",
padding: "16px 16px",
padding: "14px 16px",
}}
>
{/* Papier-Flecken */}
@@ -484,8 +480,8 @@ export default function App() {
<div
style={{
position: "absolute",
inset: 12,
borderRadius: 14,
inset: 10,
borderRadius: 12,
border: "1px solid rgba(202,162,74,0.40)",
boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
pointerEvents: "none",
@@ -493,23 +489,15 @@ export default function App() {
/>
{/* Wert */}
<div
style={{
display: "flex",
alignItems: "baseline",
gap: 10,
position: "relative",
}}
>
<div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
<div
style={{
color: GOLD,
fontWeight: 900,
fontSize: 52,
fontSize: 44,
letterSpacing: 0.6,
lineHeight: 1,
textShadow:
"0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
textShadow: "0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
}}
>
{value}
@@ -519,11 +507,10 @@ export default function App() {
style={{
color: GOLD,
fontWeight: 900,
fontSize: 19,
fontSize: 18,
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)",
transform: "translateY(-6px)",
textShadow: "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
opacity: 0.95,
}}
>
@@ -535,8 +522,8 @@ export default function App() {
<div
style={{
position: "absolute",
bottom: 14,
right: 14,
bottom: 10,
right: 12,
color: "rgba(60,40,18,0.55)",
fontSize: 11,
fontWeight: 900,
@@ -556,12 +543,6 @@ export default function App() {
);
};
return (
<div style={styles.page}>
<div style={styles.bgFixed} aria-hidden="true">