Functional marketplace with cards

pages/marketplace.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <h1>Marketplace</h1>
+
+    <!-- Filters -->
+    <div>
+      <h3>Filters</h3>
+      <label for="filter-cost">Min Cost:</label>
+      <input v-model="filters.minCost" id="filter-cost" type="number" placeholder="Min cost" />
+
+      <label for="filter-cost">Max Cost:</label>
+      <input v-model="filters.maxCost" id="filter-cost" type="number" placeholder="Max cost" />
+
+      <label for="filter-rarity">Rarity:</label>
+      <select v-model="filters.rarities" id="filter-rarity" multiple size="6">
+        <option value="Replacement">Replacement</option>
+        <option value="Reserve">Reserve</option>
+        <option value="Starter">Starter</option>
+        <option value="All-Star">All-Star</option>
+        <option value="MVP">MVP</option>
+        <option value="Hall of Fame">Hall of Fame</option>
+      </select>
+
+      <button @click="applyFilters">Apply Filters</button>
+    </div>
+
+    <!-- Player List -->
+    <div v-if="pending" class="container" style="text-align: center; padding: 2rem;">
+      <p>Loading players...</p>
+    </div>
+
+    <!-- Show No Results if list is empty -->
+    <div v-else-if="!playerList || playerList.length === 0" class="container" style="text-align: center; padding: 2rem;">
+      <p>No players found. Try adjusting your filters!</p>
+    </div>
+
+    <section v-else class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: center;">
+      <article v-for="player in playerList" :key="player.player_id" class="card">
+        <NuxtLink :to="`/players/${player.player_id}`" style="text-decoration: none; color: inherit;">
+          <img :src="player?.player_headshot" alt="Player Headshot" class="headshot" />
+          <h2 class="name">{{ player?.player_name }}</h2>
+
+          <p class="franchise">{{ player?.franchise_name }}</p>
+      
+          <img :src="player?.player_card_image" alt="Player Card Image" class="card-image" />
+      
+          <img v-if="player?.player_card_image2" :src="player?.player_card_image2" alt="Player Card Image2" class="card-image" />
+      
+          <div class="rarity" :style="{ backgroundColor: '#' + player.rarity_color }">
+            {{ player.rarity_name }}
+          </div>
+      
+          <p class="cardset">{{ player?.cardset_name }}</p>
+      
+          <p class="cost">Cost: {{ player?.player_cost }}₼</p>
+        </NuxtLink>
+      </article>
+    </section>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { MarketplacePlayer } from '~/types/MarketplacePlayer'
+const user = useSupabaseUser()
+const client = useSupabaseClient()
+
+const filters = ref({
+  minCost: 0,
+  maxCost: 0,
+  rarities: []
+})
+
+const { data: playerList, pending, error } = await useAsyncData<MarketplacePlayer[] | null>(
+    'random_player', 
+    async () => {
+      let query = client.from('marketplace')
+        .select('*')
+        .limit(20)
+
+      if (filters.value.minCost > 0) {
+        query = query.gte('player_cost', filters.value.minCost)
+      }
+
+      if (filters.value.maxCost > 0) {
+        query = query.lte('player_cost', filters.value.maxCost)
+      }
+
+      if (filters.value.rarities.length > 0) {
+        query = query.in('rarity_name', filters.value.rarities)
+      }
+
+      const { data, error } = await query
+
+      if (error) {
+        console.error('Supabase error: ', error)
+        // throw new Error(error.message)
+      }
+
+      console.log('players from supabase: ', data)
+      return data
+    },
+    {
+        lazy: true,
+        server: false
+    }
+)
+
+const applyFilters = async () => {
+  console.log('Applying filters:', filters.value)
+  await refreshNuxtData('random_player')
+}
+
+// const filteredPlayers = computed(() => {
+//   return playerList.value.filter(player => {
+//     const matchesCost = filters.value.cost ? player.cost >= filters.value.cost : true
+//     const matchesRarity = filters.value.rarities.length
+//       ? filters.value.rarities.includes(player.rarity_name)
+//       : true
+
+//     return matchesCost && matchesRarity
+//   })
+// })
+
+</script>
+
+<style>
+.player-card {
+  max-width: 400px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  padding: 16px;
+  text-align: center;
+}
+
+.headshot {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 0 auto 8px;
+}
+
+.name {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.franchise {
+  color: #666;
+  font-size: 1rem;
+  margin-bottom: 8px;
+}
+
+.card-image {
+  width: 100%;
+  height: auto;
+  margin: 12px 0;
+}
+
+.rarity {
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.cardset {
+  font-size: 0.9rem;
+  color: #555;
+  margin-bottom: 8px;
+}
+
+.cost {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+</style>

types/MarketplacePlayer.d.ts

@@ -0,0 +1,12 @@
+export interface MarketplacePlayer {
+    player_id: number
+    player_name: string
+    cardset_name: string
+    player_cost: number
+    rarity_name: string
+    rarity_color: string
+    franchise_name: string
+    player_headshot: string
+    player_card_image: string
+    player_card_image2: string
+  }

types/supabase.d.ts

@@ -9,6 +9,69 @@ export type Json =
 export type Database = {
   public: {
     Tables: {
+      cards: {
+        Row: {
+          created_at: string;
+          id: number;
+          pack_id: number | null;
+          player_id: number;
+          team_id: number;
+          variant: number | null;
+        };
+        Insert: {
+          created_at?: string;
+          id?: number;
+          pack_id?: number | null;
+          player_id: number;
+          team_id: number;
+          variant?: number | null;
+        };
+        Update: {
+          created_at?: string;
+          id?: number;
+          pack_id?: number | null;
+          player_id?: number;
+          team_id?: number;
+          variant?: number | null;
+        };
+        Relationships: [
+          {
+            foreignKeyName: "cards_pack_id_fkey";
+            columns: ["pack_id"];
+            isOneToOne: false;
+            referencedRelation: "packs";
+            referencedColumns: ["id"];
+          },
+          {
+            foreignKeyName: "cards_player_id_fkey";
+            columns: ["player_id"];
+            isOneToOne: false;
+            referencedRelation: "marketplace";
+            referencedColumns: ["player_id"];
+          },
+          {
+            foreignKeyName: "cards_player_id_fkey";
+            columns: ["player_id"];
+            isOneToOne: false;
+            referencedRelation: "players";
+            referencedColumns: ["id"];
+          },
+          {
+            foreignKeyName: "cards_player_id_fkey";
+            columns: ["player_id"];
+            isOneToOne: false;
+            referencedRelation: "random_player";
+            referencedColumns: ["id"];
+          },
+          {
+            foreignKeyName: "cards_team_id_fkey";
+            columns: ["team_id"];
+            isOneToOne: false;
+            referencedRelation: "teams";
+            referencedColumns: ["id"];
+          },
+        ];
+      };
       cardsets: {
         Row: {
           created_at: string;
@@ -75,6 +138,95 @@ export type Database = {
         };
         Relationships: [];
       };
+      pack_type: {
+        Row: {
+          card_count: number | null;
+          cost: number;
+          created_at: string;
+          description: string | null;
+          for_purchase: boolean | null;
+          id: number;
+          name: string;
+        };
+        Insert: {
+          card_count?: number | null;
+          cost: number;
+          created_at?: string;
+          description?: string | null;
+          for_purchase?: boolean | null;
+          id?: number;
+          name: string;
+        };
+        Update: {
+          card_count?: number | null;
+          cost?: number;
+          created_at?: string;
+          description?: string | null;
+          for_purchase?: boolean | null;
+          id?: number;
+          name?: string;
+        };
+        Relationships: [];
+      };
+      packs: {
+        Row: {
+          created_at: string;
+          id: number;
+          open_time: string | null;
+          owner_team_id: number | null;
+          pack_cardset_id: number | null;
+          pack_team_id: number | null;
+          pack_type_id: number | null;
+        };
+        Insert: {
+          created_at?: string;
+          id?: number;
+          open_time?: string | null;
+          owner_team_id?: number | null;
+          pack_cardset_id?: number | null;
+          pack_team_id?: number | null;
+          pack_type_id?: number | null;
+        };
+        Update: {
+          created_at?: string;
+          id?: number;
+          open_time?: string | null;
+          owner_team_id?: number | null;
+          pack_cardset_id?: number | null;
+          pack_team_id?: number | null;
+          pack_type_id?: number | null;
+        };
+        Relationships: [
+          {
+            foreignKeyName: "packs_owner_team_id_fkey";
+            columns: ["owner_team_id"];
+            isOneToOne: false;
+            referencedRelation: "teams";
+            referencedColumns: ["id"];
+          },
+          {
+            foreignKeyName: "packs_pack_cardset_id_fkey";
+            columns: ["pack_cardset_id"];
+            isOneToOne: false;
+            referencedRelation: "cardsets";
+            referencedColumns: ["id"];
+          },
+          {
+            foreignKeyName: "packs_pack_team_id_fkey";
+            columns: ["pack_team_id"];
+            isOneToOne: false;
+            referencedRelation: "teams";
+            referencedColumns: ["id"];
+          },
+          {
+            foreignKeyName: "packs_pack_type_id_fkey";
+            columns: ["pack_type_id"];
+            isOneToOne: false;
+            referencedRelation: "pack_type";
+            referencedColumns: ["id"];
+          },
+        ];
+      };
       players: {
         Row: {
           bbref_id: string | null;
@@ -217,13 +369,47 @@ export type Database = {
         };
         Relationships: [];
       };
+      rosters: {
+        Row: {
+          created_at: string;
+          description: string | null;
+          id: number;
+          name: string;
+          team_id: number;
+        };
+        Insert: {
+          created_at?: string;
+          description?: string | null;
+          id?: number;
+          name: string;
+          team_id: number;
+        };
+        Update: {
+          created_at?: string;
+          description?: string | null;
+          id?: number;
+          name?: string;
+          team_id?: number;
+        };
+        Relationships: [
+          {
+            foreignKeyName: "rosters_team_id_fkey";
+            columns: ["team_id"];
+            isOneToOne: false;
+            referencedRelation: "teams";
+            referencedColumns: ["id"];
+          },
+        ];
+      };
       teams: {
         Row: {
           abbrev: string | null;
           career: string | null;
           collection_value: string | null;
           color: string | null;
+          discord_id: string;
           event_id: string | null;
+          gm_profile_id: string | null;
           gmid: number | null;
           gmname: string | null;
           gsheet: string | null;
@@ -243,27 +429,9 @@ export type Database = {
           career?: string | null;
           collection_value?: string | null;
           color?: string | null;
+          discord_id: string;
           event_id?: string | null;
-          gmid?: number | null;
+          gm_profile_id?: string | null;
-          gmname?: string | null;
-          gsheet?: string | null;
-          has_guide?: string | null;
-          id: number;
-          is_ai?: number | null;
-          lname?: string | null;
-          logo?: string | null;
-          ranking?: number | null;
-          season?: number | null;
-          sname?: string | null;
-          team_value?: string | null;
-          wallet?: number | null;
-        };
-        Update: {
-          abbrev?: string | null;
-          career?: string | null;
-          collection_value?: string | null;
-          color?: string | null;
-          event_id?: string | null;
           gmid?: number | null;
           gmname?: string | null;
           gsheet?: string | null;
@@ -278,10 +446,53 @@ export type Database = {
           team_value?: string | null;
           wallet?: number | null;
         };
-        Relationships: [];
+        Update: {
+          abbrev?: string | null;
+          career?: string | null;
+          collection_value?: string | null;
+          color?: string | null;
+          discord_id?: string;
+          event_id?: string | null;
+          gm_profile_id?: string | null;
+          gmid?: number | null;
+          gmname?: string | null;
+          gsheet?: string | null;
+          has_guide?: string | null;
+          id?: number;
+          is_ai?: number | null;
+          lname?: string | null;
+          logo?: string | null;
+          ranking?: number | null;
+          season?: number | null;
+          sname?: string | null;
+          team_value?: string | null;
+          wallet?: number | null;
+        };
+        Relationships: [
+          {
+            foreignKeyName: "teams_gm_profile_id_fkey";
+            columns: ["gm_profile_id"];
+            isOneToOne: false;
+            referencedRelation: "profiles";
+            referencedColumns: ["id"];
+          },
+        ];
       };
     };
     Views: {
+      marketplace: {
+        Row: {
+          cardset_name: string | null;
+          franchise_name: Database["public"]["Enums"]["franchise"] | null;
+          player_cost: number | null;
+          player_id: number | null;
+          player_name: string | null;
+          player_positions: string[] | null;
+          rarity_color: string | null;
+          rarity_name: string | null;
+        };
+        Relationships: [];
+      };
       random_player: {
         Row: {
           bbref_id: string | null;