- ): Promise;
+ isReady: boolean;
+ isRolling: boolean;
+}
+
+interface DiceRollerProps {
+ id?: string;
+ className?: string;
+}
+
+export const DiceRoller = forwardRef(
+ ({ id, className }, ref) => {
+ const { mountRef, rollDice, isReady, isRolling } = useDiceRoller();
+
+ useImperativeHandle(
+ ref,
+ () => ({
+ roll: rollDice,
+ isReady,
+ isRolling,
+ }),
+ [rollDice, isReady, isRolling]
+ );
+
+ return ;
+ }
+);
+
+DiceRoller.displayName = 'DiceRoller';
+
+export default DiceRoller;
diff --git a/src/components/DiceSelector.tsx b/src/components/DiceSelector.tsx
new file mode 100644
index 0000000..adf8cbe
--- /dev/null
+++ b/src/components/DiceSelector.tsx
@@ -0,0 +1,105 @@
+import DiceD20FA6 from '@iconify-react/fa6-solid/dice-d20';
+import DiceD4Icon from '@iconify-react/mdi/dice-d4';
+import DiceD6Icon from '@iconify-react/mdi/dice-d6';
+import DiceD8Icon from '@iconify-react/mdi/dice-d8';
+import DiceD10Icon from '@iconify-react/mdi/dice-d10';
+import DiceD12Icon from '@iconify-react/mdi/dice-d12';
+import DiceD20Icon from '@iconify-react/mdi/dice-d20';
+import { RefObject, useState } from 'react';
+import { DiceRollerHandle } from './DiceRoller';
+import { div } from 'three/tsl';
+
+const diceIcons = {
+ 4: DiceD4Icon,
+ 6: DiceD6Icon,
+ 8: DiceD8Icon,
+ 10: DiceD10Icon,
+ 12: DiceD12Icon,
+ 20: DiceD20Icon
+};
+
+interface ButtonProps {
+ rollerRef: RefObject;
+}
+
+export function Button({ rollerRef }: ButtonProps) {
+ const [open, setOpen] = useState(false);
+
+ const [dice, setDice] = useState>({
+ 4: 0,
+ 6: 0,
+ 8: 0,
+ 10: 0,
+ 12: 0,
+ 20: 0
+ });
+
+ const increment = (sides: number) => {
+ setDice(prev => ({
+ ...prev,
+ [sides]: prev[sides] + 1
+ }));
+ };
+
+ const decrement = (sides: number) => {
+ setDice(prev => ({
+ ...prev,
+ [sides]: Math.max(0, prev[sides] - 1)
+ }));
+ };
+
+ function handleOpen() {
+ if (open)
+ handleRoll();
+
+ setOpen(v => !v);
+ }
+
+ async function handleRoll() {
+ if (!rollerRef || !rollerRef.current) return;
+
+ const diceToRoll = dice;
+
+ setDice({
+ 4: 0,
+ 6: 0,
+ 8: 0,
+ 10: 0,
+ 12: 0,
+ 20: 0
+ });
+
+ const res = rollerRef.current.roll(diceToRoll);
+ console.log(res);
+ }
+
+ return (
+ (null);
+ const [isReady, setIsReady] = useState(false);
+ const [isRolling, setIsRolling] = useState(false);
+ const sceneInitRef = useRef(false);
+
+ useEffect(() => {
+ if (!mountRef.current || sceneInitRef.current) return;
+ sceneInitRef.current = true;
+ initScene(mountRef.current);
+ initRenderLoop();
+
+ const timer = setTimeout(() => setIsReady(true), 300);
+
+ return () => {
+ clearTimeout(timer);
+ stopRenderLoop();
+ };
+ }, []);
+
+ const rollDice = useCallback(
+ (pool: Record): Promise => {
+ return new Promise((resolve) => {
+ const totalDice = Object.values(pool).reduce((a, b) => a + b, 0);
+ if (totalDice === 0) {
+ resolve([]);
+ return;
+ }
+
+ setIsRolling(true);
+
+ const newDice: DieInstance[] = [];
+ const W = getW();
+ const D = getD();
+ let idx = 0;
+ const order = [20, 12, 10, 8, 6, 4];
+
+ order.forEach((sides) => {
+ const count = pool[sides] || 0;
+ for (let i = 0; i < count; i++) {
+ const die = new Die(sides);
+ const side = idx % 2 === 0 ? -1 : 1;
+ const x = side * (W - 0.8);
+ const z = D - 1 - (idx % 3) * 1.1;
+ const dir = new THREE.Vector3(
+ -side * (9 + Math.random() * 4),
+ 0.5,
+ -(6 + Math.random() * 4)
+ );
+ die.throwFrom(x, z, dir);
+ die.pos.x -= side * idx * 0.15;
+ newDice.push(die);
+ idx++;
+ }
+ });
+
+ setDice(newDice, (completedDice) => {
+ const results: RollResult[] = completedDice.map((d) => ({
+ sides: d.sides,
+ value: d.value ?? 0,
+ }));
+ setIsRolling(false);
+ resolve(results);
+ });
+ });
+ },
+ []
+ );
+
+ return { mountRef, rollDice, isReady, isRolling };
+}
diff --git a/src/lib/dicePhysics.ts b/src/lib/dicePhysics.ts
new file mode 100644
index 0000000..28d78f5
--- /dev/null
+++ b/src/lib/dicePhysics.ts
@@ -0,0 +1,1031 @@
+import * as THREE from 'three';
+
+// ---------- DISSOLVE SHADER ----------
+const DISSOLVE_VERTEX = `
+ varying vec3 vPos;
+ varying vec3 vNormal;
+ void main() {
+ vPos = position;
+ vNormal = normalize(normalMatrix * normal);
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+ }
+`;
+
+const DISSOLVE_FRAGMENT = `
+ uniform float dissolveAmount;
+ uniform vec3 baseColor;
+ uniform vec3 edgeColor;
+ uniform vec3 lightDir;
+
+ varying vec3 vPos;
+ varying vec3 vNormal;
+
+ float hash(vec3 p) {
+ p = fract(p * 0.3183099 + 0.1);
+ p *= 17.0;
+ return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
+ }
+
+ float noise(vec3 p) {
+ vec3 i = floor(p);
+ vec3 f = fract(p);
+ f = f * f * (3.0 - 2.0 * f);
+ return mix(
+ mix(mix(hash(i), hash(i + vec3(1,0,0)), f.x),
+ mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),
+ mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),
+ mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y), f.z);
+ }
+
+ void main() {
+ float n = noise(vPos * 3.0);
+ if (n < dissolveAmount) discard;
+
+ float diff = max(0.0, dot(vNormal, normalize(lightDir))) * 0.7 + 0.3;
+ float edge = 1.0 - smoothstep(0.0, 0.12, n - dissolveAmount);
+ vec3 color = mix(edgeColor, baseColor * diff, edge);
+
+ gl_FragColor = vec4(color, 1.0);
+ }
+`;
+
+// ---------- CONFIGURATION ----------
+export const DIE_SCALE = 0.85;
+export const DIE_COLOR = 0xb1262b;
+export const DIE_ROUGHNESS = 0.32;
+export const DIE_METALNESS = 0.12;
+export const NUMBER_COLOR = '#f5efe2';
+export const EDGE_COLOR = 0xe8b56a;
+export const EDGE_OPACITY = 0.28;
+
+// ---------- PHYSICS PARAMETERS ----------
+const G = 22;
+const MASS = 1;
+const LIN_DAMP = 0.998;
+const ANG_DAMP = 0.995;
+const RESTITUTION = 0.35;
+const FRICTION = 0.45;
+
+// ---------- Type Definitions ----------
+export interface Plane {
+ n: THREE.Vector3;
+ d: number;
+ e: number;
+ mu: number;
+}
+
+export interface FaceData {
+ normal: THREE.Vector3;
+ value: number;
+}
+
+export interface DieData {
+ mesh: THREE.Mesh;
+ hull: THREE.Vector3[];
+ radius: number;
+ faces: FaceData[];
+ sides: number;
+ topRead: boolean;
+ vertVals?: number[];
+ hullRef?: THREE.Vector3[];
+}
+
+export interface DiePhysicsState {
+ pos: THREE.Vector3;
+ vel: THREE.Vector3;
+ angVel: THREE.Vector3;
+ quat: THREE.Quaternion;
+ still: number;
+ state: 'live' | 'snapping' | 'done';
+ value: number | null;
+ I: number;
+ snapFrom?: THREE.Quaternion;
+ snapTo?: THREE.Quaternion;
+ snapY0?: number;
+ snapY1?: number;
+ snapT?: number;
+ dissolveAmount: number;
+}
+
+export interface DieInstance extends DieData, DiePhysicsState {
+ throwFrom(x: number, z: number, dir: THREE.Vector3): void;
+ step(dt: number): void;
+ beginSnap(): void;
+ snapStep(dt: number): void;
+ sync(): void;
+ dispose(): void;
+ startDissolve(): void;
+ dissolveStep(dt: number): void;
+}
+
+// ---------- Three.js Setup ----------
+let renderer: THREE.WebGLRenderer | null = null;
+let scene: THREE.Scene | null = null;
+let camera: THREE.PerspectiveCamera | null = null;
+let W = 7.0;
+let D = 4.6;
+let audioCtx: AudioContext | null = null;
+
+const PLANES: Plane[] = [
+ { n: new THREE.Vector3(0, 1, 0), d: 0, e: RESTITUTION, mu: FRICTION },
+ { n: new THREE.Vector3(1, 0, 0), d: W, e: 0.3, mu: 0.1 },
+ { n: new THREE.Vector3(-1, 0, 0), d: W, e: 0.3, mu: 0.1 },
+ { n: new THREE.Vector3(0, 0, 1), d: D, e: 0.3, mu: 0.1 },
+ { n: new THREE.Vector3(0, 0, -1), d: D, e: 0.3, mu: 0.1 },
+];
+
+const CAM_H = 16;
+const tmpV = new THREE.Vector3();
+const wp = new THREE.Vector3();
+const rr2 = new THREE.Vector3();
+const pv = new THREE.Vector3();
+const rxn = new THREE.Vector3();
+const imp = new THREE.Vector3();
+const trq = new THREE.Vector3();
+const vt = new THREE.Vector3();
+const dq = new THREE.Quaternion();
+
+// ---------- Scene Initialization ----------
+export function initScene(mount: HTMLDivElement): {
+ renderer: THREE.WebGLRenderer;
+ scene: THREE.Scene;
+ camera: THREE.PerspectiveCamera;
+} {
+ renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ renderer.shadowMap.enabled = true;
+ renderer.shadowMap.type = THREE.PCFShadowMap;
+ mount.appendChild(renderer.domElement);
+
+ scene = new THREE.Scene();
+
+ camera = new THREE.PerspectiveCamera(
+ 42,
+ window.innerWidth / window.innerHeight,
+ 0.1,
+ 100
+ );
+ frameCamera();
+
+ // Lighting
+ scene.add(new THREE.HemisphereLight(0x8a93a8, 0x20160f, 0.65));
+ const sun = new THREE.DirectionalLight(0xfff2dc, 1.15);
+ sun.position.set(6, 14, 5);
+ sun.castShadow = true;
+ sun.shadow.mapSize.width = 2048;
+ sun.shadow.mapSize.height = 2048;
+ sun.shadow.camera.near = 0.5;
+ sun.shadow.camera.far = 30;
+ sun.shadow.camera.left = -12;
+ sun.shadow.camera.right = 12;
+ sun.shadow.camera.top = 12;
+ sun.shadow.camera.bottom = -12;
+ sun.shadow.bias = -0.0008;
+ sun.shadow.normalBias = 0.02;
+ scene.add(sun);
+
+ const fillLight = new THREE.DirectionalLight(0x8a9aaa, 0.3);
+ fillLight.position.set(-4, 8, -3);
+ scene.add(fillLight);
+
+ window.addEventListener('resize', () => {
+ if (renderer) renderer.setSize(window.innerWidth, window.innerHeight);
+ frameCamera();
+ });
+
+ return { renderer, scene, camera };
+}
+
+function frameCamera(): void {
+ if (!camera) return;
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.position.set(0, CAM_H, 0.01);
+ camera.lookAt(0, 0, 0);
+ camera.updateProjectionMatrix();
+ const halfZ = CAM_H * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2));
+ const halfX = halfZ * camera.aspect;
+ W = Math.max(2.4, halfX - 1.3);
+ D = Math.max(2.4, halfZ - 1.3);
+ PLANES[1].d = W;
+ PLANES[2].d = W;
+ PLANES[3].d = D;
+ PLANES[4].d = D;
+}
+
+// ---------- Materials ----------
+let dieMat: THREE.MeshStandardMaterial | null = null;
+let edgeMat: THREE.LineBasicMaterial | null = null;
+let maxAniso = 4;
+
+function getDieMat(): THREE.MeshStandardMaterial {
+ if (!dieMat) {
+ dieMat = new THREE.MeshStandardMaterial({
+ color: DIE_COLOR,
+ roughness: DIE_ROUGHNESS,
+ metalness: DIE_METALNESS,
+ flatShading: true,
+ });
+ }
+ return dieMat;
+}
+
+function getEdgeMat(): THREE.LineBasicMaterial {
+ if (!edgeMat) {
+ edgeMat = new THREE.LineBasicMaterial({
+ color: EDGE_COLOR,
+ transparent: true,
+ opacity: EDGE_OPACITY,
+ });
+ }
+ return edgeMat;
+}
+
+function getMaxAniso(): number {
+ if (renderer) {
+ maxAniso = renderer.capabilities.getMaxAnisotropy();
+ }
+ return maxAniso;
+}
+
+// ---------- Texture Helpers ----------
+function crispTexture(c: HTMLCanvasElement): THREE.CanvasTexture {
+ const t = new THREE.CanvasTexture(c);
+ t.anisotropy = getMaxAniso();
+ return t;
+}
+
+function numberTexture(text: string, underline: boolean): THREE.CanvasTexture {
+ const c = document.createElement('canvas');
+ c.width = 256;
+ c.height = 256;
+ const g = c.getContext('2d');
+ if (!g) throw new Error('Cannot get 2D context');
+ g.clearRect(0, 0, 256, 256);
+ g.fillStyle = NUMBER_COLOR;
+ g.font = '700 148px Georgia, serif';
+ g.textAlign = 'center';
+ g.textBaseline = 'middle';
+ g.shadowColor = 'rgba(0,0,0,.55)';
+ g.shadowBlur = 9;
+ g.fillText(text, 128, 120);
+ if (underline) {
+ g.shadowBlur = 0;
+ const w = g.measureText(text).width;
+ g.fillRect(128 - w / 2, 204, w, 13);
+ }
+ return crispTexture(c);
+}
+
+// ---------- Geometry Helpers ----------
+interface FaceGroup {
+ normal: THREE.Vector3;
+ centroid: THREE.Vector3;
+ corners: THREE.Vector3[];
+}
+
+function groupFaces(geo: THREE.BufferGeometry): FaceGroup[] {
+ const pos = geo.attributes.position;
+ if (!pos) return [];
+ const groups: { normal: THREE.Vector3; verts: THREE.Vector3[] }[] = [];
+ const a = new THREE.Vector3();
+ const b = new THREE.Vector3();
+ const c = new THREE.Vector3();
+ const ab = new THREE.Vector3();
+ const ac = new THREE.Vector3();
+ const n = new THREE.Vector3();
+
+ for (let i = 0; i < pos.count; i += 3) {
+ a.fromBufferAttribute(pos, i);
+ b.fromBufferAttribute(pos, i + 1);
+ c.fromBufferAttribute(pos, i + 2);
+ ab.subVectors(b, a);
+ ac.subVectors(c, a);
+ n.crossVectors(ab, ac).normalize();
+ let gr = groups.find((g) => g.normal.dot(n) > 0.999);
+ if (!gr) {
+ gr = { normal: n.clone(), verts: [] };
+ groups.push(gr);
+ }
+ gr.verts.push(a.clone(), b.clone(), c.clone());
+ }
+
+ return groups.map((gr) => {
+ const seen = new Map();
+ gr.verts.forEach((v) => {
+ const key = v.x.toFixed(3) + ',' + v.y.toFixed(3) + ',' + v.z.toFixed(3);
+ seen.set(key, v);
+ });
+ const uniq = Array.from(seen.values());
+ const centroid = uniq
+ .reduce((s, v) => s.add(v), new THREE.Vector3())
+ .multiplyScalar(1 / uniq.length);
+ return { normal: gr.normal, centroid, corners: uniq };
+ });
+}
+
+function d10Geometry(r: number): THREE.BufferGeometry {
+ const ring: THREE.Vector3[] = [];
+ const h = 0.1056 * r;
+ const rr = r;
+ for (let i = 0; i < 10; i++) {
+ const t = (i * Math.PI * 2) / 10;
+ ring.push(new THREE.Vector3(Math.cos(t) * rr, i % 2 ? h : -h, Math.sin(t) * rr));
+ }
+ const top = new THREE.Vector3(0, r, 0);
+ const bot = new THREE.Vector3(0, -r, 0);
+ const arr: number[] = [];
+ const push = (p: THREE.Vector3, q: THREE.Vector3, s: THREE.Vector3) => {
+ const n = new THREE.Vector3().crossVectors(
+ new THREE.Vector3().subVectors(q, p),
+ new THREE.Vector3().subVectors(s, p)
+ );
+ const ctr = new THREE.Vector3().addVectors(p, q).add(s);
+ if (n.dot(ctr) < 0) {
+ const t2 = q;
+ q = s;
+ s = t2;
+ }
+ arr.push(p.x, p.y, p.z, q.x, q.y, q.z, s.x, s.y, s.z);
+ };
+ for (let i = 0; i < 10; i++) {
+ const v0 = ring[(i + 9) % 10];
+ const v1 = ring[i];
+ const v2 = ring[(i + 1) % 10];
+ const pole = i % 2 ? bot : top;
+ push(pole, v0, v1);
+ push(pole, v1, v2);
+ }
+ const g = new THREE.BufferGeometry();
+ g.setAttribute('position', new THREE.Float32BufferAttribute(arr, 3));
+ g.computeVertexNormals();
+ return g;
+}
+
+interface DieDef {
+ geo: () => THREE.BufferGeometry;
+ label: number;
+}
+
+const DIE_DEFS: Record = {
+ 4: { geo: () => new THREE.TetrahedronGeometry(1.12 * DIE_SCALE), label: 0.42 * DIE_SCALE },
+ 6: {
+ geo: () => new THREE.BoxGeometry(1.22 * DIE_SCALE, 1.22 * DIE_SCALE, 1.22 * DIE_SCALE),
+ label: 0.58 * DIE_SCALE,
+ },
+ 8: { geo: () => new THREE.OctahedronGeometry(1.08 * DIE_SCALE), label: 0.42 * DIE_SCALE },
+ 10: { geo: () => d10Geometry(1.05 * DIE_SCALE), label: 0.42 * DIE_SCALE },
+ 12: { geo: () => new THREE.DodecahedronGeometry(1.02 * DIE_SCALE), label: 0.44 * DIE_SCALE },
+ 20: { geo: () => new THREE.IcosahedronGeometry(1.05 * DIE_SCALE), label: 0.36 * DIE_SCALE },
+};
+
+function makeDie(sides: number): DieData {
+ const def = DIE_DEFS[sides];
+ if (!def) throw new Error(`Unknown die type: d${sides}`);
+
+ const geo = def.geo();
+ const nonIndexedGeo = geo.index ? geo.toNonIndexed() : geo;
+ nonIndexedGeo.computeVertexNormals();
+
+ const mesh = new THREE.Mesh(nonIndexedGeo, getDieMat());
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+ mesh.add(new THREE.LineSegments(new THREE.EdgesGeometry(nonIndexedGeo, 10), getEdgeMat()));
+
+ const faces = groupFaces(nonIndexedGeo);
+ const labelSize = def.label;
+
+ const seen = new Map();
+ faces.forEach((f) =>
+ f.corners.forEach((v) => {
+ const key = v.x.toFixed(3) + ',' + v.y.toFixed(3) + ',' + v.z.toFixed(3);
+ seen.set(key, v.clone());
+ })
+ );
+ const hull = Array.from(seen.values());
+ const radius = Math.max(...hull.map((v) => v.length()));
+
+ const faceData: FaceData[] = [];
+ const m = new THREE.Matrix4();
+ const u = new THREE.Vector3();
+ const v = new THREE.Vector3();
+
+ if (sides === 4) {
+ const vertVals = hull.map((_, i) => i + 1);
+ faces.forEach((f) => {
+ const c = document.createElement('canvas');
+ c.width = 512;
+ c.height = 512;
+ const g = c.getContext('2d');
+ if (!g) return;
+ g.fillStyle = NUMBER_COLOR;
+ g.font = '700 128px Georgia, serif';
+ g.textAlign = 'center';
+ g.textBaseline = 'middle';
+ g.shadowColor = 'rgba(0,0,0,.55)';
+ g.shadowBlur = 8;
+ u.copy(f.corners[0]).sub(f.centroid).normalize();
+ v.crossVectors(f.normal, u);
+ f.corners.forEach((corner) => {
+ const idx = hull.findIndex((hv) => hv.distanceToSquared(corner) < 1e-5);
+ const o = new THREE.Vector3().subVectors(corner, f.centroid);
+ const ox = o.dot(u);
+ const oy = o.dot(v);
+ const px = 256 + ox * 132;
+ const py = 256 - oy * 132;
+ g.save();
+ g.translate(px, py);
+ g.rotate(Math.atan2(ox, oy));
+ g.fillText(String(vertVals[idx]), 0, 0);
+ g.restore();
+ });
+ const plane = new THREE.Mesh(
+ new THREE.PlaneGeometry(1.3 * DIE_SCALE, 1.3 * DIE_SCALE),
+ new THREE.MeshBasicMaterial({ map: crispTexture(c), transparent: true })
+ );
+ m.makeBasis(u.clone(), v.clone(), f.normal);
+ plane.quaternion.setFromRotationMatrix(m);
+ plane.position.copy(f.centroid).addScaledVector(f.normal, 0.012 * DIE_SCALE);
+ mesh.add(plane);
+ });
+ return {
+ mesh,
+ hull,
+ radius,
+ faces: faceData,
+ sides,
+ vertVals,
+ hullRef: hull,
+ topRead: true,
+ };
+ }
+
+ faces.forEach((f, i) => {
+ const val = i + 1;
+ const tex = numberTexture(String(val), sides >= 10 && (val === 6 || val === 9));
+ const plane = new THREE.Mesh(
+ new THREE.PlaneGeometry(labelSize * 2, labelSize * 2),
+ new THREE.MeshBasicMaterial({ map: tex, transparent: true })
+ );
+ v.set(0, f.centroid.y >= 0 ? 1 : -1, 0);
+ v.addScaledVector(f.normal, -v.dot(f.normal));
+ if (v.lengthSq() < 0.01) v.set(0, 0, 1).addScaledVector(f.normal, -f.normal.z);
+ v.normalize();
+ u.crossVectors(v, f.normal);
+ m.makeBasis(u.clone(), v.clone(), f.normal);
+ plane.quaternion.setFromRotationMatrix(m);
+ let anchor = f.centroid;
+ if (sides === 10) {
+ let pi = 0;
+ let best = 0;
+ f.corners.forEach((cnr, idx) => {
+ if (Math.abs(cnr.y) > best) {
+ best = Math.abs(cnr.y);
+ pi = idx;
+ }
+ });
+ const pole = f.corners[pi];
+ let far: THREE.Vector3 | null = null;
+ let fd = 0;
+ f.corners.forEach((cnr, idx) => {
+ if (idx === pi) return;
+ const d2 = cnr.distanceToSquared(pole);
+ if (d2 > fd) {
+ fd = d2;
+ far = cnr;
+ }
+ });
+ if (far) {
+ anchor = pole.clone().lerp(far, 0.67);
+ }
+ }
+ plane.position.copy(anchor).addScaledVector(f.normal, 0.012 * DIE_SCALE);
+ mesh.add(plane);
+ faceData.push({ normal: f.normal.clone(), value: val });
+ });
+
+ return { mesh, hull, radius, faces: faceData, sides, topRead: false };
+}
+
+// ---------- Die Class ----------
+export class Die implements DieInstance {
+ mesh: THREE.Mesh;
+ hull: THREE.Vector3[];
+ radius: number;
+ faces: FaceData[];
+ sides: number;
+ topRead: boolean;
+ vertVals?: number[];
+ hullRef?: THREE.Vector3[];
+ pos: THREE.Vector3;
+ vel: THREE.Vector3;
+ angVel: THREE.Vector3;
+ quat: THREE.Quaternion;
+ still: number;
+ state: 'live' | 'snapping' | 'done';
+ value: number | null;
+ I: number;
+ snapFrom?: THREE.Quaternion;
+ snapTo?: THREE.Quaternion;
+ snapY0?: number;
+ snapY1?: number;
+ snapT?: number;
+ dissolveAmount: number = -1;
+ private frameCount: number = 0;
+ private _dissolveMat?: THREE.ShaderMaterial;
+
+ constructor(sides: number) {
+ this.mesh = new THREE.Mesh();
+ this.hull = [];
+ this.radius = 0;
+ this.faces = [];
+ this.sides = sides;
+ this.topRead = false;
+ this.pos = new THREE.Vector3();
+ this.vel = new THREE.Vector3();
+ this.angVel = new THREE.Vector3();
+ this.quat = new THREE.Quaternion();
+ this.still = -10; // Start negative so it takes time to settle
+ this.state = 'live';
+ this.value = null;
+ this.I = 0;
+
+ const data = makeDie(sides);
+ this.mesh = data.mesh;
+ this.hull = data.hull;
+ this.radius = data.radius;
+ this.faces = data.faces;
+ this.sides = data.sides;
+ this.topRead = data.topRead;
+ if (data.vertVals) this.vertVals = data.vertVals;
+ if (data.hullRef) this.hullRef = data.hullRef;
+ this.I = 0.4 * MASS * this.radius * this.radius;
+ if (scene) scene.add(this.mesh);
+ }
+
+ throwFrom(x: number, z: number, dir: THREE.Vector3): void {
+ this.pos.set(x, 2.5 + Math.random() * 1.0, z);
+ this.vel.copy(dir.clone().multiplyScalar(1.2)); // More initial velocity
+ this.quat.setFromEuler(
+ new THREE.Euler(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2)
+ );
+ this.angVel.set(
+ (Math.random() - 0.5) * 20, // More spin
+ (Math.random() - 0.5) * 15,
+ (Math.random() - 0.5) * 20
+ );
+ this.still = -10; // Reset to negative
+ this.state = 'live';
+ this.value = null;
+ this.frameCount = 0;
+ }
+
+ step(dt: number): void {
+ this.frameCount++;
+ if (this.state !== 'live' && this.state !== 'snapping') return;
+
+ if (this.state === 'live') {
+ this.vel.y -= G * dt;
+ this.vel.multiplyScalar(LIN_DAMP);
+ this.angVel.multiplyScalar(ANG_DAMP);
+ this.pos.addScaledVector(this.vel, dt);
+
+ const wl = this.angVel.length();
+ if (wl > 1e-6) {
+ dq.setFromAxisAngle(tmpV.copy(this.angVel).multiplyScalar(1 / wl), wl * dt);
+ this.quat.premultiply(dq).normalize();
+ }
+
+ let contact = false;
+ for (const pl of PLANES) {
+ let deepest = 0;
+ for (const vert of this.hull) {
+ wp.copy(vert).applyQuaternion(this.quat).add(this.pos);
+ const dist = wp.dot(pl.n) + pl.d;
+ if (dist < 0) {
+ contact = true;
+ rr2.copy(wp).sub(this.pos);
+ pv.copy(this.angVel).cross(rr2).add(this.vel);
+ const vn = pv.dot(pl.n);
+ if (vn < 0) {
+ rxn.copy(rr2).cross(pl.n);
+ const denom = 1 / MASS + rxn.lengthSq() / this.I;
+ const j = -(1 + pl.e) * vn / denom;
+ this.vel.addScaledVector(pl.n, j / MASS);
+ imp.copy(pl.n).multiplyScalar(j);
+ trq.copy(rr2).cross(imp);
+ this.angVel.addScaledVector(trq, 1 / this.I);
+ vt.copy(pv).addScaledVector(pl.n, -vn);
+ const vtl = vt.length();
+ if (vtl > 1e-4) {
+ const jt = Math.min(pl.mu * j, vtl / (1 / MASS + 1 / this.I));
+ vt.multiplyScalar(-jt / vtl);
+ this.vel.addScaledVector(vt, 1 / MASS);
+ trq.copy(rr2).cross(vt);
+ this.angVel.addScaledVector(trq, 1 / this.I);
+ }
+ if (pl.n.y > 0.5 && j > 0.8) clack(j);
+ }
+ if (dist < deepest) deepest = dist;
+ }
+ }
+ if (deepest < 0) this.pos.addScaledVector(pl.n, -deepest * 0.9);
+ }
+
+ if (contact && this.vel.lengthSq() < 2) {
+ this.vel.multiplyScalar(0.98);
+ this.angVel.multiplyScalar(0.98);
+ }
+
+ // Only increment still counter if we've been moving for a while
+ if (contact && this.frameCount > 5 && this.vel.length() < 0.15 && this.angVel.length() < 0.2) {
+ this.still++;
+ } else if (this.vel.length() > 0.1 || this.angVel.length() > 0.1) {
+ // If moving, reset still counter
+ this.still = 0;
+ }
+
+ if (this.still > 15) {
+ this.beginSnap();
+ }
+ } else if (this.state === 'snapping') {
+ this.snapStep(dt);
+ }
+ }
+
+ beginSnap(): void {
+ this.state = 'snapping';
+ let corrAxis: THREE.Vector3;
+ let corrAngle: number;
+
+ if (this.topRead && this.hullRef && this.vertVals) {
+ let best = -1e9;
+ let bi = 0;
+ this.hullRef.forEach((v, i) => {
+ const y = tmpV.copy(v).applyQuaternion(this.quat).y;
+ if (y > best) {
+ best = y;
+ bi = i;
+ }
+ });
+ this.value = this.vertVals[bi];
+ const dirW = tmpV.copy(this.hullRef[bi]).applyQuaternion(this.quat).normalize();
+ corrAxis = new THREE.Vector3().crossVectors(dirW, new THREE.Vector3(0, 1, 0));
+ corrAngle = Math.acos(THREE.MathUtils.clamp(dirW.y, -1, 1));
+ } else {
+ let best = -1e9;
+ let bf: FaceData | null = null;
+ for (const f of this.faces) {
+ const y = tmpV.copy(f.normal).applyQuaternion(this.quat).y;
+ if (y > best) {
+ best = y;
+ bf = f;
+ }
+ }
+ if (!bf) return;
+ this.value = bf.value;
+ const nW = tmpV.copy(bf.normal).applyQuaternion(this.quat).normalize();
+ corrAxis = new THREE.Vector3().crossVectors(nW, new THREE.Vector3(0, 1, 0));
+ corrAngle = Math.acos(THREE.MathUtils.clamp(nW.y, -1, 1));
+ }
+
+ const qc = new THREE.Quaternion();
+ if (corrAxis.lengthSq() > 1e-10) {
+ qc.setFromAxisAngle(corrAxis.normalize(), corrAngle);
+ }
+ this.snapFrom = this.quat.clone();
+ this.snapTo = qc.multiply(this.quat).normalize();
+
+ let minY = 1e9;
+ for (const v of this.hull) {
+ minY = Math.min(minY, tmpV.copy(v).applyQuaternion(this.snapTo).y);
+ }
+ this.snapY0 = this.pos.y;
+ this.snapY1 = -minY + 0.001;
+ this.snapT = 0;
+ }
+
+ snapStep(dt: number): void {
+ if (this.state !== 'snapping') return;
+ if (this.snapT === undefined) this.snapT = 0;
+ this.snapT = Math.min(1, this.snapT + dt / 0.3);
+ const k = 1 - Math.pow(1 - this.snapT, 3);
+ if (this.snapFrom && this.snapTo) {
+ this.quat.copy(this.snapFrom).slerp(this.snapTo, k);
+ }
+ if (this.snapY0 !== undefined && this.snapY1 !== undefined) {
+ this.pos.y = this.snapY0 + (this.snapY1 - this.snapY0) * k;
+ }
+ if (this.snapT >= 1) {
+ this.state = 'done';
+ }
+ }
+
+ sync(): void {
+ this.mesh.position.copy(this.pos);
+ this.mesh.quaternion.copy(this.quat);
+ }
+
+ startDissolve(): void {
+ this.dissolveAmount = 0;
+
+ const lightDir = new THREE.Vector3(6, 14, 5).normalize();
+ this._dissolveMat = new THREE.ShaderMaterial({
+ uniforms: {
+ dissolveAmount: { value: 0 },
+ baseColor: { value: new THREE.Color(DIE_COLOR) },
+ edgeColor: { value: new THREE.Color(EDGE_COLOR) },
+ lightDir: { value: lightDir },
+ },
+ vertexShader: DISSOLVE_VERTEX,
+ fragmentShader: DISSOLVE_FRAGMENT,
+ });
+
+ this.mesh.material = this._dissolveMat;
+
+ this.mesh.children.forEach((child) => {
+ if (child instanceof THREE.LineSegments) {
+ child.material = (child.material as THREE.Material).clone();
+ }
+ });
+ }
+
+ dissolveStep(dt: number): void {
+ if (this.dissolveAmount < 0) return;
+ this.dissolveAmount += dt / 0.8;
+ if (this.dissolveAmount > 1) this.dissolveAmount = 1;
+
+ if (this._dissolveMat) {
+ this._dissolveMat.uniforms.dissolveAmount.value = this.dissolveAmount;
+ }
+
+ this.mesh.children.forEach((child) => {
+ if (child instanceof THREE.LineSegments) {
+ child.material.opacity = (1 - this.dissolveAmount) * EDGE_OPACITY;
+ }
+ });
+ }
+
+ dispose(): void {
+ if (scene) scene.remove(this.mesh);
+ this._dissolveMat?.dispose();
+ }
+}
+
+// ---------- Collision ----------
+export function collideDice(list: DieInstance[]): void {
+ for (let i = 0; i < list.length; i++) {
+ for (let k = i + 1; k < list.length; k++) {
+ const A = list[i];
+ const B = list[k];
+ if ((A.state !== 'live' && A.state !== 'snapping') ||
+ (B.state !== 'live' && B.state !== 'snapping')) continue;
+ const rA = A.radius * 0.86;
+ const rB = B.radius * 0.86;
+ tmpV.copy(B.pos).sub(A.pos);
+ const d = tmpV.length();
+ const min = rA + rB;
+ if (d < min && d > 1e-5) {
+ const n = tmpV.multiplyScalar(1 / d);
+ const push = (min - d) / 2;
+ A.pos.addScaledVector(n, -push);
+ B.pos.addScaledVector(n, push);
+ const rel = pv.copy(B.vel).sub(A.vel).dot(n);
+ if (rel < 0) {
+ const j = -(1 + 0.2) * rel / 2;
+ A.vel.addScaledVector(n, -j);
+ B.vel.addScaledVector(n, j);
+ A.angVel.x += (Math.random() - 0.5) * 3;
+ B.angVel.z += (Math.random() - 0.5) * 3;
+ if (-rel > 2) clack(-rel * 0.6);
+ A.still = 0;
+ B.still = 0;
+ if (A.state === 'snapping') A.state = 'live';
+ if (B.state === 'snapping') B.state = 'live';
+ }
+ }
+ }
+ }
+}
+
+// ---------- Sound ----------
+function clack(strength: number): void {
+ if (!audioCtx) {
+ try {
+ audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
+ } catch (_e) {
+ return;
+ }
+ }
+ if (!audioCtx) return;
+ const t = audioCtx.currentTime;
+ const o = audioCtx.createOscillator();
+ const g2 = audioCtx.createGain();
+ o.type = 'triangle';
+ o.frequency.setValueAtTime(190 + Math.random() * 160, t);
+ o.frequency.exponentialRampToValueAtTime(70, t + 0.06);
+ const vol = Math.min(0.22, strength * 0.02);
+ g2.gain.setValueAtTime(vol, t);
+ g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.07);
+ o.connect(g2);
+ g2.connect(audioCtx.destination);
+ o.start(t);
+ o.stop(t + 0.08);
+}
+
+// ---------- Render Loop ----------
+let animationFrameId: number | null = null;
+let allDice: DieInstance[] = [];
+let onCompleteCallback: ((completedDice: DieInstance[]) => void) | null = null;
+let loopInitialized = false;
+let isWarmedUp = false;
+let warmupFrames = 0;
+const WARMUP_FRAMES = 3; // Reduced warmup frames
+let hasCalledCallback = false;
+let pendingDice: DieInstance[] = [];
+let pendingCallback: ((completedDice: DieInstance[]) => void) | null = null;
+let frameCount = 0;
+
+export function initRenderLoop(): void {
+ if (loopInitialized) return;
+ loopInitialized = true;
+ console.log('Initializing render loop...');
+
+ const SUB = 6;
+ const FIXED_DT = 1 / 60;
+ let accumulator = 0;
+ let lastTime = performance.now();
+
+ function loop(currentTime: number): void {
+ animationFrameId = requestAnimationFrame(loop);
+ frameCount++;
+
+ const deltaTime = Math.min(0.05, (currentTime - lastTime) / 1000);
+ lastTime = currentTime;
+
+ // Warm-up: run physics with empty dice to initialize the engine
+ if (!isWarmedUp) {
+ warmupFrames++;
+ if (warmupFrames < WARMUP_FRAMES) {
+ if (renderer && scene && camera) {
+ renderer.render(scene, camera);
+ }
+ return;
+ } else {
+ isWarmedUp = true;
+ accumulator = 0;
+ console.log('Physics engine warmed up after', warmupFrames, 'frames');
+ // Apply any pending dice now that we're warmed up
+ if (pendingDice.length > 0) {
+ console.log('Applying pending dice after warmup:', pendingDice.length);
+ // Make sure dice are properly initialized
+ pendingDice.forEach(d => {
+ // Ensure the die is in live state with velocity
+ if (d.state === 'live') {
+ // Give a small initial kick to ensure physics starts
+ d.vel.y += 0.1;
+ }
+ });
+ allDice = pendingDice;
+ onCompleteCallback = pendingCallback;
+ pendingDice = [];
+ pendingCallback = null;
+ hasCalledCallback = false;
+ }
+ }
+ }
+
+ const diceToUpdate = allDice;
+
+ // Only accumulate time when there are dice to simulate, to prevent
+ // a huge time buildup during idle creating a physics burst on first roll
+ if (diceToUpdate.length > 0 || !isWarmedUp) {
+ accumulator += deltaTime;
+ }
+
+ if (diceToUpdate.length > 0) {
+ // Process physics
+ let steps = 0;
+ while (accumulator >= FIXED_DT && steps < 10) {
+ for (let s = 0; s < SUB; s++) {
+ const subDt = FIXED_DT / SUB;
+ diceToUpdate.forEach((d) => {
+ if (d.state === 'live' || d.state === 'snapping') {
+ d.step(subDt);
+ }
+ });
+ collideDice(diceToUpdate);
+ }
+ accumulator -= FIXED_DT;
+ steps++;
+ }
+
+ // Visual sync
+ diceToUpdate.forEach((d) => d.sync());
+
+ // Check if all dice are done - only call callback once
+ if (diceToUpdate.every((d) => d.state === 'done')) {
+ if (onCompleteCallback && !hasCalledCallback) {
+ hasCalledCallback = true;
+ console.log('All dice done, calling callback');
+ const callback = onCompleteCallback;
+ onCompleteCallback = null;
+ callback(diceToUpdate);
+ // Start dissolving all dice after score is given
+ diceToUpdate.forEach((d) => d.startDissolve());
+ }
+ } else {
+ // Reset callback flag if dice are still rolling
+ hasCalledCallback = false;
+ }
+ }
+
+ // Process dissolve animation
+ if (diceToUpdate.length > 0) {
+ let anyDissolving = false;
+ diceToUpdate.forEach((d) => {
+ if (d.dissolveAmount >= 0 && d.dissolveAmount < 1) {
+ d.dissolveStep(deltaTime);
+ anyDissolving = true;
+ }
+ });
+ // Clean up fully dissolved dice
+ if (!anyDissolving && diceToUpdate.every((d) => d.dissolveAmount === 1)) {
+ diceToUpdate.forEach((d) => d.dispose());
+ allDice = [];
+ }
+ }
+
+ if (renderer && scene && camera) {
+ renderer.render(scene, camera);
+ }
+ }
+
+ lastTime = performance.now();
+ requestAnimationFrame(loop);
+}
+
+export function setDice(dice: DieInstance[], onComplete?: (completedDice: DieInstance[]) => void): void {
+ console.log('Setting new dice, count:', dice.length);
+
+ // Clean up old dice
+ allDice.forEach(d => d.dispose());
+ allDice = [];
+ onCompleteCallback = null;
+ hasCalledCallback = false;
+
+ // If we're not warmed up yet, store the dice for later
+ if (!isWarmedUp) {
+ console.log('Engine not warmed up yet, storing dice for later');
+ pendingDice = dice;
+ pendingCallback = onComplete || null;
+ return;
+ }
+
+ // Otherwise, set them immediately
+ // Make sure dice are in a proper state
+ dice.forEach(d => {
+ if (d.state === 'live') {
+ // Ensure they have some initial energy
+ d.vel.y += 0.5;
+ }
+ });
+ allDice = dice;
+ onCompleteCallback = onComplete || null;
+}
+
+export function stopRenderLoop(): void {
+ if (animationFrameId) {
+ cancelAnimationFrame(animationFrameId);
+ animationFrameId = null;
+ }
+ loopInitialized = false;
+ isWarmedUp = false;
+ warmupFrames = 0;
+ hasCalledCallback = false;
+ onCompleteCallback = null;
+ pendingDice = [];
+ pendingCallback = null;
+ frameCount = 0;
+}
+
+// ---------- Getters ----------
+export function getScene(): THREE.Scene | null {
+ return scene;
+}
+
+export function getRenderer(): THREE.WebGLRenderer | null {
+ return renderer;
+}
+
+export function getW(): number {
+ return W;
+}
+
+export function getD(): number {
+ return D;
+}
+
+export function getPlanes(): Plane[] {
+ return PLANES;
+}
\ No newline at end of file
diff --git a/src/lib/dndHelpers.ts b/src/lib/dndHelpers.ts
new file mode 100644
index 0000000..ae06c10
--- /dev/null
+++ b/src/lib/dndHelpers.ts
@@ -0,0 +1,200 @@
+import { AttackResult, Dice, ExpandedDice } from "@/types/core";
+import { Ability, Armor, Character, Class, Weapon } from "@/types/content";
+
+/**
+ * This file assumes the
+ * 5th Edition (2014)
+ * Ruleset
+ */
+
+/**
+ * Swapping rulesets invovles rewriting most of these functions.
+ */
+
+
+export function getAbilityModifier(score: number): number {
+ return Math.floor((score - 10) / 2);
+};
+
+export function getProficiencyBonus(level: number): number {
+ return Math.floor((level - 1) / 4) + 2;
+}
+
+export function calculateAC(character: Character, armor?: Armor): number {
+ const dex =
+ getAbilityModifier(
+ character.abilities.dexterity
+ );
+
+ if (!armor) {
+ return 10 + dex;
+ }
+
+ let ac = armor.armorClass;
+
+ if (armor.dexterityBonus === "full") {
+ ac += dex;
+ }
+
+ if (armor.dexterityBonus === "limited") {
+ ac += Math.min(
+ dex,
+ armor.maxDexterity ?? 2
+ );
+ }
+
+ return ac;
+}
+
+export function getAvailableAbilities(
+ weapon: Weapon
+): Ability[] {
+ if (
+ weapon.ability.options.some(
+ option => option.requirement !== undefined
+ )
+ ) {
+ console.warn(
+ "Weapon ability requirements are not implemented; requirements will be ignored."
+ );
+ }
+
+ const abilities = [
+ weapon.ability.default,
+ ...weapon.ability.options.map(opt => opt.ability)
+ ];
+
+ return [...new Set(abilities)];
+}
+
+/**
+ * Automatically selects the highest available ability modifier.
+ * If multiple abilities tie, the first defined ability is used.
+ * This does not affect mechanics, only displayed attribution.
+ */
+export function resolveAttackAbility(
+ weapon: Weapon,
+ character: Character,
+ preferred?: Ability
+): Ability {
+ const available =
+ getAvailableAbilities(
+ weapon
+ );
+
+ if (
+ preferred &&
+ available.includes(preferred)
+ ) {
+ return preferred;
+ }
+
+ return available.reduce(
+ (best, current) => {
+ const bestMod =
+ getAbilityModifier(
+ character.abilities[best]
+ );
+
+ const currentMod =
+ getAbilityModifier(
+ character.abilities[current]
+ )
+
+ return currentMod > bestMod
+ ? current
+ : best;
+ }
+ )
+}
+
+export function getDamageDice(
+ weapon: Weapon
+): Dice {
+ return weapon.damage.dice;
+}
+
+export function compressDice(expandedDice: ExpandedDice): Dice {
+ return {
+ [expandedDice.sides]:
+ expandedDice.count
+ }
+}
+
+export function expandDice(dice: Dice): ExpandedDice[] {
+ return Object.entries(dice)
+ .map(([sides, count]) => {
+ return {
+ sides: Number(sides),
+ count
+ };
+ });
+}
+
+export function getCharacterLevel(
+ character: Character
+): number {
+ return character.classes.reduce(
+ (total, current) =>
+ total + current.level,
+ 0
+ );
+}
+
+export function calculateAttack(
+ character: Character,
+ weapon: Weapon,
+ prefereredAbility?: Ability
+): AttackResult {
+ const ability =
+ resolveAttackAbility(
+ weapon,
+ character,
+ prefereredAbility
+ );
+
+ const modifier = getAbilityModifier(
+ character.abilities[ability]
+ );
+
+ return {
+ ability,
+ attackBonus:
+ modifier +
+ getProficiencyBonus(getCharacterLevel(character)),
+ damage: {
+ dice: weapon.damage.dice,
+ modifier,
+ type: weapon.damage.type
+ }
+ }
+}
+
+export function calculateSpellAttackBonus(
+ character: Character,
+ ability: Ability
+): number {
+ return (
+ getAbilityModifier(
+ character.abilities[ability]
+ ) +
+ getProficiencyBonus(
+ getCharacterLevel(character)
+ )
+ );
+}
+
+export function calculateSpellSaveDC(
+ character: Character,
+ ability: Ability
+): number {
+ return (
+ 8 +
+ getAbilityModifier(
+ character.abilities[ability]
+ ) +
+ getProficiencyBonus(
+ getCharacterLevel(character)
+ )
+ );
+}
\ No newline at end of file
diff --git a/src/types/content.ts b/src/types/content.ts
new file mode 100644
index 0000000..c367106
--- /dev/null
+++ b/src/types/content.ts
@@ -0,0 +1,139 @@
+import { Dice, ExpandedDice } from "./core";
+
+export type Ability =
+ | "strength"
+ | "dexterity"
+ | "constitution"
+ | "intelligence"
+ | "wisdom"
+ | "charisma";
+
+export type RollMethod = "rolled" | "average";
+
+export type ContentEntry = {
+ id: string;
+
+ type:
+ | "species"
+ | "class"
+ | "subclass"
+ | "spell"
+ | "item"
+ | "weapon"
+ | "armor"
+ | "feature"
+ | "background";
+
+ name: string;
+
+ data: unknown;
+}
+
+export type ContentPack = {
+ id: string;
+ name: string;
+ ownerId: string;
+
+ visibility: "private" | "public";
+
+ entries: ContentEntry[];
+}
+
+export type Armor = {
+ id: string;
+ name: string;
+
+ armorClass: number;
+
+ dexterityBonus:
+ | "full"
+ | "limited"
+ | "none";
+
+ maxDexterity?: number;
+ shieldBonus?: number;
+}
+
+export type Weapon = {
+ id: string;
+ name: string;
+
+ damage: {
+ dice: Dice;
+ type: string;
+ };
+
+ properties: string[];
+
+ ability: {
+ default: Ability;
+ options: {
+ name: string;
+ ability: Ability;
+ requirement?: unknown; // To be implemented (requirement based on character opts, i.e. wizards use int, dwarves use char, etc.)
+ }[]
+ }
+
+ proficientRequired: boolean;
+}
+
+export type AbilityScores = {
+ strength: number;
+ dexterity: number;
+ constitution: number;
+ intelligence: number;
+ wisdom: number;
+ charisma: number;
+}
+
+export type Class = {
+ id: string;
+ name: string;
+
+ hitDice: ExpandedDice;
+}
+
+export type CharacterClass = {
+ classId: string;
+ level: number;
+}
+
+export type CharacterHP = {
+ method: RollMethod;
+ max: number;
+
+ history: {
+ level: number;
+ classId: string;
+
+ roll?: number;
+ increase: number;
+ }[];
+}
+
+export type Character = {
+ id: string;
+
+ name: string;
+
+ speciesId: string;
+ classes: CharacterClass[];
+
+ hp: CharacterHP;
+
+ abilities: AbilityScores;
+
+ inventory: string[];
+
+ equipped: {
+ armor?: string;
+ weapons: string[];
+ };
+
+ magic: {
+ spells: Record; // { : }
+ slots: Record // { : [, ] }
+ }
+
+ contentSources: string[];
+}
\ No newline at end of file
diff --git a/src/types/core.ts b/src/types/core.ts
new file mode 100644
index 0000000..5c8fab0
--- /dev/null
+++ b/src/types/core.ts
@@ -0,0 +1,26 @@
+import { Ability } from "./content";
+
+export type Dice = Record;
+
+export type ExpandedDice = {
+ sides: number;
+ count: number;
+}
+
+export type Effect = {
+ target: string;
+ operation: "increase" | "decrease" | "roll";
+ value: number;
+}
+
+export type AttackResult = {
+ ability: Ability;
+
+ attackBonus: number;
+
+ damage: {
+ dice: Dice;
+ modifier: number;
+ type: string;
+ }
+}
\ No newline at end of file
- To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
+ <> +
+
+
+
-
+
+
+ {
+ !open || (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/RollCard.tsx b/src/components/RollCard.tsx
new file mode 100644
index 0000000..4879990
--- /dev/null
+++ b/src/components/RollCard.tsx
@@ -0,0 +1,3 @@
+export default function RollCard({ roll }: { roll: unknown }) {
+
+}
\ No newline at end of file
diff --git a/src/components/Scene.tsx b/src/components/Scene.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/hooks/useDiceRoller.ts b/src/hooks/useDiceRoller.ts
new file mode 100644
index 0000000..774e96f
--- /dev/null
+++ b/src/hooks/useDiceRoller.ts
@@ -0,0 +1,91 @@
+'use client';
+
+import { useRef, useState, useCallback, useEffect } from 'react';
+import * as THREE from 'three';
+import {
+ initScene,
+ Die,
+ DieInstance,
+ setDice,
+ stopRenderLoop,
+ initRenderLoop,
+ getW,
+ getD,
+} from '../lib/dicePhysics';
+
+export interface RollResult {
+ sides: number;
+ value: number;
+}
+
+export function useDiceRoller() {
+ const mountRef = useRef
+
+ )
+ }
+
+ {Object.entries(diceIcons).map(([sides, Die]) => {
+ const n = parseInt(sides);
+ return (
+
+ );
+ })}
+
+
+
+
+