From 6cb331471378751eeefdb9f932a0b1ef6a8b6eed Mon Sep 17 00:00:00 2001 From: jollygrin Date: Fri, 4 Oct 2024 16:58:29 +0200 Subject: [PATCH 01/29] setup --- src/components/organisms/Draft/Card/index.tsx | 9 +++++++++ src/pages/draft/index.tsx | 10 ++++++++++ 2 files changed, 19 insertions(+) create mode 100644 src/components/organisms/Draft/Card/index.tsx create mode 100644 src/pages/draft/index.tsx diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx new file mode 100644 index 0000000..2dfc468 --- /dev/null +++ b/src/components/organisms/Draft/Card/index.tsx @@ -0,0 +1,9 @@ +import { Box } from "styled-system/jsx"; + +export const DraftCard = () => { + return ( + + Hi + + ); +}; diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx new file mode 100644 index 0000000..9dac1ed --- /dev/null +++ b/src/pages/draft/index.tsx @@ -0,0 +1,10 @@ +import { DraftCard } from "@/components/organisms/Draft/Card"; +import { Grid } from "styled-system/jsx"; + +export default function DraftPage() { + return ( + + + + ); +} From 8f4365e3bbb74ee23478c185b7f9e0f81c547c48 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Fri, 4 Oct 2024 20:45:33 +0200 Subject: [PATCH 02/29] setup grid --- src/components/organisms/Draft/index.tsx | 42 ++++++++++++++++++++++++ src/components/organisms/Draft/types.ts | 8 +++++ 2 files changed, 50 insertions(+) create mode 100644 src/components/organisms/Draft/index.tsx create mode 100644 src/components/organisms/Draft/types.ts diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx new file mode 100644 index 0000000..02a1d38 --- /dev/null +++ b/src/components/organisms/Draft/index.tsx @@ -0,0 +1,42 @@ +import { DraftCard } from "@/components/organisms/Draft/Card"; +import { Tabs } from "@/components/atoms/Tabs"; +import { Box, Grid, HStack } from "styled-system/jsx"; +import { Button } from "@/components/ui/button"; + +const hTop = "25vh"; +const hTabs = "5vh"; +const hCards = "70vh"; +export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards }; + +export const DraftBoard = () => { + return ( + + hi + + + + + + + + {Array.from({ length: 15 }).map((_, index) => ( + + ))} + + + ); +}; diff --git a/src/components/organisms/Draft/types.ts b/src/components/organisms/Draft/types.ts new file mode 100644 index 0000000..5550db9 --- /dev/null +++ b/src/components/organisms/Draft/types.ts @@ -0,0 +1,8 @@ +export type DraftPlayer = { + joinedSessionTimestamp: number; // time of joining the session. Used for ordering + actions: {}; + cards: { + selected: any[]; + packs: any[][]; + }; +}; From dfb27bd8cfbd03295b8aefb340f45016fe2067a5 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Fri, 4 Oct 2024 22:54:43 +0200 Subject: [PATCH 03/29] install tilt --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/package.json b/package.json index 07dfca2..7cf2ff5 100644 --- a/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 49bb628..4d7d2d0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,9 @@ importers: react-icons: specifier: ^5.3.0 version: 5.3.0(react@18.3.1) + react-parallax-tilt: + specifier: ^1.7.245 + version: 1.7.245(react-dom@18.3.1(react@18.3.1))(react@18.3.1) uuid: specifier: ^10.0.0 version: 10.0.0 @@ -2323,6 +2326,12 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-parallax-tilt@1.7.245: + resolution: {integrity: sha512-WTyACpCvZgfM2FyN3Yf66stxe+B5L0E6mPoimCOzrBQykJFDE3ojwlhleuEqxFZ44Y289W2PR0gCDapX+N9/Aw==} + peerDependencies: + react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-remove-scroll-bar@2.3.6: resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} engines: {node: '>=10'} @@ -5156,6 +5165,11 @@ snapshots: react-is@16.13.1: {} + react-parallax-tilt@1.7.245(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll-bar@2.3.6(@types/react@18.3.5)(react@18.3.1): dependencies: react: 18.3.1 From 523d4bc359daa3e535f1b62156124ed07fa5a428 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Fri, 4 Oct 2024 22:54:47 +0200 Subject: [PATCH 04/29] prepare --- src/components/atoms/Tabs/index.tsx | 17 +++++++++++++---- src/pages/draft/index.tsx | 7 ++----- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/Tabs/index.tsx b/src/components/atoms/Tabs/index.tsx index c51718e..a9d2740 100644 --- a/src/components/atoms/Tabs/index.tsx +++ b/src/components/atoms/Tabs/index.tsx @@ -8,20 +8,29 @@ import { ReactNode } from "react"; type Props = { tabs: ReactNode[]; - content: ReactNode[]; + content?: ReactNode[]; + onSelect?(index: number): void; }; -export const Tabs = ({ tabs, content }: Props) => { +export const Tabs = ({ + tabs, + content, + onSelect = (_: number) => {}, +}: Props) => { return ( {tabs.map((tab, index) => ( - + onSelect(index)} + > {tab} ))} - {content.map((content, index) => ( + {content?.map((content, index) => ( {content} diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index 9dac1ed..fb4c0da 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -1,10 +1,7 @@ +import { DraftBoard } from "@/components/organisms/Draft"; import { DraftCard } from "@/components/organisms/Draft/Card"; import { Grid } from "styled-system/jsx"; export default function DraftPage() { - return ( - - - - ); + return ; } From 57d8b8f4fcbc255dadcabebc968a43aba84ba36a Mon Sep 17 00:00:00 2001 From: jollygrin Date: Fri, 4 Oct 2024 23:10:06 +0200 Subject: [PATCH 05/29] setup grid --- src/components/organisms/Draft/Card/index.tsx | 9 +++++---- src/components/organisms/Draft/index.tsx | 3 +-- src/pages/draft/index.tsx | 2 -- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx index 2dfc468..e6c62c5 100644 --- a/src/components/organisms/Draft/Card/index.tsx +++ b/src/components/organisms/Draft/Card/index.tsx @@ -1,9 +1,10 @@ -import { Box } from "styled-system/jsx"; +import { CardImage } from "@/components/atoms/card-view/card"; +import { Box, Flex, Grid } from "styled-system/jsx"; export const DraftCard = () => { return ( - - Hi - + + + ); }; diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index 02a1d38..6a66ce3 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -28,9 +28,8 @@ export const DraftBoard = () => { p="4rem 0.5rem" h={hCards} overflow="auto" - gridTemplateColumns="repeat(auto-fit, minmax(250px, 1fr))" + gridTemplateColumns="repeat(auto-fit, minmax(16.4rem, 1fr))" position="relative" - gap="1rem" bg="gray.500" > {Array.from({ length: 15 }).map((_, index) => ( diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index fb4c0da..49f72ae 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -1,6 +1,4 @@ import { DraftBoard } from "@/components/organisms/Draft"; -import { DraftCard } from "@/components/organisms/Draft/Card"; -import { Grid } from "styled-system/jsx"; export default function DraftPage() { return ; From 6fcd25726824372f715b74e0c36a5e6d828688d8 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Fri, 4 Oct 2024 23:25:14 +0200 Subject: [PATCH 06/29] add saturation --- src/components/organisms/Draft/Card/index.tsx | 44 +++++++++++++++++-- src/components/organisms/Draft/index.tsx | 7 +-- 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx index e6c62c5..7f31721 100644 --- a/src/components/organisms/Draft/Card/index.tsx +++ b/src/components/organisms/Draft/Card/index.tsx @@ -1,10 +1,48 @@ import { CardImage } from "@/components/atoms/card-view/card"; import { Box, Flex, Grid } from "styled-system/jsx"; +import Tilt, { GlareProps } from "react-parallax-tilt"; +import { useState } from "react"; export const DraftCard = () => { + const [isOver, setIsOver] = useState(false); + function over() { + setIsOver(true); + } + function out() { + setIsOver(false); + } + return ( - - - + + + + + + + ); }; + +const glareOptions: GlareProps = { + glareEnable: true, + glareColor: "lightblue", + glareMaxOpacity: 0.25, + glarePosition: "all", +}; +const tiltOptions = { + ...glareOptions, +}; diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index 6a66ce3..6890f4f 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -3,9 +3,9 @@ import { Tabs } from "@/components/atoms/Tabs"; import { Box, Grid, HStack } from "styled-system/jsx"; import { Button } from "@/components/ui/button"; -const hTop = "25vh"; +const hTop = "20vh"; const hTabs = "5vh"; -const hCards = "70vh"; +const hCards = "75vh"; export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards }; export const DraftBoard = () => { @@ -27,7 +27,8 @@ export const DraftBoard = () => { Date: Fri, 4 Oct 2024 23:55:26 +0200 Subject: [PATCH 07/29] setup types --- src/pages/draft/index.tsx | 44 +++++++++++++++++++++ src/utils/api/cardData/CardDataType.ts | 55 ++++++++++++++++++++++++++ src/utils/api/cardData/api.ts | 10 +++++ src/utils/api/cardData/useCardData.ts | 10 ++++- 4 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 src/utils/api/cardData/CardDataType.ts diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index 49f72ae..388a9ee 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -1,5 +1,49 @@ import { DraftBoard } from "@/components/organisms/Draft"; +import { CardDTO } from "@/utils/api/cardData/CardDataType"; +import { useCardFullData } from "@/utils/api/cardData/useCardData"; +import { useState } from "react"; + +type BoosterPack = { + uuid: string; + playerName: string; + cards: CardDTO[]; +}; +type DraftPlayerData = { + selectedCards: CardDTO[]; + activePack: CardDTO[]; + finishedPacks: CardDTO[][]; +}; export default function DraftPage() { + const [players, setPlayers] = useState>({ + p1: { + selectedCards: [], + activePack: [], + finishedPacks: [[], [], []], + }, + }); + + const { data: cardData = [] } = useCardFullData(); + function generateNewBooster() { + const arr = [...cardData]; + const count = 15; + let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array + for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements + } + return shuffled.slice(-count); // Return the last `count` items + } + + function setPlayer(data: (typeof players)[number]) { + return setPlayers((prev) => ({ + ...prev, + p1: { + ...prev["p1"], + data, + }, + })); + } + return ; } diff --git a/src/utils/api/cardData/CardDataType.ts b/src/utils/api/cardData/CardDataType.ts new file mode 100644 index 0000000..f529fa8 --- /dev/null +++ b/src/utils/api/cardData/CardDataType.ts @@ -0,0 +1,55 @@ +type Thresholds = { + air: number; + earth: number; + fire: number; + water: number; +}; + +type Guardian = { + rarity: string; + type: string; + typeText: string; + subType: string; + rulesText: string; + cost: number; + attack: number; + defence: number; + life: number | null; + thresholds: Thresholds; +}; + +type Variant = { + finish: string; + product: string; + artist: string; + flavorText: string; +}; + +type SetMetadata = { + rarity: string; + type: string; + typeText: string; + subType: string; + rulesText: string; + cost: number; + attack: number; + defence: number; + life: number | null; + thresholds: Thresholds; +}; + +type CardSet = { + name: string; + slug: string; + releasedAt: string; + type: string; + variants: Variant[]; + metadata: SetMetadata; +}; + +export type CardDTO = { + name: string; + slug: string; + guardian: Guardian; + sets: CardSet[]; +}; diff --git a/src/utils/api/cardData/api.ts b/src/utils/api/cardData/api.ts index 40f3f1f..6dc1d65 100644 --- a/src/utils/api/cardData/api.ts +++ b/src/utils/api/cardData/api.ts @@ -1,4 +1,5 @@ import axios from "axios"; +import { CardDTO } from "./CardDataType"; type CardDataMinimized = { name: string; @@ -45,3 +46,12 @@ export const TOKEN_RUBBLE: CardDataMinimized = { name: "Rubble", type: "site", }; + +/** + * FUNCTIONS FOR DRAFT + * */ + +export async function getCardsFullData() { + const res = await axios.get(`/card-data/cards.json`); + return res.data; +} diff --git a/src/utils/api/cardData/useCardData.ts b/src/utils/api/cardData/useCardData.ts index 452ca12..9b4d108 100644 --- a/src/utils/api/cardData/useCardData.ts +++ b/src/utils/api/cardData/useCardData.ts @@ -1,5 +1,5 @@ import { useQuery } from "@tanstack/react-query"; -import { getCardsData, getTokensData } from "./api"; +import { getCardsData, getCardsFullData, getTokensData } from "./api"; export const useCardData = () => { return useQuery({ @@ -16,3 +16,11 @@ export const useTokenData = () => { staleTime: Infinity, }); }; + +export const useCardFullData = () => { + return useQuery({ + queryFn: getCardsFullData, + queryKey: ["card-data-full"], + staleTime: Infinity, + }); +}; From 80f9713da7c7b19122eddb7df48edfb30747168c Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 00:10:57 +0200 Subject: [PATCH 08/29] update types --- src/components/organisms/Draft/types.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/Draft/types.ts b/src/components/organisms/Draft/types.ts index 5550db9..08baea9 100644 --- a/src/components/organisms/Draft/types.ts +++ b/src/components/organisms/Draft/types.ts @@ -1,8 +1,16 @@ -export type DraftPlayer = { +import { CardDTO } from "@/utils/api/cardData/CardDataType"; + +export type BoosterPack = { + uuid: string; + playerName: string; + cards: CardDTO[]; +}; + +export type DraftPlayerData = { joinedSessionTimestamp: number; // time of joining the session. Used for ordering - actions: {}; - cards: { - selected: any[]; - packs: any[][]; - }; + selectedCards: CardDTO[]; // cards you've picked + activePack: CardDTO[]; // pack actively picking from + pendingPacks: CardDTO[][]; // packs ready for pick (passed by other player) + finishedPacks: CardDTO[][]; // packs you've picked and ready to pass (ready to pass to other player) + deck?: CardDTO[]; // after draft, the deck you construct from selectedCards }; From a6dd84a52cb7df5bfa55bed6cc645b588015c170 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 00:11:03 +0200 Subject: [PATCH 09/29] prepare the wiring --- src/components/organisms/Draft/index.tsx | 30 ++++++++++++++++++++- src/pages/draft/index.tsx | 34 +++++------------------- 2 files changed, 35 insertions(+), 29 deletions(-) diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index 6890f4f..b1c8044 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -2,13 +2,41 @@ import { DraftCard } from "@/components/organisms/Draft/Card"; import { Tabs } from "@/components/atoms/Tabs"; import { Box, Grid, HStack } from "styled-system/jsx"; import { Button } from "@/components/ui/button"; +import { DraftPlayerData } from "./types"; +import { useCardFullData } from "@/utils/api/cardData/useCardData"; const hTop = "20vh"; const hTabs = "5vh"; const hCards = "75vh"; export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards }; -export const DraftBoard = () => { +export const DraftBoard = ({ + player, + setPlayerData, +}: { + player: DraftPlayerData; + setPlayerData(data: DraftPlayerData): void; +}) => { + const { data: cardData = [] } = useCardFullData(); + + function generateNewBooster() { + const arr = [...cardData]; + const count = 15; + let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array + for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements + } + return shuffled.slice(-count); // Return the last `count` items + } + + function crackBooster() { + const newBooster = generateNewBooster(); + setPlayerData({ + ...player, + }); + } + return ( >({ p1: { + joinedSessionTimestamp: 1, selectedCards: [], activePack: [], - finishedPacks: [[], [], []], + pendingPacks: [[]], + finishedPacks: [[]], }, }); - const { data: cardData = [] } = useCardFullData(); - function generateNewBooster() { - const arr = [...cardData]; - const count = 15; - let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array - for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { - let j = Math.floor(Math.random() * (i + 1)); - [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements - } - return shuffled.slice(-count); // Return the last `count` items - } - - function setPlayer(data: (typeof players)[number]) { + function setPlayer(data: DraftPlayerData) { return setPlayers((prev) => ({ ...prev, p1: { - ...prev["p1"], data, }, })); } - return ; + return ; } From fc6088be7c5ae43014d45d844b6998afd4da2e4e Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 00:24:05 +0200 Subject: [PATCH 10/29] add random crack --- src/components/organisms/Draft/Card/index.tsx | 5 ++- .../organisms/Draft/Ribbon/index.tsx | 36 +++++++++++++++ src/components/organisms/Draft/index.tsx | 44 +++---------------- src/components/organisms/Draft/types.ts | 8 ++++ src/pages/draft/index.tsx | 3 +- 5 files changed, 55 insertions(+), 41 deletions(-) create mode 100644 src/components/organisms/Draft/Ribbon/index.tsx diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx index 7f31721..5aa1a31 100644 --- a/src/components/organisms/Draft/Card/index.tsx +++ b/src/components/organisms/Draft/Card/index.tsx @@ -2,8 +2,9 @@ import { CardImage } from "@/components/atoms/card-view/card"; import { Box, Flex, Grid } 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 = () => { +export const DraftCard = (cardDTO: CardDTO) => { const [isOver, setIsOver] = useState(false); function over() { setIsOver(true); @@ -30,7 +31,7 @@ export const DraftCard = () => { onMouseOut={out} alignItems="center" > - + diff --git a/src/components/organisms/Draft/Ribbon/index.tsx b/src/components/organisms/Draft/Ribbon/index.tsx new file mode 100644 index 0000000..e86ce28 --- /dev/null +++ b/src/components/organisms/Draft/Ribbon/index.tsx @@ -0,0 +1,36 @@ +import { Box, 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"; + +export const Ribbon = (props: DraftProps) => { + const { data: cardData = [] } = useCardFullData(); + function generateNewBooster() { + const arr = [...cardData]; + const count = 15; + let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array + for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements + } + return shuffled.slice(-count); // Return the last `count` items + } + function crackBooster() { + const newBooster = generateNewBooster(); + props.setPlayerData({ + ...props.player, + activePack: newBooster, + }); + } + + return ( + + + + + + + ); +}; diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index b1c8044..5a8734e 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -1,42 +1,17 @@ import { DraftCard } from "@/components/organisms/Draft/Card"; -import { Tabs } from "@/components/atoms/Tabs"; -import { Box, Grid, HStack } from "styled-system/jsx"; -import { Button } from "@/components/ui/button"; +import { Box, Grid } from "styled-system/jsx"; import { DraftPlayerData } from "./types"; -import { useCardFullData } from "@/utils/api/cardData/useCardData"; +import { Ribbon } from "./Ribbon"; const hTop = "20vh"; const hTabs = "5vh"; const hCards = "75vh"; export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards }; -export const DraftBoard = ({ - player, - setPlayerData, -}: { +export const DraftBoard = (props: { player: DraftPlayerData; setPlayerData(data: DraftPlayerData): void; }) => { - const { data: cardData = [] } = useCardFullData(); - - function generateNewBooster() { - const arr = [...cardData]; - const count = 15; - let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array - for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { - let j = Math.floor(Math.random() * (i + 1)); - [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements - } - return shuffled.slice(-count); // Return the last `count` items - } - - function crackBooster() { - const newBooster = generateNewBooster(); - setPlayerData({ - ...player, - }); - } - return ( - hi - - - - - - + todo: player data + - {Array.from({ length: 15 }).map((_, index) => ( - + {props.player.activePack.map((card, index) => ( + ))} diff --git a/src/components/organisms/Draft/types.ts b/src/components/organisms/Draft/types.ts index 08baea9..210116a 100644 --- a/src/components/organisms/Draft/types.ts +++ b/src/components/organisms/Draft/types.ts @@ -14,3 +14,11 @@ export type DraftPlayerData = { finishedPacks: CardDTO[][]; // packs you've picked and ready to pass (ready to pass to other player) deck?: CardDTO[]; // after draft, the deck you construct from selectedCards }; + +/** + * Your individual state and setter to update it + * */ +export type DraftProps = { + player: DraftPlayerData; + setPlayerData(data: DraftPlayerData): void; +}; diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index 0f9a2b0..464d772 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -1,6 +1,5 @@ import { DraftBoard } from "@/components/organisms/Draft"; import { DraftPlayerData } from "@/components/organisms/Draft/types"; -import { useCardFullData } from "@/utils/api/cardData/useCardData"; import { useState } from "react"; export default function DraftPage() { @@ -18,7 +17,7 @@ export default function DraftPage() { return setPlayers((prev) => ({ ...prev, p1: { - data, + ...data, }, })); } From 224962c1ba43cdf0c38b53a8c342f3b9ca12de97 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 00:43:09 +0200 Subject: [PATCH 11/29] add padding and setup --- src/components/organisms/Draft/Card/index.tsx | 4 +++- src/components/organisms/Draft/Ribbon/index.tsx | 4 ++++ src/components/organisms/Draft/index.tsx | 6 +++--- src/utils/api/cardData/CardDataType.ts | 4 ++-- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx index 5aa1a31..489369b 100644 --- a/src/components/organisms/Draft/Card/index.tsx +++ b/src/components/organisms/Draft/Card/index.tsx @@ -18,7 +18,9 @@ export const DraftCard = (cardDTO: CardDTO) => { transition="all 0.25s ease" style={{ zIndex: isOver ? 10000 : 1, - filter: isOver ? "saturate(1.5)" : "saturate(1)", + transform: + isOver && cardDTO.guardian.type === "Site" ? " rotate(90deg)" : "", + filter: isOver ? `saturate(1.5)` : "saturate(1)", }} > diff --git a/src/components/organisms/Draft/Ribbon/index.tsx b/src/components/organisms/Draft/Ribbon/index.tsx index e86ce28..e72ce98 100644 --- a/src/components/organisms/Draft/Ribbon/index.tsx +++ b/src/components/organisms/Draft/Ribbon/index.tsx @@ -7,6 +7,10 @@ import { DraftProps } from "../types"; export const Ribbon = (props: DraftProps) => { const { data: cardData = [] } = useCardFullData(); + + const types = cardData?.map((card) => card.guardian.rarity); + console.log({ rarity: new Set(types) }); + function generateNewBooster() { const arr = [...cardData]; const count = 15; diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index 5a8734e..9a058cd 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -3,9 +3,9 @@ import { Box, Grid } from "styled-system/jsx"; import { DraftPlayerData } from "./types"; import { Ribbon } from "./Ribbon"; -const hTop = "20vh"; +const hTop = "7vh"; const hTabs = "5vh"; -const hCards = "75vh"; +const hCards = "88vh"; export const gridHeight = { top: hTop, tabs: hTabs, cards: hCards }; export const DraftBoard = (props: { @@ -23,7 +23,7 @@ export const DraftBoard = (props: { todo: player data Date: Sat, 5 Oct 2024 00:51:47 +0200 Subject: [PATCH 12/29] prepare --- src/components/organisms/Draft/Ribbon/index.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/organisms/Draft/Ribbon/index.tsx b/src/components/organisms/Draft/Ribbon/index.tsx index e72ce98..c72a3a9 100644 --- a/src/components/organisms/Draft/Ribbon/index.tsx +++ b/src/components/organisms/Draft/Ribbon/index.tsx @@ -9,11 +9,8 @@ export const Ribbon = (props: DraftProps) => { const { data: cardData = [] } = useCardFullData(); const types = cardData?.map((card) => card.guardian.rarity); - console.log({ rarity: new Set(types) }); - function generateNewBooster() { - const arr = [...cardData]; - const count = 15; + function generateNewBooster(arr: any[], count = 15) { let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { let j = Math.floor(Math.random() * (i + 1)); @@ -22,7 +19,7 @@ export const Ribbon = (props: DraftProps) => { return shuffled.slice(-count); // Return the last `count` items } function crackBooster() { - const newBooster = generateNewBooster(); + const newBooster = generateNewBooster([...cardData]); props.setPlayerData({ ...props.player, activePack: newBooster, From ab5d95b9ece87c2e063b150e646bf607a06f9017 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 01:05:22 +0200 Subject: [PATCH 13/29] gathering stats --- notes/2024-10-04.md | 48 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 notes/2024-10-04.md diff --git a/notes/2024-10-04.md b/notes/2024-10-04.md new file mode 100644 index 0000000..7bb8948 --- /dev/null +++ b/notes/2024-10-04.md @@ -0,0 +1,48 @@ + +#### 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 +simple site + +1:59 +exc site +2x exc +elite +10x ord +sorcerer sparkcaster + +2:22 +exc +exc +exc +elite +10x ord +simple site + +2:44 +exc +exc +exc site +sorcerer enchantress +10x ord +simple site + +3:18 +exc +exc +exc +elite +ord site + + + From 7d15c6b22256cdd831a85942c0626959eb603fb5 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 02:38:33 +0200 Subject: [PATCH 14/29] add note --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 2544bb2..f572c44 100644 --- a/README.md +++ b/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 - [ ] From 4f9fc9c365d402ebb98a3978919810e488c4c27e Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 02:38:39 +0200 Subject: [PATCH 15/29] add note --- notes/2024-10-04.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/notes/2024-10-04.md b/notes/2024-10-04.md index 7bb8948..fcd06a0 100644 --- a/notes/2024-10-04.md +++ b/notes/2024-10-04.md @@ -12,7 +12,7 @@ https://www.youtube.com/watch?v=fcmxdMPGLuA 3x exc 1x elite 10x ord -simple site +ord site 1:59 exc site @@ -27,7 +27,7 @@ exc exc elite 10x ord -simple site +ord site 2:44 exc @@ -35,7 +35,7 @@ exc exc site sorcerer enchantress 10x ord -simple site +ord site 3:18 exc @@ -44,5 +44,31 @@ 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 | - | From 067d30e3d0b116fd1c3fac22a8901b9645cd564d Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 02:38:48 +0200 Subject: [PATCH 16/29] add rarity glow --- src/components/organisms/Draft/Card/index.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx index 489369b..ebba390 100644 --- a/src/components/organisms/Draft/Card/index.tsx +++ b/src/components/organisms/Draft/Card/index.tsx @@ -13,8 +13,16 @@ export const DraftCard = (cardDTO: CardDTO) => { setIsOver(false); } + const rarityColor: Record = { + Ordinary: "#fff", + Exceptional: "rgba(0,100,150,1)", + Elite: "rgba(150,0,250,1)", + Unique: "rgba(230,180,50,1)", + }; + return ( { filter: isOver ? `saturate(1.5)` : "saturate(1)", }} > - + Date: Sat, 5 Oct 2024 02:39:00 +0200 Subject: [PATCH 17/29] add rarity booster pack sort --- src/components/organisms/Draft/helpers.ts | 54 +++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/components/organisms/Draft/helpers.ts diff --git a/src/components/organisms/Draft/helpers.ts b/src/components/organisms/Draft/helpers.ts new file mode 100644 index 0000000..b2e6367 --- /dev/null +++ b/src/components/organisms/Draft/helpers.ts @@ -0,0 +1,54 @@ +import { CardDTO } from "@/utils/api/cardData/CardDataType"; + +function shuffleAndSelect(arr: any[], count = 15) { + let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array + for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements + } + return shuffled.slice(-count); // Return the last `count` items +} + +type Expansion = "alp" | "bet"; +export function generateBoosterPack(props: { + cardData: CardDTO[]; + expansionSlug: Expansion | "all"; +}) { + let cards = props.cardData.slice(); // shallow copy + const cardsInSet = cards.filter((card) => { + if (props.expansionSlug === "all") return true; + const setsFoundIn = card.sets.map((set) => set.slug); + return setsFoundIn.includes(props.expansionSlug); + }); + + const ordinaries = cardsInSet?.filter((card) => { + const isOrdinary = card.guardian.rarity === "Ordinary"; + const isAvatar = card.guardian.type === "Avatar"; + const isSite = card.guardian.type === "Site"; + return isOrdinary && !isAvatar && !isSite; + }); + const ordinarySite = cardsInSet?.filter((card) => { + const isOrdinary = card.guardian.rarity === "Ordinary"; + const isSite = card.guardian.type === "Site"; + return isOrdinary && isSite; + }); + const exceptionals = cardsInSet?.filter( + (card) => card.guardian.rarity === "Exceptional", + ); + const pullCard = cardsInSet?.filter((card) => { + const isSpecialRarity = !["Exceptional", "Ordinary"].includes( + card.guardian.rarity, + ); + const isAvatar = card.guardian.type === "Avatar"; + return isSpecialRarity || isAvatar; + }); + + const newBooster = [ + ...shuffleAndSelect(exceptionals, 3), + ...shuffleAndSelect(pullCard, 1), + ...shuffleAndSelect(ordinaries, 10), + ...shuffleAndSelect(ordinarySite, 1), + ]; + + return newBooster; +} From 7931daee83c130432fd4ee21ce0fc3683a05384b Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 02:39:05 +0200 Subject: [PATCH 18/29] remove unused --- src/pages/draft/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index 464d772..5de6b85 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -1,6 +1,7 @@ import { DraftBoard } from "@/components/organisms/Draft"; +import { generateBoosterPack } from "@/components/organisms/Draft/helpers"; import { DraftPlayerData } from "@/components/organisms/Draft/types"; -import { useState } from "react"; +import { useEffect, useState } from "react"; export default function DraftPage() { const [players, setPlayers] = useState>({ From 206b3b68770caa733ef9a35d862534c855059355 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 02:39:14 +0200 Subject: [PATCH 19/29] begin adding tabs --- .../organisms/Draft/Ribbon/index.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/organisms/Draft/Ribbon/index.tsx b/src/components/organisms/Draft/Ribbon/index.tsx index c72a3a9..44645ab 100644 --- a/src/components/organisms/Draft/Ribbon/index.tsx +++ b/src/components/organisms/Draft/Ribbon/index.tsx @@ -4,28 +4,29 @@ import { Tabs } from "@/components/atoms/Tabs"; import { useCardFullData } from "@/utils/api/cardData/useCardData"; import { DraftProps } from "../types"; +import { generateBoosterPack } from "../helpers"; +import { useEffect } from "react"; export const Ribbon = (props: DraftProps) => { const { data: cardData = [] } = useCardFullData(); - const types = cardData?.map((card) => card.guardian.rarity); - - function generateNewBooster(arr: any[], count = 15) { - let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array - for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { - let j = Math.floor(Math.random() * (i + 1)); - [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements - } - return shuffled.slice(-count); // Return the last `count` items - } function crackBooster() { - const newBooster = generateNewBooster([...cardData]); + const newBooster = generateBoosterPack({ + cardData, + expansionSlug: "alp", + }); + const existingActive = props.player.activePack; props.setPlayerData({ ...props.player, activePack: newBooster, + finishedPacks: [...props.player.finishedPacks, existingActive], }); } + useEffect(() => { + if (props.player.activePack.length === 0) crackBooster(); + }, []); + return ( From 73cb6cbc90b1463cd66834beda59a9f4f0a52822 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 03:26:55 +0200 Subject: [PATCH 20/29] setup tabs --- src/components/atoms/Tabs/index.tsx | 4 +- .../organisms/Draft/Ribbon/index.tsx | 40 +++++++++++++------ src/components/organisms/Draft/helpers.ts | 34 +++++++++++----- src/components/organisms/Draft/index.tsx | 16 ++++++-- src/pages/draft/index.tsx | 2 +- 5 files changed, 69 insertions(+), 27 deletions(-) diff --git a/src/components/atoms/Tabs/index.tsx b/src/components/atoms/Tabs/index.tsx index a9d2740..05d8cb7 100644 --- a/src/components/atoms/Tabs/index.tsx +++ b/src/components/atoms/Tabs/index.tsx @@ -9,16 +9,18 @@ import { ReactNode } from "react"; type Props = { tabs: ReactNode[]; content?: ReactNode[]; + selectedIndex?: number; onSelect?(index: number): void; }; export const Tabs = ({ tabs, content, + selectedIndex = 0, onSelect = (_: number) => {}, }: Props) => { return ( - + {tabs.map((tab, index) => ( { +export const Ribbon = ( + props: DraftProps & { + activeViewIndex: number; + setActiveView(index: number): void; + }, +) => { const { data: cardData = [] } = useCardFullData(); function crackBooster() { const newBooster = generateBoosterPack({ cardData, - expansionSlug: "alp", + expansionSlug: "bet", }); - const existingActive = props.player.activePack; + const { finishedPacks } = props.player; + const isEmpty = finishedPacks.length === 0; props.setPlayerData({ ...props.player, - activePack: newBooster, - finishedPacks: [...props.player.finishedPacks, existingActive], + finishedPacks: isEmpty ? [newBooster] : [...finishedPacks, newBooster], }); + props.setActiveView(props.player.finishedPacks.length); } - useEffect(() => { - if (props.player.activePack.length === 0) crackBooster(); - }, []); + const packTabs = + props.player?.finishedPacks?.length > 0 + ? props.player?.finishedPacks?.map((_, index) => `Pack ${index + 1}`) + : []; return ( - + - - + + + {props.player.finishedPacks.length > 0 && ( + + )} + ); diff --git a/src/components/organisms/Draft/helpers.ts b/src/components/organisms/Draft/helpers.ts index b2e6367..f84eb7b 100644 --- a/src/components/organisms/Draft/helpers.ts +++ b/src/components/organisms/Draft/helpers.ts @@ -21,27 +21,41 @@ export function generateBoosterPack(props: { return setsFoundIn.includes(props.expansionSlug); }); + // 3 exceptionals + const exceptionals = cardsInSet?.filter( + (card) => card.guardian.rarity === "Exceptional", + ); + + // special pull card + const pullCard = cardsInSet?.filter((card) => { + const weightedCoinFlip = Math.random() <= 0.2; // 20% chance of success + const rarity: CardDTO["guardian"]["rarity"] = weightedCoinFlip + ? "Unique" + : "Elite"; + + // const isSpecialRarity = !["Exceptional", "Ordinary"].includes( + // card.guardian.rarity, + // ); + // + const isSpecialRarity = card.guardian.rarity === rarity; + const isAvatar = card.guardian.type === "Avatar"; + return isSpecialRarity || isAvatar; + }); + + // 10 ordinaries const ordinaries = cardsInSet?.filter((card) => { const isOrdinary = card.guardian.rarity === "Ordinary"; const isAvatar = card.guardian.type === "Avatar"; const isSite = card.guardian.type === "Site"; return isOrdinary && !isAvatar && !isSite; }); + + // 1 ordinary land const ordinarySite = cardsInSet?.filter((card) => { const isOrdinary = card.guardian.rarity === "Ordinary"; const isSite = card.guardian.type === "Site"; return isOrdinary && isSite; }); - const exceptionals = cardsInSet?.filter( - (card) => card.guardian.rarity === "Exceptional", - ); - const pullCard = cardsInSet?.filter((card) => { - const isSpecialRarity = !["Exceptional", "Ordinary"].includes( - card.guardian.rarity, - ); - const isAvatar = card.guardian.type === "Avatar"; - return isSpecialRarity || isAvatar; - }); const newBooster = [ ...shuffleAndSelect(exceptionals, 3), diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index 9a058cd..da8deab 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -2,6 +2,7 @@ import { DraftCard } from "@/components/organisms/Draft/Card"; import { Box, Grid } from "styled-system/jsx"; import { DraftPlayerData } from "./types"; import { Ribbon } from "./Ribbon"; +import { useMemo, useState } from "react"; const hTop = "7vh"; const hTabs = "5vh"; @@ -12,6 +13,11 @@ export const DraftBoard = (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 ( todo: player data - + - {props.player.activePack.map((card, index) => ( - + {cardView?.map((card, index) => ( + ))} diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index 5de6b85..aeb7bc4 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -10,7 +10,7 @@ export default function DraftPage() { selectedCards: [], activePack: [], pendingPacks: [[]], - finishedPacks: [[]], + finishedPacks: [], }, }); From 84e2c4a1d665ff3a7d728bb9ba9edc36b8596ced Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 03:30:20 +0200 Subject: [PATCH 21/29] setup tab fix --- src/components/atoms/Tabs/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/Tabs/index.tsx b/src/components/atoms/Tabs/index.tsx index 05d8cb7..7ae0dcb 100644 --- a/src/components/atoms/Tabs/index.tsx +++ b/src/components/atoms/Tabs/index.tsx @@ -16,11 +16,15 @@ type Props = { export const Tabs = ({ tabs, content, - selectedIndex = 0, + selectedIndex, onSelect = (_: number) => {}, }: Props) => { + const value = + selectedIndex !== undefined ? selectedIndex.toString() : undefined; + const options = value !== undefined ? { value } : {}; + return ( - + {tabs.map((tab, index) => ( Date: Sat, 5 Oct 2024 03:42:10 +0200 Subject: [PATCH 22/29] setup stats --- .../organisms/Draft/Stats/index.tsx | 33 +++++++++++++++++++ src/components/organisms/Draft/index.tsx | 3 +- 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/components/organisms/Draft/Stats/index.tsx diff --git a/src/components/organisms/Draft/Stats/index.tsx b/src/components/organisms/Draft/Stats/index.tsx new file mode 100644 index 0000000..2d0e020 --- /dev/null +++ b/src/components/organisms/Draft/Stats/index.tsx @@ -0,0 +1,33 @@ +import { Box, Flex } 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) => { + 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 ( + + +

Exceptionals: {exceptionals.length.toString()}

+

Elites: {elites.length.toString()}

+

Uniques: {uniques.length.toString()}

+ + +

Total Cards: {flat.length.toString()}

+

Sites: {sites.length.toString()}

+

Avatars: {avatars.length.toString()}

+ + + ); +}; diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index da8deab..3d87b85 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -3,6 +3,7 @@ import { Box, Grid } from "styled-system/jsx"; import { DraftPlayerData } from "./types"; import { Ribbon } from "./Ribbon"; import { useMemo, useState } from "react"; +import { DraftStats } from "./Stats"; const hTop = "7vh"; const hTabs = "5vh"; @@ -26,7 +27,7 @@ export const DraftBoard = (props: { gridTemplateRows={`${hTop} ${hTabs} ${hCards}`} gap={0} > - todo: player data + Date: Sat, 5 Oct 2024 03:56:01 +0200 Subject: [PATCH 23/29] fixup --- src/components/organisms/Draft/Card/index.tsx | 2 +- .../organisms/Draft/Ribbon/index.tsx | 6 +-- .../organisms/Draft/Stats/index.tsx | 37 +++++++++++++------ src/components/organisms/Draft/index.tsx | 2 +- src/pages/draft/index.tsx | 3 +- 5 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/organisms/Draft/Card/index.tsx b/src/components/organisms/Draft/Card/index.tsx index ebba390..ae6215a 100644 --- a/src/components/organisms/Draft/Card/index.tsx +++ b/src/components/organisms/Draft/Card/index.tsx @@ -1,5 +1,5 @@ import { CardImage } from "@/components/atoms/card-view/card"; -import { Box, Flex, Grid } from "styled-system/jsx"; +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"; diff --git a/src/components/organisms/Draft/Ribbon/index.tsx b/src/components/organisms/Draft/Ribbon/index.tsx index 3ab0582..344e1e8 100644 --- a/src/components/organisms/Draft/Ribbon/index.tsx +++ b/src/components/organisms/Draft/Ribbon/index.tsx @@ -1,4 +1,4 @@ -import { Box, HStack } from "styled-system/jsx"; +import { Box, Grid, HStack } from "styled-system/jsx"; import { Button } from "@/components/ui/button"; import { Tabs } from "@/components/atoms/Tabs"; @@ -35,7 +35,7 @@ export const Ribbon = ( return ( - + @@ -48,7 +48,7 @@ export const Ribbon = ( /> )} - + ); }; diff --git a/src/components/organisms/Draft/Stats/index.tsx b/src/components/organisms/Draft/Stats/index.tsx index 2d0e020..0b4fe4b 100644 --- a/src/components/organisms/Draft/Stats/index.tsx +++ b/src/components/organisms/Draft/Stats/index.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from "styled-system/jsx"; +import { Box, Flex, HStack } from "styled-system/jsx"; import { DraftProps } from "../types"; import { CardDTO } from "@/utils/api/cardData/CardDataType"; @@ -17,17 +17,30 @@ export const DraftStats = (props: DraftProps) => { const avatars = flat.filter((card) => card.guardian.type === "Avatar"); return ( - - -

Exceptionals: {exceptionals.length.toString()}

-

Elites: {elites.length.toString()}

-

Uniques: {uniques.length.toString()}

+ + + +

Exceptionals: {exceptionals.length.toString()}

+

Elites: {elites.length.toString()}

+

Uniques: {uniques.length.toString()}

+ + +

Total Cards: {flat.length.toString()}

+

Sites: {sites.length.toString()}

+

Avatars: {avatars.length.toString()}

+ + + +

Online draft currently in development!

 - -

Total Cards: {flat.length.toString()}

-

Sites: {sites.length.toString()}

-

Avatars: {avatars.length.toString()}

- - + ); }; diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index 3d87b85..d9c3f24 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -1,5 +1,5 @@ import { DraftCard } from "@/components/organisms/Draft/Card"; -import { Box, Grid } from "styled-system/jsx"; +import { Grid } from "styled-system/jsx"; import { DraftPlayerData } from "./types"; import { Ribbon } from "./Ribbon"; import { useMemo, useState } from "react"; diff --git a/src/pages/draft/index.tsx b/src/pages/draft/index.tsx index aeb7bc4..5a893f0 100644 --- a/src/pages/draft/index.tsx +++ b/src/pages/draft/index.tsx @@ -1,7 +1,6 @@ import { DraftBoard } from "@/components/organisms/Draft"; -import { generateBoosterPack } from "@/components/organisms/Draft/helpers"; import { DraftPlayerData } from "@/components/organisms/Draft/types"; -import { useEffect, useState } from "react"; +import { useState } from "react"; export default function DraftPage() { const [players, setPlayers] = useState>({ From 3e045fb19a7997fc494a46ae04d177fd82dbc0eb Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 04:06:51 +0200 Subject: [PATCH 24/29] fix build --- src/components/atoms/Tabs/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/Tabs/index.tsx b/src/components/atoms/Tabs/index.tsx index 7ae0dcb..34b7686 100644 --- a/src/components/atoms/Tabs/index.tsx +++ b/src/components/atoms/Tabs/index.tsx @@ -17,7 +17,9 @@ export const Tabs = ({ tabs, content, selectedIndex, - onSelect = (_: number) => {}, + onSelect = (index: number) => { + console.info(index + " selected"); + }, }: Props) => { const value = selectedIndex !== undefined ? selectedIndex.toString() : undefined; From e04e2b76b5ab360cc2a48476e04b4bd98367e8e8 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 04:06:58 +0200 Subject: [PATCH 25/29] add sneak peek --- src/pages/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9984c24..9a827bd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -67,6 +67,14 @@ export default function Home() { }} /> + +

Draft Mode in development!

+ +

+ In the meantime, crack some packs! +

+ + ); From d6a92b4d1ef609d87e793f30f3e6f9a03cdd1f5a Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 04:07:01 +0200 Subject: [PATCH 26/29] update build --- src/components/organisms/Draft/helpers.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/organisms/Draft/helpers.ts b/src/components/organisms/Draft/helpers.ts index f84eb7b..192d6ce 100644 --- a/src/components/organisms/Draft/helpers.ts +++ b/src/components/organisms/Draft/helpers.ts @@ -1,9 +1,9 @@ import { CardDTO } from "@/utils/api/cardData/CardDataType"; -function shuffleAndSelect(arr: any[], count = 15) { - let shuffled = arr.slice(); // Shallow copy to avoid mutating the original array +function shuffleAndSelect(arr: CardDTO[], count = 15) { + const shuffled = arr.slice(); // Shallow copy to avoid mutating the original array for (let i = arr.length - 1; i > arr.length - 1 - count; i--) { - let j = Math.floor(Math.random() * (i + 1)); + const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; // Swap elements } return shuffled.slice(-count); // Return the last `count` items @@ -14,7 +14,7 @@ export function generateBoosterPack(props: { cardData: CardDTO[]; expansionSlug: Expansion | "all"; }) { - let cards = props.cardData.slice(); // shallow copy + const cards = props.cardData.slice(); // shallow copy const cardsInSet = cards.filter((card) => { if (props.expansionSlug === "all") return true; const setsFoundIn = card.sets.map((set) => set.slug); From 7f1a7ffd698965c7870fca56df9af3afdb647f4d Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 04:07:06 +0200 Subject: [PATCH 27/29] add error handling --- src/components/organisms/Draft/Stats/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/Draft/Stats/index.tsx b/src/components/organisms/Draft/Stats/index.tsx index 0b4fe4b..5f72b2d 100644 --- a/src/components/organisms/Draft/Stats/index.tsx +++ b/src/components/organisms/Draft/Stats/index.tsx @@ -3,18 +3,19 @@ import { DraftProps } from "../types"; import { CardDTO } from "@/utils/api/cardData/CardDataType"; function filterRarity(rarity: CardDTO["guardian"]["rarity"]) { - return (card: CardDTO) => card.guardian.rarity === rarity; + return (card: CardDTO) => card?.guardian?.rarity === rarity; } export const DraftStats = (props: DraftProps) => { + if (props.player.finishedPacks.length === 0) return
; 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"); + const sites = flat.filter((card) => card?.guardian?.type === "Site"); + const avatars = flat.filter((card) => card?.guardian?.type === "Avatar"); return ( From d1d62fe33454962dd748bb0025e842bf18414fc6 Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 04:09:06 +0200 Subject: [PATCH 28/29] add if no cards --- src/components/organisms/Draft/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index d9c3f24..d6fa553 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -42,6 +42,9 @@ export const DraftBoard = (props: { position="relative" bg="gray.500" > + {(!cardView || cardView?.length === 0) && ( +

No packs... yet! Click "Crack a Pack!"

+ )} {cardView?.map((card, index) => ( ))} From 01fd83cd82ab72916c329f5a42249856ceed4bea Mon Sep 17 00:00:00 2001 From: jollygrin Date: Sat, 5 Oct 2024 04:10:47 +0200 Subject: [PATCH 29/29] remove apos --- src/components/organisms/Draft/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/Draft/index.tsx b/src/components/organisms/Draft/index.tsx index d6fa553..959ef14 100644 --- a/src/components/organisms/Draft/index.tsx +++ b/src/components/organisms/Draft/index.tsx @@ -43,7 +43,7 @@ export const DraftBoard = (props: { bg="gray.500" > {(!cardView || cardView?.length === 0) && ( -

No packs... yet! Click "Crack a Pack!"

+

No packs... yet! Click Crack a Pack!

)} {cardView?.map((card, index) => (