Merge pull request #43 from JollyGrin/feat/untap-all

Feat/untap all

src/components/molecules/CommandModal/Command.tsx

@@ -9,6 +9,7 @@ import {
   ActionRollDice,
   ActRotateEnemyCards,
   ActScryX,
+  ActUntapAll,
   ActViewCemetary,
 } from "./Commands";
 import { PlayerDataProps } from "@/types/card";
@@ -28,6 +29,7 @@ export const Command = (props: GameStateActions & PlayerDataProps) => {
         {({ action }) => {
           const id = action.value as ActionIds;
 
+          if (id === "untap_all") return <ActUntapAll />;
           if (id === "dice") return <ActionRollDice {...props} />;
           if (id === "spawn_token")
             return "To spawn a token, right click empty space on a grid";

src/components/molecules/CommandModal/Commands.tsx

@@ -23,6 +23,10 @@ import { CardImage } from "@/components/atoms/mock-cards/card";
 import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
 
 export const actions = [
+  {
+    value: "untap_all",
+    label: "Untap all your cards",
+  },
   {
     value: "dice",
     label: "Roll dice",
@@ -64,6 +68,28 @@ export type ActionIds = (typeof actions)[number]["value"];
  * These are displayed with if conditions to do actions without worrying about UI
  * */
 
+export const ActUntapAll = () => {
+  return (
+    <Box>
+      <p>
+        You can untap all your tapped cards by pressed{" "}
+        <span
+          style={{
+            borderRadius: "0.25rem",
+            background: "rgba(0,0,0,0.2)",
+            padding: "2px 4px",
+            fontFamily: "monospace",
+            borderBottom: "solid 1px black",
+          }}
+        >
+          u
+        </span>{" "}
+        on your keyboard
+      </p>
+    </Box>
+  );
+};
+
 export const ActionRollDice = (props: GameStateActions & PlayerDataProps) => {
   const { query } = useRouter();
   const name = (query?.name ?? "") as string;

src/components/molecules/CommandModal/index.tsx

@@ -5,11 +5,13 @@ import { useKeyPress } from "@/utils/hooks/useKeyPress";
 import { Command } from "./Command";
 import { useEffect, useState } from "react";
 import { PlayerDataProps } from "@/types/card";
+import { useRouter } from "next/router";
 
 export const CommandModalWrapper = ({
   children,
   ...props
 }: Children & GameStateActions & PlayerDataProps) => {
+  useUntapAllListener(props);
   const { isOpen, onClose } = useDisclosure();
 
   return (
@@ -42,3 +44,32 @@ function useDisclosure() {
     onClose: () => setIsOpen(false),
   };
 }
+
+/**
+ * Not accessible through the command menu, happens via keypress
+ * */
+function useUntapAllListener(props: GameStateActions) {
+  const { query } = useRouter();
+  const name = query?.name as string;
+
+  const isPressed = useKeyPress("u");
+  function untapAll() {
+    const newGrid = [...props.gridItems];
+    const untappedGrid = newGrid.map((gridCell) =>
+      gridCell.map((gridItem) => {
+        if (gridItem.playerName === name) {
+          const newGridItem = { ...gridItem };
+          newGridItem.isTapped = false;
+          return newGridItem;
+        } else {
+          return gridItem;
+        }
+      }),
+    );
+    props.setGridItems(untappedGrid);
+  }
+
+  useEffect(() => {
+    if (isPressed) untapAll();
+  }, [isPressed]);
+}