Refractor 3D Dice
This commit is contained in:
@@ -13,6 +13,7 @@ import { stylesTokens } from "./styles/theme";
|
|||||||
import LoginPage from "./components/LoginPage";
|
import LoginPage from "./components/LoginPage";
|
||||||
import SheetSection from "./components/SheetSection";
|
import SheetSection from "./components/SheetSection";
|
||||||
import ChipModal from "./components/ChipModal";
|
import ChipModal from "./components/ChipModal";
|
||||||
|
import DicePanel from "./components/Dice/DicePanel";
|
||||||
|
|
||||||
import "./AppLayout.css";
|
import "./AppLayout.css";
|
||||||
|
|
||||||
@@ -541,343 +542,6 @@ export default function App() {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// ✅ 3 Würfel: 2x d6 + 1x Spezial (Häuser + Hilfkarte + Dunkles Deck)
|
|
||||||
|
|
||||||
const DicePanel = ({ onRoll }) => {
|
|
||||||
const LS_KEY = "hp_cluedo_dice_v1";
|
|
||||||
|
|
||||||
const [d1, setD1] = useState(4);
|
|
||||||
const [d2, setD2] = useState(2);
|
|
||||||
const [special, setSpecial] = useState("gryffindor");
|
|
||||||
|
|
||||||
// angles (absolute)
|
|
||||||
const [a1, setA1] = useState({ x: 0, y: 90 }); // start showing 4 (ry=90)
|
|
||||||
const [a2, setA2] = useState({ x: -90, y: 0 }); // start showing 2 (rx=-90)
|
|
||||||
const [as, setAs] = useState({ x: 0, y: 0 }); // gryffindor mapped below
|
|
||||||
|
|
||||||
const [rolling, setRolling] = useState(false);
|
|
||||||
|
|
||||||
// commit targets (avoid “result earlier than animation”)
|
|
||||||
const pendingRef = useRef(null);
|
|
||||||
const doneCountRef = useRef(0);
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
// restore last result
|
|
||||||
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);
|
|
||||||
|
|
||||||
// set angles matching restored values
|
|
||||||
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) => {
|
|
||||||
// add big spins but land exactly on base orientation modulo 360
|
|
||||||
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 };
|
|
||||||
doneCountRef.current = 0;
|
|
||||||
|
|
||||||
setRolling(true);
|
|
||||||
|
|
||||||
// start roll immediately (angles change drives the animation)
|
|
||||||
setA1((cur) => rollTo(cur, r1));
|
|
||||||
setA2((cur) => rollTo(cur, r2));
|
|
||||||
setAs((cur) => rollTo(cur, rs));
|
|
||||||
};
|
|
||||||
|
|
||||||
const onOneDone = () => {
|
|
||||||
doneCountRef.current += 1;
|
|
||||||
if (doneCountRef.current < 3) return;
|
|
||||||
|
|
||||||
const p = pendingRef.current;
|
|
||||||
if (!p) return;
|
|
||||||
|
|
||||||
setD1(p.nd1);
|
|
||||||
setD2(p.nd2);
|
|
||||||
setSpecial(p.ns);
|
|
||||||
|
|
||||||
setRolling(false);
|
|
||||||
pendingRef.current = null;
|
|
||||||
|
|
||||||
onRoll?.({ d1: p.nd1, d2: p.nd2, special: p.ns });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ pointerEvents: "auto" }}>
|
|
||||||
{/* ✅ no container background/border anymore */}
|
|
||||||
<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
|
|
||||||
value={d1}
|
|
||||||
rolling={rolling}
|
|
||||||
onClick={rollAll}
|
|
||||||
ax={a1.x}
|
|
||||||
ay={a1.y}
|
|
||||||
onDone={onOneDone}
|
|
||||||
/>
|
|
||||||
<DieD6
|
|
||||||
value={d2}
|
|
||||||
rolling={rolling}
|
|
||||||
onClick={rollAll}
|
|
||||||
ax={a2.x}
|
|
||||||
ay={a2.y}
|
|
||||||
onDone={onOneDone}
|
|
||||||
/>
|
|
||||||
<HouseDie
|
|
||||||
face={special}
|
|
||||||
rolling={rolling}
|
|
||||||
onClick={rollAll}
|
|
||||||
ax={as.x}
|
|
||||||
ay={as.y}
|
|
||||||
onDone={onOneDone}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ color: stylesTokens.textDim, fontSize: 12, opacity: 0.95 }}>
|
|
||||||
Klicken zum Rollen
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const DieShell = ({ children, rolling = false, onClick }) => {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClick}
|
|
||||||
className="die3d"
|
|
||||||
style={{
|
|
||||||
width: 64,
|
|
||||||
height: 64,
|
|
||||||
borderRadius: 18,
|
|
||||||
border: "none", // ✅ no border
|
|
||||||
background: "transparent", // ✅ no tile bg
|
|
||||||
boxShadow: "none", // ✅ no frame shadow
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/* map value->cube rotation so that value face is FRONT
|
|
||||||
Face layout:
|
|
||||||
front=1, back=6, top=2, bottom=5, right=3, left=4
|
|
||||||
*/
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const PipFace = ({ value }) => {
|
|
||||||
// pip positions: 0..2 grid
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const DieD6 = ({ value = 1, rolling = false, onClick, ax, ay, onDone }) => {
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const HouseDie = ({ face = "gryffindor", rolling = false, onClick, ax, ay, onDone }) => {
|
|
||||||
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"];
|
|
||||||
const f = faces[face] || faces.gryffindor;
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const PlayerIdentityCard = ({
|
const PlayerIdentityCard = ({
|
||||||
name = "Harry Potter",
|
name = "Harry Potter",
|
||||||
houseLabel = "Gryffindor",
|
houseLabel = "Gryffindor",
|
||||||
|
|||||||
@@ -262,6 +262,10 @@ body {
|
|||||||
/* Prevent clipping */
|
/* Prevent clipping */
|
||||||
.diceRow3d { overflow: visible; }
|
.diceRow3d { overflow: visible; }
|
||||||
|
|
||||||
|
.dieCube.snap {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* one face */
|
/* one face */
|
||||||
.dieFace {
|
.dieFace {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
147
frontend/src/components/Dice/Dice3D.jsx
Normal file
147
frontend/src/components/Dice/Dice3D.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
188
frontend/src/components/Dice/DicePanel.jsx
Normal file
188
frontend/src/components/Dice/DicePanel.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user