Merge pull request #41 from JollyGrin/feat/add-default-precons

feat/load precon decks
JollyGrin · Sep 29, 2024 · 90444b2 · 90444b2
2 parents 741545a + 4ec1799
commit 90444b2
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 8 deletions.
diff --git a/src/components/molecules/LoadDeck/DefaultDecks.tsx b/src/components/molecules/LoadDeck/DefaultDecks.tsx
@@ -0,0 +1,82 @@
+import { Button } from "@/components/ui/button";
+import { PlayerData } from "@/types/card";
+import { Divider, Grid } from "styled-system/jsx";
+
+export const DefaultDecks = (props: { setDeckId(id: string): void }) => {
+  return (
+    <>
+      <Divider mt="0.5rem" mb="0.25rem" opacity={0.1} />
+      <p>Load a precon deck</p>
+      <Grid gridTemplateColumns="repeat(4,1fr)" mt="1rem">
+        {precons.map((precon) => (
+          <PreconButton
+            key={precon.deckId}
+            setDeckId={() => props.setDeckId(precon.deckId)}
+            {...precon}
+          />
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+type Precon = {
+  resource: keyof Pick<PlayerData, "wind" | "earth" | "fire" | "water">;
+  name: string;
+  deckId: string;
+};
+const precons: Precon[] = [
+  {
+    deckId: "clso3lngx007lhb600v843gd7",
+    resource: "earth",
+    name: "alpha",
+  },
+  {
+    deckId: "clso3l8ph005ihb60cxkus6mh",
+    resource: "fire",
+    name: "alpha",
+  },
+  {
+    deckId: "clso3lffd006jhb60hiwpltyc",
+    resource: "water",
+    name: "alpha",
+  },
+  {
+    deckId: "clso3l1mg001q2w08qv1nexky",
+    resource: "wind",
+    name: "alpha",
+  },
+  {
+    deckId: "clczbmbxb008hv5uggpws66fe",
+    resource: "earth",
+    name: "beta",
+  },
+  {
+    deckId: "clczbmbxb0085v5ug7eyxn2dk",
+    resource: "fire",
+    name: "beta",
+  },
+  {
+    deckId: "clczbmbxb008ev5ugiovmxcw1",
+    resource: "water",
+    name: "beta",
+  },
+  {
+    deckId: "clczbmbxb008av5ugml35rdwt",
+    resource: "wind",
+    name: "beta",
+  },
+];
+
+const PreconButton = (props: { setDeckId(): void } & Precon) => {
+  return (
+    <Button onClick={props.setDeckId}>
+      <img
+        src={`/icon/${props.resource}.webp`}
+        alt="resource icon"
+        style={{ height: "1rem", width: "1rem" }}
+      />
+      {props.name}
+    </Button>
+  );
+};
diff --git a/src/components/molecules/LoadDeck/index.tsx b/src/components/molecules/LoadDeck/index.tsx
@@ -15,6 +15,7 @@ import { Tabs } from "@/components/atoms/Tabs";
 import { UseQueryResult } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import { getDeckQuery } from "@/components/organisms/GameBoard/useDeckQuery";
+import { DefaultDecks } from "./DefaultDecks";
 
 export const LoadDeck = (
   props: GameStateActions & { children?: ReactNode; playerName: string },
@@ -119,14 +120,8 @@ const InputLoader = ({
       />
       {deckId === "" && (
         <>
-          <p>copy the deckid from {provider}</p>
-          <button
-            className={button()}
-            style={{ marginTop: "1rem" }}
-            onClick={() => setDeckId("clytk3k08009d3dya1cu989e3")}
-          >
-            Load Default Deck
-          </button>
+          <p style={{ margin: "0.25rem 0" }}>copy the deckid from {provider}</p>
+          <DefaultDecks {...{ setDeckId }} />
         </>
       )}
       {deckId !== "" && (