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

Fix overflow and stacking issues in App rendering

Browse Source 
Refactored overflow behavior to allow specific components to stack or clip as needed, improving rendering flexibility. Updated styles and fixed z-index issues for cleaner stacking contexts. Removed unused comments for better code readability.
This commit is contained in:
Sascha Nesterovic
2026-02-07 18:51:32 +01:00
parent 1e60656eac
commit b6e75cedc4
2 changed files with 255 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/App.jsx
View File

@@ -1,3 +1,4 @@
// frontend/src/App.jsx
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { api } from "./api/client"; import { api } from "./api/client";
@@ -241,6 +242,7 @@ export default function App() {
variant = "tile", variant = "tile",
icon = null, icon = null,
children = null, children = null,
overflow = "hidden", // ✅ FIX: allow some tiles to not clip neighbors
}) => { }) => {
const v = variant; const v = variant;
@@ -256,7 +258,7 @@ export default function App() {
boxShadow: v === "panel" ? "0 20px 70px rgba(0,0,0,0.45)" : "0 12px 30px rgba(0,0,0,0.35)", boxShadow: v === "panel" ? "0 20px 70px rgba(0,0,0,0.45)" : "0 12px 30px rgba(0,0,0,0.35)",
backdropFilter: "blur(10px)", backdropFilter: "blur(10px)",
padding: pad, padding: pad,
overflow: "hidden", overflow, // ✅ FIX: default hidden, but can be visible where needed
minWidth: 0, minWidth: 0,
position: "relative", position: "relative",
}; };
@@ -292,7 +294,8 @@ export default function App() {
opacity: 0.75, opacity: 0.75,
}; };
const glowLine = v === "panel" const glowLine =
v === "panel"
? { ? {
content: '""', content: '""',
position: "absolute", position: "absolute",
@@ -436,15 +439,14 @@ export default function App() {
border: "none", border: "none",
boxShadow: "none", boxShadow: "none",
display: "grid", display: "grid",
alignItems: "center", // ✅ dünnes Paper in der HUD-Zelle schön mittig alignItems: "center",
justifyItems: "stretch", justifyItems: "stretch",
padding: 0, padding: 0,
}} }}
> >
{/* Dünnes Pergament */}
<div <div
style={{ style={{
height: 96, // ✅ "dünn" (kannst du 80–96 spielen) height: 96,
width: "90%", width: "90%",
borderRadius: 16, borderRadius: 16,
background: ` background: `
@@ -461,7 +463,6 @@ export default function App() {
padding: "14px 16px", padding: "14px 16px",
}} }}
> >
{/* Papier-Flecken */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -476,7 +477,6 @@ export default function App() {
}} }}
/> />
{/* Innere Goldlinie */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -488,7 +488,6 @@ 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 <div
style={{ style={{
@@ -518,7 +517,6 @@ export default function App() {
</div> </div>
</div> </div>
{/* Siegel */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -541,14 +539,14 @@ export default function App() {
</div> </div>
</div> </div>
); );
}; };
const PlayerIdentityCard = ({ const PlayerIdentityCard = ({
name = "Harry Potter", name = "Harry Potter",
houseLabel = "Gryffindor", houseLabel = "Gryffindor",
borderColor = "#7c4dff", borderColor = "#7c4dff",
img = "/player_cards/harry.png", img = "/player_cards/harry.png",
}) => { }) => {
return ( return (
<div <div
style={{ style={{
@@ -558,9 +556,10 @@ export default function App() {
display: "grid", display: "grid",
alignItems: "center", alignItems: "center",
overflow: "visible", overflow: "visible",
position: "relative", // ✅ FIX: enable clean stacking context
zIndex: 5, // ✅ FIX: sit above neighbors
}} }}
> >
{/* Slot-Container: bleibt ruhig, Karte darf drüber schauen */}
<div <div
style={{ style={{
height: "100%", height: "100%",
@@ -572,51 +571,50 @@ export default function App() {
backdropFilter: "none", backdropFilter: "none",
boxShadow: "none", boxShadow: "none",
padding: 12, padding: 12,
overflow: "visible", // ✅ Karte darf raus ragen overflow: "visible",
position: "relative", position: "relative",
zIndex: 5, // ✅ FIX
display: "grid", display: "grid",
alignItems: "center", alignItems: "center",
justifyItems: "start", justifyItems: "start",
}} }}
> >
{/* Die Karte selbst (kleiner als Container) */}
<div <div
style={{ style={{
width: "48%", // ✅ nicht volle Breite width: "48%",
zIndex: 50,
maxWidth: 220, maxWidth: 220,
aspectRatio: "63 / 88", // typisch Kartenformat aspectRatio: "63 / 88",
borderRadius: 16, borderRadius: 16,
border: `2px solid ${borderColor}`, border: `2px solid ${borderColor}`,
boxShadow: `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`, boxShadow: `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`,
overflow: "visible", overflow: "hidden", // ✅ important: crop image to rounded corners
position: "relative", position: "relative",
background: "rgba(0,0,0,0.15)", background: "rgba(0,0,0,0.15)",
transform: "translateY(-10px) rotate(-0.6deg)", // ✅ schaut leicht raus transform: "translateY(-10px) rotate(-0.6deg)",
transformOrigin: "center bottom", transformOrigin: "center bottom",
transition: "transform 180ms ease, box-shadow 180ms ease", transition: "transform 180ms ease, box-shadow 180ms ease",
cursor: "pointer", cursor: "pointer",
marginLeft: 20, marginLeft: 20,
zIndex: 50, // ✅ keep above other tiles
}} }}
onMouseMove={(e) => { onMouseMove={(e) => {
// einfacher Tilt ohne extra libs
const rect = e.currentTarget.getBoundingClientRect(); const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width; // 0..1 const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height; // 0..1 const y = (e.clientY - rect.top) / rect.height;
const rx = (0.5 - y) * 6; // tilt range const rx = (0.5 - y) * 6;
const ry = (x - 0.5) * 8; const ry = (x - 0.5) * 8;
e.currentTarget.style.transform = `translateY(-16px) rotate(-0.6deg) perspective(700px) rotateX(${rx}deg) rotateY(${ry}deg)`; e.currentTarget.style.transform = `translateY(-16px) rotate(-0.6deg) perspective(700px) rotateX(${rx}deg) rotateY(${ry}deg)`;
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.currentTarget.style.transform = "translateY(-10px) rotate(-0.6deg)"; e.currentTarget.style.transform = "translateY(-10px) rotate(-0.6deg)";
e.currentTarget.style.boxShadow = `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`;
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.currentTarget.style.transform = "translateY(-18px) rotate(-0.6deg)"; e.currentTarget.style.transform = "translateY(-18px) rotate(-0.6deg)";
e.currentTarget.style.boxShadow = `0 26px 70px rgba(0,0,0,0.62), 0 0 34px ${borderColor}`; e.currentTarget.style.boxShadow = `0 26px 70px rgba(0,0,0,0.62), 0 0 34px ${borderColor}`;
}} }}
> >
{/* Image */}
<img <img
src={img} src={img}
alt={name} alt={name}
@@ -628,11 +626,9 @@ export default function App() {
transform: "scale(1.02)", transform: "scale(1.02)",
filter: "contrast(1.02) saturate(1.06)", filter: "contrast(1.02) saturate(1.06)",
display: "block", display: "block",
overflow: "visble",
}} }}
/> />
{/* Gloss */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -644,7 +640,6 @@ export default function App() {
}} }}
/> />
{/* Bottom label glass */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -697,7 +692,6 @@ export default function App() {
</div> </div>
</div> </div>
{/* Corner tag */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -721,9 +715,7 @@ export default function App() {
</div> </div>
</div> </div>
); );
}; };
return ( return (
<div style={styles.page}> <div style={styles.page}>
@@ -757,7 +749,6 @@ export default function App() {
subtitle="Platzhalter – hier kommt später das Board + Figuren rein." subtitle="Platzhalter – hier kommt später das Board + Figuren rein."
variant="panel" variant="panel"
> >
{/* 👇 DAS ist neu */}
<div <div
style={{ style={{
flex: 1, flex: 1,
@@ -769,7 +760,6 @@ export default function App() {
/> />
</PlaceholderCard> </PlaceholderCard>
{/* Dice overlay bleibt gleich */}
<div className="diceOverlay"> <div className="diceOverlay">
<PlaceholderCard title="Würfel" variant="compact" /> <PlaceholderCard title="Würfel" variant="compact" />
</div> </div>
@@ -799,8 +789,9 @@ export default function App() {
/> />
<div className="playerHudMiddle"> <div className="playerHudMiddle">
<PlaceholderCard title="Meine Geheimkarten" variant="tile" /> {/* ✅ FIX: these were clipping your hovering/overlapping player card */}
<PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" /> <PlaceholderCard title="Meine Geheimkarten" variant="tile" overflow="visible" />
<PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" overflow="visible" />
</div> </div>
<HogwartsPointsCard value={60} /> <HogwartsPointsCard value={60} />
@@ -820,9 +811,7 @@ export default function App() {
}} }}
> >
<div> <div>
<div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}> <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>Notizen</div>
Notizen
</div>
<div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}> <div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}>
Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte). Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte).
</div> </div>
@@ -846,11 +835,7 @@ export default function App() {
</aside> </aside>
</div> </div>
<ChipModal <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
chipOpen={chipOpen}
closeChipModalToDash={closeChipModalToDash}
chooseChip={chooseChip}
/>
</div> </div>
); );
} }

7
frontend/src/AppLayout.css
View File

@@ -1,3 +1,4 @@
/* frontend/src/AppLayout.css */
html, body, #root { html, body, #root {
height: 100%; height: 100%;
} }
@@ -100,14 +101,14 @@ body {
justify-items: center; justify-items: center;
gap: 10px; gap: 10px;
overflow: visible; /* 🔥 wichtig */ overflow: visible;
} }
.playerRailInner { .playerRailInner {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; /* hier wird wieder sauber gecropped */ overflow: visible;
border-radius: 18px; /* etwas kleiner als außen */ border-radius: 18px;
display: grid; display: grid;
justify-items: center; justify-items: center;
} }