Refractor 3D Dice

3d dice
Persist dice state with localStorage and improve rendering layering.
2026-02-08 11:47:32 +01:00 · 2026-02-08 11:39:25 +01:00 · 2026-02-08 11:11:50 +01:00 · 2026-02-08 11:02:43 +01:00 · 2026-02-07 19:01:37 +01:00 · 2026-02-07 18:56:20 +01:00
16 changed files with 1580 additions and 485 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,12 +3,180 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
    <title>Cluedo Sheet</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">    
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        background: radial-gradient(
+          ellipse at top,
+          rgba(30, 30, 30, 0.95),
+          #000
+        );
+      }
+
+      /* Splash Overlay */
+      #app-splash {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483647;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(
+          ellipse at top,
+          rgba(30, 30, 30, 0.95),
+          #000
+        );
+        overflow: hidden;
+        opacity: 1;
+        transition: opacity 260ms ease;
+      }
+
+      #app-splash.hide {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      /* gold animated lines */
+      #app-splash::before,
+      #app-splash::after {
+        content: "";
+        position: absolute;
+        inset: -40%;
+        background:
+          linear-gradient(
+            90deg,
+            transparent,
+            rgba(233, 216, 166, 0.18),
+            transparent
+          );
+        transform: rotate(12deg);
+        animation: goldSweep 1.6s linear infinite;
+        opacity: 0.55;
+        filter: blur(0.2px);
+        pointer-events: none;
+      }
+
+      #app-splash::after {
+        transform: rotate(-12deg);
+        animation-duration: 2.2s;
+        opacity: 0.35;
+      }
+
+      @keyframes goldSweep {
+        0% { transform: translateX(-25%) rotate(12deg); }
+        100% { transform: translateX(25%) rotate(12deg); }
+      }
+
+      /* glassy card */
+      .splash-card {
+        position: relative;
+        width: min(520px, 90vw);
+        border-radius: 22px;
+        padding: 18px 16px;
+        background: rgba(20, 20, 22, 0.55);
+        border: 1px solid rgba(233, 216, 166, 0.16);
+        box-shadow: 0 18px 70px rgba(0,0,0,0.55);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        text-align: center;
+        overflow: hidden;
+      }
+
+      .splash-card::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(233,216,166,0.16), transparent);
+        opacity: 0.45;
+        pointer-events: none;
+      }
+
+      .splash-title {
+        position: relative;
+        font-family: "Cinzel Decorative", serif;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        color: rgba(245, 239, 220, 0.92);
+        font-size: 18px;
+        line-height: 1.25;
+      }
+
+      .splash-sub {
+        position: relative;
+        margin-top: 6px;
+        font-family: "IM Fell English", serif;
+        font-style: italic;
+        color: rgba(233, 216, 166, 0.78);
+        font-size: 13px;
+      }
+
+      /* Loader */
+      .loader {
+        position: relative;
+        margin: 14px auto 0;
+        width: 28px;
+        height: 28px;
+        border-radius: 999px;
+        border: 2px solid rgba(233, 216, 166, 0.18);
+        border-top-color: rgba(233, 216, 166, 0.92);
+        animation: spin 0.85s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      /* tiny spark at bottom */
+      .spark {
+        position: relative;
+        margin: 14px auto 0;
+        width: 160px;
+        height: 2px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, transparent, rgba(233,216,166,0.65), transparent);
+        opacity: 0.6;
+        filter: blur(0.2px);
+        animation: pulse 1.4s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
+        50% { opacity: 0.85; transform: scaleX(1.02); }
+      }
+    </style>
+
+    <!-- Theme-Key sofort setzen -->
+    <script>
+      try {
+        const k = localStorage.getItem("hpTheme:guest") || "default";
+        document.documentElement.setAttribute("data-theme", k);
+      } catch {}
+    </script>
  </head>
+
  <body>
+    <div id="app-splash" aria-hidden="true">
+      <div class="splash-card">
+        <div class="splash-title">Zauber-Detektiv Notizbogen</div>
+        <div class="splash-sub">Magie wird vorbereitet…</div>
+        <div class="loader" aria-label="Laden"></div>
+        <div class="spark"></div>
+      </div>
+    </div>
+
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
--- a/frontend/public/player_cards/harry.png
+++ b/frontend/public/player_cards/harry.png
--- a/frontend/public/players/ginny.jpg
+++ b/frontend/public/players/ginny.jpg
--- a/frontend/public/players/harry.jpg
+++ b/frontend/public/players/harry.jpg
--- a/frontend/public/players/hermione.jpg
+++ b/frontend/public/players/hermione.jpg
--- a/frontend/public/players/luna.jpg
+++ b/frontend/public/players/luna.jpg
--- a/frontend/public/players/neville.jpg
+++ b/frontend/public/players/neville.jpg
--- a/frontend/public/players/ron.jpg
+++ b/frontend/public/players/ron.jpg
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
--- a/frontend/src/AppLayout.css
+++ b/frontend/src/AppLayout.css
@@ -0,0 +1,379 @@
+/* frontend/src/AppLayout.css */
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+}
+
+.appRoot {
+  height: 100vh;
+  display: grid;
+
+  /* Links: flexibel | Rechts: Notes clamp */
+  grid-template-columns: minmax(900px, 1fr) clamp(380px, 32vw, 520px);
+
+  gap: 14px;
+  padding: 14px;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+/* LEFT COLUMN */
+.leftPane {
+  overflow: visible;
+  min-width: 0;
+  display: grid;
+
+  /* Top | Main | HUD */
+  grid-template-rows: 68px minmax(360px, 1fr) minmax(160px, 190px);
+
+  gap: 14px;
+}
+
+.topBarRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+/* MAIN: Tools | Board | PlayerRail */
+.mainRow {
+  min-height: 0;
+  overflow: visible;
+  display: grid;
+
+  /* Tools bewusst schmaler, Board bekommt Bühne */
+  grid-template-columns: 260px minmax(560px, 1fr) 92px;
+
+  gap: 14px;
+  min-width: 0;
+}
+
+/* Tools left of board */
+.leftTools {
+  min-width: 0;
+  overflow: hidden;
+  display: grid;
+  align-content: start;
+}
+
+.leftToolsRow {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+/* Board */
+.boardWrap {
+  min-height: 0;
+  overflow: hidden;
+  border-radius: 22px;
+  min-width: 0;
+  position: relative;
+}
+
+/* Dice overlay: under board slightly right */
+.diceOverlay {
+  position: absolute;
+  overflow: visible;
+  bottom: 14px;
+  right: 18px;
+  width: 220px;
+  pointer-events: auto;
+  opacity: 0.98;
+}
+
+/* Player rail: right of board, before notes (tight) */
+.playerRail {
+  min-height: 0;
+  border-radius: 22px;
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(0,0,0,0.18);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 16px 50px rgba(0,0,0,0.35);
+  padding: 10px 8px;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  justify-items: center;
+  gap: 10px;
+
+  overflow: visible;
+}
+
+.playerRailInner {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  border-radius: 18px;
+  display: grid;
+  justify-items: center;
+}
+
+.playerRailTitle {
+  font-weight: 900;
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+.playerRailList {
+  min-height: 0;
+  overflow: visible;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  justify-items: center;
+  padding-top: 4px;
+}
+
+/* HUD */
+.playerHud {
+  align-items: stretch;
+  overflow: visible;
+  display: grid;
+  grid-template-columns: 1.1fr 1.7fr 1.1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+.playerHudMiddle {
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  display: grid;
+
+  /* Geheimkarten groß, Hilfkarte etwas kleiner */
+  grid-template-columns: 1fr 0.78fr;
+
+  gap: 14px;
+}
+
+/* RIGHT COLUMN */
+.notesPane {
+  overflow: hidden;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.notesScroll {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 4px;
+}
+
+.diceOverlay {
+  position: absolute;
+  bottom: 14px;
+  right: 18px;
+  width: 220px;
+  pointer-events: auto; /* ✅ damit Hover/Clicks für Würfel gehen */
+  opacity: 0.98;
+}
+
+/* ===== True 3D Cube Dice (transition-based roll) ===== */
+.die3d {
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.die3d:hover:not(:disabled) {
+  transform: translateY(-3px) rotateX(8deg) rotateY(-10deg);
+}
+
+.dieCubeWrap {
+  width: 44px;
+  height: 44px;
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.dieCube {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+
+  /* absolute angles (numbers are set in JS) */
+  transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
+
+  /* default: snappy */
+  transition: transform 260ms cubic-bezier(0.22, 1.0, 0.25, 1);
+}
+
+.dieCube.rolling {
+  /* roll duration */
+  transition: transform 820ms cubic-bezier(0.18, 0.88, 0.22, 1);
+}
+
+/* Faces: remove hard borders / inner rings */
+.dieFace {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  border: none; /* ✅ no face border */
+  background:
+    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,0.14), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.72));
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.05), /* very subtle */
+    inset 0 14px 24px rgba(255,255,255,0.04);
+  display: grid;
+  place-items: center;
+  backface-visibility: hidden;
+}
+
+/* face positions */
+.dieFace.front  { transform: rotateY(  0deg) translateZ(22px); }
+.dieFace.back   { transform: rotateY(180deg) translateZ(22px); }
+.dieFace.right  { transform: rotateY( 90deg) translateZ(22px); }
+.dieFace.left   { transform: rotateY(-90deg) translateZ(22px); }
+.dieFace.top    { transform: rotateX( 90deg) translateZ(22px); }
+.dieFace.bottom { transform: rotateX(-90deg) translateZ(22px); }
+
+/* pips */
+.pipGrid {
+  width: 70%;
+  height: 70%;
+  position: relative;
+}
+
+.pip {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(245,245,245,0.92);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.20);
+}
+
+.specialIcon {
+  font-size: 20px;
+  line-height: 1;
+  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
+}
+
+/* Prevent clipping */
+.diceRow3d { overflow: visible; }
+
+.dieCube.snap {
+  transition: none !important;
+}
+
+/* one face */
+.dieFace {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,0.10);
+  background:
+    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,0.14), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.72));
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.06),
+    inset 0 12px 20px rgba(255,255,255,0.05);
+  display: grid;
+  place-items: center;
+  backface-visibility: hidden;
+}
+
+/* face positions */
+.dieFace.front  { transform: rotateY(  0deg) translateZ(22px); }
+.dieFace.back   { transform: rotateY(180deg) translateZ(22px); }
+.dieFace.right  { transform: rotateY( 90deg) translateZ(22px); }
+.dieFace.left   { transform: rotateY(-90deg) translateZ(22px); }
+.dieFace.top    { transform: rotateX( 90deg) translateZ(22px); }
+.dieFace.bottom { transform: rotateX(-90deg) translateZ(22px); }
+
+/* pips */
+.pipGrid {
+  width: 70%;
+  height: 70%;
+  position: relative;
+}
+
+.pip {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(245,245,245,0.92);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.20);
+}
+
+/* special icon */
+.specialIcon {
+  font-size: 20px;
+  line-height: 1;
+  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
+}
+
+/* optional: subtle face ring tint via CSS var */
+.dieFace {
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.06),
+    inset 0 0 0 2px var(--ring, rgba(255,255,255,0.00)),
+    inset 0 12px 20px rgba(255,255,255,0.05);
+}
+
+/* Roll animation */
+@keyframes dieRoll {
+  0% {
+    transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  25% {
+    transform: translateY(-6px) rotateX(220deg) rotateY(160deg) rotateZ(90deg);
+  }
+  55% {
+    transform: translateY(0px) rotateX(520deg) rotateY(460deg) rotateZ(240deg);
+  }
+  100% {
+    transform: translateY(-2px) rotateX(720deg) rotateY(720deg) rotateZ(360deg);
+  }
+}
+
+.die3dRolling {
+  animation: dieRoll 820ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
+}
+
+/* --- Responsive: shrink gracefully (no scroll outside notes) --- */
+@media (max-height: 860px) {
+  .leftPane {
+    grid-template-rows: 64px minmax(300px, 1fr) 150px;
+  }
+  .diceOverlay {
+    bottom: 10px;
+    right: 12px;
+    width: 200px;
+  }
+}
+
+@media (max-width: 1440px) {
+  .appRoot {
+    grid-template-columns: minmax(820px, 1fr) clamp(360px, 34vw, 480px);
+  }
+  .mainRow {
+    grid-template-columns: 240px minmax(520px, 1fr) 88px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .appRoot {
+    grid-template-columns: 1fr clamp(340px, 36vw, 460px);
+  }
+  .mainRow {
+    grid-template-columns: 220px minmax(480px, 1fr) 84px;
+  }
+}
+
+@media (max-width: 1180px) {
+  /* ab hier wird’s eng: tools noch schmäler */
+  .mainRow {
+    grid-template-columns: 200px minmax(440px, 1fr) 82px;
+  }
+}
--- a/frontend/src/components/Dice/Dice3D.jsx
+++ b/frontend/src/components/Dice/Dice3D.jsx
@@ -0,0 +1,147 @@
+// frontend/src/components/Dice/Dice3D.jsx
+import React from "react";
+
+export const cubeRotationForD6 = (value) => {
+  switch (value) {
+    case 1: return { rx: 0,   ry: 0 };
+    case 2: return { rx: -90, ry: 0 };
+    case 3: return { rx: 0,   ry: -90 };
+    case 4: return { rx: 0,   ry: 90 };
+    case 5: return { rx: 90,  ry: 0 };
+    case 6: return { rx: 0,   ry: 180 };
+    default: return { rx: 0,  ry: 0 };
+  }
+};
+
+export const PipFace = ({ value }) => {
+  const pos = (gx, gy) => ({ left: `${gx * 50}%`, top: `${gy * 50}%` });
+
+  const faces = {
+    1: [[1, 1]],
+    2: [[0, 0], [2, 2]],
+    3: [[0, 0], [1, 1], [2, 2]],
+    4: [[0, 0], [2, 0], [0, 2], [2, 2]],
+    5: [[0, 0], [2, 0], [1, 1], [0, 2], [2, 2]],
+    6: [[0, 0], [0, 1], [0, 2], [2, 0], [2, 1], [2, 2]],
+  };
+
+  const arr = faces[value] || faces[1];
+
+  return (
+    <div className="pipGrid">
+      {arr.map(([x, y], idx) => (
+        <div
+          key={idx}
+          className="pip"
+          style={{ ...pos(x, y), transform: "translate(-50%, -50%)" }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export const DieShell = ({ children, rolling = false, onClick }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="die3d"
+      style={{
+        width: 64,
+        height: 64,
+        borderRadius: 18,
+        border: "none",
+        background: "transparent",
+        boxShadow: "none",
+        position: "relative",
+        overflow: "visible",
+        display: "grid",
+        placeItems: "center",
+        cursor: rolling ? "default" : "pointer",
+        transition: "transform 160ms ease",
+        padding: 0,
+        outline: "none",
+      }}
+      disabled={rolling}
+    >
+      <div style={{ position: "relative", zIndex: 2 }}>{children}</div>
+    </button>
+  );
+};
+
+export const DieD6 = ({ rolling, onClick, ax, ay, onDone, snap = false }) => {
+  return (
+    <DieShell rolling={rolling} onClick={onClick}>
+      <div className="dieCubeWrap">
+        <div
+          className={`dieCube ${rolling ? "rolling" : ""}`}
+          style={{ "--rx": ax, "--ry": ay }}
+          onTransitionEnd={(e) => {
+            if (e.propertyName !== "transform") return;
+            if (rolling) onDone?.();
+          }}
+        >
+          <div className="dieFace front"><PipFace value={1} /></div>
+          <div className="dieFace back"><PipFace value={6} /></div>
+          <div className="dieFace top"><PipFace value={2} /></div>
+          <div className="dieFace bottom"><PipFace value={5} /></div>
+          <div className="dieFace right"><PipFace value={3} /></div>
+          <div className="dieFace left"><PipFace value={4} /></div>
+        </div>
+      </div>
+    </DieShell>
+  );
+};
+
+export const HouseDie = ({ face, rolling, onClick, ax, ay, onDone, snap = false }) => {
+  const faces = {
+    gryffindor: { icon: "🦁", color: "#ef4444" },
+    slytherin: { icon: "🐍", color: "#22c55e" },
+    ravenclaw: { icon: "🦅", color: "#3b82f6" },
+    hufflepuff: { icon: "🦡", color: "#facc15" },
+    help: { icon: "🃏", color: "#f2d27a" },
+    dark: { icon: "🌙", color: "rgba(255,255,255,0.85)" },
+  };
+
+  const order = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
+
+  return (
+    <DieShell rolling={rolling} onClick={onClick}>
+      <div className="dieCubeWrap">
+        <div
+          className={`dieCube ${rolling ? "rolling" : ""}`}
+          style={{ "--rx": ax, "--ry": ay }}
+          onTransitionEnd={(e) => {
+            if (e.propertyName !== "transform") return;
+            if (rolling) onDone?.();
+          }}
+        >
+          {order.map((key, i) => {
+            const item = faces[key];
+            const faceClass =
+              i === 0 ? "front" :
+              i === 1 ? "top" :
+              i === 2 ? "right" :
+              i === 3 ? "left" :
+              i === 4 ? "bottom" :
+              "back";
+
+            return (
+              <div key={key} className={`dieFace ${faceClass}`}>
+                <div
+                  className="specialIcon"
+                  style={{
+                    color: item.color,
+                    textShadow: `0 0 18px ${item.color}55, 0 10px 22px rgba(0,0,0,0.55)`,
+                  }}
+                >
+                  {item.icon}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </DieShell>
+  );
+};
--- a/frontend/src/components/Dice/DicePanel.jsx
+++ b/frontend/src/components/Dice/DicePanel.jsx
@@ -0,0 +1,188 @@
+// frontend/src/components/Dice/DicePanel.jsx
+import React, { useEffect, useRef, useState } from "react";
+import { stylesTokens } from "../../styles/theme";
+import { cubeRotationForD6, DieD6, HouseDie } from "./Dice/Dice3D.jsx";
+
+export default function DicePanel({ onRoll }) {
+  const LS_KEY = "hp_cluedo_dice_v1";
+
+  const [d1, setD1] = useState(4);
+  const [d2, setD2] = useState(2);
+  const [special, setSpecial] = useState("gryffindor");
+
+  const [a1, setA1] = useState({ x: 0, y: 90 });
+  const [a2, setA2] = useState({ x: -90, y: 0 });
+  const [as, setAs] = useState({ x: 0, y: 0 });
+
+  const [rolling, setRolling] = useState(false);
+  const [snap, setSnap] = useState(false);
+
+  const specialFaces = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
+  const order = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
+  const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+  // roll bookkeeping
+  const pendingRef = useRef(null);
+  const rollIdRef = useRef(0);
+  const doneForRollRef = useRef({ d1: false, d2: false, s: false });
+
+  // restore last
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(LS_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+
+      if (parsed?.d1) setD1(parsed.d1);
+      if (parsed?.d2) setD2(parsed.d2);
+      if (parsed?.special) setSpecial(parsed.special);
+
+      if (parsed?.d1) {
+        const r = cubeRotationForD6(parsed.d1);
+        setA1({ x: r.rx, y: r.ry });
+      }
+      if (parsed?.d2) {
+        const r = cubeRotationForD6(parsed.d2);
+        setA2({ x: r.rx, y: r.ry });
+      }
+      if (parsed?.special) {
+        const idx = Math.max(0, order.indexOf(parsed.special));
+        const r = cubeRotationForD6(idx + 1);
+        setAs({ x: r.rx, y: r.ry });
+      }
+    } catch {}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(LS_KEY, JSON.stringify({ d1, d2, special }));
+    } catch {}
+  }, [d1, d2, special]);
+
+  const normalize360 = (n) => ((n % 360) + 360) % 360;
+
+  const rollTo = (currentAngles, targetBase) => {
+    const spinX = 720 + randInt(0, 2) * 360;
+    const spinY = 720 + randInt(0, 2) * 360;
+
+    const currX = normalize360(currentAngles.x);
+    const currY = normalize360(currentAngles.y);
+
+    const dx = targetBase.rx - currX;
+    const dy = targetBase.ry - currY;
+
+    return { x: currentAngles.x + spinX + dx, y: currentAngles.y + spinY + dy };
+  };
+
+  const rollAll = () => {
+    if (rolling) return;
+
+    const nd1 = randInt(1, 6);
+    const nd2 = randInt(1, 6);
+    const ns = specialFaces[randInt(0, specialFaces.length - 1)];
+
+    const r1 = cubeRotationForD6(nd1);
+    const r2 = cubeRotationForD6(nd2);
+    const rs = cubeRotationForD6(Math.max(0, order.indexOf(ns)) + 1);
+
+    pendingRef.current = { nd1, nd2, ns };
+
+    rollIdRef.current += 1;
+    doneForRollRef.current = { d1: false, d2: false, s: false };
+
+    setRolling(true);
+
+    setA1((cur) => rollTo(cur, r1));
+    setA2((cur) => rollTo(cur, r2));
+    setAs((cur) => rollTo(cur, rs));
+  };
+
+  const maybeCommit = () => {
+    const flags = doneForRollRef.current;
+    if (!flags.d1 || !flags.d2 || !flags.s) return;
+
+    const p = pendingRef.current;
+    if (!p) return;
+
+    // ✅ rolling beenden
+    setRolling(false);
+
+    // ✅ Ergebnis state setzen
+    setD1(p.nd1);
+    setD2(p.nd2);
+    setSpecial(p.ns);
+
+    // ✅ Winkel auf kleine Basis normalisieren (ohne Transition)
+    const r1 = cubeRotationForD6(p.nd1);
+    const r2 = cubeRotationForD6(p.nd2);
+    const rs = cubeRotationForD6(Math.max(0, order.indexOf(p.ns)) + 1);
+
+    setSnap(true);
+    setA1({ x: r1.rx, y: r1.ry });
+    setA2({ x: r2.rx, y: r2.ry });
+    setAs({ x: rs.rx, y: rs.ry });
+
+    // Snap nur 1 Frame aktiv lassen
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setSnap(false));
+    });
+
+    pendingRef.current = null;
+
+    onRoll?.({ d1: p.nd1, d2: p.nd2, special: p.ns });
+  };
+  
+
+  const onDoneD1 = () => {
+    if (!rolling) return;
+    if (doneForRollRef.current.d1) return;
+    doneForRollRef.current.d1 = true;
+    maybeCommit();
+  };
+
+  const onDoneD2 = () => {
+    if (!rolling) return;
+    if (doneForRollRef.current.d2) return;
+    doneForRollRef.current.d2 = true;
+    maybeCommit();
+  };
+
+  const onDoneS = () => {
+    if (!rolling) return;
+    if (doneForRollRef.current.s) return;
+    doneForRollRef.current.s = true;
+    maybeCommit();
+  };
+
+  return (
+    <div style={{ pointerEvents: "auto" }}>
+      <div style={{ display: "grid", gap: 8 }}>
+        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
+          <div style={{ color: stylesTokens.textMain, fontWeight: 900, fontSize: 13 }}>Würfel</div>
+          <div style={{ color: stylesTokens.textDim, fontWeight: 900, fontSize: 11.5, letterSpacing: 0.7, opacity: 0.75 }}>
+            {rolling ? "ROLL…" : "READY"}
+          </div>
+        </div>
+
+        <div
+          className="diceRow3d"
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: 10,
+            alignItems: "center",
+            justifyItems: "center",
+            overflow: "visible",
+          }}
+        >
+          <DieD6 rolling={rolling} onClick={rollAll} ax={a1.x} ay={a1.y} onDone={onDoneD1} />
+          <DieD6 rolling={rolling} onClick={rollAll} ax={a2.x} ay={a2.y} onDone={onDoneD2} />
+          <HouseDie face={special} rolling={rolling} onClick={rollAll} ax={as.x} ay={as.y} onDone={onDoneS} />
+        </div>
+
+        <div style={{ color: stylesTokens.textDim, fontSize: 12, opacity: 0.95 }}>Klicken zum Rollen</div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,14 +1,51 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
 import { registerSW } from "virtual:pwa-register";

-createRoot(document.getElementById("root")).render(<App />);
-registerSW({ immediate: true });
-const updateSW = registerSW({
+async function bootstrap() {
+  // Theme sofort setzen
+  try {
+    const key = localStorage.getItem("hpTheme:guest") || DEFAULT_THEME_KEY;
+    applyTheme(key);
+  } catch {
+    applyTheme(DEFAULT_THEME_KEY);
+  }
+
+  // Fonts abwarten (verhindert Layout-Sprung)
+  try {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+  } catch {}
+
+  // App rendern
+  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+
+  // Splash mind. 3 Sekunden anzeigen (3000ms)
+  const MIN_SPLASH_MS = 3000;
+  const tStart = performance.now();
+
+  const hideSplash = () => {
+    const splash = document.getElementById("app-splash");
+    if (!splash) return;
+    splash.classList.add("hide");
+    setTimeout(() => splash.remove(), 320);
+  };
+
+  const elapsed = performance.now() - tStart;
+  const remaining = Math.max(0, MIN_SPLASH_MS - elapsed);
+  setTimeout(hideSplash, remaining);
+
+  // Service Worker ohne Auto-Reload-Flash
+  registerSW({
    immediate: true,
    onNeedRefresh() {
-      updateSW(true); // sofort neue Version aktivieren
-      window.location.reload();
+      console.info("Neue Version verfügbar");
+      // optional: später Toast "Update verfügbar"
    },
  });
+}
+
+bootstrap();
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/frontend/src/styles/hooks/useHpGlobalStyles.js
@@ -2,8 +2,6 @@ import { useEffect } from "react";
 import { stylesTokens } from "../theme";
 import { applyTheme } from "../themes";

-
-
 export function useHpGlobalStyles() {
  // Google Fonts
  useEffect(() => {
@@ -76,8 +74,7 @@ export function useHpGlobalStyles() {
        color: ${stylesTokens.textMain};
      }
      body {
-        overflow-x: hidden;
-        -webkit-overflow-scrolling: touch;
+        overflow: hidden;
      }
      #root { background: transparent; }
      * { -webkit-tap-highlight-color: transparent; }
--- a/frontend/src/styles/themes.js
+++ b/frontend/src/styles/themes.js
@@ -195,6 +195,32 @@ export const THEMES = {

 export const DEFAULT_THEME_KEY = "default";

+export function setThemeColorMeta(color) {
+  try {
+    const safe = typeof color === "string" ? color.trim() : "";
+    if (!safe) return;
+
+    // only allow solid colors (hex, rgb, hsl); ignore urls/gradients/rgba overlays
+    const looksSolid =
+      safe.startsWith("#") ||
+      safe.startsWith("rgb(") ||
+      safe.startsWith("hsl(") ||
+      safe.startsWith("oklch(");
+
+    if (!looksSolid) return;
+
+    let meta = document.querySelector('meta[name="theme-color"]');
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "theme-color");
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute("content", safe);
+  } catch {
+    // ignore
+  }
+}
+
 export function applyTheme(themeKey) {
  const t = THEMES[themeKey] || THEMES[DEFAULT_THEME_KEY];
  const root = document.documentElement;
@@ -202,6 +228,10 @@ export function applyTheme(themeKey) {
  for (const [k, v] of Object.entries(t.tokens)) {
    root.style.setProperty(`--hp-${k}`, v);
  }
+
+  // ✅ PWA/Android Statusbar dynamisch an Theme anpassen
+  // Nimmt (falls vorhanden) statusBarColor, sonst pageBg
+  setThemeColorMeta(t.tokens.statusBarColor || t.tokens.pageBg || "#000000");
 }

 export function themeStorageKey(email) {
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -20,7 +20,7 @@ export default defineConfig({
        scope: "/",
        display: "standalone",
        background_color: "#1c140d",
-        theme_color: "#caa45a",
+        theme_color: "#000000",
        icons: [
          { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" }
        ]
Author	SHA1	Message	Date
nessi	3809bd5425	Refractor 3D Dice	2026-02-08 11:47:32 +01:00
nessi	85bb30ae73	3d dice	2026-02-08 11:39:25 +01:00
nessi	81065f1054	Persist dice state with localStorage and improve rendering layering. Added functionality to save and load dice state (d1, d2, special) using localStorage for better user experience. Adjusted component styles to improve layering, ensure proper z-index for elements, and enhance 3D dice rendering.	2026-02-08 11:11:50 +01:00
nessi	56944bc8d7	Refactor dice components for true 3D rendering. Replaced the 2D dice logic with fully 3D-rendered cubes, including animations and proper face-to-value mappings. Updated the design to use CSS transformations and added visual enhancements for a more immersive user experience.	2026-02-08 11:02:43 +01:00
nessi	eec4597fda	Add rolling animation and interactive functionality to dice. Enhanced the DicePanel component with interactive rolling logic and animations for a more dynamic experience. Updated styles and functionality, including hover effects, roll results, and a 3D feel for dice components.	2026-02-07 19:01:37 +01:00
nessi	8f912d9edb	Add interactive dice panel with custom components This commit introduces a new DicePanel component, complete with custom dice (DieD6 and HouseDie) for enhanced interactivity. The panel is integrated into the UI with responsive styling, hover effects, and animations, providing a polished and functional user experience. Styles and layout adjustments in `AppLayout.css` support the new feature.	2026-02-07 18:56:20 +01:00
nessi	b6e75cedc4	Fix overflow and stacking issues in App rendering 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.	2026-02-07 18:51:32 +01:00
nessi	1e60656eac	Add overflow: "visible" to styles for better element rendering This ensures that elements can overflow their containers when necessary, improving visual consistency and layout flexibility. Corrected a typo in the second "overflow" property.	2026-02-07 18:43:56 +01:00
nessi	762e2d8300	Add zIndex property to styling in App component The zIndex property was added to ensure proper layering of elements in the UI. This change enhances design consistency and prevents potential overlapping issues.	2026-02-07 18:40:47 +01:00
nessi	2018b24029	Adjust button margin for improved spacing Increased the `marginLeft` value from 6 to 20 in the button styling for better alignment and visual consistency in the layout. This change ensures a more polished appearance.	2026-02-07 18:39:52 +01:00
nessi	5b901b0f98	Add margin-left styling to target element Added a small adjustment by including a `marginLeft` property with a value of 6. This change helps ensure proper spacing and alignment for the styled element.	2026-02-07 18:38:49 +01:00
nessi	b18ae57779	Make overflow visible in body and left pane Changed the `overflow` property from `hidden` to `visible` in both the `body` and `.leftPane` styles. This update ensures content is not clipped and allows for better handling of overflows.	2026-02-07 18:35:21 +01:00
nessi	a19d13b1b5	Remove visual effects and adjust HUD overflow behavior Removed border, background, blur, and shadow effects on specific UI elements to simplify the design. Changed the HUD overflow property from "hidden" to "visible" to allow better flexibility.	2026-02-07 13:01:52 +01:00
nessi	456d22d985	Update PlayerIdentityCard defaults and styles Changed the default `houseLabel` to "Gryffindor" and the `overflow` style to "visible" for a better visual effect. Removed an unnecessary styled block to clean up the component structure.	2026-02-07 12:57:57 +01:00
nessi	6638622903	Adjust card dimensions in App component. Updated the card's width and maxWidth to better fit the design requirements. This change ensures a more consistent and visually appealing layout.	2026-02-07 12:55:35 +01:00
nessi	f7730df3ec	Enhance card UI with improved styles and hover effects Adjusted styling for better visuals and responsiveness, including background, shadows, and dimensions. Added interactive hover effects for a dynamic user experience and refined card elements like gloss, label, and tag designs.	2026-02-07 12:54:04 +01:00
nessi	bc894de505	Add PlayerIdentityCard component and Harry Potter card Introduced a new PlayerIdentityCard component for displaying themed player cards with customizable options. Added a Harry Potter identity card as the first example, including relevant styling and an image. Integrated the new card into the player HUD in the app layout.	2026-02-07 12:49:50 +01:00
nessi	dbca035ca0	Adjust dimensions of dünnes Pergament component Updated the height to 96 and set the width to 90% for better scaling and alignment of the dünnes Pergament component. These changes ensure improved visual consistency and responsiveness.	2026-02-07 12:43:02 +01:00
nessi	c0f0e72967	Fix width styling in App.jsx component The width was changed from "100%" to 88 to ensure consistent styling and alignment with design specifications. This adjustment prevents visual discrepancies in the rendered component.	2026-02-07 12:40:37 +01:00
nessi	0fa26ddf5a	Refactor HUD styling for cleaner and simpler design. 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.	2026-02-07 12:39:14 +01:00
nessi	145af05471	Adjust layout and overflow settings for consistency Updated the App component's overflow property to "visible" for better content display and modified grid row sizing in the layout to improve spacing control. These changes ensure better alignment and a more consistent user interface.	2026-02-07 12:36:42 +01:00
nessi	b65d25f66a	Refine UI styles for improved layout and visual consistency Updated component and HUD styles to add better alignment, spacing, and consistent radius values. Enhanced background effects and shadows for a more polished and subtle appearance. Adjusted layout properties to ensure proper stretching and alignment of elements.	2026-02-07 12:33:10 +01:00
nessi	598b8b9b6e	Improve HUD styling and layout consistency Adjusted various height, padding, and spacing values for better alignment and responsiveness in the HUD. Increased font sizes and refined positioning to ensure a visually balanced layout. These changes enhance the user experience by improving aesthetic and functional design.	2026-02-07 12:30:29 +01:00
nessi	3e4e26297b	Refine HogwartsPointsCard styles for cleaner UI. Simplified and updated styling for the HogwartsPointsCard component by adjusting spacing, borders, shadows, and fonts. These refinements enhance visual consistency and improve readability across various design elements.	2026-02-07 12:27:17 +01:00
nessi	9d744c8674	Refine HogwartsPointsCard design and styling. Updated the HogwartsPointsCard component to enhance its styling. Changes include a more subtle and consistent visual appearance by refining colors, borders, shadows, padding, and grid spacing. Adjusted font sizes and shadows for better readability and aesthetics.	2026-02-07 12:24:28 +01:00
nessi	06b6544653	Enhance HogwartsPointsCard design and layout Refactored the component to improve its visual hierarchy and styling for better usability and aesthetics. Added new design elements like gold accents, updated text shadows, and a refined grid layout. Improved responsiveness and structure to align with overall application design standards.	2026-02-07 12:21:20 +01:00
nessi	86c4cf2639	Add HogwartsPointsCard component with styled design Introduced a new `HogwartsPointsCard` component to display Hogwarts points with a custom styled design. The component leverages layered backgrounds, gradients, and thoughtful typography to enhance the overall visual appeal. Replaced the placeholder card with this new component in the points section.	2026-02-07 12:18:50 +01:00
nessi	b1e5198880	Update CSS overflow properties for visibility Changed `overflow` from `hidden` to `visible` in multiple elements to ensure proper content display. This adjustment avoids clipping issues and aligns with the desired layout behavior.	2026-02-07 12:14:25 +01:00
nessi	f282ac42fb	Add playerRailInner wrapper and adjust CSS styling. Introduced a `playerRailInner` div for better structural organization and improved styling flexibility. Adjusted CSS to manage overflow and improve visual cropping while maintaining a clean radius design.	2026-02-07 12:11:14 +01:00
nessi	393cd94f4b	Update player list with avatar images and visual enhancements Replaced placeholder players with detailed profiles including names, avatars, and unique colors. Updated player icons to display images with improved styling, active state effects, and tooltips for better user experience.	2026-02-07 12:08:16 +01:00
nessi	ccb51d750a	Enhance panel styling and layout handling. Updated the panel container to use a flexible column layout with conditional "flex" or "block" display based on its state. This ensures better structure and responsiveness while maintaining current functionality.	2026-02-07 11:58:24 +01:00
nessi	a9fe71046c	Update board placeholder styling in App.jsx Adjusted the placeholder component with new styling properties, including changing opacity and adding a flex property. This enhances the basic layout for future integration with the game board and pieces.	2026-02-07 11:57:38 +01:00
nessi	a3d052d2c1	Refactor: Introduce unified PlaceholderCard variants Updated the PlaceholderCard component to support unified variants: "compact," "tile," and "panel," enabling consistent styling throughout the app. Replaced old placeholder logic with the new variant system across various UI sections for better maintainability and scalability.	2026-02-07 11:52:25 +01:00
nessi	15e5869aec	[Message] Refine layout and responsiveness in AppLayout.css Updated grid settings for better flexibility and spacing across various screen sizes. Adjusted dimensions, padding, and responsive breakpoints to enhance layout appearance and usability, especially for smaller screens. Added minor styling tweaks for improved aesthetics and consistency.	2026-02-07 11:49:27 +01:00
nessi	c06ae53b4f	Update layout and annotations for player HUD and board tools Improved clarity of component annotations and adjusted the layout styling in App.jsx and AppLayout.css. Key changes include the introduction of a middle section in the player HUD and refined descriptions for board-related elements. This enhances code readability and structuring consistency.	2026-02-07 11:47:28 +01:00
nessi	fd91bbe207	Adjust grid column widths for improved layout consistency Updated the grid column sizes across the application to ensure a better visual balance and alignment. This includes reducing the minimum and maximum widths for side panels and stacking elements vertically for better usability in the left tools section.	2026-02-07 11:43:00 +01:00
nessi	e5f8f00832	Add player rail, dice overlay, and compact card support This update introduces a player rail to the right of the board, visually representing active and inactive players, and adds a dice overlay beneath the board. Compact variants for placeholder cards were added, with corresponding adjustments to layouts and styles for better responsiveness and a cleaner interface.	2026-02-07 11:38:38 +01:00
nessi	e035a99179	Refactor layout for improved responsiveness and scroll control Updated the app layout to separate fixed and scrollable sections, enabling only the notes panel to scroll. Introduced a new CSS file for a cleaner structure and responsive behavior, ensuring a more consistent user experience across different screen sizes.	2026-02-07 11:31:55 +01:00
nessi	3d7d4c01f7	Update layout and scrolling styles for better responsiveness Adjusted grid column sizing using "clamp" for improved adaptability to various screen sizes. Minor tweaks to sticky position and maximum height calculation ensure better alignment and consistent scroll behavior.	2026-02-07 11:17:54 +01:00
nessi	cf81c25e6e	new logic, testing	2026-02-07 11:15:33 +01:00
Sascha Nesterovic	97ad77f2a4	Merge pull request 'dev' (#6 ) from dev into main Reviewed-on: #6	2026-02-07 10:12:30 +00:00
nessi	62439d2d28	Enhance loading screen with animation and splash improvements Updated the loading screen to include animated gold lines, a loader, and a spark effect. Adjusted splash visibility to ensure a minimum display time of 3 seconds and improved transitions for smoother visuals. Enhanced style and structure for better user experience during app initialization.	2026-02-06 18:52:16 +01:00
nessi	57cb9a57ef	Replace preload mechanism with splash screen The preload class was replaced by a more user-friendly splash screen design. This change ensures a smoother transition while loading assets and eliminates black background flashes. The splash overlay is automatically hidden and removed after the app is ready, providing a seamless loading experience.	2026-02-06 18:49:25 +01:00
nessi	e975d7aa25	Set up immediate theme application and manual SW updates Moved theme application logic to occur immediately on app initialization to prevent UI flash. Added a check to wait for all fonts to load before making the app visible and adjusted Service Worker behavior to require manual updates instead of auto-reloading.	2026-02-06 18:47:13 +01:00
nessi	7c4754e506	"Enhance loading experience and optimize theme application Added a fallback background and a preload lock for smoother loading transitions. Improved theme application by applying it prior to React rendering and removed theme flash. Adjusted Service Worker registration for better performance and reliability."	2026-02-06 18:44:44 +01:00
nessi	070057afb3	Set and persist theme preference in localStorage Implemented logic to store and retrieve theme preferences using localStorage for both logged-in users and guests. This ensures the selected theme is applied immediately on load, preventing theme flash issues. Adjusted initialization to apply the correct theme at app startup.	2026-02-06 18:41:45 +01:00
nessi	6434256dfb	Set dynamic theme color for PWA and Android status bar. Added logic to update the theme-color meta tag dynamically based on the active theme. This improves the visual consistency of the application, particularly for PWA and Android users. Default theme color has also been updated in the configuration.	2026-02-06 18:39:04 +01:00