🏓 Initial ServeSync demo build
- FastAPI backend with PostgreSQL + Redis - 4 core features: Registration, Courts, Matchmaking, Tournament - Double elimination tournament with bracket visualization - ELO-based matchmaking (Stage 1 Open, Stage 2 Skill-Based) - Real-time WebSocket updates - TV Screen display for courts - Vue 3 + Tailwind CSS frontend - Seed data: 12 players, 4 courts, active matches, tournament in progress - Docker compose stack with Nginx reverse proxy
This commit is contained in:
Forge
14
frontend/Dockerfile
Normal file
14
frontend/Dockerfile
Normal file
@@ -0,0 +1,14 @@
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json .
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
COPY nginx-frontend.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ServeSync — Pickleball Court Management</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
9
frontend/nginx-frontend.conf
Normal file
9
frontend/nginx-frontend.conf
Normal file
@@ -0,0 +1,9 @@
|
||||
server {
|
||||
listen 80;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
23
frontend/package.json
Normal file
23
frontend/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "servesync-frontend",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.0",
|
||||
"vue-router": "^4.3.0",
|
||||
"pinia": "^2.1.7",
|
||||
"axios": "^1.6.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"vite": "^5.2.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"postcss": "^8.4.35"
|
||||
}
|
||||
}
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
105
frontend/src/App.vue
Normal file
105
frontend/src/App.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-950">
|
||||
<!-- Navbar - hidden on screen display pages -->
|
||||
<nav v-if="!isScreenDisplay" class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo -->
|
||||
<router-link to="/" class="flex items-center gap-2">
|
||||
<span class="text-2xl">🏓</span>
|
||||
<span class="text-xl font-bold text-white">Serve<span class="text-green-400">Sync</span></span>
|
||||
</router-link>
|
||||
|
||||
<!-- Nav Links -->
|
||||
<div class="hidden md:flex items-center gap-1">
|
||||
<router-link v-for="link in navLinks" :key="link.to" :to="link.to"
|
||||
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
:class="$route.path === link.to ? 'bg-green-500/20 text-green-400' : 'text-gray-400 hover:text-white hover:bg-gray-800'">
|
||||
{{ link.icon }} {{ link.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Current Player -->
|
||||
<div v-if="store.currentPlayer" class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 bg-gray-800 rounded-lg px-3 py-2">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white"
|
||||
:style="{ backgroundColor: store.currentPlayer.avatar_color }">
|
||||
{{ store.currentPlayer.name[0] }}
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<div class="text-xs text-gray-400">Playing as</div>
|
||||
<div class="text-sm font-medium text-white">{{ store.currentPlayer.name }}</div>
|
||||
</div>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full"
|
||||
:class="tierClass(store.currentPlayer.membership_tier)">
|
||||
{{ store.currentPlayer.elo_rating }} ELO
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Player Switcher -->
|
||||
<select @change="switchPlayer($event.target.value)"
|
||||
class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-2 py-1.5 focus:outline-none">
|
||||
<option v-for="p in store.players" :key="p.id" :value="p.id"
|
||||
:selected="p.id === store.currentPlayer?.id">
|
||||
{{ p.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile nav -->
|
||||
<div v-if="!isScreenDisplay" class="md:hidden bg-gray-900 border-b border-gray-800 px-4 py-2">
|
||||
<div class="flex gap-2 overflow-x-auto">
|
||||
<router-link v-for="link in navLinks" :key="link.to" :to="link.to"
|
||||
class="flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
|
||||
:class="$route.path === link.to ? 'bg-green-500/20 text-green-400' : 'text-gray-400 hover:text-white'">
|
||||
{{ link.icon }} {{ link.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useAppStore } from './stores/app'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useAppStore()
|
||||
|
||||
const isScreenDisplay = computed(() => route.name === 'Screen')
|
||||
|
||||
const navLinks = [
|
||||
{ to: '/', label: 'Dashboard', icon: '📊' },
|
||||
{ to: '/courts', label: 'Courts', icon: '🏟️' },
|
||||
{ to: '/matchmaking', label: 'Matchmaking', icon: '⚔️' },
|
||||
{ to: '/tournament', label: 'Tournament', icon: '🏆' },
|
||||
{ to: '/players', label: 'Players', icon: '👥' },
|
||||
]
|
||||
|
||||
const tierClass = (tier) => {
|
||||
const classes = {
|
||||
bronze: 'bg-amber-900/50 text-amber-400',
|
||||
silver: 'bg-gray-700/50 text-gray-300',
|
||||
gold: 'bg-yellow-900/50 text-yellow-400',
|
||||
platinum: 'bg-cyan-900/50 text-cyan-400',
|
||||
elite: 'bg-purple-900/50 text-purple-400',
|
||||
}
|
||||
return classes[tier] || 'bg-gray-800 text-gray-400'
|
||||
}
|
||||
|
||||
const switchPlayer = (playerId) => {
|
||||
const player = store.players.find(p => p.id == playerId)
|
||||
if (player) store.setCurrentPlayer(player)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await store.loadPlayers()
|
||||
})
|
||||
</script>
|
||||
10
frontend/src/main.js
Normal file
10
frontend/src/main.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
23
frontend/src/router/index.js
Normal file
23
frontend/src/router/index.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Dashboard from '../views/Dashboard.vue'
|
||||
import Courts from '../views/Courts.vue'
|
||||
import Matchmaking from '../views/Matchmaking.vue'
|
||||
import Tournament from '../views/Tournament.vue'
|
||||
import ScreenDisplay from '../views/ScreenDisplay.vue'
|
||||
import Players from '../views/Players.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'Dashboard', component: Dashboard },
|
||||
{ path: '/courts', name: 'Courts', component: Courts },
|
||||
{ path: '/matchmaking', name: 'Matchmaking', component: Matchmaking },
|
||||
{ path: '/tournament', name: 'Tournament', component: Tournament },
|
||||
{ path: '/players', name: 'Players', component: Players },
|
||||
{ path: '/screen/:courtId', name: 'Screen', component: ScreenDisplay },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
125
frontend/src/stores/app.js
Normal file
125
frontend/src/stores/app.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({ baseURL: '/api' })
|
||||
|
||||
export const useAppStore = defineStore('app', () => {
|
||||
const currentPlayer = ref(null)
|
||||
const players = ref([])
|
||||
const courts = ref([])
|
||||
const matches = ref([])
|
||||
const activeTournament = ref(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// Set demo player (no auth needed)
|
||||
const setCurrentPlayer = (player) => {
|
||||
currentPlayer.value = player
|
||||
localStorage.setItem('currentPlayerId', player.id)
|
||||
}
|
||||
|
||||
const loadPlayers = async () => {
|
||||
const res = await api.get('/players/')
|
||||
players.value = res.data
|
||||
// Auto-set first player as current if not set
|
||||
if (!currentPlayer.value && players.value.length > 0) {
|
||||
const savedId = localStorage.getItem('currentPlayerId')
|
||||
const saved = savedId ? players.value.find(p => p.id == savedId) : null
|
||||
currentPlayer.value = saved || players.value[0]
|
||||
}
|
||||
return players.value
|
||||
}
|
||||
|
||||
const loadCourts = async () => {
|
||||
const res = await api.get('/courts/')
|
||||
courts.value = res.data
|
||||
return courts.value
|
||||
}
|
||||
|
||||
const loadMatches = async () => {
|
||||
const res = await api.get('/matches/')
|
||||
matches.value = res.data
|
||||
return matches.value
|
||||
}
|
||||
|
||||
const loadLobby = async () => {
|
||||
const res = await api.get('/matches/lobby')
|
||||
return res.data
|
||||
}
|
||||
|
||||
const loadActiveMatches = async () => {
|
||||
const res = await api.get('/matches/active')
|
||||
return res.data
|
||||
}
|
||||
|
||||
const createMatch = async (data) => {
|
||||
const res = await api.post('/matches/', data)
|
||||
return res.data
|
||||
}
|
||||
|
||||
const joinMatch = async (matchId, playerId, team) => {
|
||||
const res = await api.post(`/matches/${matchId}/join`, { player_id: playerId, team })
|
||||
return res.data
|
||||
}
|
||||
|
||||
const startMatch = async (matchId) => {
|
||||
const res = await api.post(`/matches/${matchId}/start`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
const updateScore = async (matchId, team1Score, team2Score) => {
|
||||
const res = await api.post(`/matches/${matchId}/score`, { team1_score: team1Score, team2_score: team2Score })
|
||||
return res.data
|
||||
}
|
||||
|
||||
const completeMatch = async (matchId, team1Score, team2Score) => {
|
||||
const res = await api.post(`/matches/${matchId}/complete`, { team1_score: team1Score, team2_score: team2Score })
|
||||
return res.data
|
||||
}
|
||||
|
||||
const bookCourt = async (data) => {
|
||||
const res = await api.post('/courts/book', data)
|
||||
return res.data
|
||||
}
|
||||
|
||||
const loadTournaments = async () => {
|
||||
const res = await api.get('/tournaments/')
|
||||
return res.data
|
||||
}
|
||||
|
||||
const loadTournament = async (id) => {
|
||||
const res = await api.get(`/tournaments/${id}`)
|
||||
activeTournament.value = res.data
|
||||
return res.data
|
||||
}
|
||||
|
||||
const getLeaderboard = async (limit = 10) => {
|
||||
const res = await api.get(`/players/leaderboard?limit=${limit}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
const getCourtDisplay = async (courtId) => {
|
||||
const res = await api.get(`/screen/court/${courtId}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
const getOverview = async () => {
|
||||
const res = await api.get('/screen/overview')
|
||||
return res.data
|
||||
}
|
||||
|
||||
const completeTournamentMatch = async (tournamentId, matchId, s1, s2) => {
|
||||
const res = await api.post(`/tournaments/${tournamentId}/matches/${matchId}/score`, {
|
||||
team1_score: s1, team2_score: s2
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
|
||||
return {
|
||||
currentPlayer, players, courts, matches, activeTournament, loading,
|
||||
setCurrentPlayer, loadPlayers, loadCourts, loadMatches,
|
||||
loadLobby, loadActiveMatches, createMatch, joinMatch, startMatch,
|
||||
updateScore, completeMatch, bookCourt, loadTournaments, loadTournament,
|
||||
getLeaderboard, getCourtDisplay, getOverview, completeTournamentMatch,
|
||||
}
|
||||
})
|
||||
42
frontend/src/style.css
Normal file
42
frontend/src/style.css
Normal file
@@ -0,0 +1,42 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-gray-950 text-gray-100 font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply px-4 py-2 rounded-lg font-medium transition-all duration-200 cursor-pointer;
|
||||
}
|
||||
.btn-primary {
|
||||
@apply bg-green-500 hover:bg-green-400 text-white;
|
||||
}
|
||||
.btn-secondary {
|
||||
@apply bg-gray-700 hover:bg-gray-600 text-white;
|
||||
}
|
||||
.btn-danger {
|
||||
@apply bg-red-600 hover:bg-red-500 text-white;
|
||||
}
|
||||
.card {
|
||||
@apply bg-gray-900 rounded-xl border border-gray-800 p-6;
|
||||
}
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.tier-bronze { @apply text-amber-600; }
|
||||
.tier-silver { @apply text-gray-400; }
|
||||
.tier-gold { @apply text-yellow-400; }
|
||||
.tier-platinum { @apply text-cyan-400; }
|
||||
.tier-elite { @apply text-purple-400; }
|
||||
|
||||
.bg-tier-bronze { @apply bg-amber-900/30 border-amber-700/50; }
|
||||
.bg-tier-silver { @apply bg-gray-800/50 border-gray-600/50; }
|
||||
.bg-tier-gold { @apply bg-yellow-900/30 border-yellow-700/50; }
|
||||
.bg-tier-platinum { @apply bg-cyan-900/30 border-cyan-700/50; }
|
||||
.bg-tier-elite { @apply bg-purple-900/30 border-purple-700/50; }
|
||||
182
frontend/src/views/Courts.vue
Normal file
182
frontend/src/views/Courts.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-white">🏟️ Court Reservations</h1>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge bg-green-500/20 text-green-400">{{ availableCourts }} Available</span>
|
||||
<span class="badge bg-red-500/20 text-red-400">{{ occupiedCourts }} Occupied</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Court Grid -->
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div v-for="court in courts" :key="court.id"
|
||||
class="card transition-all hover:border-gray-700"
|
||||
:class="court.current_status === 'occupied' ? 'border-red-800/30' : 'border-green-800/30'">
|
||||
|
||||
<!-- Court Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-white">{{ court.name }}</h2>
|
||||
<div class="text-sm text-gray-400">{{ court.surface_type }}</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="badge text-sm"
|
||||
:class="court.current_status === 'occupied' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400'">
|
||||
{{ court.current_status === 'occupied' ? '🔴 In Use' : '🟢 Available' }}
|
||||
</span>
|
||||
<div class="text-sm text-gray-400 mt-1">₱{{ court.hourly_rate }}/hr</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="flex flex-wrap gap-1 mb-4">
|
||||
<span v-for="f in court.features.split(',')" :key="f"
|
||||
class="badge bg-gray-800 text-gray-300 text-xs">{{ f.trim() }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Active Match -->
|
||||
<div v-if="court.current_match" class="bg-gray-800 rounded-xl p-4 mb-4">
|
||||
<div class="text-xs text-gray-400 mb-2 uppercase tracking-wide">Live Match</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm font-medium text-white">{{ court.current_match.team1?.join(' & ') }}</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl font-bold text-white">{{ court.current_match.team1_score }}</span>
|
||||
<span class="text-gray-500">vs</span>
|
||||
<span class="text-2xl font-bold text-white">{{ court.current_match.team2_score }}</span>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-white text-right">{{ court.current_match.team2?.join(' & ') }}</div>
|
||||
</div>
|
||||
<div class="text-center mt-2">
|
||||
<router-link :to="`/screen/${court.id}`"
|
||||
class="text-xs text-blue-400 hover:underline">📺 View on Screen</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Book Form -->
|
||||
<div v-if="court.current_status === 'available'" class="space-y-3">
|
||||
<div class="text-sm font-medium text-gray-300">Book this court</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Date & Time</label>
|
||||
<input type="datetime-local" v-model="bookingForms[court.id].start_time"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Duration (hours)</label>
|
||||
<select v-model="bookingForms[court.id].duration"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500">
|
||||
<option value="1">1 hour — ₱{{ court.hourly_rate }}</option>
|
||||
<option value="2">2 hours — ₱{{ court.hourly_rate * 2 }}</option>
|
||||
<option value="3">3 hours — ₱{{ court.hourly_rate * 3 }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="bookCourt(court)"
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="!store.currentPlayer || loading[court.id]">
|
||||
{{ loading[court.id] ? 'Booking...' : `Book for ₱${court.hourly_rate * (bookingForms[court.id]?.duration || 1)}` }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TV Screen Link -->
|
||||
<router-link :to="`/screen/${court.id}`"
|
||||
class="mt-3 flex items-center justify-center gap-2 text-sm text-gray-400 hover:text-blue-400 transition-colors">
|
||||
<span>📺</span> Open TV Display
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Bookings -->
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white mb-4">📅 Upcoming Bookings</h2>
|
||||
<div class="card p-0 overflow-hidden">
|
||||
<div v-if="upcomingBookings.length === 0" class="text-center py-8 text-gray-500">
|
||||
No upcoming bookings
|
||||
</div>
|
||||
<div v-for="booking in upcomingBookings" :key="booking.id"
|
||||
class="flex items-center justify-between px-4 py-3 border-b border-gray-800 last:border-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl">📅</span>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-white">{{ booking.player_name }}</div>
|
||||
<div class="text-xs text-gray-400">{{ booking.court_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-sm text-white">{{ formatTime(booking.start_time) }}</div>
|
||||
<div class="text-xs text-gray-400">₱{{ booking.total_cost }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Toast -->
|
||||
<div v-if="successMsg" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-xl shadow-lg z-50">
|
||||
✅ {{ successMsg }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import axios from 'axios'
|
||||
|
||||
const store = useAppStore()
|
||||
const courts = ref([])
|
||||
const upcomingBookings = ref([])
|
||||
const loading = reactive({})
|
||||
const bookingForms = reactive({})
|
||||
const successMsg = ref('')
|
||||
|
||||
const availableCourts = computed(() => courts.value.filter(c => c.current_status === 'available').length)
|
||||
const occupiedCourts = computed(() => courts.value.filter(c => c.current_status === 'occupied').length)
|
||||
|
||||
const formatTime = (isoString) => {
|
||||
return new Date(isoString).toLocaleString('en-PH', {
|
||||
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const bookCourt = async (court) => {
|
||||
if (!store.currentPlayer) return
|
||||
loading[court.id] = true
|
||||
try {
|
||||
const form = bookingForms[court.id]
|
||||
await store.bookCourt({
|
||||
player_id: store.currentPlayer.id,
|
||||
court_id: court.id,
|
||||
start_time: new Date(form.start_time).toISOString(),
|
||||
duration_hours: parseFloat(form.duration),
|
||||
})
|
||||
successMsg.value = `Court ${court.name} booked successfully!`
|
||||
setTimeout(() => successMsg.value = '', 3000)
|
||||
courts.value = await store.loadCourts()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.detail || 'Booking failed')
|
||||
} finally {
|
||||
loading[court.id] = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
courts.value = await store.loadCourts()
|
||||
|
||||
// Init booking forms
|
||||
courts.value.forEach(court => {
|
||||
const now = new Date()
|
||||
now.setMinutes(0, 0, 0)
|
||||
now.setHours(now.getHours() + 1)
|
||||
bookingForms[court.id] = {
|
||||
start_time: now.toISOString().slice(0, 16),
|
||||
duration: '1',
|
||||
}
|
||||
})
|
||||
|
||||
try {
|
||||
const res = await axios.get('/api/courts/bookings/upcoming')
|
||||
upcomingBookings.value = res.data
|
||||
} catch (e) {}
|
||||
})
|
||||
</script>
|
||||
188
frontend/src/views/Dashboard.vue
Normal file
188
frontend/src/views/Dashboard.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
||||
<!-- Hero Stats -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="card text-center">
|
||||
<div class="text-3xl font-bold text-green-400">{{ courts.length }}</div>
|
||||
<div class="text-gray-400 text-sm mt-1">Total Courts</div>
|
||||
<div class="text-xs text-gray-500 mt-1">{{ availableCourts }} available</div>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-3xl font-bold text-blue-400">{{ activeMatches }}</div>
|
||||
<div class="text-gray-400 text-sm mt-1">Active Matches</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Live now</div>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-3xl font-bold text-yellow-400">{{ lobbyMatches }}</div>
|
||||
<div class="text-gray-400 text-sm mt-1">Lobby Waiting</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Join now</div>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="text-3xl font-bold text-purple-400">{{ players.length }}</div>
|
||||
<div class="text-gray-400 text-sm mt-1">Players</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Registered</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-6">
|
||||
<!-- Court Status Grid -->
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold text-white">Court Status</h2>
|
||||
<router-link to="/courts" class="text-green-400 text-sm hover:underline">View all →</router-link>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div v-for="court in courts" :key="court.id"
|
||||
class="card cursor-pointer hover:border-gray-600 transition-all"
|
||||
:class="court.current_status === 'occupied' ? 'border-red-800/50' : 'border-green-800/50'">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="font-bold text-white">{{ court.name }}</span>
|
||||
<span class="badge text-xs"
|
||||
:class="court.current_status === 'occupied' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400'">
|
||||
{{ court.current_status === 'occupied' ? '🔴 Occupied' : '🟢 Available' }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="court.current_match" class="space-y-2">
|
||||
<div class="flex items-center justify-between bg-gray-800 rounded-lg p-2">
|
||||
<span class="text-sm text-gray-300">{{ court.current_match.team1?.join(' & ') || 'Team 1' }}</span>
|
||||
<span class="text-xl font-bold text-white">{{ court.current_match.team1_score }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-gray-800 rounded-lg p-2">
|
||||
<span class="text-sm text-gray-300">{{ court.current_match.team2?.join(' & ') || 'Team 2' }}</span>
|
||||
<span class="text-xl font-bold text-white">{{ court.current_match.team2_score }}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<span class="badge bg-blue-500/20 text-blue-400 text-xs capitalize">
|
||||
{{ court.current_match.stage?.replace('_', ' ') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-3">
|
||||
<router-link to="/courts" class="text-green-400 text-sm hover:underline">Book this court →</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold text-white">🏆 Leaderboard</h2>
|
||||
<router-link to="/players" class="text-green-400 text-sm hover:underline">View all →</router-link>
|
||||
</div>
|
||||
<div class="card p-0 overflow-hidden">
|
||||
<div v-for="(player, idx) in leaderboard" :key="player.id"
|
||||
class="flex items-center gap-3 px-4 py-3 border-b border-gray-800 last:border-0 hover:bg-gray-800/50 transition-colors">
|
||||
<span class="text-lg font-bold w-6 text-center"
|
||||
:class="idx === 0 ? 'text-yellow-400' : idx === 1 ? 'text-gray-300' : idx === 2 ? 'text-amber-600' : 'text-gray-500'">
|
||||
{{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : idx + 1 }}
|
||||
</span>
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white flex-shrink-0"
|
||||
:style="{ backgroundColor: player.avatar_color }">
|
||||
{{ player.name[0] }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium text-white truncate">{{ player.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ player.wins }}W / {{ player.losses }}L</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-sm font-bold" :class="tierColorClass(player.membership_tier)">{{ Math.round(player.elo_rating) }}</div>
|
||||
<div class="text-xs capitalize" :class="tierColorClass(player.membership_tier)">{{ player.membership_tier }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Tournament Summary -->
|
||||
<div v-if="tournament" class="card bg-gradient-to-br from-purple-900/30 to-gray-900 border-purple-800/50">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="text-xl">🏆</span>
|
||||
<div>
|
||||
<div class="font-bold text-white text-sm">{{ tournament.tournament?.name }}</div>
|
||||
<div class="text-xs text-purple-400 capitalize">{{ tournament.tournament?.status?.replace('_', ' ') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-center">
|
||||
<div class="bg-purple-900/30 rounded-lg p-2">
|
||||
<div class="text-lg font-bold text-white">{{ tournament.winners_bracket?.length || 0 }}</div>
|
||||
<div class="text-xs text-gray-400">W Bracket</div>
|
||||
</div>
|
||||
<div class="bg-purple-900/30 rounded-lg p-2">
|
||||
<div class="text-lg font-bold text-white">{{ tournament.losers_bracket?.length || 0 }}</div>
|
||||
<div class="text-xs text-gray-400">L Bracket</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-link to="/tournament" class="btn btn-primary w-full text-center mt-3 block text-sm">
|
||||
View Bracket →
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="card">
|
||||
<h2 class="text-lg font-bold text-white mb-4">Quick Actions</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<router-link to="/matchmaking" class="flex flex-col items-center gap-2 bg-green-500/10 hover:bg-green-500/20 border border-green-500/30 rounded-xl p-4 transition-all">
|
||||
<span class="text-3xl">⚔️</span>
|
||||
<span class="text-sm font-medium text-green-400">Find Match</span>
|
||||
</router-link>
|
||||
<router-link to="/courts" class="flex flex-col items-center gap-2 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-xl p-4 transition-all">
|
||||
<span class="text-3xl">📅</span>
|
||||
<span class="text-sm font-medium text-blue-400">Book Court</span>
|
||||
</router-link>
|
||||
<router-link to="/tournament" class="flex flex-col items-center gap-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-xl p-4 transition-all">
|
||||
<span class="text-3xl">🏆</span>
|
||||
<span class="text-sm font-medium text-purple-400">Tournament</span>
|
||||
</router-link>
|
||||
<router-link to="/screen/1" class="flex flex-col items-center gap-2 bg-yellow-500/10 hover:bg-yellow-500/20 border border-yellow-500/30 rounded-xl p-4 transition-all">
|
||||
<span class="text-3xl">📺</span>
|
||||
<span class="text-sm font-medium text-yellow-400">Live Screen</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useAppStore } from '../stores/app'
|
||||
|
||||
const store = useAppStore()
|
||||
const courts = ref([])
|
||||
const leaderboard = ref([])
|
||||
const lobbyData = ref({ lobby: [], active: [] })
|
||||
const tournament = ref(null)
|
||||
const players = ref([])
|
||||
|
||||
const availableCourts = computed(() => courts.value.filter(c => c.current_status === 'available').length)
|
||||
const activeMatches = computed(() => lobbyData.value.active?.length || 0)
|
||||
const lobbyMatches = computed(() => lobbyData.value.lobby?.length || 0)
|
||||
|
||||
const tierColorClass = (tier) => {
|
||||
const classes = {
|
||||
bronze: 'text-amber-600',
|
||||
silver: 'text-gray-400',
|
||||
gold: 'text-yellow-400',
|
||||
platinum: 'text-cyan-400',
|
||||
elite: 'text-purple-400',
|
||||
}
|
||||
return classes[tier] || 'text-gray-400'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
courts.value = await store.loadCourts()
|
||||
leaderboard.value = await store.getLeaderboard(8)
|
||||
players.value = await store.loadPlayers()
|
||||
|
||||
try {
|
||||
const [lobby, active] = await Promise.all([store.loadLobby(), store.loadActiveMatches()])
|
||||
lobbyData.value = { lobby, active }
|
||||
} catch (e) {}
|
||||
|
||||
try {
|
||||
const tournaments = await store.loadTournaments()
|
||||
const active = tournaments.find(t => t.status === 'in_progress')
|
||||
if (active) tournament.value = await store.loadTournament(active.id)
|
||||
} catch (e) {}
|
||||
})
|
||||
</script>
|
||||
408
frontend/src/views/Matchmaking.vue
Normal file
408
frontend/src/views/Matchmaking.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-white">⚔️ Matchmaking</h1>
|
||||
<button @click="refreshData" class="btn btn-secondary text-sm">🔄 Refresh</button>
|
||||
</div>
|
||||
|
||||
<!-- Stage Tabs -->
|
||||
<div class="flex gap-2 bg-gray-900 p-1 rounded-xl w-fit">
|
||||
<button v-for="stage in stages" :key="stage.id"
|
||||
@click="activeStage = stage.id"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-all"
|
||||
:class="activeStage === stage.id ? 'bg-green-500 text-white' : 'text-gray-400 hover:text-white'">
|
||||
{{ stage.icon }} {{ stage.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Stage Info -->
|
||||
<div class="card" :class="stageCardClass">
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="text-4xl">{{ currentStage.icon }}</span>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white">{{ currentStage.label }}</h2>
|
||||
<p class="text-gray-400 text-sm mt-1">{{ currentStage.description }}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<span v-for="rule in currentStage.rules" :key="rule" class="badge bg-gray-800 text-gray-300 text-xs">
|
||||
{{ rule }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-6">
|
||||
<!-- Create Match -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="card space-y-4">
|
||||
<h2 class="font-bold text-white">Create Match</h2>
|
||||
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Match Title</label>
|
||||
<input v-model="createForm.title" type="text" placeholder="e.g. Friday Night Doubles"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Match Type</label>
|
||||
<select v-model="createForm.match_type"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500">
|
||||
<option value="doubles">Doubles (4 players)</option>
|
||||
<option value="singles">Singles (2 players)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="activeStage === 'skill_based'">
|
||||
<label class="text-xs text-gray-400">ELO Tolerance (±)</label>
|
||||
<select v-model="createForm.elo_tolerance"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500">
|
||||
<option value="100">±100 (Strict)</option>
|
||||
<option value="200">±200 (Standard)</option>
|
||||
<option value="300">±300 (Relaxed)</option>
|
||||
</select>
|
||||
<div class="text-xs text-gray-500 mt-1">
|
||||
Your ELO: {{ store.currentPlayer?.elo_rating?.toFixed(0) }} →
|
||||
Range: {{ eloRange.min }}-{{ eloRange.max }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="createMatch" :disabled="!createForm.title || !store.currentPlayer || creatingMatch"
|
||||
class="btn btn-primary w-full">
|
||||
{{ creatingMatch ? 'Creating...' : '+ Create Match' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- My Active Matches -->
|
||||
<div v-if="myMatches.length > 0" class="card mt-4">
|
||||
<h3 class="font-bold text-white mb-3">My Matches</h3>
|
||||
<div v-for="m in myMatches" :key="m.id" class="bg-gray-800 rounded-lg p-3 mb-2">
|
||||
<div class="text-sm font-medium text-white">{{ m.title }}</div>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<span class="badge text-xs capitalize"
|
||||
:class="m.status === 'in_progress' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'">
|
||||
{{ m.status.replace('_', ' ') }}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<button v-if="m.status === 'in_progress'"
|
||||
@click="openScoreModal(m)"
|
||||
class="text-xs bg-blue-600 hover:bg-blue-500 text-white px-2 py-1 rounded">
|
||||
Score
|
||||
</button>
|
||||
<button v-if="m.status === 'lobby' && m.current_players >= m.max_players"
|
||||
@click="startMatch(m.id)"
|
||||
class="text-xs bg-green-600 hover:bg-green-500 text-white px-2 py-1 rounded">
|
||||
Start
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lobby -->
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-bold text-white">Open Lobbies ({{ filteredLobby.length }})</h2>
|
||||
<div class="text-sm text-gray-400">Auto-refresh every 5s</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredLobby.length === 0" class="card text-center py-12">
|
||||
<div class="text-4xl mb-3">🏓</div>
|
||||
<div class="text-gray-400">No matches in lobby</div>
|
||||
<div class="text-gray-500 text-sm mt-1">Create one above!</div>
|
||||
</div>
|
||||
|
||||
<div v-for="match in filteredLobby" :key="match.id"
|
||||
class="card hover:border-gray-600 transition-all">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div class="font-bold text-white">{{ match.title }}</div>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<span class="badge bg-gray-800 text-gray-300 text-xs capitalize">
|
||||
{{ match.stage.replace('_', ' ') }}
|
||||
</span>
|
||||
<span class="badge bg-gray-800 text-gray-300 text-xs">
|
||||
{{ match.match_type }}
|
||||
</span>
|
||||
<span v-if="match.min_elo" class="badge bg-orange-500/20 text-orange-400 text-xs">
|
||||
ELO {{ match.min_elo?.toFixed(0) }}-{{ match.max_elo?.toFixed(0) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-sm font-medium text-white">{{ match.current_players }}/{{ match.max_players }}</div>
|
||||
<div class="text-xs text-gray-400">players</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Teams -->
|
||||
<div class="grid grid-cols-2 gap-3 mb-3">
|
||||
<div class="bg-blue-900/20 border border-blue-800/30 rounded-lg p-2">
|
||||
<div class="text-xs text-blue-400 mb-1">Team 1</div>
|
||||
<div v-for="p in match.team1" :key="p.id" class="flex items-center gap-1 text-sm text-white">
|
||||
<div class="w-5 h-5 rounded-full text-xs flex items-center justify-center font-bold"
|
||||
:style="{ backgroundColor: p.avatar_color }">{{ p.name[0] }}</div>
|
||||
{{ p.name }}
|
||||
<span class="text-xs text-gray-400">({{ p.elo.toFixed(0) }})</span>
|
||||
</div>
|
||||
<div v-for="i in Math.max(0, (match.max_players/2) - match.team1.length)" :key="`t1-${i}`"
|
||||
class="text-xs text-gray-600 italic">Empty slot...</div>
|
||||
</div>
|
||||
<div class="bg-red-900/20 border border-red-800/30 rounded-lg p-2">
|
||||
<div class="text-xs text-red-400 mb-1">Team 2</div>
|
||||
<div v-for="p in match.team2" :key="p.id" class="flex items-center gap-1 text-sm text-white">
|
||||
<div class="w-5 h-5 rounded-full text-xs flex items-center justify-center font-bold"
|
||||
:style="{ backgroundColor: p.avatar_color }">{{ p.name[0] }}</div>
|
||||
{{ p.name }}
|
||||
<span class="text-xs text-gray-400">({{ p.elo.toFixed(0) }})</span>
|
||||
</div>
|
||||
<div v-for="i in Math.max(0, (match.max_players/2) - match.team2.length)" :key="`t2-${i}`"
|
||||
class="text-xs text-gray-600 italic">Empty slot...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
<button v-if="!isInMatch(match)"
|
||||
@click="joinMatch(match.id, 1)"
|
||||
class="btn btn-primary text-sm flex-1"
|
||||
:disabled="match.team1.length >= match.max_players / 2">
|
||||
Join Team 1
|
||||
</button>
|
||||
<button v-if="!isInMatch(match)"
|
||||
@click="joinMatch(match.id, 2)"
|
||||
class="btn btn-secondary text-sm flex-1"
|
||||
:disabled="match.team2.length >= match.max_players / 2">
|
||||
Join Team 2
|
||||
</button>
|
||||
<button v-if="match.current_players >= match.max_players && isCreator(match)"
|
||||
@click="startMatch(match.id)"
|
||||
class="btn bg-yellow-500 hover:bg-yellow-400 text-black text-sm flex-1 font-bold">
|
||||
🚀 Start Match
|
||||
</button>
|
||||
<span v-if="isInMatch(match)" class="badge bg-green-500/20 text-green-400">✓ Joined</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Matches Section -->
|
||||
<div v-if="activeMatches.length > 0">
|
||||
<h2 class="font-bold text-white mb-3">🔥 Active Matches</h2>
|
||||
<div v-for="match in activeMatches" :key="match.id"
|
||||
class="card border-green-800/30">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="font-bold text-white">{{ match.title }}</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge bg-green-500/20 text-green-400">🔴 Live</span>
|
||||
<span v-if="match.court_name" class="badge bg-gray-700 text-gray-300 text-xs">{{ match.court_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-6 py-4">
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-1">{{ match.team1.map(p => p.name).join(' & ') }}</div>
|
||||
<div class="text-5xl font-black text-white">{{ match.team1_score }}</div>
|
||||
</div>
|
||||
<div class="text-2xl text-gray-500">vs</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-1">{{ match.team2.map(p => p.name).join(' & ') }}</div>
|
||||
<div class="text-5xl font-black text-white">{{ match.team2_score }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 justify-center">
|
||||
<button @click="openScoreModal(match)" class="btn btn-secondary text-sm">📊 Update Score</button>
|
||||
<button @click="openCompleteModal(match)" class="btn btn-danger text-sm">🏁 End Match</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Score Update Modal -->
|
||||
<div v-if="scoreModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-md">
|
||||
<h3 class="text-lg font-bold text-white mb-4">{{ completeMode ? '🏁 End Match' : '📊 Update Score' }}</h3>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-2">{{ scoreModal.team1.map(p => p.name).join(' & ') }}</div>
|
||||
<input type="number" v-model="scoreForm.team1_score" min="0" max="21"
|
||||
class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-2">{{ scoreModal.team2.map(p => p.name).join(' & ') }}</div>
|
||||
<input type="number" v-model="scoreForm.team2_score" min="0" max="21"
|
||||
class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button @click="scoreModal = null" class="btn btn-secondary flex-1">Cancel</button>
|
||||
<button @click="submitScore" :class="completeMode ? 'btn btn-danger' : 'btn btn-primary'" class="flex-1">
|
||||
{{ completeMode ? 'End & Update ELO' : 'Update Score' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div v-if="toast" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-xl shadow-lg z-50">
|
||||
✅ {{ toast }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { useAppStore } from '../stores/app'
|
||||
|
||||
const store = useAppStore()
|
||||
const lobby = ref([])
|
||||
const activeMatches = ref([])
|
||||
const activeStage = ref('open')
|
||||
const creatingMatch = ref(false)
|
||||
const scoreModal = ref(null)
|
||||
const completeMode = ref(false)
|
||||
const toast = ref('')
|
||||
const scoreForm = reactive({ team1_score: 0, team2_score: 0 })
|
||||
let refreshInterval = null
|
||||
|
||||
const stages = [
|
||||
{
|
||||
id: 'open',
|
||||
icon: '🎯',
|
||||
label: 'Stage 1: Open Match',
|
||||
description: 'Anyone can join. No skill restrictions. Great for casual play and meeting new players.',
|
||||
rules: ['No ELO requirement', 'Free to join', 'Performance tracked silently'],
|
||||
},
|
||||
{
|
||||
id: 'skill_based',
|
||||
icon: '⚡',
|
||||
label: 'Stage 2: Skill-Based',
|
||||
description: 'ELO-gated matchmaking. Players match within ±200 ELO points for balanced competition.',
|
||||
rules: ['ELO within ±200', 'Team avg must be in range', 'Affects ELO rating'],
|
||||
},
|
||||
]
|
||||
|
||||
const createForm = reactive({ title: '', match_type: 'doubles', elo_tolerance: 200 })
|
||||
|
||||
const currentStage = computed(() => stages.find(s => s.id === activeStage.value))
|
||||
|
||||
const stageCardClass = computed(() => ({
|
||||
'border-blue-800/50 bg-blue-900/10': activeStage.value === 'open',
|
||||
'border-orange-800/50 bg-orange-900/10': activeStage.value === 'skill_based',
|
||||
}))
|
||||
|
||||
const eloRange = computed(() => {
|
||||
const elo = store.currentPlayer?.elo_rating || 1000
|
||||
const t = parseFloat(createForm.elo_tolerance) || 200
|
||||
return { min: Math.max(0, Math.round(elo - t)), max: Math.round(elo + t) }
|
||||
})
|
||||
|
||||
const filteredLobby = computed(() => {
|
||||
return lobby.value.filter(m => m.stage === activeStage.value)
|
||||
})
|
||||
|
||||
const isInMatch = (match) => {
|
||||
const pid = store.currentPlayer?.id
|
||||
return [...match.team1, ...match.team2].some(p => p.id === pid)
|
||||
}
|
||||
|
||||
const isCreator = (match) => {
|
||||
const pid = store.currentPlayer?.id
|
||||
return match.team1[0]?.id === pid || match.team2[0]?.id === pid
|
||||
}
|
||||
|
||||
const myMatches = computed(() => {
|
||||
const pid = store.currentPlayer?.id
|
||||
if (!pid) return []
|
||||
return activeMatches.value.filter(m => [...m.team1, ...m.team2].some(p => p.id === pid))
|
||||
})
|
||||
|
||||
const createMatch = async () => {
|
||||
if (!createForm.title || !store.currentPlayer) return
|
||||
creatingMatch.value = true
|
||||
try {
|
||||
await store.createMatch({
|
||||
title: createForm.title,
|
||||
stage: activeStage.value,
|
||||
match_type: createForm.match_type,
|
||||
creator_player_id: store.currentPlayer.id,
|
||||
elo_tolerance: parseFloat(createForm.elo_tolerance),
|
||||
})
|
||||
createForm.title = ''
|
||||
showToast('Match created! Players can now join.')
|
||||
await refreshData()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.detail || 'Error creating match')
|
||||
} finally {
|
||||
creatingMatch.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const joinMatch = async (matchId, team) => {
|
||||
if (!store.currentPlayer) return
|
||||
try {
|
||||
await store.joinMatch(matchId, store.currentPlayer.id, team)
|
||||
showToast('Joined match!')
|
||||
await refreshData()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.detail || 'Cannot join match')
|
||||
}
|
||||
}
|
||||
|
||||
const startMatch = async (matchId) => {
|
||||
try {
|
||||
await store.startMatch(matchId)
|
||||
showToast('Match started! Court auto-assigned.')
|
||||
await refreshData()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.detail || 'Cannot start match')
|
||||
}
|
||||
}
|
||||
|
||||
const openScoreModal = (match) => {
|
||||
scoreModal.value = match
|
||||
completeMode.value = false
|
||||
scoreForm.team1_score = match.team1_score || 0
|
||||
scoreForm.team2_score = match.team2_score || 0
|
||||
}
|
||||
|
||||
const openCompleteModal = (match) => {
|
||||
scoreModal.value = match
|
||||
completeMode.value = true
|
||||
scoreForm.team1_score = match.team1_score || 0
|
||||
scoreForm.team2_score = match.team2_score || 0
|
||||
}
|
||||
|
||||
const submitScore = async () => {
|
||||
if (!scoreModal.value) return
|
||||
try {
|
||||
if (completeMode.value) {
|
||||
await store.completeMatch(scoreModal.value.id, scoreForm.team1_score, scoreForm.team2_score)
|
||||
showToast('Match completed! ELO updated.')
|
||||
} else {
|
||||
await store.updateScore(scoreModal.value.id, scoreForm.team1_score, scoreForm.team2_score)
|
||||
showToast('Score updated!')
|
||||
}
|
||||
scoreModal.value = null
|
||||
await refreshData()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.detail || 'Error')
|
||||
}
|
||||
}
|
||||
|
||||
const showToast = (msg) => {
|
||||
toast.value = msg
|
||||
setTimeout(() => toast.value = '', 3000)
|
||||
}
|
||||
|
||||
const refreshData = async () => {
|
||||
[lobby.value, activeMatches.value] = await Promise.all([store.loadLobby(), store.loadActiveMatches()])
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshData()
|
||||
refreshInterval = setInterval(refreshData, 5000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshInterval) clearInterval(refreshInterval)
|
||||
})
|
||||
</script>
|
||||
171
frontend/src/views/Players.vue
Normal file
171
frontend/src/views/Players.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-white">👥 Players</h1>
|
||||
<button @click="showRegister = true" class="btn btn-primary text-sm">+ Register Player</button>
|
||||
</div>
|
||||
|
||||
<!-- Tier Distribution -->
|
||||
<div class="flex gap-3 flex-wrap">
|
||||
<div v-for="tier in tierStats" :key="tier.name"
|
||||
class="flex items-center gap-2 bg-gray-900 border border-gray-800 rounded-xl px-4 py-2">
|
||||
<span class="text-lg">{{ tier.icon }}</span>
|
||||
<div>
|
||||
<div class="text-sm font-medium" :class="tier.color">{{ tier.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ tier.count }} players</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Players Table -->
|
||||
<div class="card p-0 overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-800 text-left">
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Rank</th>
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Player</th>
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">ELO</th>
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Tier</th>
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">W/L</th>
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Win Rate</th>
|
||||
<th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Matches</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(player, idx) in players" :key="player.id"
|
||||
class="border-b border-gray-800/50 last:border-0 hover:bg-gray-800/30 transition-colors cursor-pointer"
|
||||
:class="player.id === store.currentPlayer?.id ? 'bg-green-900/10' : ''">
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span :class="idx === 0 ? 'text-yellow-400 text-lg' : idx === 1 ? 'text-gray-300 text-lg' : idx === 2 ? 'text-amber-600 text-lg' : 'text-gray-500'">
|
||||
{{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `#${idx + 1}` }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold text-white"
|
||||
:style="{ backgroundColor: player.avatar_color }">
|
||||
{{ player.name[0] }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-white flex items-center gap-1">
|
||||
{{ player.name }}
|
||||
<span v-if="player.id === store.currentPlayer?.id" class="badge bg-green-500/20 text-green-400 text-xs">You</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">{{ player.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="text-white font-mono font-bold">{{ Math.round(player.elo_rating) }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="badge capitalize text-xs px-2 py-1"
|
||||
:class="tierBadge(player.membership_tier)">
|
||||
{{ player.membership_tier }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-300">
|
||||
<span class="text-green-400">{{ player.wins }}W</span>
|
||||
<span class="text-gray-600 mx-1">/</span>
|
||||
<span class="text-red-400">{{ player.losses }}L</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 bg-gray-800 rounded-full h-1.5 w-16">
|
||||
<div class="h-full rounded-full bg-green-500"
|
||||
:style="{ width: player.win_rate + '%' }"></div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-400">{{ player.win_rate }}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-400">{{ player.total_matches }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Register Modal -->
|
||||
<div v-if="showRegister" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-md">
|
||||
<h3 class="text-lg font-bold text-white mb-4">👤 Register New Player</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Full Name *</label>
|
||||
<input v-model="registerForm.name" type="text" placeholder="Juan Dela Cruz"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Email *</label>
|
||||
<input v-model="registerForm.email" type="email" placeholder="juan@email.com"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Phone</label>
|
||||
<input v-model="registerForm.phone" type="tel" placeholder="+63 912 345 6789"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-3 text-xs text-gray-400">
|
||||
New players start at <span class="text-white font-bold">1000 ELO</span> (Bronze tier).
|
||||
Rating updates automatically after each match.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-4">
|
||||
<button @click="showRegister = false" class="btn btn-secondary flex-1">Cancel</button>
|
||||
<button @click="registerPlayer" :disabled="!registerForm.name || !registerForm.email"
|
||||
class="btn btn-primary flex-1">Register</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from 'vue'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import axios from 'axios'
|
||||
|
||||
const store = useAppStore()
|
||||
const players = ref([])
|
||||
const showRegister = ref(false)
|
||||
const registerForm = reactive({ name: '', email: '', phone: '' })
|
||||
|
||||
const tierStats = computed(() => {
|
||||
const tiers = { bronze: 0, silver: 0, gold: 0, platinum: 0, elite: 0 }
|
||||
players.value.forEach(p => { tiers[p.membership_tier] = (tiers[p.membership_tier] || 0) + 1 })
|
||||
return [
|
||||
{ name: 'Bronze', icon: '🥉', color: 'text-amber-600', count: tiers.bronze },
|
||||
{ name: 'Silver', icon: '🥈', color: 'text-gray-400', count: tiers.silver },
|
||||
{ name: 'Gold', icon: '🥇', color: 'text-yellow-400', count: tiers.gold },
|
||||
{ name: 'Platinum', icon: '💎', color: 'text-cyan-400', count: tiers.platinum },
|
||||
{ name: 'Elite', icon: '👑', color: 'text-purple-400', count: tiers.elite },
|
||||
]
|
||||
})
|
||||
|
||||
const tierBadge = (tier) => {
|
||||
const classes = {
|
||||
bronze: 'bg-amber-900/40 text-amber-500 border border-amber-800/50',
|
||||
silver: 'bg-gray-700/50 text-gray-300 border border-gray-600/50',
|
||||
gold: 'bg-yellow-900/40 text-yellow-400 border border-yellow-800/50',
|
||||
platinum: 'bg-cyan-900/40 text-cyan-400 border border-cyan-800/50',
|
||||
elite: 'bg-purple-900/40 text-purple-400 border border-purple-800/50',
|
||||
}
|
||||
return classes[tier] || 'bg-gray-800 text-gray-400'
|
||||
}
|
||||
|
||||
const registerPlayer = async () => {
|
||||
try {
|
||||
const res = await axios.post('/api/players/', registerForm)
|
||||
players.value = await store.loadPlayers()
|
||||
showRegister.value = false
|
||||
registerForm.name = ''
|
||||
registerForm.email = ''
|
||||
registerForm.phone = ''
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.detail || 'Registration failed')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
players.value = await store.loadPlayers()
|
||||
})
|
||||
</script>
|
||||
386
frontend/src/views/ScreenDisplay.vue
Normal file
386
frontend/src/views/ScreenDisplay.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-950 overflow-hidden" :class="{ 'cursor-none': isFullscreen }">
|
||||
<!-- Screen Mode Selector (top bar, hidden when watching) -->
|
||||
<div v-if="!isFullscreen" class="bg-gray-900 border-b border-gray-800 p-3 flex items-center gap-4">
|
||||
<router-link to="/" class="text-gray-400 hover:text-white text-sm">← Back</router-link>
|
||||
<div class="flex gap-2">
|
||||
<button v-for="c in [1,2,3,4]" :key="c"
|
||||
@click="switchCourt(c)"
|
||||
class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all"
|
||||
:class="courtId === c ? 'bg-green-500 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
|
||||
Court {{ c }}
|
||||
</button>
|
||||
<button @click="mode = 'overview'"
|
||||
class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all"
|
||||
:class="mode === 'overview' ? 'bg-blue-500 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
|
||||
Overview
|
||||
</button>
|
||||
</div>
|
||||
<button @click="toggleFullscreen" class="ml-auto bg-gray-800 hover:bg-gray-700 text-white px-3 py-1.5 rounded-lg text-sm">
|
||||
⛶ Fullscreen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- COURT DISPLAY MODE -->
|
||||
<div v-if="mode === 'court'" class="h-screen flex flex-col bg-gray-950">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-8 pt-6 pb-4 bg-gray-900 border-b border-gray-800">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-4xl">🏓</span>
|
||||
<div>
|
||||
<div class="text-3xl font-black text-white">{{ courtData?.court?.name || `Court ${courtId}` }}</div>
|
||||
<div class="text-gray-400">{{ courtData?.court?.surface_type }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-right">
|
||||
<div class="text-sm text-gray-400">ServeSync</div>
|
||||
<div class="text-lg font-bold text-green-400">🟢 LIVE</div>
|
||||
</div>
|
||||
<div class="text-right text-white">
|
||||
<div class="text-2xl font-mono">{{ currentTime }}</div>
|
||||
<div class="text-sm text-gray-400">{{ currentDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Match Display -->
|
||||
<div v-if="courtData?.active_match" class="flex-1 flex flex-col items-center justify-center px-8 py-6 gap-8">
|
||||
<!-- Stage Badge -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-5xl">{{ stageIcon(courtData.active_match.stage) }}</span>
|
||||
<div class="text-center">
|
||||
<span class="badge text-lg px-4 py-2 capitalize"
|
||||
:class="stageClass(courtData.active_match.stage)">
|
||||
{{ courtData.active_match.stage.replace('_', ' ').toUpperCase() }} MATCH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scoreboard -->
|
||||
<div class="w-full max-w-5xl">
|
||||
<div class="grid grid-cols-3 gap-6 items-center">
|
||||
<!-- Team 1 -->
|
||||
<div class="text-center space-y-4">
|
||||
<div class="flex justify-center gap-3">
|
||||
<div v-for="p in courtData.active_match.team1" :key="p.id"
|
||||
class="flex flex-col items-center gap-2">
|
||||
<div class="w-20 h-20 rounded-full flex items-center justify-center text-4xl font-black text-white shadow-2xl"
|
||||
:style="{ backgroundColor: p.avatar_color, boxShadow: `0 0 30px ${p.avatar_color}40` }">
|
||||
{{ p.name[0] }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">{{ p.name.split(' ')[0] }}</div>
|
||||
<div class="text-sm capitalize px-2 py-0.5 rounded-full"
|
||||
:class="tierBadgeClass(p.membership_tier)">
|
||||
{{ p.membership_tier }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-9xl font-black text-white leading-none tabular-nums"
|
||||
:class="courtData.active_match.team1_score > courtData.active_match.team2_score ? 'text-green-400' : ''">
|
||||
{{ courtData.active_match.team1_score }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VS / Timer -->
|
||||
<div class="text-center space-y-4">
|
||||
<div class="text-4xl font-black text-gray-600">VS</div>
|
||||
<div v-if="courtData.active_match.elapsed_seconds" class="space-y-1">
|
||||
<div class="text-gray-400 text-sm">Elapsed</div>
|
||||
<div class="text-3xl font-mono text-white">{{ formatElapsed(courtData.active_match.elapsed_seconds) }}</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 mt-4">
|
||||
<div class="h-2 rounded-full bg-gray-800 overflow-hidden">
|
||||
<div class="h-full bg-blue-500 transition-all duration-500 rounded-full"
|
||||
:style="{ width: team1Percent + '%' }"></div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 text-center">Score Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team 2 -->
|
||||
<div class="text-center space-y-4">
|
||||
<div class="flex justify-center gap-3">
|
||||
<div v-for="p in courtData.active_match.team2" :key="p.id"
|
||||
class="flex flex-col items-center gap-2">
|
||||
<div class="w-20 h-20 rounded-full flex items-center justify-center text-4xl font-black text-white shadow-2xl"
|
||||
:style="{ backgroundColor: p.avatar_color, boxShadow: `0 0 30px ${p.avatar_color}40` }">
|
||||
{{ p.name[0] }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-white">{{ p.name.split(' ')[0] }}</div>
|
||||
<div class="text-sm capitalize px-2 py-0.5 rounded-full"
|
||||
:class="tierBadgeClass(p.membership_tier)">
|
||||
{{ p.membership_tier }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-9xl font-black text-white leading-none tabular-nums"
|
||||
:class="courtData.active_match.team2_score > courtData.active_match.team1_score ? 'text-green-400' : ''">
|
||||
{{ courtData.active_match.team2_score }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ELO Info -->
|
||||
<div class="flex gap-6 text-center">
|
||||
<div v-for="p in [...(courtData.active_match.team1 || []), ...(courtData.active_match.team2 || [])]"
|
||||
:key="p.id"
|
||||
class="bg-gray-900 border border-gray-700 rounded-xl px-4 py-2">
|
||||
<div class="text-xs text-gray-400">{{ p.name }}</div>
|
||||
<div class="text-lg font-bold text-white">{{ p.elo?.toFixed(0) }} ELO</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available Court Display -->
|
||||
<div v-else class="flex-1 flex flex-col items-center justify-center gap-8 px-8">
|
||||
<div class="text-8xl">🟢</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-black text-green-400 mb-4">COURT AVAILABLE</div>
|
||||
<div class="text-2xl text-gray-400">Book this court via ServeSync</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Matches -->
|
||||
<div v-if="courtData?.recent_matches?.length" class="w-full max-w-2xl">
|
||||
<div class="text-lg text-gray-400 text-center mb-4">Recent Matches</div>
|
||||
<div class="space-y-2">
|
||||
<div v-for="m in courtData.recent_matches" :key="m.team1?.[0]"
|
||||
class="flex items-center justify-between bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
|
||||
<span class="text-white">{{ m.team1?.join(' & ') }}</span>
|
||||
<span class="text-2xl font-bold" :class="m.winner === 'team1' ? 'text-green-400' : 'text-white'">{{ m.team1_score }}</span>
|
||||
<span class="text-gray-500">vs</span>
|
||||
<span class="text-2xl font-bold" :class="m.winner === 'team2' ? 'text-green-400' : 'text-white'">{{ m.team2_score }}</span>
|
||||
<span class="text-white">{{ m.team2?.join(' & ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="bg-gray-900 border-t border-gray-800 px-8 py-3 flex items-center justify-between text-sm text-gray-400">
|
||||
<span>🏓 ServeSync — Court Management System</span>
|
||||
<span>Auto-refresh every 3s</span>
|
||||
<span>{{ courtData?.court?.features }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OVERVIEW MODE -->
|
||||
<div v-else-if="mode === 'overview'" class="min-h-screen bg-gray-950 p-6 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-4xl">🏓</span>
|
||||
<div>
|
||||
<div class="text-3xl font-black text-white">ServeSync Live</div>
|
||||
<div class="text-gray-400">All Courts Overview</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-mono text-white">{{ currentTime }}</div>
|
||||
<div class="text-gray-400">{{ currentDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courts Grid -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div v-for="court in overview?.courts" :key="court.id"
|
||||
class="bg-gray-900 border rounded-2xl overflow-hidden"
|
||||
:class="court.status === 'occupied' ? 'border-green-700/50' : 'border-gray-700/50'">
|
||||
<div class="flex items-center justify-between px-5 py-3 border-b"
|
||||
:class="court.status === 'occupied' ? 'bg-green-900/20 border-green-800/30' : 'bg-gray-800/50 border-gray-700/50'">
|
||||
<span class="text-xl font-bold text-white">{{ court.name }}</span>
|
||||
<span :class="court.status === 'occupied' ? 'text-green-400' : 'text-gray-500'">
|
||||
{{ court.status === 'occupied' ? '🔴 MATCH IN PROGRESS' : '⚪ AVAILABLE' }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="court.match" class="px-5 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-1">{{ court.match.team1_names?.join(' & ') }}</div>
|
||||
<div class="text-6xl font-black" :class="court.match.team1_score > court.match.team2_score ? 'text-green-400' : 'text-white'">
|
||||
{{ court.match.team1_score }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-3xl text-gray-600 font-bold">VS</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-1">{{ court.match.team2_names?.join(' & ') }}</div>
|
||||
<div class="text-6xl font-black" :class="court.match.team2_score > court.match.team1_score ? 'text-green-400' : 'text-white'">
|
||||
{{ court.match.team2_score }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="px-5 py-8 text-center text-gray-600 text-lg">
|
||||
Ready for play
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard -->
|
||||
<div class="grid lg:grid-cols-2 gap-6">
|
||||
<div class="bg-gray-900 border border-gray-800 rounded-2xl overflow-hidden">
|
||||
<div class="px-5 py-3 bg-gray-800/50 border-b border-gray-700/50">
|
||||
<span class="text-lg font-bold text-white">🏆 Top Players</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(p, idx) in overview?.leaderboard" :key="p.name"
|
||||
class="flex items-center gap-4 px-5 py-3 border-b border-gray-800/50 last:border-0">
|
||||
<span class="text-xl w-8 text-center">{{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : idx + 1 }}</span>
|
||||
<div class="w-10 h-10 rounded-full flex items-center justify-center text-lg font-bold text-white"
|
||||
:style="{ backgroundColor: p.avatar_color }">{{ p.name[0] }}</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-white font-medium">{{ p.name }}</div>
|
||||
<div class="text-sm text-gray-400">{{ p.wins }}W / {{ p.losses }}L</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-bold" :class="tierColorClass(p.tier)">{{ p.elo?.toFixed(0) }}</div>
|
||||
<div class="text-xs capitalize" :class="tierColorClass(p.tier)">{{ p.tier }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tournament Summary -->
|
||||
<div v-if="overview?.tournament" class="bg-gray-900 border border-purple-800/30 rounded-2xl overflow-hidden">
|
||||
<div class="px-5 py-3 bg-purple-900/20 border-b border-purple-800/30">
|
||||
<span class="text-lg font-bold text-white">🏆 {{ overview.tournament.tournament?.name }}</span>
|
||||
</div>
|
||||
<div class="p-5 space-y-3">
|
||||
<div v-for="entry in overview.tournament.leaderboard?.slice(0, 6)" :key="entry.player?.id"
|
||||
class="flex items-center gap-3">
|
||||
<span class="text-gray-500 w-4 text-sm">{{ entry.final_rank || '—' }}</span>
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white"
|
||||
:style="{ backgroundColor: entry.player?.avatar_color || '#555' }">
|
||||
{{ entry.player?.name?.[0] || '?' }}
|
||||
</div>
|
||||
<span class="text-white text-sm flex-1">{{ entry.player?.name }}</span>
|
||||
<div class="flex gap-1">
|
||||
<span v-if="entry.is_eliminated" class="badge bg-red-900/30 text-red-400 text-xs">Eliminated</span>
|
||||
<span v-else-if="entry.is_in_losers" class="badge bg-orange-900/30 text-orange-400 text-xs">Losers Bracket</span>
|
||||
<span v-else class="badge bg-yellow-900/30 text-yellow-400 text-xs">Winners Bracket</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAppStore } from '../stores/app'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useAppStore()
|
||||
|
||||
const courtId = ref(parseInt(route.params.courtId) || 1)
|
||||
const mode = ref('court')
|
||||
const courtData = ref(null)
|
||||
const overview = ref(null)
|
||||
const currentTime = ref('')
|
||||
const currentDate = ref('')
|
||||
const isFullscreen = ref(false)
|
||||
let refreshInterval = null
|
||||
let clockInterval = null
|
||||
|
||||
const team1Percent = computed(() => {
|
||||
const m = courtData.value?.active_match
|
||||
if (!m) return 50
|
||||
const total = m.team1_score + m.team2_score
|
||||
if (total === 0) return 50
|
||||
return Math.round((m.team1_score / total) * 100)
|
||||
})
|
||||
|
||||
const stageIcon = (stage) => {
|
||||
const icons = { open: '🎯', skill_based: '⚡', tournament: '🏆' }
|
||||
return icons[stage] || '🏓'
|
||||
}
|
||||
|
||||
const stageClass = (stage) => {
|
||||
const classes = {
|
||||
open: 'bg-blue-500/20 text-blue-400',
|
||||
skill_based: 'bg-orange-500/20 text-orange-400',
|
||||
tournament: 'bg-yellow-500/20 text-yellow-400',
|
||||
}
|
||||
return classes[stage] || 'bg-gray-700 text-gray-300'
|
||||
}
|
||||
|
||||
const tierBadgeClass = (tier) => {
|
||||
const classes = {
|
||||
bronze: 'bg-amber-900/60 text-amber-400',
|
||||
silver: 'bg-gray-700 text-gray-300',
|
||||
gold: 'bg-yellow-900/60 text-yellow-400',
|
||||
platinum: 'bg-cyan-900/60 text-cyan-400',
|
||||
elite: 'bg-purple-900/60 text-purple-400',
|
||||
}
|
||||
return classes[tier] || 'bg-gray-800 text-gray-400'
|
||||
}
|
||||
|
||||
const tierColorClass = (tier) => {
|
||||
const classes = {
|
||||
bronze: 'text-amber-600',
|
||||
silver: 'text-gray-400',
|
||||
gold: 'text-yellow-400',
|
||||
platinum: 'text-cyan-400',
|
||||
elite: 'text-purple-400',
|
||||
}
|
||||
return classes[tier] || 'text-gray-400'
|
||||
}
|
||||
|
||||
const formatElapsed = (seconds) => {
|
||||
const m = Math.floor(seconds / 60)
|
||||
const s = seconds % 60
|
||||
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const switchCourt = (id) => {
|
||||
courtId.value = id
|
||||
mode.value = 'court'
|
||||
router.push(`/screen/${id}`)
|
||||
}
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
isFullscreen.value = true
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
isFullscreen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const updateClock = () => {
|
||||
const now = new Date()
|
||||
currentTime.value = now.toLocaleTimeString('en-PH', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||
currentDate.value = now.toLocaleDateString('en-PH', { weekday: 'long', month: 'long', day: 'numeric' })
|
||||
}
|
||||
|
||||
const refreshData = async () => {
|
||||
try {
|
||||
if (mode.value === 'court') {
|
||||
courtData.value = await store.getCourtDisplay(courtId.value)
|
||||
} else {
|
||||
overview.value = await store.getOverview()
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
updateClock()
|
||||
clockInterval = setInterval(updateClock, 1000)
|
||||
await refreshData()
|
||||
refreshInterval = setInterval(refreshData, 3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshInterval) clearInterval(refreshInterval)
|
||||
if (clockInterval) clearInterval(clockInterval)
|
||||
})
|
||||
</script>
|
||||
330
frontend/src/views/Tournament.vue
Normal file
330
frontend/src/views/Tournament.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
||||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">🏆 Tournament</h1>
|
||||
<div v-if="tournament" class="text-sm text-gray-400 mt-1">
|
||||
{{ tournament.tournament?.name }}
|
||||
<span class="ml-2 badge capitalize"
|
||||
:class="tournament.tournament?.status === 'in_progress' ? 'bg-green-500/20 text-green-400' : 'bg-gray-700 text-gray-400'">
|
||||
{{ tournament.tournament?.status?.replace('_', ' ') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="loadData" class="btn btn-secondary text-sm">🔄 Refresh</button>
|
||||
<button v-if="!tournament" @click="showCreateModal = true" class="btn btn-primary text-sm">+ New Tournament</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="text-center py-12 text-gray-400">Loading tournament data...</div>
|
||||
|
||||
<!-- No Tournament -->
|
||||
<div v-else-if="!tournament && !loading" class="card text-center py-16">
|
||||
<div class="text-6xl mb-4">🏆</div>
|
||||
<h2 class="text-xl font-bold text-white mb-2">No Active Tournament</h2>
|
||||
<p class="text-gray-400 mb-6">Create a double elimination tournament to get started</p>
|
||||
<button @click="showCreateModal = true" class="btn btn-primary">Create Tournament</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tournament">
|
||||
<!-- Leaderboard / Rankings -->
|
||||
<div class="grid lg:grid-cols-4 gap-6">
|
||||
<div class="lg:col-span-3 space-y-6">
|
||||
<!-- Winners Bracket -->
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-yellow-400 inline-block"></span>
|
||||
Winners Bracket
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="flex gap-6 min-w-max pb-4">
|
||||
<div v-for="round in groupedWinners" :key="round.round" class="flex flex-col gap-4 min-w-48">
|
||||
<div class="text-center text-xs text-gray-400 font-medium pb-2 border-b border-gray-800">
|
||||
Round {{ round.round }}
|
||||
</div>
|
||||
<div v-for="match in round.matches" :key="match.id"
|
||||
class="bg-gray-900 border rounded-xl overflow-hidden transition-all"
|
||||
:class="matchBorderClass(match)">
|
||||
<div class="px-1 py-0.5 text-center text-xs"
|
||||
:class="match.status === 'in_progress' ? 'bg-green-500/20 text-green-400' : 'bg-gray-800 text-gray-500'">
|
||||
{{ match.status === 'completed' ? '✓ Done' : match.status === 'in_progress' ? '🔴 Live' : '⏳ Pending' }}
|
||||
</div>
|
||||
<div class="p-3 space-y-1">
|
||||
<MatchPlayer :player="match.player1" :score="match.team1_score" :is-winner="match.winner_team === 1" />
|
||||
<div class="text-center text-xs text-gray-600">vs</div>
|
||||
<MatchPlayer :player="match.player2" :score="match.team2_score" :is-winner="match.winner_team === 2" />
|
||||
</div>
|
||||
<div v-if="match.status === 'pending' && match.player1 && match.player2" class="px-3 pb-2">
|
||||
<button @click="openScore(match)" class="w-full text-xs bg-blue-600/30 hover:bg-blue-600/50 text-blue-400 rounded-lg py-1.5">
|
||||
Enter Score
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Losers Bracket -->
|
||||
<div v-if="tournament.losers_bracket?.length > 0">
|
||||
<h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-orange-400 inline-block"></span>
|
||||
Losers Bracket
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="flex gap-6 min-w-max pb-4">
|
||||
<div v-for="round in groupedLosers" :key="round.round" class="flex flex-col gap-4 min-w-48">
|
||||
<div class="text-center text-xs text-gray-400 font-medium pb-2 border-b border-gray-800">
|
||||
LB Round {{ round.round }}
|
||||
</div>
|
||||
<div v-for="match in round.matches" :key="match.id"
|
||||
class="bg-gray-900 border border-orange-900/40 rounded-xl overflow-hidden">
|
||||
<div class="p-3 space-y-1">
|
||||
<MatchPlayer :player="match.player1" :score="match.team1_score" :is-winner="match.winner_team === 1" />
|
||||
<div class="text-center text-xs text-gray-600">vs</div>
|
||||
<MatchPlayer :player="match.player2" :score="match.team2_score" :is-winner="match.winner_team === 2" />
|
||||
</div>
|
||||
<div v-if="match.status === 'pending' && match.player1 && match.player2" class="px-3 pb-2">
|
||||
<button @click="openScore(match)" class="w-full text-xs bg-orange-600/30 hover:bg-orange-600/50 text-orange-400 rounded-lg py-1.5">
|
||||
Enter Score
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grand Final -->
|
||||
<div v-if="tournament.grand_final?.length > 0">
|
||||
<h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
||||
<span class="text-xl">🏆</span>
|
||||
Grand Final
|
||||
</h2>
|
||||
<div v-for="match in tournament.grand_final" :key="match.id"
|
||||
class="card border-yellow-700/50 bg-yellow-900/10 max-w-sm">
|
||||
<MatchPlayer :player="match.player1" :score="match.team1_score" :is-winner="match.winner_team === 1" />
|
||||
<div class="text-center text-gray-500 my-1 text-sm font-bold">GRAND FINAL</div>
|
||||
<MatchPlayer :player="match.player2" :score="match.team2_score" :is-winner="match.winner_team === 2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard Sidebar -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-white">📊 Standings</h2>
|
||||
<div class="space-y-2">
|
||||
<div v-for="(entry, idx) in tournament.leaderboard" :key="entry.player?.id"
|
||||
class="flex items-center gap-3 bg-gray-900 rounded-xl p-3 border transition-all"
|
||||
:class="entry.is_eliminated ? 'border-gray-800 opacity-60' : 'border-gray-700'">
|
||||
<span class="text-lg font-bold w-6 text-center flex-shrink-0"
|
||||
:class="idx === 0 ? 'text-yellow-400' : idx === 1 ? 'text-gray-300' : idx === 2 ? 'text-amber-600' : 'text-gray-600'">
|
||||
{{ entry.final_rank || (entry.is_eliminated ? '✗' : '—') }}
|
||||
</span>
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
|
||||
:style="{ backgroundColor: entry.player?.avatar_color || '#555' }">
|
||||
{{ entry.player?.name?.[0] || '?' }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium text-white truncate">{{ entry.player?.name }}</div>
|
||||
<div class="text-xs text-gray-400">{{ entry.wins }}W / {{ entry.losses }}L</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span v-if="entry.is_eliminated" class="badge bg-red-900/30 text-red-400 text-xs">Out</span>
|
||||
<span v-else-if="entry.is_in_losers" class="badge bg-orange-900/30 text-orange-400 text-xs">LB</span>
|
||||
<span v-else class="badge bg-yellow-900/30 text-yellow-400 text-xs">WB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Registration (if open) -->
|
||||
<div v-if="tournament.tournament?.status === 'registration'" class="card">
|
||||
<h3 class="font-bold text-white mb-3">Register Player</h3>
|
||||
<select v-model="registerPlayerId"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mb-3">
|
||||
<option v-for="p in availablePlayers" :key="p.id" :value="p.id">
|
||||
{{ p.name }} ({{ p.elo_rating.toFixed(0) }} ELO)
|
||||
</option>
|
||||
</select>
|
||||
<button @click="registerPlayer" class="btn btn-primary w-full text-sm">Register</button>
|
||||
<button @click="startTournament" class="btn btn-secondary w-full text-sm mt-2">▶ Start Tournament</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Tournament Modal -->
|
||||
<div v-if="showCreateModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-md">
|
||||
<h3 class="text-lg font-bold text-white mb-4">🏆 Create Tournament</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Tournament Name</label>
|
||||
<input v-model="createForm.name" type="text" placeholder="ServeSync Grand Prix"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs text-gray-400">Max Participants</label>
|
||||
<select v-model="createForm.max_participants"
|
||||
class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1">
|
||||
<option value="4">4 players</option>
|
||||
<option value="8">8 players</option>
|
||||
<option value="16">16 players</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-4">
|
||||
<button @click="showCreateModal = false" class="btn btn-secondary flex-1">Cancel</button>
|
||||
<button @click="createTournament" class="btn btn-primary flex-1">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Score Modal -->
|
||||
<div v-if="scoreModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-sm">
|
||||
<h3 class="text-lg font-bold text-white mb-4">Enter Match Score</h3>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-2">{{ scoreModal.player1?.name }}</div>
|
||||
<input type="number" v-model="scoreForm.s1" min="0" max="21"
|
||||
class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3" />
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-400 mb-2">{{ scoreModal.player2?.name }}</div>
|
||||
<input type="number" v-model="scoreForm.s2" min="0" max="21"
|
||||
class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button @click="scoreModal = null" class="btn btn-secondary flex-1">Cancel</button>
|
||||
<button @click="submitScore" class="btn btn-primary flex-1">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import axios from 'axios'
|
||||
|
||||
// Inline MatchPlayer component
|
||||
const MatchPlayer = {
|
||||
props: ['player', 'score', 'isWinner'],
|
||||
template: `
|
||||
<div class="flex items-center gap-2 px-2 py-1 rounded-lg" :class="isWinner ? 'bg-green-900/30' : ''">
|
||||
<div v-if="player" class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
|
||||
:style="{ backgroundColor: player.avatar_color || '#555' }">{{ player.name?.[0] }}</div>
|
||||
<div v-else class="w-6 h-6 rounded-full bg-gray-700 flex-shrink-0"></div>
|
||||
<span class="text-sm text-white flex-1 truncate">{{ player?.name || 'TBD' }}</span>
|
||||
<span v-if="score !== null && score !== undefined" class="text-sm font-bold" :class="isWinner ? 'text-green-400' : 'text-white'">{{ score }}</span>
|
||||
<span v-if="isWinner" class="text-xs">👑</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
const store = useAppStore()
|
||||
const tournament = ref(null)
|
||||
const loading = ref(true)
|
||||
const showCreateModal = ref(false)
|
||||
const scoreModal = ref(null)
|
||||
const registerPlayerId = ref(null)
|
||||
const players = ref([])
|
||||
const scoreForm = reactive({ s1: 0, s2: 0 })
|
||||
const createForm = reactive({ name: 'ServeSync Grand Prix', max_participants: 8 })
|
||||
|
||||
const groupedWinners = computed(() => {
|
||||
if (!tournament.value?.winners_bracket) return []
|
||||
const rounds = {}
|
||||
for (const m of tournament.value.winners_bracket) {
|
||||
if (!rounds[m.round]) rounds[m.round] = { round: m.round, matches: [] }
|
||||
rounds[m.round].matches.push(m)
|
||||
}
|
||||
return Object.values(rounds).sort((a, b) => a.round - b.round)
|
||||
})
|
||||
|
||||
const groupedLosers = computed(() => {
|
||||
if (!tournament.value?.losers_bracket) return []
|
||||
const rounds = {}
|
||||
for (const m of tournament.value.losers_bracket) {
|
||||
if (!rounds[m.round]) rounds[m.round] = { round: m.round, matches: [] }
|
||||
rounds[m.round].matches.push(m)
|
||||
}
|
||||
return Object.values(rounds).sort((a, b) => a.round - b.round)
|
||||
})
|
||||
|
||||
const availablePlayers = computed(() => {
|
||||
const registeredIds = new Set(tournament.value?.leaderboard?.map(e => e.player?.id) || [])
|
||||
return players.value.filter(p => !registeredIds.has(p.id))
|
||||
})
|
||||
|
||||
const matchBorderClass = (match) => {
|
||||
if (match.status === 'completed') return 'border-green-800/30'
|
||||
if (match.status === 'in_progress') return 'border-green-500/50 shadow-green-500/20 shadow-lg'
|
||||
return 'border-gray-800'
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const tournaments = await store.loadTournaments()
|
||||
const active = tournaments.find(t => t.status === 'in_progress' || t.status === 'registration')
|
||||
if (active) {
|
||||
tournament.value = await store.loadTournament(active.id)
|
||||
}
|
||||
players.value = await store.loadPlayers()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const createTournament = async () => {
|
||||
try {
|
||||
const res = await axios.post('/api/tournaments/', createForm)
|
||||
showCreateModal.value = false
|
||||
await loadData()
|
||||
} catch (e) { alert('Error creating tournament') }
|
||||
}
|
||||
|
||||
const registerPlayer = async () => {
|
||||
if (!registerPlayerId.value || !tournament.value) return
|
||||
try {
|
||||
await axios.post(`/api/tournaments/${tournament.value.tournament.id}/register`, {
|
||||
player_id: registerPlayerId.value
|
||||
})
|
||||
await loadData()
|
||||
} catch (e) { alert(e.response?.data?.detail || 'Error') }
|
||||
}
|
||||
|
||||
const startTournament = async () => {
|
||||
if (!tournament.value) return
|
||||
try {
|
||||
tournament.value = await axios.post(`/api/tournaments/${tournament.value.tournament.id}/start`).then(r => r.data)
|
||||
} catch (e) { alert(e.response?.data?.detail || 'Need at least 4 players') }
|
||||
}
|
||||
|
||||
const openScore = (match) => {
|
||||
scoreModal.value = match
|
||||
scoreForm.s1 = match.team1_score || 0
|
||||
scoreForm.s2 = match.team2_score || 0
|
||||
}
|
||||
|
||||
const submitScore = async () => {
|
||||
if (!scoreModal.value || !tournament.value) return
|
||||
try {
|
||||
tournament.value = await store.completeTournamentMatch(
|
||||
tournament.value.tournament.id,
|
||||
scoreModal.value.id,
|
||||
scoreForm.s1,
|
||||
scoreForm.s2
|
||||
)
|
||||
scoreModal.value = null
|
||||
} catch (e) { alert('Error submitting score') }
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
30
frontend/tailwind.config.js
Normal file
30
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'pickle': {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
800: '#166534',
|
||||
900: '#14532d',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'bounce-slow': 'bounce 2s infinite',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
22
frontend/vite.config.js
Normal file
22
frontend/vite.config.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/ws': {
|
||||
target: 'ws://backend:8000',
|
||||
ws: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user