Skip to content

Commit 29b83d5

Browse files
SpyderHunter03marcelpanse
SpyderHunter03
and
marcelpanse
authored
Completed Trading Pages (#82)
Co-authored-by: Marcel Panse <marcel.panse@gmail.com>
1 parent 59ab059 commit 29b83d5

File tree

10 files changed

+160
-40
lines changed

10 files changed

+160
-40
lines changed

frontend/src/components/LookingForTrade.tsx renamed to frontend/src/components/ui/card-table.tsx

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,9 @@ import type { Card } from '@/types'
22
import { type Row, createColumnHelper, getCoreRowModel, getGroupedRowModel, useReactTable } from '@tanstack/react-table'
33
import { useVirtualizer } from '@tanstack/react-virtual'
44
import { useMemo, useRef } from 'react'
5-
import type { Card as CardType } from '../types'
6-
import FancyCard from './FancyCard'
5+
import type { Card as CardType } from '../../types'
76

8-
const tradeableRaritiesDictionary: { [id: string]: number } = {
9-
'◊': 0,
10-
'◊◊': 0,
11-
'◊◊◊': 120,
12-
'◊◊◊◊': 500,
13-
'☆': 500,
14-
}
15-
16-
export function LookingForTrade({ cards }: { cards: CardType[] }) {
7+
export function CardTable<T extends Card>({ cards, cardElement }: { cards: T[]; cardElement: (card: T) => JSX.Element }) {
178
const columnHelper = createColumnHelper<CardType>()
189
const parentRef = useRef<HTMLDivElement>(null)
1910

@@ -37,7 +28,7 @@ export function LookingForTrade({ cards }: { cards: CardType[] }) {
3728
// Columns and data are defined in a stable reference, will not cause infinite loop!
3829
const table = useReactTable({
3930
columns,
40-
data: cards.filter((c) => Object.keys(tradeableRaritiesDictionary).includes(c.rarity)),
31+
data: cards,
4132
enableGrouping: true,
4233
getCoreRowModel: getCoreRowModel(),
4334
getGroupedRowModel: getGroupedRowModel(),
@@ -82,7 +73,6 @@ export function LookingForTrade({ cards }: { cards: CardType[] }) {
8273
>
8374
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
8475
const row = flattenedRows[virtualRow.index]
85-
console.log('Row', row)
8676
return (
8777
<div
8878
key={virtualRow.key}
@@ -97,26 +87,13 @@ export function LookingForTrade({ cards }: { cards: CardType[] }) {
9787
>
9888
{row.type === 'header' ? (
9989
<h2 className="mt-10 w-[900px] mx-auto scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
100-
{(row.data as { type: string; row: Row<Card> }).row.getValue('pack')}
90+
{(row.data as { type: string; row: Row<T> }).row.getValue('pack')}
10191
</h2>
10292
) : (
10393
<div className="flex justify-center gap-5">
104-
{(row.data as { type: string; row: Row<Card> }[]).map(({ row: subRow }) => {
94+
{(row.data as { type: string; row: Row<T> }[]).map(({ row: subRow }) => {
10595
const card = subRow.original
106-
return (
107-
<div
108-
key={`div_${subRow.original.card_id}`}
109-
className="flex flex-col items-center gap-y-2 w-fit border border-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-200 group"
110-
>
111-
<FancyCard key={`card_${card.card_id}`} card={card} selected={true} setIsSelected={() => {}} />
112-
<p className="text-[12px] font-semibold whitespace-nowrap overflow-hidden text-ellipsis max-w-[130px]">
113-
{card.card_id} - {card.name}
114-
</p>
115-
<div className="bg-gray-600 rounded-xl">
116-
<span className="text-lg font-semibold m-3">{tradeableRaritiesDictionary[card.rarity]}</span>
117-
</div>
118-
</div>
119-
)
96+
return cardElement(card)
12097
})}
12198
</div>
12299
)}

‎frontend/src/lib/CardsDB.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,14 @@ export const expansions: Expansion[] = [
3030
{ name: 'Pikachu pack', color: '#EDC12A' },
3131
{ name: 'Every pack', color: '#CCCCCC' },
3232
],
33+
tradeable: true,
3334
},
3435
{
3536
name: 'Mythical Island',
3637
id: 'A1a',
3738
cards: a1aCards,
3839
packs: [{ name: 'Mew pack', color: '#FFC1EA' }],
40+
tradeable: true,
3941
},
4042
{
4143
name: 'Space-Time Smackdown',
@@ -46,16 +48,26 @@ export const expansions: Expansion[] = [
4648
{ name: 'Palkia pack', color: '#D5A6BD' },
4749
{ name: 'Every pack', color: '#CCCCCC' },
4850
],
51+
tradeable: false,
4952
},
5053
{
5154
name: 'Promo-A',
5255
id: 'PA',
5356
cards: paCards,
5457
packs: [{ name: 'Every pack', color: '#CCCCCC' }],
58+
tradeable: false,
5559
promo: true,
5660
},
5761
]
5862

63+
export const tradeableRaritiesDictionary: { [id: string]: number } = {
64+
'◊': 0,
65+
'◊◊': 0,
66+
'◊◊◊': 120,
67+
'◊◊◊◊': 500,
68+
'☆': 500,
69+
}
70+
5971
export const nrOfCardsOwned = (ownedCards: CollectionRow[], expansion?: Expansion, pack?: string) => {
6072
if (!expansion) {
6173
return ownedCards.filter((oc) => oc.amount_owned > 0).length

‎frontend/src/pages/trade/BuyingTokens.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { CardTable } from '@/components/ui/card-table'
2+
import { allCards, expansions, tradeableRaritiesDictionary } from '@/lib/CardsDB'
3+
import type { CollectionRow } from '@/types'
4+
import { BuyingTokensCard } from './components/BuyingTokensCard'
5+
6+
export function BuyingTokens({ ownedCards }: { ownedCards: CollectionRow[] }) {
7+
const tradeableExpansions = expansions.filter((e) => e.tradeable).map((e) => e.id)
8+
const raritiesThatCanEarnTradeTokens = Object.fromEntries(Object.entries(tradeableRaritiesDictionary).filter(([_, value]) => value > 0))
9+
const forTradeCards = ownedCards.filter((c) => c.amount_owned > 1)
10+
const tradeableCards = allCards
11+
.filter((ac) => forTradeCards.findIndex((oc) => oc.card_id === ac.card_id) > -1)
12+
.map((ac) => {
13+
return {
14+
...ac,
15+
amount_owned: forTradeCards.find((oc) => oc.card_id === ac.card_id)?.amount_owned,
16+
}
17+
})
18+
19+
return (
20+
<CardTable
21+
cards={tradeableCards.filter((c) => Object.keys(raritiesThatCanEarnTradeTokens).includes(c.rarity) && tradeableExpansions.includes(c.expansion))}
22+
cardElement={(card) => <BuyingTokensCard card={card} />}
23+
/>
24+
)
25+
}

‎frontend/src/pages/trade/ForTrade.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { CardTable } from '@/components/ui/card-table'
2+
import { allCards, expansions, tradeableRaritiesDictionary } from '@/lib/CardsDB'
3+
import type { CollectionRow } from '@/types'
4+
import { ForTradeCard } from './components/ForTradeCard'
5+
6+
export function ForTrade({ ownedCards }: { ownedCards: CollectionRow[] }) {
7+
const tradeableExpansions = expansions.filter((e) => e.tradeable).map((e) => e.id)
8+
const forTradeCards = ownedCards.filter((c) => c.amount_owned > 1)
9+
const tradeableCards = allCards
10+
.filter((ac) => forTradeCards.findIndex((oc) => oc.card_id === ac.card_id) > -1)
11+
.map((ac) => {
12+
return {
13+
...ac,
14+
amount_owned: forTradeCards.find((oc) => oc.card_id === ac.card_id)?.amount_owned,
15+
}
16+
})
17+
18+
return (
19+
<CardTable
20+
cards={tradeableCards.filter((c) => Object.keys(tradeableRaritiesDictionary).includes(c.rarity) && tradeableExpansions.includes(c.expansion))}
21+
cardElement={(card) => {
22+
return <ForTradeCard card={card} />
23+
}}
24+
/>
25+
)
26+
}

‎frontend/src/pages/trade/LookingFor.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { CardTable } from '@/components/ui/card-table'
2+
import { allCards, expansions, tradeableRaritiesDictionary } from '@/lib/CardsDB'
3+
import type { CollectionRow } from '@/types'
4+
import { LookingForCard } from './components/LookingForCard'
5+
6+
export function LookingFor({ ownedCards }: { ownedCards: CollectionRow[] }) {
7+
const lookingForTradeCards = allCards.filter((ac) => ownedCards.findIndex((oc) => oc.card_id === ac.card_id) === -1)
8+
const tradeableExpansions = expansions.filter((e) => e.tradeable).map((e) => e.id)
9+
10+
return (
11+
<CardTable
12+
cards={lookingForTradeCards.filter((c) => Object.keys(tradeableRaritiesDictionary).includes(c.rarity) && tradeableExpansions.includes(c.expansion))}
13+
cardElement={(card) => {
14+
return <LookingForCard card={card} />
15+
}}
16+
/>
17+
)
18+
}

‎frontend/src/pages/trade/Trade.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
1-
import { LookingForTrade } from '@/components/LookingForTrade'
21
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
3-
import { a1Cards, a1aCards, a2Cards, paCards } from '@/lib/CardsDB'
42
import type { CollectionRow } from '@/types'
53
import type { Models } from 'appwrite'
4+
import { BuyingTokens } from './BuyingTokens'
5+
import { ForTrade } from './ForTrade'
6+
import { LookingFor } from './LookingFor'
67

78
interface Props {
89
user: Models.User<Models.Preferences> | null
910
ownedCards: CollectionRow[]
1011
}
1112

1213
function Trade({ user, ownedCards }: Props) {
13-
const lookingForTradeCards = () => {
14-
const allCards = [...a1Cards, ...a2Cards, ...a1aCards, ...paCards]
15-
const missingCards = allCards.filter((ac) => ownedCards.findIndex((oc) => oc.card_id === ac.card_id) === -1)
16-
return missingCards
17-
}
18-
1914
if (user) {
2015
return (
2116
<div className="flex flex-col gap-y-4">
@@ -29,13 +24,13 @@ function Trade({ user, ownedCards }: Props) {
2924
</div>
3025
<div className="max-w-auto mx-auto">
3126
<TabsContent value="looking_for">
32-
<LookingForTrade cards={lookingForTradeCards()} />
27+
<LookingFor ownedCards={ownedCards} />
3328
</TabsContent>
3429
<TabsContent value="for_trade">
35-
<span>For Trade</span>
30+
<ForTrade ownedCards={ownedCards} />
3631
</TabsContent>
3732
<TabsContent value="buying_tokens">
38-
<span>Buying Tokens</span>
33+
<BuyingTokens ownedCards={ownedCards} />
3934
</TabsContent>
4035
</div>
4136
</Tabs>

‎frontend/src/pages/trade/components/BuyingTokensCard.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import FancyCard from '@/components/FancyCard'
2+
import { tradeableRaritiesDictionary } from '@/lib/CardsDB'
3+
import type { Card } from '@/types'
4+
5+
export function BuyingTokensCard({ card }: { card: Card & { amount_owned?: number } }) {
6+
const amountOwned = (card.amount_owned || 1) - 1
7+
const possibleCoinsToGet = amountOwned * tradeableRaritiesDictionary[card.rarity]
8+
return (
9+
<div
10+
key={`div_${card.card_id}`}
11+
className="flex flex-col items-center gap-y-2 w-fit border border-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-200 group"
12+
>
13+
<FancyCard key={`card_${card.card_id}`} card={card} selected={true} setIsSelected={() => {}} />
14+
<p className="text-[12px] font-semibold whitespace-nowrap overflow-hidden text-ellipsis max-w-[130px]">
15+
{card.card_id} - {card.name}
16+
</p>
17+
<div className="flex flex-row gap-x-2">
18+
<div className="bg-fuchsia-600 rounded-xl">
19+
<span className="text-lg font-semibold m-3">{amountOwned}</span>
20+
</div>
21+
<div className="bg-gray-600 rounded-xl">
22+
<span className="text-lg font-semibold m-3">{possibleCoinsToGet}</span>
23+
</div>
24+
</div>
25+
</div>
26+
)
27+
}

‎frontend/src/pages/trade/components/ForTradeCard.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import FancyCard from '@/components/FancyCard'
2+
import type { Card } from '@/types'
3+
4+
export function ForTradeCard({ card }: { card: Card & { amount_owned?: number } }) {
5+
return (
6+
<div
7+
key={`div_${card.card_id}`}
8+
className="flex flex-col items-center gap-y-2 w-fit border border-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-200 group"
9+
>
10+
<FancyCard key={`card_${card.card_id}`} card={card} selected={true} setIsSelected={() => {}} />
11+
<p className="text-[12px] font-semibold whitespace-nowrap overflow-hidden text-ellipsis max-w-[130px]">
12+
{card.card_id} - {card.name}
13+
</p>
14+
<div className="bg-gray-600 rounded-xl">
15+
<span className="text-lg font-semibold m-3">{(card.amount_owned || 1) - 1}</span>
16+
</div>
17+
</div>
18+
)
19+
}

‎frontend/src/pages/trade/components/LookingForCard.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import FancyCard from '@/components/FancyCard'
2+
import { tradeableRaritiesDictionary } from '@/lib/CardsDB'
3+
import type { Card } from '@/types'
4+
5+
export function LookingForCard({ card }: { card: Card }) {
6+
return (
7+
<div
8+
key={`div_${card.card_id}`}
9+
className="flex flex-col items-center gap-y-2 w-fit border border-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-200 group"
10+
>
11+
<FancyCard key={`card_${card.card_id}`} card={card} selected={true} setIsSelected={() => {}} />
12+
<p className="text-[12px] font-semibold whitespace-nowrap overflow-hidden text-ellipsis max-w-[130px]">
13+
{card.card_id} - {card.name}
14+
</p>
15+
<div className="bg-gray-600 rounded-xl">
16+
<span className="text-lg font-semibold m-3">{tradeableRaritiesDictionary[card.rarity]}</span>
17+
</div>
18+
</div>
19+
)
20+
}

‎frontend/src/types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface Expansion {
1010
id: string
1111
cards: Card[]
1212
packs: Pack[]
13+
tradeable?: boolean
1314
promo?: boolean
1415
}
1516

0 commit comments

Comments
 (0)