Merge pull request #4 from JollyGrin/feat/hand

Feat/hand
JollyGrin · Sep 8, 2024 · 5c466b8 · 5c466b8
2 parents b038ace + 7e9b9ca
commit 5c466b8
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 32 deletions.
diff --git a/src/components/atoms/mock-cards/atlas.tsx b/src/components/atoms/mock-cards/atlas.tsx
@@ -25,6 +25,7 @@ export const CardAtlas = ({
       position="relative"
       m="0.5rem auto"
       w="calc(100% - 1rem)"
+      maxW="221px"
       h="70px"
       bg="yellow"
       borderRadius="1rem"

diff --git a/src/components/atoms/mock-cards/card.tsx b/src/components/atoms/mock-cards/card.tsx
@@ -32,6 +32,7 @@ export const CardImage = ({
       position="relative"
       m="0.5rem auto"
       w="calc(100% - 1rem)"
+      maxW="221px"
       h="90px"
       bg="yellow"
       overflow={show ? "unset" : "clip"}

diff --git a/src/components/molecules/DropGridItem/index.tsx b/src/components/molecules/DropGridItem/index.tsx
@@ -13,6 +13,7 @@ export const DroppableGridItem = (props: {
 
   return (
     <div
+      data-testid={"droppable-" + props.id}
       ref={setNodeRef}
       className={css({
         h: "100%",

diff --git a/src/components/molecules/SortItem/index.tsx b/src/components/molecules/SortItem/index.tsx
@@ -27,23 +27,21 @@ export function SortableItem(props: {
     },
   });
 
-  // const style = {};
   const style = transform
     ? {
         transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
         transition,
       }
     : undefined;
 
-  // const style = {
-  //   transform: CSS.Transform.toString(transform),
-  //   transition,
-  // };
-
   return (
     <li
       ref={setNodeRef}
-      style={{ ...style, listStyle: "none", opacity: isDragging ? 0.5 : 1 }}
+      style={{
+        ...style,
+        listStyle: "none",
+        opacity: isDragging ? 0.5 : 1,
+      }}
       {...attributes}
       {...listeners}
     >

diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx
@@ -0,0 +1,62 @@
+import { Grid, HStack } from "styled-system/jsx";
+import { LAYOUT_HEIGHTS } from "../constants";
+import { DroppableGridItem } from "@/components/molecules/DropGridItem";
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+} from "@dnd-kit/sortable";
+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";
+
+export const GameFooter = (props: GameStateActions) => {
+  const gridIndex = 20;
+  const cardsInHand = props.gridItems[gridIndex] ?? [];
+  console.log({ cardsInHand });
+  return (
+    <div
+      style={{
+        height: LAYOUT_HEIGHTS.footer,
+        maxWidth: "100vw",
+        overflowX: "auto",
+      }}
+    >
+      <Grid h="100%" gridTemplateColumns="100px 100px 1fr">
+        <p>hjkl</p>
+        <p>hjkl</p>
+        <DroppableGridItem id={gridIndex.toString()}>
+          <SortableContext
+            id={`grid-${gridIndex}`}
+            items={cardsInHand?.map(
+              (_, cardIndex) => `card-${gridIndex}-${cardIndex}`,
+            )}
+            strategy={horizontalListSortingStrategy}
+          >
+            <HStack p={0} m={0} w="100%" h="100%" justifyContent="start">
+              {props.gridItems?.[gridIndex]?.map((card, index) => (
+                <div
+                  key={card.id}
+                  style={{
+                    width: "100%",
+                    maxWidth: "220px",
+                    minWidth: "180px",
+                  }}
+                >
+                  <SortableItem
+                    id={card.id}
+                    gridIndex={gridIndex}
+                    index={index}
+                  >
+                    {card?.type === "site" && <CardAtlas img={card?.img} />}
+                    {card?.type !== "site" && <CardImage img={card?.img} />}
+                  </SortableItem>
+                </div>
+              ))}
+            </HStack>
+          </SortableContext>
+        </DroppableGridItem>
+      </Grid>
+    </div>
+  );
+};
diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx
@@ -1,14 +1,24 @@
 import { ReactNode } from "react";
-import { Grid, HStack } from "styled-system/jsx";
+import { Grid } from "styled-system/jsx";
 import { grid } from "styled-system/patterns";
 import { LAYOUT_HEIGHTS } from "./constants";
+import { GameFooter } from "./Footer";
+import { GameStateActions } from ".";
 
 const { nav, body, footer } = LAYOUT_HEIGHTS;
 
-export const GameLayout = (props: { children: ReactNode }) => {
+export const GameLayout = (
+  props: GameStateActions & { children: ReactNode },
+) => {
   return (
     <Grid style={{ gridTemplateRows: `${nav} ${body} ${footer}` }} gap={0}>
-      <div style={{ background: "rgba(0,200,0,0.2)", padding: "1rem" }}>
+      <div
+        style={{
+          background: "rgba(0,200,0,0.2)",
+          padding: "1rem",
+          height: nav,
+        }}
+      >
         <p style={{ width: "fit-content", margin: "0 auto" }}>
           While hovering over a card, click{" "}
           <code
@@ -38,11 +48,7 @@ export const GameLayout = (props: { children: ReactNode }) => {
         {props.children}
       </div>
 
-      <TrayFooter />
+      <GameFooter {...props} />
     </Grid>
   );
 };
-
-const TrayFooter = () => {
-  return <HStack h={footer}>place hand here</HStack>;
-};
diff --git a/src/components/organisms/GameBoard/constants.ts b/src/components/organisms/GameBoard/constants.ts
@@ -2,8 +2,8 @@
  * LAYOUT
  * */
 
-const nav = `50px`;
-const footer = `100px`;
+const nav = `40px`;
+const footer = `170px`;
 const body = `calc(100vh - ${nav} - ${footer})`;
 
 export const LAYOUT_HEIGHTS = { nav, footer, body };
diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
@@ -11,13 +11,11 @@ import { Box } from "styled-system/jsx";
 
 type GameCard = SorceryCard & { id: string }; // for game position
 type Cards = GameCard[][];
-export const GameBoard = ({
-  gridItems,
-  setGridItems,
-}: {
-  setGridItems(state: Cards): void;
+export type GameStateActions = {
   gridItems: Cards;
-}) => {
+  setGridItems(state: Cards): void;
+};
+export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => {
   const { handleDragEnd, handleDragStart, activeId, activeCard } =
     useHandleDrag({
       gridItems,
@@ -30,8 +28,8 @@ export const GameBoard = ({
       onDragEnd={handleDragEnd}
       collisionDetection={closestCorners}
     >
-      <GameLayout>
-        {gridItems?.map((cards, gridIndex) => (
+      <GameLayout {...{ gridItems, setGridItems }}>
+        {gridItems?.slice(0, 20)?.map((cards, gridIndex) => (
           <DroppableGridItem
             key={"grid-" + gridIndex}
             id={gridIndex.toString()}

diff --git a/src/components/organisms/GameBoard/useHandleDrag.ts b/src/components/organisms/GameBoard/useHandleDrag.ts
@@ -21,6 +21,7 @@ export const useHandleDrag = ({
   function handleDragEnd(event: DragEndEvent) {
     setActive(null);
     const { active, over } = event;
+    console.log({ active, over });
 
     if (over?.id === active.id) return; // if self, do nothing
 
@@ -64,13 +65,6 @@ export const useHandleDrag = ({
     }
   }
 
-  console.log({
-    cardsInCell: gridItems[active?.data?.current?.gridIndex],
-    active: active?.id,
-    data: active?.data?.current,
-    find: gridItems.flat().find((card) => card?.id === active?.id),
-  });
-
   return {
     handleDragEnd,
     handleDragStart,

diff --git a/src/pages/game.tsx b/src/pages/game.tsx
@@ -29,6 +29,18 @@ export default function GamePage() {
         type: "site",
       } as GameCard,
     ],
+    [
+      {
+        id: "card-20-0",
+        img: "atlas_cloud_city.webp",
+        type: "site",
+      } as GameCard,
+      {
+        id: "card-20-1",
+        img: "headless_haunt.webp",
+        type: "minion",
+      },
+    ],
   ]);
 
   return <GameBoard gridItems={gridItems} setGridItems={setGridItems} />;