Merge pull request #46 from JollyGrin/feat/draft-mode

Feat/draft mode

README.md

@@ -32,6 +32,10 @@ Find instructions if you wish to setup your own game server.
 - [x] right click modal, taps card
 
 
+## Missing Cards
+- [ ] [Winter river](https://curiosa.io/cards/winter_river)
+
+
 
 ## Feedback
 - [ ] 

notes/2024-10-04.md

@@ -0,0 +1,74 @@
+
+#### 00:52
+
+# Beta Box Pull Rate
+Need to find some statistics on box openings to get booster pack statistics
+
+
+# beta
+https://www.youtube.com/watch?v=fcmxdMPGLuA
+
+1:14
+3x exc 
+1x elite
+10x ord
+ord site
+
+1:59
+exc site
+2x exc
+elite
+10x ord
+sorcerer sparkcaster
+
+2:22
+exc
+exc
+exc
+elite
+10x ord
+ord site
+
+2:44
+exc
+exc
+exc site
+sorcerer enchantress
+10x ord
+ord site
+
+3:18
+exc
+exc
+exc
+elite
+ord site
+
+3:42
+exc
+exc
+exc site
+elite
+10x ord
+ord site
+
+4:02
+exc
+exc
+exc site
+unique
+
+
+| Timestamp | Exceptional | Elite | Ordinary | Unique | Site (Rarity)          | Special Card           |
+|-----------|-------------|-------|----------|--------|------------------------|------------------------|
+| 1:14      | 3           | 1     | 10       | -      | Ordinary                | -                      |
+| 1:59      | 3           | 1     | 10       | -      | Exceptional             | Sorcerer Sparkcaster   |
+| 2:22      | 3           | 1     | 10       | -      | Ordinary                | -                      |
+| 2:44      | 3           | -     | 10       | -      | Exceptional, Ordinary  | Sorcerer Enchantress   |
+| 3:18      | 3           | 1     | 10        | -      | Ordinary             | -                      |
+| 3:42      | 2           | 1     | 10       | -      | Exceptional, Ordinary | -                      |
+| 4:02      | 3           | -     | 10        | 1      | Exceptional          | -                      |
+| 4:27      | 3           | -     | 10        | 1      | Unique, Exceptional, Ordinary | -                      |
+| 4:52      | 3           | 1     | 10        | -      | Exceptional, Exceptional, Ordinary             | -                      |
+| 5:18      | 3           | 1     | 10        | -      | (Foil)Ord, Ordinary             | -                      |
+| 0:00      | -           | -     | 10        | -      | Ordinary             | -                      |

package.json

@@ -30,6 +30,7 @@
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "react-parallax-tilt": "^1.7.245",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

src/components/atoms/Tabs/index.tsx

@@ -8,20 +8,37 @@ import { ReactNode } from "react";
 
 type Props = {
   tabs: ReactNode[];
-  content: ReactNode[];
+  content?: ReactNode[];
+  selectedIndex?: number;
+  onSelect?(index: number): void;
 };
 
-export const Tabs = ({ tabs, content }: Props) => {
+export const Tabs = ({
+  tabs,
+  content,
+  selectedIndex,
+  onSelect = (index: number) => {
+    console.info(index + " selected");
+  },
+}: Props) => {
+  const value =
+    selectedIndex !== undefined ? selectedIndex.toString() : undefined;
+  const options = value !== undefined ? { value } : {};
+
   return (
-    <TabsWrapper defaultValue="0">
+    <TabsWrapper defaultValue="0" {...options}>
       <TabsList>
         {tabs.map((tab, index) => (
-          <TabsTrigger key={index + "trigger"} value={index.toString()}>
+          <TabsTrigger
+            key={index + "trigger"}
+            value={index.toString()}
+            onClick={() => onSelect(index)}
+          >
             {tab}
           </TabsTrigger>
         ))}
       </TabsList>
-      {content.map((content, index) => (
+      {content?.map((content, index) => (
         <TabsContent key={"content" + index} value={index.toString()}>
           {content}
         </TabsContent>

src/components/organisms/Draft/Card/index.tsx

@@ -0,0 +1,63 @@
+import { CardImage } from "@/components/atoms/card-view/card";
+import { Box, Flex } from "styled-system/jsx";
+import Tilt, { GlareProps } from "react-parallax-tilt";
+import { useState } from "react";
+import { CardDTO } from "@/utils/api/cardData/CardDataType";
+
+export const DraftCard = (cardDTO: CardDTO) => {
+  const [isOver, setIsOver] = useState(false);
+  function over() {
+    setIsOver(true);
+  }
+  function out() {
+    setIsOver(false);
+  }
+
+  const rarityColor: Record<CardDTO["guardian"]["rarity"], string> = {
+    Ordinary: "#fff",
+    Exceptional: "rgba(0,100,150,1)",
+    Elite: "rgba(150,0,250,1)",
+    Unique: "rgba(230,180,50,1)",
+  };
+
+  return (
+    <Box
+      data-testid={"draftcard-" + cardDTO.slug}
+      transition="all 0.25s ease"
+      style={{
+        zIndex: isOver ? 10000 : 1,
+        transform:
+          isOver && cardDTO.guardian.type === "Site" ? " rotate(90deg)" : "",
+        filter: isOver ? `saturate(1.5)` : "saturate(1)",
+      }}
+    >
+      <Tilt
+        {...tiltOptions}
+        glareColor={rarityColor[cardDTO.guardian.rarity]}
+        scale={isOver ? 1.2 : 1}
+      >
+        <Flex
+          justifyContent="center"
+          w="100%"
+          h="23.5rem"
+          // bg="plum"
+          onMouseOver={over}
+          onMouseOut={out}
+          alignItems="center"
+        >
+          <CardImage img={cardDTO.slug} />
+        </Flex>
+      </Tilt>
+    </Box>
+  );
+};
+
+const glareOptions: GlareProps = {
+  glareEnable: true,
+  glareColor: "lightblue",
+  glareMaxOpacity: 0.25,
+  glarePosition: "all",
+};
+const tiltOptions = {
+  ...glareOptions,
+};

src/components/organisms/Draft/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 "../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}`)
+      : [];
+
+  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>
+  );
+};

src/components/organisms/Draft/Stats/index.tsx

@@ -0,0 +1,47 @@
+import { Box, Flex, HStack } from "styled-system/jsx";
+import { DraftProps } from "../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) => {
+  if (props.player.finishedPacks.length === 0) return <div />;
+  const flat = props.player.finishedPacks.flat();
+
+  const exceptionals = flat.filter(filterRarity("Exceptional"));
+  const elites = flat.filter(filterRarity("Elite"));
+  const uniques = flat.filter(filterRarity("Unique"));
+
+  const sites = flat.filter((card) => card?.guardian?.type === "Site");
+  const avatars = flat.filter((card) => card?.guardian?.type === "Avatar");
+
+  return (
+    <HStack justifyContent="space-between">
+      <Flex p="0 1.25rem" gap="2rem" fontSize={{ base: "0.85rem", md: "1rem" }}>
+        <Flex
+          alignItems="start"
+          direction={{ base: "row", md: "column" }}
+          gap={{ base: 2, md: 0 }}
+        >
+          <p>Exceptionals: {exceptionals.length.toString()}</p>
+          <p>Elites: {elites.length.toString()}</p>
+          <p>Uniques: {uniques.length.toString()}</p>
+        </Flex>
+        <Flex
+          alignItems="start"
+          direction={{ base: "row", md: "column" }}
+          gap={{ base: 2, md: 0 }}
+        >
+          <p>Total Cards: {flat.length.toString()}</p>
+          <p>Sites: {sites.length.toString()}</p>
+          <p>Avatars: {avatars.length.toString()}</p>
+        </Flex>
+      </Flex>
+      <Box display={{ base: "none", lg: "block" }} p="1rem" mx="1rem" bg="plum">
+        <p>Online draft currently in development!</p>
+      </Box>
+    </HStack>
+  );
+};