Merge pull request #14 from JollyGrin/feat/counters

Feat/counters

src/components/organisms/GameBoard/Footer/Counters/index.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { cva } from "styled-system/css/cva.mjs";
+import { Flex, Grid, HStack, VStack } from "styled-system/jsx";
+import { button } from "styled-system/recipes";
+
+export const CountersTray = () => {
+  return (
+    <Flex
+      direction="column"
+      h="100%"
+      overflowY="auto"
+      p={0}
+      m={0}
+      justifyContent="center"
+      alignItems="center"
+    >
+      {(["earth", "fire", "water", "wind"] as const).map((type) => (
+        <Resource key={type} type={type} />
+      ))}
+    </Flex>
+  );
+};
+
+const Resource = (props: { type: "fire" | "water" | "wind" | "earth" }) => {
+  const [amount, setAmount] = useState(0);
+  function increment() {
+    setAmount((prev) => prev + 1);
+  }
+
+  function decrement() {
+    setAmount((prev) => (prev === 0 ? prev : prev - 1));
+  }
+
+  return (
+    <VStack gap={0} p={0}>
+      <Grid gridTemplateColumns="1fr 1fr" alignItems="center">
+        <img
+          src={`/icon/${props.type}.webp`}
+          alt="fire"
+          className={iconStyle()}
+          style={{ height: "21px", width: "20px" }}
+        />
+        <p style={{ justifySelf: "end", fontSize: "0.8rem" }}>{amount}</p>
+      </Grid>
+      <HStack
+        gap={0}
+        p={0}
+        opacity="0.05"
+        _hover={{ opacity: 1 }}
+        transition="all 0.25s ease"
+      >
+        <button
+          onClick={decrement}
+          className={button({ variant: "destructive", size: "sm" })}
+          style={{
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+            height: "20px",
+          }}
+        >
+          -
+        </button>
+
+        <button
+          onClick={increment}
+          className={button({ size: "sm" })}
+          style={{
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            height: "20px",
+          }}
+        >
+          +
+        </button>
+      </HStack>
+    </VStack>
+  );
+};
+
+const iconStyle = cva({
+  base: {
+    width: "25px",
+  },
+});

src/components/organisms/GameBoard/Footer/Decks/index.tsx

@@ -54,7 +54,7 @@ export const DecksTray = (props: GameStateActions) => {
       />
       <VStack
         w="100%"
-        py="1rem"
+        py="0.25rem"
         style={{
           height: LAYOUT_HEIGHTS.footer,
           background:

src/components/organisms/GameBoard/Footer/index.tsx

@@ -23,6 +23,7 @@ import {
   BiArrowToTop as IconTop,
   BiArrowToBottom as IconBottom,
 } from "react-icons/bi";
+import { CountersTray } from "./Counters";
 
 /**
  * HAND - Drag and Drop tray of all the cards in your hand
@@ -40,9 +41,16 @@ export const GameFooter = (props: GameStateActions) => {
         overflowX: "auto",
       }}
     >
-      <Grid h="100%" gridTemplateColumns="130px 100px 1fr" gap={0}>
+      <Grid
+        h="100%"
+        gridTemplateColumns="130px 115px 85px 1fr"
+        gap={0}
+        overflowY="clip"
+        // w="100vw"
+      >
         <GraveTray {...props} />
         <DecksTray {...props} />
+        <CountersTray />
         <DroppableGridItem id={gridIndex.toString()} gridIndex={gridIndex}>
           <SortableContext
             id={`grid-${gridIndex}`}
@@ -54,7 +62,7 @@ export const GameFooter = (props: GameStateActions) => {
             <HStack
               p={0}
               m={0}
-              w="calc(100vw - 300px)"
+              w="calc(100vw - 330px)"
               h="100%"
               justifyContent="start"
               overflowX="auto"