Merge pull request #47 from JollyGrin/refactor/rename-to-crack

Refactor/rename to crack
JollyGrin · Oct 5, 2024 · cec7439 · cec7439
2 parents 321b64d + 025da15
commit cec7439
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 72 deletions.
diff --git a/src/components/organisms/Crack/Ribbon/index.tsx b/src/components/organisms/Crack/Ribbon/index.tsx
@@ -0,0 +1,54 @@
+import { Box, Grid, HStack } from "styled-system/jsx";
+import { Button } from "@/components/ui/button";
+import { Tabs } from "@/components/atoms/Tabs";
+
+import { useCardFullData } from "@/utils/api/cardData/useCardData";
+import { DraftProps } from "@/components/organisms/Draft/types";
+import { generateBoosterPack } from "@/components/organisms/Draft/helpers";
+
+export const Ribbon = (
+  props: DraftProps & {
+    activeViewIndex: number;
+    setActiveView(index: number): void;
+  },
+) => {
+  const { data: cardData = [] } = useCardFullData();
+
+  function crackBooster() {
+    const newBooster = generateBoosterPack({
+      cardData,
+      expansionSlug: "bet",
+    });
+    const { finishedPacks } = props.player;
+    const isEmpty = finishedPacks.length === 0;
+    props.setPlayerData({
+      ...props.player,
+      finishedPacks: isEmpty ? [newBooster] : [...finishedPacks, newBooster],
+    });
+    props.setActiveView(props.player.finishedPacks.length);
+  }
+
+  const packTabs =
+    props.player?.finishedPacks?.length > 0
+      ? props.player?.finishedPacks?.map((_, index) => `Pack ${index + 1}`)
+      : [];
+
+  return (
+    <Box p="1rem" bg="brown">
+      <Grid gridTemplateColumns="1fr 7fr">
+        <Button minW="9rem" onClick={crackBooster}>
+          Crack a Pack
+        </Button>
+        <HStack maxW="70vw" overflowX="auto" overflowY="clip">
+          {props.player.finishedPacks.length > 0 && (
+            <Tabs
+              tabs={packTabs}
+              onSelect={props.setActiveView}
+              selectedIndex={props.activeViewIndex}
+            />
+          )}
+        </HStack>
+      </Grid>
+    </Box>
+  );
+};
diff --git a/...omponents/organisms/Draft/Stats/index.tsx → ...omponents/organisms/Crack/Stats/index.tsx b/...omponents/organisms/Draft/Stats/index.tsx → ...omponents/organisms/Crack/Stats/index.tsx
@@ -1,12 +1,12 @@
 import { Box, Flex, HStack } from "styled-system/jsx";
-import { DraftProps } from "../types";
+import { DraftProps } from "@/components/organisms/Draft/types";
 import { CardDTO } from "@/utils/api/cardData/CardDataType";
 
 function filterRarity(rarity: CardDTO["guardian"]["rarity"]) {
   return (card: CardDTO) => card?.guardian?.rarity === rarity;
 }
 
-export const DraftStats = (props: DraftProps) => {
+export const CrackStats = (props: DraftProps) => {
   if (props.player.finishedPacks.length === 0) return <div />;
   const flat = props.player.finishedPacks.flat();
 

diff --git a/src/components/organisms/Crack/index.tsx b/src/components/organisms/Crack/index.tsx
@@ -0,0 +1,54 @@
+import { DraftCard } from "@/components/organisms/Draft/Card";
+import { Grid } from "styled-system/jsx";
+import { DraftPlayerData } from "@/components/organisms/Draft/types";
+import { Ribbon } from "@/components/organisms/Crack/Ribbon";
+import { useMemo, useState } from "react";
+import { CrackStats } from "@/components/organisms/Crack/Stats";
+
+const hTop = "7vh";
+const hTabs = "5vh";
+const hCards = "88vh";
+export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards };
+
+export const CrackBoard = (props: {
+  player: DraftPlayerData;
+  setPlayerData(data: DraftPlayerData): void;
+}) => {
+  const [activeView, setActiveView] = useState(0);
+  const cardView = useMemo(() => {
+    return props.player.finishedPacks?.[activeView];
+  }, [activeView, props.player.finishedPacks.length]);
+
+  return (
+    <Grid
+      h="100vh"
+      bg="gray.300"
+      alignItems="center"
+      gridTemplateRows={`${hTop} ${hTabs} ${hCards}`}
+      gap={0}
+    >
+      <CrackStats {...props} />
+      <Ribbon
+        {...props}
+        activeViewIndex={activeView}
+        setActiveView={setActiveView}
+      />
+      <Grid
+        p="3rem 4rem"
+        h={hCards}
+        overflowY="auto"
+        overflowX="clip"
+        gridTemplateColumns="repeat(auto-fit, minmax(16.4rem, 1fr))"
+        position="relative"
+        bg="gray.500"
+      >
+        {(!cardView || cardView?.length === 0) && (
+          <p>No packs... yet! Click Crack a Pack!</p>
+        )}
+        {cardView?.map((card, index) => (
+          <DraftCard key={"draftcard" + card?.name + index} {...card} />
+        ))}
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/src/components/organisms/Draft/Ribbon/index.tsx b/src/components/organisms/Draft/Ribbon/index.tsx
@@ -1,54 +1,9 @@
-import { Box, Grid, HStack } from "styled-system/jsx";
-import { Button } from "@/components/ui/button";
-import { Tabs } from "@/components/atoms/Tabs";
-
-import { useCardFullData } from "@/utils/api/cardData/useCardData";
-import { DraftProps } from "../types";
-import { generateBoosterPack } from "../helpers";
-
-export const Ribbon = (
-  props: DraftProps & {
-    activeViewIndex: number;
-    setActiveView(index: number): void;
-  },
-) => {
-  const { data: cardData = [] } = useCardFullData();
-
-  function crackBooster() {
-    const newBooster = generateBoosterPack({
-      cardData,
-      expansionSlug: "bet",
-    });
-    const { finishedPacks } = props.player;
-    const isEmpty = finishedPacks.length === 0;
-    props.setPlayerData({
-      ...props.player,
-      finishedPacks: isEmpty ? [newBooster] : [...finishedPacks, newBooster],
-    });
-    props.setActiveView(props.player.finishedPacks.length);
-  }
-
-  const packTabs =
-    props.player?.finishedPacks?.length > 0
-      ? props.player?.finishedPacks?.map((_, index) => `Pack ${index + 1}`)
-      : [];
+import { Box } from "styled-system/jsx";
 
+export const DraftRibbon = () => {
   return (
-    <Box p="1rem" bg="brown">
-      <Grid gridTemplateColumns="1fr 7fr">
-        <Button minW="9rem" onClick={crackBooster}>
-          Crack a Pack
-        </Button>
-        <HStack maxW="70vw" overflowX="auto" overflowY="clip">
-          {props.player.finishedPacks.length > 0 && (
-            <Tabs
-              tabs={packTabs}
-              onSelect={props.setActiveView}
-              selectedIndex={props.activeViewIndex}
-            />
-          )}
-        </HStack>
-      </Grid>
+    <Box bg="brown" h="100%">
+      <p>ribbon</p>
     </Box>
   );
 };
diff --git a/src/components/organisms/Draft/Tray/index.tsx b/src/components/organisms/Draft/Tray/index.tsx
@@ -0,0 +1,18 @@
+import { DraftPlayerData } from "../types";
+
+export const DraftTray = (props: {
+  players: Record<string, DraftPlayerData>;
+}) => {
+  const players = Object.entries(props.players);
+  return (
+    <div data-testid="stats">
+      {players?.map(([key, value]) => {
+        return (
+          <p key={key}>
+            {key}:{value.joinedSessionTimestamp}
+          </p>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx
@@ -1,16 +1,17 @@
 import { DraftCard } from "@/components/organisms/Draft/Card";
 import { Grid } from "styled-system/jsx";
 import { DraftPlayerData } from "./types";
-import { Ribbon } from "./Ribbon";
 import { useMemo, useState } from "react";
-import { DraftStats } from "./Stats";
+import { DraftRibbon } from "./Ribbon";
+import { DraftTray } from "./Tray";
 
 const hTop = "7vh";
 const hTabs = "5vh";
 const hCards = "88vh";
 export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards };
 
 export const DraftBoard = (props: {
+  players: Record<string, DraftPlayerData>;
   player: DraftPlayerData;
   setPlayerData(data: DraftPlayerData): void;
 }) => {
@@ -27,12 +28,8 @@ export const DraftBoard = (props: {
       gridTemplateRows={`${hTop} ${hTabs} ${hCards}`}
       gap={0}
     >
-      <DraftStats {...props} />
-      <Ribbon
-        {...props}
-        activeViewIndex={activeView}
-        setActiveView={setActiveView}
-      />
+      <DraftTray players={props.players} />
+      <DraftRibbon />
       <Grid
         p="3rem 4rem"
         h={hCards}

diff --git a/src/components/organisms/Draft/types.ts b/src/components/organisms/Draft/types.ts
@@ -15,6 +15,25 @@ export type DraftPlayerData = {
   deck?: CardDTO[]; // after draft, the deck you construct from selectedCards
 };
 
+export const initPlayer: DraftPlayerData = {
+  joinedSessionTimestamp: 0,
+  selectedCards: [],
+  activePack: [],
+  pendingPacks: [],
+  finishedPacks: [],
+};
+
+export const initPlayers: Record<string, DraftPlayerData> = [1, 2, 3, 4].reduce(
+  (acc, player) => {
+    acc[`p${player}`] = {
+      ...initPlayer,
+      joinedSessionTimestamp: player,
+    };
+    return acc;
+  },
+  {} as { [key: string]: DraftPlayerData },
+);
+
 /**
  * Your individual state and setter to update it
  * */

diff --git a/src/pages/crack.tsx b/src/pages/crack.tsx
@@ -0,0 +1,26 @@
+import { CrackBoard } from "@/components/organisms/Crack";
+import { DraftPlayerData } from "@/components/organisms/Draft/types";
+import { useState } from "react";
+
+export default function CrackPacksPage() {
+  const [players, setPlayers] = useState<Record<string, DraftPlayerData>>({
+    p1: {
+      joinedSessionTimestamp: 1,
+      selectedCards: [],
+      activePack: [],
+      pendingPacks: [[]],
+      finishedPacks: [],
+    },
+  });
+
+  function setPlayer(data: DraftPlayerData) {
+    return setPlayers((prev) => ({
+      ...prev,
+      p1: {
+        ...data,
+      },
+    }));
+  }
+
+  return <CrackBoard player={players?.p1} setPlayerData={setPlayer} />;
+}
diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx
@@ -1,17 +1,13 @@
 import { DraftBoard } from "@/components/organisms/Draft";
-import { DraftPlayerData } from "@/components/organisms/Draft/types";
+import {
+  DraftPlayerData,
+  initPlayers,
+} from "@/components/organisms/Draft/types";
 import { useState } from "react";
 
-export default function DraftPage() {
-  const [players, setPlayers] = useState<Record<string, DraftPlayerData>>({
-    p1: {
-      joinedSessionTimestamp: 1,
-      selectedCards: [],
-      activePack: [],
-      pendingPacks: [[]],
-      finishedPacks: [],
-    },
-  });
+export default function DraftSoloPage() {
+  const [players, setPlayers] =
+    useState<Record<string, DraftPlayerData>>(initPlayers);
 
   function setPlayer(data: DraftPlayerData) {
     return setPlayers((prev) => ({
@@ -22,5 +18,11 @@ export default function DraftPage() {
     }));
   }
 
-  return <DraftBoard player={players?.p1} setPlayerData={setPlayer} />;
+  return (
+    <DraftBoard
+      players={players}
+      player={players?.p1}
+      setPlayerData={setPlayer}
+    />
+  );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -69,7 +69,7 @@ export default function Home() {
         </Grid>
         <Box bg="plum" w="fit-content" p="1rem" borderRadius="1rem">
           <p>Draft Mode in development!</p>
-          <Link href="/draft">
+          <Link href="/crack">
             <p style={{ textDecoration: "underline" }}>
               In the meantime, crack some packs!
             </p>