Functional marketplace with cards
This commit is contained in:
Cal Corum
parent
b67b4709ce
commit
9a294eba54
181
pages/marketplace.vue
Normal file
181
pages/marketplace.vue
Normal file
@ -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>
|
||||
12
types/MarketplacePlayer.d.ts
vendored
Normal file
12
types/MarketplacePlayer.d.ts
vendored
Normal file
@ -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
|
||||
}
|
||||
253
types/supabase.d.ts
vendored
253
types/supabase.d.ts
vendored
@ -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;
|
||||
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;
|
||||
gm_profile_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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user