paper-dynasty-website/pages/marketplace.vue

<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>