style(UI): Reskin the dice tool

CHANGELOG.md

@@ -41,6 +41,13 @@ tech changes will usually be stripped from release notes for the public
 -   Notes:
     -   Add filtering option 'All' to note manager to show both global and local notes
     -   Note popouts for clients without edit access now show 'view source' instead of 'edit'
+-   Dice tool:
+    -   Last result is now displayed in the dice tool rather than a popup window
+    -   Result breakdowns are shown in the last result display and history
+    -   Added a reroll button to quickly redo the previous roll
+    -   Added a reroll button to history entries
+    -   Add an option to roll 3D dice inside a dice box rather than over the playfield
+    -   Input field now scrolls to the end after populating via the on screen buttons
 -   I18n:
     -   Added 95% i18n for zh (except diceTool)
 

client/src/core/components/ToggleGroup.vue

@@ -84,12 +84,13 @@ function toggle(option: T): void {
         }
     }
 
-    &.disabled > {
-        div:hover {
+    &.disabled {
+        opacity: 0.5;
+        > div:hover {
             cursor: not-allowed;
         }
 
-        :not(.selected):hover {
+        > :not(.selected):hover {
             background-color: inherit;
         }
     }

client/src/fa.ts

@@ -59,6 +59,7 @@ import {
     faPlus,
     faPlusMinus,
     faPlusSquare,
+    faRotateLeft,
     faShareAlt,
     faSignOutAlt,
     faSliders,
@@ -136,6 +137,7 @@ export function loadFontAwesome(): void {
         faPlus,
         faPlusMinus,
         faPlusSquare,
+        faRotateLeft,
         faShareAlt,
         faSignOutAlt,
         faSliders,

client/src/game/systems/dice/environment.ts

@@ -16,19 +16,36 @@ import { diceSystem } from ".";
 
 export let diceThrower: DiceThrower | undefined;
 
-let light: DirectionalLight;
+interface ThrowerConfig {
+    thrower: DiceThrower;
+    width: number;
+    height: number;
+}
+
+const throwers = new Map<HTMLCanvasElement,ThrowerConfig>();
 
 // This is in fact used in dice.ts using dynamic import
 // eslint-disable-next-line import/no-unused-modules
-export async function loadDiceEnv(): Promise<void> {
-    const canvas = document.getElementById("babylon") as unknown as HTMLCanvasElement;
+export async function loadDiceEnv(canvas?: HTMLCanvasElement): Promise<void> {
+    let cameraHeight = 15;
+    if (canvas === undefined) {
+        canvas = document.getElementById("babylon") as unknown as HTMLCanvasElement;
+        cameraHeight = 40;
+    }
+    const existingThrower = throwers.get(canvas);
+
+    if (existingThrower) {
+        diceThrower = existingThrower.thrower;
+        diceSystem.set3dDimensions(existingThrower.width, existingThrower.height);
+        return;
+    }
 
     diceThrower = new DiceThrower({ canvas, tresholds: { linear: 0.05, angular: 0.1 } });
     const scene = diceThrower.scene;
 
     scene.clearColor = new Color4(0, 0, 0, 0);
 
-    await diceThrower.loadPhysics();
+    await diceThrower.loadPhysics(new Vector3(0, -15, 0));
     await diceThrower.loadMeshes(baseAdjust("/static/all_dice.babylon"), scene);
 
     /*
@@ -37,15 +54,23 @@ export async function loadDiceEnv(): Promise<void> {
      * With (0, 0) at the center of the screen
      */
     const camera = new ArcRotateCamera("camera", 0, 0, 0, new Vector3(0, 0, 0), scene);
-    camera.setPosition(new Vector3(0, 40, 0));
+
+    camera.setPosition(new Vector3(0, cameraHeight, 0));
     camera.attachControl(canvas);
     camera.fovMode = Camera.FOVMODE_HORIZONTAL_FIXED;
-    new HemisphericLight("light", new Vector3(0, 1, 0), scene);
-    light = new DirectionalLight("DirectionalLight", new Vector3(0, -1, 0), scene);
-    light.position = new Vector3(0, 5, 0);
-    light.intensity = 1;
+    camera.inputs.attached.mousewheel?.detachControl();
+
+    const hemiLight = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
+    hemiLight.intensity = 0.4;
 
-    loadDiceBox(scene);
+    const light = new DirectionalLight("dirlight", new Vector3(0, -1, 0), scene);
+    light.position = new Vector3(0, 10, 0);
+    light.intensity = 0.7;
+
+    const groundMat = new ShadowOnlyMaterial("shadowOnly", scene);
+    groundMat.activeLight = light;
+
+    loadDiceBox(scene, canvas);
 
     diceThrower.startRenderLoop();
 }
@@ -54,23 +79,22 @@ function paPredicate(mesh: AbstractMesh): boolean {
     return mesh.isPickable && mesh.isEnabled();
 }
 
-function loadDiceBox(scene: Scene): void {
+function loadDiceBox(scene: Scene, canvas: HTMLCanvasElement): void {
     const ground = MeshBuilder.CreateGround("ground", { width: 100, height: 100 }, scene);
     ground.position = new Vector3(0, 0, 0);
-    const material = new ShadowOnlyMaterial("shadowOnly", scene);
-    material.activeLight = light;
-    ground.material = material;
+    ground.material = scene.getMaterialByName("shadowOnly");
     ground.receiveShadows = true;
 
-    new PhysicsAggregate(ground, PhysicsShapeType.BOX, { mass: 0 });
+    new PhysicsAggregate(ground, PhysicsShapeType.BOX, { mass: 0, friction: 0.5, restitution: 0.01 });
 
     // Visual
     const topLeft = scene.pick(0, 0, paPredicate).pickedPoint!;
-    const topRight = scene.pick(window.innerWidth, 0, paPredicate).pickedPoint!;
-    const botLeft = scene.pick(0, window.innerHeight, paPredicate).pickedPoint!;
+    const topRight = scene.pick(canvas.offsetWidth, 0, paPredicate).pickedPoint!;
+    const botLeft = scene.pick(0, canvas.offsetHeight, paPredicate).pickedPoint!;
 
     const width = Math.abs(topRight.x - topLeft.x);
     const height = Math.abs(botLeft.z - topLeft.z);
+    throwers.set(canvas, { thrower: diceThrower!, width: width, height: height });
     diceSystem.set3dDimensions(width, height);
 
     const wall1 = MeshBuilder.CreateBox("north", { width, depth: 1, height: 40 }, scene);
@@ -92,29 +116,32 @@ function loadDiceBox(scene: Scene): void {
     const roof = MeshBuilder.CreateBox("roof", { width, depth: height }, scene);
     roof.position.y = 40;
 
+    const restitution = 0.5;
+    const friction = 0.5;
+
     new PhysicsAggregate(wall1, PhysicsShapeType.BOX, {
         mass: 0,
-        restitution: 0.5,
-        friction: 0.5,
+        restitution,
+        friction,
     });
     new PhysicsAggregate(wall2, PhysicsShapeType.BOX, {
         mass: 0,
-        restitution: 0.5,
-        friction: 0.5,
+        restitution,
+        friction,
     });
     new PhysicsAggregate(wall3, PhysicsShapeType.BOX, {
         mass: 0,
-        restitution: 0.5,
-        friction: 0.5,
+        restitution,
+        friction,
     });
     new PhysicsAggregate(wall4, PhysicsShapeType.BOX, {
         mass: 0,
-        restitution: 0.5,
-        friction: 0.5,
+        restitution,
+        friction,
     });
     new PhysicsAggregate(roof, PhysicsShapeType.BOX, {
         mass: 0,
-        restitution: 0.5,
-        friction: 0.5,
+        restitution,
+        friction,
     });
 }

client/src/game/systems/dice/index.ts

@@ -22,7 +22,6 @@ class DiceSystem implements System {
         $.result = undefined;
         if (reason !== "full-loading") {
             $.history = [];
-            $.loaded3d = false;
         }
     }
 
@@ -41,12 +40,9 @@ class DiceSystem implements System {
         $.systems = { "2d": DX, "3d": DX3 };
     }
 
-    async load3d(): Promise<void> {
-        if (!diceState.raw.loaded3d) {
-            const env = await getDiceEnvironment();
-            await env.loadDiceEnv();
-            $.loaded3d = true;
-        }
+    async load3d(canvas?: HTMLCanvasElement): Promise<void> {
+        const env = await getDiceEnvironment();
+        await env.loadDiceEnv(canvas);
     }
 
     set3dDimensions(width: number, height: number): void {

client/src/game/systems/dice/state.ts

@@ -7,15 +7,13 @@ import { buildState } from "../state";
 interface DiceState {
     dimensions3d: { width: number; height: number };
     history: { roll: RollResult<Part>; name: string; player: string }[];
-    loaded3d: boolean;
     systems?: { "2d": AsyncReturnType<typeof SYSTEMS.DX>["DX"]; "3d": AsyncReturnType<typeof SYSTEMS.DX3>["DX3"] };
     result?: DeepReadonly<RollResult<Part>>;
 }
 
 const state = buildState<DiceState>({
     dimensions3d: { width: 0, height: 0 },
     history: [],
-    loaded3d: false,
 });
 export const diceState = {
     ...state,

client/src/game/tools/variants/dice.ts

@@ -39,6 +39,8 @@ async function generate3dOptions(): Promise<{
     const w = (diceState.raw.dimensions3d.width / 2) * 0.85;
     const h = (diceState.raw.dimensions3d.height / 2) * 0.85;
 
+    const powerScale = Math.min(diceState.raw.dimensions3d.height, diceState.raw.dimensions3d.width) * 0.025;
+
     const { Vector3 } = await babMath();
 
     // Aim from side to center
@@ -49,7 +51,7 @@ async function generate3dOptions(): Promise<{
             // Slightly deviate from center
             .add(new Vector3(randomInterval(0, 20) - 10, randomInterval(0, 5) - 2.5, randomInterval(0, 20) - 10))
             // Power up
-            .multiplyByFloats(randomInterval(6, 9), 1, randomInterval(6, 9));
+            .multiplyByFloats(randomInterval(6, 9) * powerScale, 1, randomInterval(6, 9) * powerScale);
         const angular = new Vector3(linear.x / 2, 0, 0);
         return { angular, linear, position };
     };