Merge pull request #7 from JollyGrin/feat/deck

Feat/deck

package.json

@@ -14,7 +14,6 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@shadow-panda/style-context": "^0.7.1",
-    "lucide-react": "^0.439.0",
     "next": "14.2.8",
     "react": "^18",
     "react-dom": "^18"

src/components/atoms/card-view/card.tsx

@@ -31,7 +31,7 @@ export const CardImage = ({
         backgroundRepeat="no-repeat"
         transition="all 0.25s ease"
         // bg="gray.400"
-      />{" "}
+      />
     </Box>
   );
 };

src/components/atoms/mock-cards/atlas.tsx

@@ -1,56 +1,36 @@
-import { useHover } from "@/utils/hooks/useHover";
-import { useKeyPress } from "@/utils/hooks/useKeyPress";
-import { useEffect, useRef, useState } from "react";
 import { Box } from "styled-system/jsx";
 
 export const CardAtlas = ({
+  height = "90px",
   img = "atlas_rift_valley.webp",
 }: {
   img?: string;
+  height?: string;
 }) => {
-  const hoverRef = useRef(null);
-  const isHovering = useHover(hoverRef);
-
-  const isPressed = useKeyPress("Alt");
-  const [preview, setPreview] = useState(false);
-  useEffect(() => {
-    if (isHovering && isPressed) {
-      setPreview((prev) => !prev);
-    }
-  }, [isPressed]);
-
-  // const show = preview && isHovering; // full preview of the card
-  const show = false;
   return (
     <Box
       position="relative"
-      m="0.5rem auto"
+      m="0 auto"
       w="calc(100% - 1rem)"
       maxW="221px"
-      h="70px"
       bg="yellow"
       borderRadius="1rem"
       isolation="isolate"
-      overflow={show ? "unset" : "clip"}
-      zIndex={show ? 1000000 : "unset"}
-      onMouseOut={() => setPreview(false)}
+      overflow="clip"
+      style={{ height }}
     >
       <Box
         style={{ backgroundImage: `url(/mock-cards/${img})` }} // bgImage has caching issues
-        ref={hoverRef}
         isolation="isolate"
         h="310px"
         w="100%"
         position="absolute"
-        top={show ? 0 : "-85px"}
+        right={0 + "px"}
+        bottom={-160 + "px"}
         backgroundPosition="right"
         backgroundSize="cover"
         backgroundRepeat="no-repeat"
-        transform={
-          show
-            ? "scale(1.45) rotate(90deg) translate(-47.8%, 0px)"
-            : "scale(0.85) rotate(90deg) translate(-47.8%, 0px)"
-        }
+        transform="scale(0.85) rotate(90deg) translate(-47.8%, 0px)"
         bg="gray.400"
         borderRadius="1rem"
         transition="all 0.25s ease"

src/components/atoms/mock-cards/card.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Box } from "styled-system/jsx";
 
 export const CardImage = ({
+  height = "90px",
   img = "headless_haunt.webp",
   position = "top",
   index = 1,
@@ -15,6 +16,7 @@ export const CardImage = ({
   index?: number;
   isTapped?: boolean;
   show?: boolean;
+  height?: string;
 }) => {
   const hoverRef = useRef(null);
   const isHovering = useHover(hoverRef);
@@ -32,10 +34,9 @@ export const CardImage = ({
   return (
     <Box
       position="relative"
-      m="0.5rem auto"
+      m="0 auto"
       w="calc(100% - 1rem)"
       maxW="221px"
-      h="90px"
       bg="yellow"
       overflow={show ? "unset" : "clip"}
       borderRadius="1rem"
@@ -48,6 +49,7 @@ export const CardImage = ({
       opacity={isTapped && !isHovering ? "0.8" : "1"}
       transition="all 0.25s ease"
       onMouseOut={() => setPreview(false)}
+      style={{ height }}
     >
       <Box
         ref={hoverRef}

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

@@ -7,15 +7,16 @@ import { useState } from "react";
 import { Modal } from "@/components/atoms/Modal";
 import { FullCardAtlas } from "@/components/atoms/card-view/atlas";
 import { CardImage as FullCard } from "@/components/atoms/card-view/card";
+import { GRIDS } from "../constants";
 
 export const Auras = (props: GameStateActions) => {
   return (
     <Box position="absolute" w="100%" h="100%">
       {Array.from({ length: 12 }).map((_, index) => (
         <Aura
           key={"aura" + index}
-          card={props.gridItems?.[21 + index]?.[0]}
-          gridIndex={21 + index}
+          card={props.gridItems?.[GRIDS.AURA_1 + index]?.[0]}
+          gridIndex={GRIDS.AURA_1 + index}
           index={0}
         />
       ))}
@@ -26,7 +27,7 @@ export const Auras = (props: GameStateActions) => {
 const Aura = (props: { card: GameCard; gridIndex: number; index: number }) => {
   const auraCard = props.card;
 
-  const auraIndex = props.gridIndex - 21; // normalize to zero
+  const auraIndex = props.gridIndex - GRIDS.AURA_1; // normalize to zero
   const topIndex = Math.floor(auraIndex / 4) + 1; // increments every 4
   const top = `${topIndex * 25}%`; // in percent
   const leftIndex = 1 + (auraIndex % 4); // every 4, resets

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

@@ -0,0 +1,94 @@
+import { Grid, VStack } from "styled-system/jsx";
+import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
+import { GameStateActions } from "..";
+
+export const DecksTray = (props: GameStateActions) => {
+  function draw(deck: GRIDS.DECK | GRIDS.ATLAS_DECK) {
+    props.setGridItems((prev) => {
+      // Create a shallow copy of the previous grid items array
+      const newGridItems = [...prev];
+
+      // Make a copy of the deck and hand arrays, preserving their positions
+      const newDeck = [...newGridItems[deck]];
+      const newHand = [...newGridItems[GRIDS.HAND]];
+
+      // Pop a card from the deck and push it to the hand
+      const card = newDeck.pop();
+      if (card) newHand.push(card);
+
+      // Update the newGridItems array with the updated deck and hand arrays
+      newGridItems[deck] = newDeck;
+      newGridItems[GRIDS.HAND] = newHand;
+
+      // Return the updated newGridItems array to trigger a re-render
+      return newGridItems;
+    });
+  }
+
+  function drawDeck() {
+    draw(GRIDS.DECK);
+  }
+  function drawAtlas() {
+    draw(GRIDS.ATLAS_DECK);
+  }
+
+  const atlasRemainingCards = props.gridItems[GRIDS.ATLAS_DECK]?.length;
+  const deckRemainingCards = props.gridItems[GRIDS.DECK]?.length;
+
+  return (
+    <VStack
+      bg="blue"
+      w="100%"
+      py="1rem"
+      // style={{ height: LAYOUT_HEIGHTS.footer }}
+      style={{ height: LAYOUT_HEIGHTS.footer }}
+    >
+      <Grid
+        h="70px"
+        aspectRatio={3 / 2}
+        onClick={drawAtlas}
+        placeItems="center"
+        borderRadius="0.25rem"
+        cursor="pointer"
+        backgroundSize="cover"
+        style={{
+          backgroundImage: "url(/card-backs/m_atlas.png)",
+        }}
+      >
+        <p
+          style={{
+            fontWeight: 700,
+            background: "rgba(255,255,255,0.7)",
+            padding: "0 0.25rem",
+            borderRadius: "0.25rem",
+          }}
+        >
+          {atlasRemainingCards}
+        </p>
+      </Grid>
+      <Grid
+        w="60px"
+        aspectRatio={2 / 3}
+        onClick={drawDeck}
+        placeItems="center"
+        borderRadius="0.25rem"
+        cursor="pointer"
+        backgroundSize="cover"
+        style={{
+          backgroundImage: "url(/card-backs/m_spells.png)",
+        }}
+      >
+        <p
+          style={{
+            fontWeight: 700,
+            background: "rgba(255,255,255,0.7)",
+            padding: "0 0.25rem",
+            borderRadius: "0.25rem",
+          }}
+        >
+          {deckRemainingCards}
+        </p>
+      </Grid>
+    </VStack>
+  );
+};

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

@@ -1,5 +1,5 @@
-import { Grid, HStack } from "styled-system/jsx";
-import { LAYOUT_HEIGHTS } from "../constants";
+import { Box, Grid, HStack } from "styled-system/jsx";
+import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
 import { DroppableGridItem } from "@/components/molecules/DropGridItem";
 import {
   horizontalListSortingStrategy,
@@ -9,9 +9,10 @@ import { GameStateActions } from "..";
 import { SortableItem } from "@/components/molecules/SortItem";
 import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
 import { CardImage } from "@/components/atoms/mock-cards/card";
+import { DecksTray } from "./Decks";
 
 export const GameFooter = (props: GameStateActions) => {
-  const gridIndex = 20;
+  const gridIndex = GRIDS.HAND;
   const cardsInHand = props.gridItems[gridIndex] ?? [];
 
   return (
@@ -23,9 +24,9 @@ export const GameFooter = (props: GameStateActions) => {
         overflowX: "auto",
       }}
     >
-      <Grid h="100%" gridTemplateColumns="100px 100px 1fr">
-        <p>Grave</p>
-        <p>Deck</p>
+      <Grid h="100%" gridTemplateColumns="repeat(2,150px) 1fr" gap={0}>
+        <Box bg="yellow">Grave</Box>
+        <DecksTray {...props} />
         <DroppableGridItem id={gridIndex.toString()} gridIndex={gridIndex}>
           <SortableContext
             id={`grid-${gridIndex}`}
@@ -34,7 +35,14 @@ export const GameFooter = (props: GameStateActions) => {
             )}
             strategy={horizontalListSortingStrategy}
           >
-            <HStack p={0} m={0} w="100%" h="100%" justifyContent="start">
+            <HStack
+              p={0}
+              m={0}
+              w="calc(100vw - 300px)"
+              h="100%"
+              justifyContent="start"
+              overflowX="auto"
+            >
               {props.gridItems?.[gridIndex]?.map((card, index) => (
                 <div
                   key={card.id}

src/components/organisms/GameBoard/constants.ts

@@ -7,3 +7,48 @@ const footer = `170px`;
 const body = `calc(100vh - ${nav} - ${footer})`;
 
 export const LAYOUT_HEIGHTS = { nav, footer, body };
+
+/**
+ * GRID ORDERING
+ *
+ * Contains the grid, auras, hand, deck, atlas deck, grave
+ * */
+
+export enum GRIDS {
+  GRID_1,
+  GRID_2,
+  GRID_3,
+  GRID_4,
+  GRID_5,
+  GRID_6,
+  GRID_7,
+  GRID_8,
+  GRID_9,
+  GRID_10,
+  GRID_11,
+  GRID_12,
+  GRID_13,
+  GRID_14,
+  GRID_15,
+  GRID_16,
+  GRID_17,
+  GRID_18,
+  GRID_19,
+  GRID_20,
+  AURA_1,
+  AURA_2,
+  AURA_3,
+  AURA_4,
+  AURA_5,
+  AURA_6,
+  AURA_7,
+  AURA_8,
+  AURA_9,
+  AURA_10,
+  AURA_11,
+  AURA_12,
+  HAND,
+  DECK,
+  ATLAS_DECK,
+  GRAVE,
+}