Refractor 3D Dice
This commit is contained in:
@@ -13,6 +13,7 @@ import { stylesTokens } from "./styles/theme";
|
||||
import LoginPage from "./components/LoginPage";
|
||||
import SheetSection from "./components/SheetSection";
|
||||
import ChipModal from "./components/ChipModal";
|
||||
import DicePanel from "./components/Dice/DicePanel";
|
||||
|
||||
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 = ({
|
||||
name = "Harry Potter",
|
||||
houseLabel = "Gryffindor",
|
||||
|
||||
@@ -262,6 +262,10 @@ body {
|
||||
/* Prevent clipping */
|
||||
.diceRow3d { overflow: visible; }
|
||||
|
||||
.dieCube.snap {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* one face */
|
||||
.dieFace {
|
||||
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