From d9c928dfcd101bb7293318dba47c840691d73cb0 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Thu, 14 May 2020 18:13:12 +1000 Subject: [PATCH] Added dice clear and dice reroll --- src/components/map/dice/DiceResults.js | 83 +++++++++++++++++--------- src/components/map/dice/DiceTray.js | 36 ++++++++++- src/dice/Dice.js | 16 ++--- src/icons/ClearDiceIcon.js | 18 ++++++ src/icons/RerollDiceIcon.js | 18 ++++++ 5 files changed, 133 insertions(+), 38 deletions(-) create mode 100644 src/icons/ClearDiceIcon.js create mode 100644 src/icons/RerollDiceIcon.js diff --git a/src/components/map/dice/DiceResults.js b/src/components/map/dice/DiceResults.js index d6dc340..f06ba5e 100644 --- a/src/components/map/dice/DiceResults.js +++ b/src/components/map/dice/DiceResults.js @@ -1,9 +1,12 @@ import React, { useState } from "react"; -import { Flex, Text, Button } from "theme-ui"; +import { Flex, Text, Button, IconButton } from "theme-ui"; + +import ClearDiceIcon from "../../../icons/ClearDiceIcon"; +import RerollDiceIcon from "../../../icons/RerollDiceIcon"; const maxDiceRollsShown = 6; -function DiceResults({ diceRolls }) { +function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) { const [isExpanded, setIsExpanded] = useState(false); if ( @@ -30,37 +33,61 @@ function DiceResults({ diceRolls }) { return ( - - {diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)} - - {rolls.length > maxDiceRollsShown ? ( - - ) : ( - {rolls} - )} + {diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)} + + {rolls.length > maxDiceRollsShown ? ( + + ) : ( + {rolls} + )} + + + + ); } diff --git a/src/components/map/dice/DiceTray.js b/src/components/map/dice/DiceTray.js index 4f86d38..5350e77 100644 --- a/src/components/map/dice/DiceTray.js +++ b/src/components/map/dice/DiceTray.js @@ -7,6 +7,7 @@ import environment from "../../../dice/environment.dds"; import Scene from "./DiceScene"; import DiceControls from "./DiceControls"; import DiceResults from "./DiceResults"; +import Dice from "../../../dice/Dice"; import createDiceTray, { diceTraySize, @@ -197,11 +198,13 @@ function DiceTray({ isOpen }) { if (scene && shadowGenerator) { const instance = await style.createInstance(type, scene); shadowGenerator.addShadowCaster(instance); + Dice.roll(instance); let dice = { type, instance }; // If we have a d100 add a d10 as well if (type === "d100") { const d10Instance = await style.createInstance("d10", scene); shadowGenerator.addShadowCaster(d10Instance); + Dice.roll(d10Instance); dice.d10Instance = d10Instance; } dieRef.current.push(dice); @@ -210,6 +213,29 @@ function DiceTray({ isOpen }) { } } + function handleDiceClear() { + const die = dieRef.current; + for (let dice of die) { + dice.instance.dispose(); + if (dice.type === "d100") { + dice.d10Instance.dispose(); + } + } + dieRef.current = []; + dieSleepRef.current = []; + setDiceRolls([]); + } + + function handleDiceReroll() { + const die = dieRef.current; + for (let dice of die) { + Dice.roll(dice.instance); + if (dice.type === "d100") { + Dice.roll(dice.d10Instance); + } + } + } + return ( - +
0.5 ? trayOffsetHeight : -trayOffsetHeight ); - instance.position = initialPosition; + instance.position = position; instance.addRotation( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, @@ -85,13 +89,11 @@ class Dice { ); const impulse = BABYLON.Vector3.Zero() - .subtract(initialPosition) + .subtract(position) .normalizeToNew() .scale(10); - instance.physicsImpostor.applyImpulse(impulse, initialPosition); - - return instance; + instance.physicsImpostor.applyImpulse(impulse, position); } static async createInstance(mesh, scene) { diff --git a/src/icons/ClearDiceIcon.js b/src/icons/ClearDiceIcon.js new file mode 100644 index 0000000..030f248 --- /dev/null +++ b/src/icons/ClearDiceIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function ClearDiceIcon() { + return ( + + + + + ); +} + +export default ClearDiceIcon; diff --git a/src/icons/RerollDiceIcon.js b/src/icons/RerollDiceIcon.js new file mode 100644 index 0000000..0f3a5b1 --- /dev/null +++ b/src/icons/RerollDiceIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function RerollDiceIcon() { + return ( + + + + + ); +} + +export default RerollDiceIcon;