Merge pull request #37 from JollyGrin/feat/dice

Feat/dice

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 (
     <Flex direction="column" minW="800px" minH="500px">
       <p
@@ -24,6 +26,7 @@ export const Command = (props: GameStateActions) => {
         {({ action }) => {
           const id = action.value as ActionIds;
 
+          if (id === "dice") return <ActionRollDice {...props} />;
           if (id === "spawn_token")
             return "To spawn a token, right click empty space on a grid";
           if (id === "draw_deck_top") return <ActDrawDeckTop {...props} />;

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,54 @@ 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,
+    });
+  }
+
+  function clearDice() {
+    props.setMyData({
+      ...myData,
+      dice: undefined,
+    });
+  }
+
+  return (
+    <VStack alignItems="start">
+      <p>Roll a dice</p>
+      <p>d6: {myData?.dice?.d6}</p>
+      <p>d20: {myData?.dice?.d20}</p>
+      <Button onClick={rollD6}>Roll d6</Button>
+      <Button onClick={rollD20}>Roll d20</Button>
+      <Button onClick={clearDice}>Clear Rolls</Button>
+    </VStack>
+  );
+};
+
 export const ActDrawDeckTop = (props: GameStateActions) => (
   <VStack alignItems="start">
     <p>Draw a card from the top of your deck</p>

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 (

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 = ({
         <Stat Icon={IconDeck} value={length(GRIDS.DECK)} />
         <Stat Icon={IconMap} value={length(GRIDS.ATLAS_DECK)} />
         <Stat Icon={IconHand} value={length(GRIDS.HAND)} />
+        {player?.data?.dice?.d6 !== undefined && (
+          <Stat Icon={IconD6} value={player?.data?.dice?.d6} />
+        )}
+        {player?.data?.dice?.d20 !== undefined && (
+          <Stat Icon={IconD20} value={player?.data?.dice?.d20} />
+        )}
       </Flex>
     </HStack>
   );

src/components/organisms/GameBoard/index.tsx

@@ -34,7 +34,7 @@ export const GameBoard = ({
   });
 
   return (
-    <CommandModalWrapper {...{ gridItems, setGridItems }}>
+    <CommandModalWrapper {...{ gridItems, setGridItems, ...playerDataProps }}>
       <DndContext {...dragProps}>
         <GameLayout
           gridItems={gridItems}

src/types/card.ts

@@ -59,6 +59,10 @@ export type PlayerData = {
   life: number;
   mana: number;
   manaRemaining: number;
+  dice?: {
+    d6?: number;
+    d20?: number;
+  };
 };
 export type PlayerState = {
   state: GameState;