Added dice clear and dice reroll
This commit is contained in:
Mitchell McCaffrey
parent
b57d10c6ef
commit
d9c928dfcd
@ -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 (
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="heading"
|
||||
as="h1"
|
||||
sx={{ fontSize: 5 }}
|
||||
mb={diceRolls.length === 1 ? "24px" : 0}
|
||||
<IconButton
|
||||
ml="24px"
|
||||
title="Clear Dice"
|
||||
aria-label="Clear Dice"
|
||||
onClick={onDiceClear}
|
||||
>
|
||||
{diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)}
|
||||
</Text>
|
||||
{rolls.length > maxDiceRollsShown ? (
|
||||
<Button
|
||||
aria-label={"Show Dice Details"}
|
||||
title={"Show Dice Details"}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
variant="secondary"
|
||||
sx={{ display: "flex", height: "24px" }}
|
||||
<ClearDiceIcon />
|
||||
</IconButton>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="heading"
|
||||
as="h1"
|
||||
sx={{ fontSize: 5 }}
|
||||
mb={diceRolls.length === 1 ? "24px" : 0}
|
||||
>
|
||||
{isExpanded ? rolls : rolls.slice(0, maxDiceRollsShown)}
|
||||
{!isExpanded && (
|
||||
<Text variant="body2" as="p" color="hsl(210, 50%, 96%)">
|
||||
...
|
||||
</Text>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<Flex>{rolls}</Flex>
|
||||
)}
|
||||
{diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)}
|
||||
</Text>
|
||||
{rolls.length > maxDiceRollsShown ? (
|
||||
<Button
|
||||
aria-label={"Show Dice Details"}
|
||||
title={"Show Dice Details"}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
variant="secondary"
|
||||
sx={{ display: "flex", height: "24px" }}
|
||||
>
|
||||
{isExpanded ? rolls : rolls.slice(0, maxDiceRollsShown)}
|
||||
{!isExpanded && (
|
||||
<Text variant="body2" as="p" color="hsl(210, 50%, 96%)">
|
||||
...
|
||||
</Text>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<Flex>{rolls}</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
<IconButton
|
||||
mr="24px"
|
||||
title="Reroll Dice"
|
||||
aria-label="Reroll Dice"
|
||||
onClick={onDiceReroll}
|
||||
>
|
||||
<RerollDiceIcon />
|
||||
</IconButton>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Box
|
||||
sx={{
|
||||
@ -227,13 +253,17 @@ function DiceTray({ isOpen }) {
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "16px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: "flex",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<DiceResults diceRolls={diceRolls} />
|
||||
<DiceResults
|
||||
diceRolls={diceRolls}
|
||||
onDiceClear={handleDiceClear}
|
||||
onDiceReroll={handleDiceReroll}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@ -71,13 +71,17 @@ class Dice {
|
||||
scene
|
||||
);
|
||||
|
||||
return instance;
|
||||
}
|
||||
|
||||
static roll(instance) {
|
||||
const trayOffsetHeight = diceTraySize.height / 2 - 0.5;
|
||||
const initialPosition = new BABYLON.Vector3(
|
||||
const position = new BABYLON.Vector3(
|
||||
((Math.random() * 2 - 1) * diceTraySize.width) / 2,
|
||||
5,
|
||||
this.instanceCount % 2 === 0 ? trayOffsetHeight : -trayOffsetHeight
|
||||
Math.random() > 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) {
|
||||
|
||||
18
src/icons/ClearDiceIcon.js
Normal file
18
src/icons/ClearDiceIcon.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
function ClearDiceIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default ClearDiceIcon;
|
||||
18
src/icons/RerollDiceIcon.js
Normal file
18
src/icons/RerollDiceIcon.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
function RerollDiceIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M21 14c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1l-.116-.007A1.004 1.004 0 0120 19v-1.01A9.985 9.985 0 0112 22c-4.36 0-8.07-2.79-9.44-6.69-.22-.64.28-1.31.96-1.31l.122.007a.991.991 0 01.818.633C5.55 17.76 8.51 20 12 20c2.95 0 5.53-1.61 6.91-4H17c-.55 0-1-.45-1-1l.007-.116c.058-.496.482-.884.993-.884zm-7-5a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4zm-1 3a1 1 0 100 2 1 1 0 000-2zm-2-2a1 1 0 100 2 1 1 0 000-2zm1-8c4.36 0 8.07 2.79 9.44 6.69.22.64-.28 1.31-.96 1.31l-.122-.007a.991.991 0 01-.818-.633C18.45 6.24 15.49 4 12 4 9.05 4 6.47 5.61 5.09 8H7c.55 0 1 .45 1 1l-.007.116A1.004 1.004 0 017 10H3c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1l.116.007C3.612 4.065 4 4.489 4 5v1.01A9.985 9.985 0 0112 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default RerollDiceIcon;
|
||||
Loading…
Reference in New Issue
Block a user