59 looking for trade (#68)

* Looking For Trade Implementation and Lint Fixes

* Lint Fixes

* Adjusted scroll bar to be on the side rather than the middle of the page, and added back in Pack Headers

* Add Trade Values to Cards

* Pull Owned Cards and User from App Component

* feat: overview page calculations, added cardsdb lib (#69)

* Cardsdb (#70)

* feat: overview page calculations, added cardsdb lib

* some refactoring and working on bar chart with probabilities

* Add new updates

* Adding in for branch fix

* Ran npm install

* Remove Cards File Again

---------

Co-authored-by: Marcel Panse <marcel.panse@gmail.com>

Author: SpyderHunter03

frontend/package-lock.json

@@ -48,7 +48,7 @@ function App() {
         <Route path="/" element={<Overview user={user} ownedCards={ownedCards} />} />
         <Route path="/verify" element={<Verify />} />
         <Route path="/collection" element={<Collection user={user} ownedCards={ownedCards} setOwnedCards={setOwnedCards} />} />
-        <Route path="/trade" element={<Trade />} />
+        <Route path="/trade" element={<Trade user={user} ownedCards={ownedCards} />} />
       </Routes>
     </ThemeProvider>
   )

frontend/src/App.tsx

@@ -0,0 +1,129 @@
+import type { Card } from '@/types'
+import { type Row, createColumnHelper, getCoreRowModel, getGroupedRowModel, useReactTable } from '@tanstack/react-table'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { useMemo, useRef } from 'react'
+import type { Card as CardType } from '../types'
+import FancyCard from './FancyCard'
+
+const tradeableRaritiesDictionary: { [id: string]: number } = {
+  '◊': 0,
+  '◊◊': 0,
+  '◊◊◊': 120,
+  '◊◊◊◊': 500,
+  '☆': 500,
+}
+
+export function LookingForTrade({ cards }: { cards: CardType[] }) {
+  const columnHelper = createColumnHelper<CardType>()
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  const columns = useMemo(() => {
+    return [
+      columnHelper.accessor('image', {
+        id: 'imageUrl',
+      }),
+      columnHelper.accessor('card_id', {
+        id: 'card_id',
+      }),
+      columnHelper.accessor('name', {
+        id: 'name',
+      }),
+      columnHelper.accessor('pack', {
+        id: 'pack',
+      }),
+    ]
+  }, [])
+
+  // Columns and data are defined in a stable reference, will not cause infinite loop!
+  const table = useReactTable({
+    columns,
+    data: cards.filter((c) => Object.keys(tradeableRaritiesDictionary).includes(c.rarity)),
+    enableGrouping: true,
+    getCoreRowModel: getCoreRowModel(),
+    getGroupedRowModel: getGroupedRowModel(),
+    initialState: {
+      grouping: ['pack'],
+    },
+  })
+  const groupedRows = table.getRowModel().rows
+
+  const groupedGridRows = groupedRows.map((groupRow) => {
+    const header = { type: 'header', row: groupRow }
+    const dataRows = groupRow.subRows.map((subRow) => ({ type: 'data', row: subRow }))
+
+    const gridRows = []
+    for (let i = 0; i < dataRows.length; i += 5) {
+      gridRows.push(dataRows.slice(i, i + 5))
+    }
+
+    return { header, gridRows }
+  })
+
+  const flattenedRows = groupedGridRows.flatMap((group) => [
+    { type: 'header', height: 45, data: group.header }, // Group header
+    ...group.gridRows.map((gridRow) => ({ type: 'gridRow', height: 269, data: gridRow })), // Grid rows
+  ])
+
+  const rowVirtualizer = useVirtualizer({
+    getScrollElement: () => parentRef.current,
+    count: flattenedRows.length,
+    estimateSize: (index) => (flattenedRows[index].type === 'header' ? 45 : 269) + 12,
+    overscan: 5,
+  })
+
+  return (
+    <div ref={parentRef} className="h-[calc(100vh-180px)] overflow-y-auto">
+      <div
+        style={{
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          position: 'relative',
+        }}
+        className="w-full"
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+          const row = flattenedRows[virtualRow.index]
+          console.log('Row', row)
+          return (
+            <div
+              key={virtualRow.key}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start}px)`,
+              }}
+            >
+              {row.type === 'header' ? (
+                <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">
+                  {(row.data as { type: string; row: Row<Card> }).row.getValue('pack')}
+                </h2>
+              ) : (
+                <div className="flex justify-center gap-5">
+                  {(row.data as { type: string; row: Row<Card> }[]).map(({ row: subRow }) => {
+                    const card = subRow.original
+                    return (
+                      <div
+                        key={`div_${subRow.original.card_id}`}
+                        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"
+                      >
+                        <FancyCard key={`card_${card.card_id}`} card={card} selected={true} setIsSelected={() => {}} />
+                        <p className="text-[12px] font-semibold whitespace-nowrap overflow-hidden text-ellipsis max-w-[130px]">
+                          {card.card_id} - {card.name}
+                        </p>
+                        <div className="bg-gray-600 rounded-xl">
+                          <span className="text-lg font-semibold m-3">{tradeableRaritiesDictionary[card.rarity]}</span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

frontend/src/components/LookingForTrade.tsx

@@ -1,3 +1,47 @@
-export function Trade() {
-  return <h1>Coming soon</h1>
+import { LookingForTrade } from '@/components/LookingForTrade'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { a1Cards, a1aCards, a2Cards, paCards } from '@/lib/CardsDB'
+import type { CollectionRow } from '@/types'
+import type { Models } from 'appwrite'
+
+interface Props {
+  user: Models.User<Models.Preferences> | null
+  ownedCards: CollectionRow[]
+}
+
+export function Trade({ user, ownedCards }: Props) {
+  const lookingForTradeCards = () => {
+    const allCards = [...a1Cards, ...a2Cards, ...a1aCards, ...paCards]
+    const missingCards = allCards.filter((ac) => ownedCards.findIndex((oc) => oc.card_id === ac.card_id) === -1)
+    return missingCards
+  }
+
+  if (user) {
+    return (
+      <div className="flex flex-col gap-y-4">
+        <Tabs defaultValue="looking_for">
+          <div className="max-w-[900px] mx-auto">
+            <TabsList className="m-auto mt-4 mb-8">
+              <TabsTrigger value="looking_for">Looking For</TabsTrigger>
+              <TabsTrigger value="for_trade">For Trade</TabsTrigger>
+              <TabsTrigger value="buying_tokens">Buying Tokens</TabsTrigger>
+            </TabsList>
+          </div>
+          <div className="max-w-auto mx-auto">
+            <TabsContent value="looking_for">
+              <LookingForTrade cards={lookingForTradeCards()} />
+            </TabsContent>
+            <TabsContent value="for_trade">
+              <span>For Trade</span>
+            </TabsContent>
+            <TabsContent value="buying_tokens">
+              <span>Buying Tokens</span>
+            </TabsContent>
+          </div>
+        </Tabs>
+      </div>
+    )
+  }
+
+  return null
 }