From ee13e84fa38ef02be628f5585ada9254ea24e8e8 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 22 Sep 2024 16:51:53 +0200 Subject: [PATCH 1/3] add dice rolling --- .../molecules/CommandModal/Command.tsx | 5 +- .../molecules/CommandModal/Commands.tsx | 51 +++++++++++++++++-- .../molecules/CommandModal/index.tsx | 3 +- src/components/organisms/GameBoard/index.tsx | 2 +- src/types/card.ts | 4 ++ 5 files changed, 58 insertions(+), 7 deletions(-) diff --git a/src/components/molecules/CommandModal/Command.tsx b/src/components/molecules/CommandModal/Command.tsx index e366268..7eeb883 100644 --- a/src/components/molecules/CommandModal/Command.tsx +++ b/src/components/molecules/CommandModal/Command.tsx @@ -6,10 +6,12 @@ import { ActDrawDeckBottom, ActDrawDeckTop, ActionIds, + ActionRollDice, ActScryX, } from "./Commands"; +import { PlayerDataProps } from "@/types/card"; -export const Command = (props: GameStateActions) => { +export const Command = (props: GameStateActions & PlayerDataProps) => { return (

{ {({ action }) => { const id = action.value as ActionIds; + if (id === "dice") return ; if (id === "spawn_token") return "To spawn a token, right click empty space on a grid"; if (id === "draw_deck_top") return ; diff --git a/src/components/molecules/CommandModal/Commands.tsx b/src/components/molecules/CommandModal/Commands.tsx index 3082a9e..8295ceb 100644 --- a/src/components/molecules/CommandModal/Commands.tsx +++ b/src/components/molecules/CommandModal/Commands.tsx @@ -2,23 +2,26 @@ import { GameStateActions } from "@/components/organisms/GameBoard"; import { getCardImage, GRIDS, + initGameData, } from "@/components/organisms/GameBoard/constants"; import { Button } from "@/components/ui/button"; +import { PlayerDataProps } from "@/types/card"; import { actDeckMoveToTop, actDrawDeck, actDrawDeckBottom, } from "@/utils/actions"; +import { useRouter } from "next/router"; import { useState } from "react"; import { css } from "styled-system/css"; import { Box, Flex, VStack } from "styled-system/jsx"; import { input } from "styled-system/recipes"; export const actions = [ - // { - // value: "d6", - // label: "Roll a D6", - // }, + { + value: "dice", + label: "Roll dice", + }, { value: "spawn_token", label: "Spawn a token onto the grid", @@ -48,6 +51,46 @@ export type ActionIds = (typeof actions)[number]["value"]; * These are displayed with if conditions to do actions without worrying about UI * */ +export const ActionRollDice = (props: GameStateActions & PlayerDataProps) => { + const { query } = useRouter(); + const name = (query?.name ?? "") as string; + const myData = props.players?.[name].data ?? initGameData; + + function rollD6() { + const roll = Math.floor(Math.random() * 6) + 1; + const dice = { + d6: roll, + d20: undefined, + }; + props.setMyData({ + ...myData, + dice, + }); + } + + function rollD20() { + const roll = Math.floor(Math.random() * 20) + 1; + const dice = { + d6: undefined, + d20: roll, + }; + props.setMyData({ + ...myData, + dice, + }); + } + + return ( + +

Roll a dice

+

d6: {myData?.dice?.d6}

+

d20: {myData?.dice?.d20}

+ + + + ); +}; + export const ActDrawDeckTop = (props: GameStateActions) => (

Draw a card from the top of your deck

diff --git a/src/components/molecules/CommandModal/index.tsx b/src/components/molecules/CommandModal/index.tsx index 2f9b381..9db9ea1 100644 --- a/src/components/molecules/CommandModal/index.tsx +++ b/src/components/molecules/CommandModal/index.tsx @@ -4,11 +4,12 @@ import { Children } from "@/utils/helpers/types"; import { useKeyPress } from "@/utils/hooks/useKeyPress"; import { Command } from "./Command"; import { useEffect, useState } from "react"; +import { PlayerDataProps } from "@/types/card"; export const CommandModalWrapper = ({ children, ...props -}: Children & GameStateActions) => { +}: Children & GameStateActions & PlayerDataProps) => { const { isOpen, onClose } = useDisclosure(); return ( diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx index b330caf..4680fee 100644 --- a/src/components/organisms/GameBoard/index.tsx +++ b/src/components/organisms/GameBoard/index.tsx @@ -34,7 +34,7 @@ export const GameBoard = ({ }); return ( - + Date: Sun, 22 Sep 2024 16:56:49 +0200 Subject: [PATCH 2/3] add clear rolls --- src/components/molecules/CommandModal/Commands.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/molecules/CommandModal/Commands.tsx b/src/components/molecules/CommandModal/Commands.tsx index 8295ceb..2e5fa88 100644 --- a/src/components/molecules/CommandModal/Commands.tsx +++ b/src/components/molecules/CommandModal/Commands.tsx @@ -80,6 +80,13 @@ export const ActionRollDice = (props: GameStateActions & PlayerDataProps) => { }); } + function clearDice() { + props.setMyData({ + ...myData, + dice: undefined, + }); + } + return (

Roll a dice

@@ -87,6 +94,7 @@ export const ActionRollDice = (props: GameStateActions & PlayerDataProps) => {

d20: {myData?.dice?.d20}

+ ); }; From fb26250c9d368932cae93c2d2d884b44829c1abf Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sun, 22 Sep 2024 16:56:52 +0200 Subject: [PATCH 3/3] add roll to navbar --- src/components/organisms/GameBoard/Header/PlayerBox.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx index 38638ba..ffe74df 100644 --- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx +++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx @@ -13,6 +13,8 @@ import { GiPirateGrave as IconGrave, GiHealthNormal as IconHealth, } from "react-icons/gi"; +import { LiaDiceD6Solid as IconD6 } from "react-icons/lia"; +import { FaDiceD20 as IconD20 } from "react-icons/fa"; export const PlayerBox = ({ name, @@ -91,6 +93,12 @@ export const PlayerBox = ({ + {player?.data?.dice?.d6 !== undefined && ( + + )} + {player?.data?.dice?.d20 !== undefined && ( + + )} );