Updated the styles to use Pico-css
This commit is contained in:
parent
d32233a20a
commit
9acde36f50
18 changed files with 691 additions and 2126 deletions
|
|
@ -119,6 +119,7 @@ enum GameStatus {
|
|||
DRAFT
|
||||
LIVE
|
||||
ENDED
|
||||
ARCHIVED
|
||||
}
|
||||
|
||||
enum TeamStatus {
|
||||
|
|
|
|||
|
|
@ -251,6 +251,56 @@ router.post('/:id/end', authenticate, async (req: AuthRequest, res: Response) =>
|
|||
}
|
||||
});
|
||||
|
||||
router.post('/:id/archive', authenticate, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const id = req.params.id as string;
|
||||
|
||||
const game = await prisma.game.findUnique({ where: { id } });
|
||||
if (!game) {
|
||||
return res.status(404).json({ error: 'Game not found' });
|
||||
}
|
||||
|
||||
if (game.gameMasterId !== req.user!.id) {
|
||||
return res.status(403).json({ error: 'Not authorized' });
|
||||
}
|
||||
|
||||
const updated = await prisma.game.update({
|
||||
where: { id },
|
||||
data: { status: 'ARCHIVED' }
|
||||
});
|
||||
|
||||
res.json(updated);
|
||||
} catch (error) {
|
||||
console.error('Archive game error:', error);
|
||||
res.status(500).json({ error: 'Failed to archive game' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/:id/unarchive', authenticate, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const id = req.params.id as string;
|
||||
|
||||
const game = await prisma.game.findUnique({ where: { id } });
|
||||
if (!game) {
|
||||
return res.status(404).json({ error: 'Game not found' });
|
||||
}
|
||||
|
||||
if (game.gameMasterId !== req.user!.id) {
|
||||
return res.status(403).json({ error: 'Not authorized' });
|
||||
}
|
||||
|
||||
const updated = await prisma.game.update({
|
||||
where: { id },
|
||||
data: { status: 'ENDED' }
|
||||
});
|
||||
|
||||
res.json(updated);
|
||||
} catch (error) {
|
||||
console.error('Unarchive game error:', error);
|
||||
res.status(500).json({ error: 'Failed to unarchive game' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/:id/invite', async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const id = req.params.id as string;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<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>frontend</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
||||
<title>Treasure Trails</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -96,191 +96,80 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="create-game">
|
||||
<header class="page-header">
|
||||
<main class="container">
|
||||
<article>
|
||||
<h1>Create New Game</h1>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="game-form">
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div class="form-section">
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
|
||||
<h2>Basic Information</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Game Name *</label>
|
||||
<input id="name" v-model="name" type="text" required placeholder="Enter game name" />
|
||||
</div>
|
||||
<label for="name">Game Name *</label>
|
||||
<input id="name" v-model="name" type="text" required placeholder="Enter game name" />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" v-model="description" rows="3" placeholder="Describe your scavenger hunt"></textarea>
|
||||
</div>
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" v-model="description" rows="3" placeholder="Describe your scavenger hunt"></textarea>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="prizeDetails">Prize Details</label>
|
||||
<input id="prizeDetails" v-model="prizeDetails" type="text" placeholder="What's the prize?" />
|
||||
</div>
|
||||
<label for="prizeDetails">Prize Details</label>
|
||||
<input id="prizeDetails" v-model="prizeDetails" type="text" placeholder="What's the prize?" />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="visibility">Visibility</label>
|
||||
<select id="visibility" v-model="visibility">
|
||||
<option value="PUBLIC">Public</option>
|
||||
<option value="PRIVATE">Private (Invite Only)</option>
|
||||
</select>
|
||||
</div>
|
||||
<label for="visibility">Visibility</label>
|
||||
<select id="visibility" v-model="visibility">
|
||||
<option value="PUBLIC">Public</option>
|
||||
<option value="PRIVATE">Private (Invite Only)</option>
|
||||
</select>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="startDate">Start Date & Time</label>
|
||||
<input id="startDate" v-model="startDate" type="datetime-local" />
|
||||
</div>
|
||||
</div>
|
||||
<label for="startDate">Start Date & Time</label>
|
||||
<input id="startDate" v-model="startDate" type="datetime-local" />
|
||||
|
||||
<div class="form-section">
|
||||
<h2>Location</h2>
|
||||
<p class="hint">Click on the map to set the treasure location</p>
|
||||
<p><small>Click on the map to set the treasure location</small></p>
|
||||
|
||||
<div ref="mapContainer" class="map-container"></div>
|
||||
|
||||
<div class="location-inputs">
|
||||
<div class="form-group">
|
||||
<label>Latitude</label>
|
||||
<div class="grid">
|
||||
<label>
|
||||
Latitude
|
||||
<input v-model.number="locationLat" type="number" step="any" readonly />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Longitude</label>
|
||||
</label>
|
||||
<label>
|
||||
Longitude
|
||||
<input v-model.number="locationLng" type="number" step="any" readonly />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="searchRadius">Search Radius (meters)</label>
|
||||
</label>
|
||||
<label for="searchRadius">
|
||||
Search Radius (meters)
|
||||
<input id="searchRadius" v-model.number="searchRadius" type="number" min="100" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<h2>Game Rules</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="timeLimitPerLeg">Time Limit per Leg (minutes)</label>
|
||||
<input id="timeLimitPerLeg" v-model.number="timeLimitPerLeg" type="number" min="1" />
|
||||
</div>
|
||||
<label for="timeLimitPerLeg">Time Limit per Leg (minutes)</label>
|
||||
<input id="timeLimitPerLeg" v-model.number="timeLimitPerLeg" type="number" min="1" />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="timeDeductionPenalty">Navigation Warning Penalty (seconds)</label>
|
||||
<input id="timeDeductionPenalty" v-model.number="timeDeductionPenalty" type="number" min="0" />
|
||||
</div>
|
||||
</div>
|
||||
<label for="timeDeductionPenalty">Navigation Warning Penalty (seconds)</label>
|
||||
<input id="timeDeductionPenalty" v-model.number="timeDeductionPenalty" type="number" min="0" />
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ loading ? 'Creating...' : 'Create Game' }}
|
||||
</button>
|
||||
<RouterLink to="/dashboard" class="btn btn-secondary">Cancel</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<button type="submit" :disabled="loading">
|
||||
{{ loading ? 'Creating...' : 'Create Game' }}
|
||||
</button>
|
||||
<RouterLink to="/dashboard" role="button" class="secondary">Cancel</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.create-game {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.game-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #666;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 300px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--pico-border-radius);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.location-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import type { Game } from '../types';
|
||||
|
|
@ -8,6 +8,17 @@ import { gameService } from '../services/api';
|
|||
const authStore = useAuthStore();
|
||||
const games = ref<Game[]>([]);
|
||||
const loading = ref(false);
|
||||
const showArchived = ref(false);
|
||||
|
||||
const filteredGames = computed(() => {
|
||||
if (showArchived.value) {
|
||||
return games.value.filter(g => g.status === 'ARCHIVED');
|
||||
}
|
||||
return games.value.filter(g => g.status !== 'ARCHIVED');
|
||||
});
|
||||
|
||||
const activeCount = computed(() => games.value.filter(g => g.status !== 'ARCHIVED').length);
|
||||
const archivedCount = computed(() => games.value.filter(g => g.status === 'ARCHIVED').length);
|
||||
|
||||
async function loadGames() {
|
||||
loading.value = true;
|
||||
|
|
@ -27,175 +38,65 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<header class="dashboard-header">
|
||||
<h1>My Dashboard</h1>
|
||||
<div class="user-info">
|
||||
<span>Welcome, {{ authStore.user?.name }}</span>
|
||||
<button @click="authStore.logout()" class="btn btn-logout">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="container">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li><strong>Welcome, {{ authStore.user?.name }}</strong></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><button @click="authStore.logout()" class="secondary">Logout</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="games-section">
|
||||
<div class="section-header">
|
||||
<h2>My Games</h2>
|
||||
<RouterLink to="/games/new" class="btn btn-primary">Create New Game</RouterLink>
|
||||
<section>
|
||||
<div class="grid">
|
||||
<h1>My Games</h1>
|
||||
<RouterLink to="/games/new" role="button">Create New Game</RouterLink>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading">Loading games...</div>
|
||||
<button
|
||||
v-if="archivedCount > 0"
|
||||
@click="showArchived = !showArchived"
|
||||
class="secondary"
|
||||
>
|
||||
{{ showArchived ? `Show Active (${activeCount})` : `Archived (${archivedCount})` }}
|
||||
</button>
|
||||
|
||||
<article v-if="loading">Loading games...</article>
|
||||
|
||||
<div v-else-if="games.length === 0" class="empty">
|
||||
<p>You haven't created any games yet.</p>
|
||||
<RouterLink to="/games/new" class="btn btn-primary">Create Your First Game</RouterLink>
|
||||
</div>
|
||||
<article v-else-if="filteredGames.length === 0">
|
||||
<p>{{ showArchived ? 'No archived games.' : 'You haven\'t created any games yet.' }}</p>
|
||||
<RouterLink v-if="!showArchived" to="/games/new" role="button">Create Your First Game</RouterLink>
|
||||
</article>
|
||||
|
||||
<div v-else class="games-list">
|
||||
<div v-for="game in games" :key="game.id" class="game-item">
|
||||
<div class="game-info">
|
||||
<h3>{{ game.name }}</h3>
|
||||
<div class="game-meta">
|
||||
<div v-else class="grid">
|
||||
<article v-for="game in filteredGames" :key="game.id">
|
||||
<h3>{{ game.name }}</h3>
|
||||
<footer>
|
||||
<small>
|
||||
<span :class="['status', game.status.toLowerCase()]">{{ game.status }}</span>
|
||||
<span>{{ game._count?.legs || 0 }} legs</span>
|
||||
<span>{{ game._count?.teams || 0 }} teams</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-actions">
|
||||
<RouterLink :to="`/games/${game.id}`" class="btn btn-secondary">View</RouterLink>
|
||||
<RouterLink
|
||||
v-if="game.status === 'DRAFT'"
|
||||
:to="`/games/${game.id}/edit`"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
Edit
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="game.status === 'LIVE'"
|
||||
:to="`/games/${game.id}/live`"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Live Dashboard
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
· {{ game._count?.legs || 0 }} legs
|
||||
· {{ game._count?.teams || 0 }} teams
|
||||
</small>
|
||||
</footer>
|
||||
<RouterLink :to="`/games/${game.id}`" role="button">View</RouterLink>
|
||||
<RouterLink v-if="game.status === 'DRAFT'" :to="`/games/${game.id}/edit`" role="button" class="secondary">Edit</RouterLink>
|
||||
<RouterLink v-if="game.status === 'LIVE'" :to="`/games/${game.id}/live`" role="button">Live Dashboard</RouterLink>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
background: transparent;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.games-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.game-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.game-info h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.game-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status.draft {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status.live {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status.ended {
|
||||
background: #e2e3e5;
|
||||
color: #383d41;
|
||||
}
|
||||
|
||||
.game-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.status.draft { background: var(--pico-mark-background-color); }
|
||||
.status.live { background: var(--pico-ins-background-color); }
|
||||
.status.ended { background: var(--pico-muted-color); color: var(--pico-muted-border-color); }
|
||||
.status.archived { background: var(--pico-muted-color); color: var(--pico-muted-border-color); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -178,224 +178,91 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="edit-game">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
<main class="container">
|
||||
<article v-if="loading">Loading...</article>
|
||||
|
||||
<template v-else-if="game">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<RouterLink :to="`/games/${game.id}`" class="back-link">← Back to Game</RouterLink>
|
||||
<h1>Edit: {{ game.name }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li><RouterLink :to="`/games/${game.id}`">← Back to Game</RouterLink></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="edit-content">
|
||||
<section class="legs-section">
|
||||
<h1>Edit: {{ game.name }}</h1>
|
||||
|
||||
<div class="grid">
|
||||
<article>
|
||||
<h2>Legs ({{ legs.length }})</h2>
|
||||
<p class="hint">Total route distance: {{ getTotalDistance().toFixed(2) }} km</p>
|
||||
<p><small>Total route distance: {{ getTotalDistance().toFixed(2) }} km</small></p>
|
||||
|
||||
<div v-if="legs.length" class="legs-list">
|
||||
<div v-for="(leg, index) in legs" :key="leg.id" class="leg-item">
|
||||
<div class="leg-number">{{ index + 1 }}</div>
|
||||
<div class="leg-info">
|
||||
<p>{{ leg.description }}</p>
|
||||
<div class="leg-meta">
|
||||
<span>Type: {{ leg.conditionType }}</span>
|
||||
<span v-if="leg.timeLimit">{{ leg.timeLimit }} min</span>
|
||||
<span v-if="leg.locationLat && leg.locationLng">
|
||||
{{ leg.locationLat.toFixed(4) }}, {{ leg.locationLng.toFixed(4) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="deleteLeg(leg.id)" class="btn btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">No legs added yet</div>
|
||||
</section>
|
||||
<article v-if="legs.length" v-for="(leg, index) in legs" :key="leg.id">
|
||||
<h3>Leg {{ index + 1 }}</h3>
|
||||
<p>{{ leg.description }}</p>
|
||||
<footer>
|
||||
<small>
|
||||
Type: {{ leg.conditionType }}
|
||||
<span v-if="leg.timeLimit"> · {{ leg.timeLimit }} min</span>
|
||||
<span v-if="leg.locationLat && leg.locationLng">
|
||||
· {{ leg.locationLat.toFixed(4) }}, {{ leg.locationLng.toFixed(4) }}
|
||||
</span>
|
||||
</small>
|
||||
</footer>
|
||||
<button @click="deleteLeg(leg.id)" class="secondary">Delete</button>
|
||||
</article>
|
||||
<p v-else>No legs added yet</p>
|
||||
</article>
|
||||
|
||||
<section class="add-leg-section">
|
||||
<article>
|
||||
<h2>Add New Leg</h2>
|
||||
|
||||
<div ref="mapContainer" class="map-container"></div>
|
||||
<p class="hint">Click on map to set location</p>
|
||||
<p><small>Click on map to set location</small></p>
|
||||
|
||||
<form @submit.prevent="addLeg" class="leg-form">
|
||||
<div class="form-group">
|
||||
<label>Description / Clue</label>
|
||||
<textarea v-model="newLeg.description" rows="2" required></textarea>
|
||||
</div>
|
||||
<form @submit.prevent="addLeg">
|
||||
<label>Description / Clue</label>
|
||||
<textarea v-model="newLeg.description" rows="2" required></textarea>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Condition Type</label>
|
||||
<div class="grid">
|
||||
<label>
|
||||
Condition Type
|
||||
<select v-model="newLeg.conditionType">
|
||||
<option value="photo">Photo Proof</option>
|
||||
<option value="purchase">Purchase</option>
|
||||
<option value="text">Text Answer</option>
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Time Limit (minutes)</label>
|
||||
<label>
|
||||
Time Limit (minutes)
|
||||
<input v-model.number="newLeg.timeLimit" type="number" min="1" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Latitude</label>
|
||||
<div class="grid">
|
||||
<label>
|
||||
Latitude
|
||||
<input v-model.number="newLeg.locationLat" type="number" step="any" readonly />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Longitude</label>
|
||||
</label>
|
||||
<label>
|
||||
Longitude
|
||||
<input v-model.number="newLeg.locationLng" type="number" step="any" readonly />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">
|
||||
<button type="submit" :disabled="saving">
|
||||
{{ saving ? 'Adding...' : 'Add Leg' }}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.edit-game {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.legs-section, .add-leg-section {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.legs-section h2, .add-leg-section h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.legs-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.leg-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.leg-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.leg-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.leg-info p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.leg-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 250px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--pico-border-radius);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.leg-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-primary { background: #667eea; color: white; }
|
||||
.btn-danger { background: #dc3545; color: white; }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -164,240 +164,114 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="live-dashboard">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
<main class="live-dashboard">
|
||||
<article v-if="loading">Loading...</article>
|
||||
|
||||
<template v-else-if="game">
|
||||
<header class="dashboard-header">
|
||||
<h1>{{ game.name }} - Live Dashboard</h1>
|
||||
<span class="live-badge">LIVE</span>
|
||||
</header>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li><strong>{{ game.name }}</strong></li>
|
||||
<li><mark>LIVE</mark></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="dashboard-content">
|
||||
<div class="map-section">
|
||||
<div class="grid" style="grid-template-columns: 1fr 300px 300px;">
|
||||
<section>
|
||||
<div id="map" class="map-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="teams-section">
|
||||
<section>
|
||||
<h2>Teams ({{ teams.length }})</h2>
|
||||
<div class="teams-list">
|
||||
<div
|
||||
v-for="team in teams"
|
||||
:key="team.id"
|
||||
class="team-card"
|
||||
:class="{ selected: selectedTeam?.id === team.id }"
|
||||
@click="selectTeam(team)"
|
||||
>
|
||||
<div class="team-header">
|
||||
<span class="team-name">{{ team.name }}</span>
|
||||
<span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<span>{{ team.members?.length || 0 }} members</span>
|
||||
<span>Leg {{ game.legs?.findIndex(l => l.id === team.currentLegId) + 1 || 0 }} / {{ game.legs?.length || 0 }}</span>
|
||||
<span v-if="team.totalTimeDeduction">-{{ team.totalTimeDeduction }}s</span>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedTeam?.id === team.id" class="team-actions">
|
||||
<button
|
||||
@click.stop="advanceTeam(team.id)"
|
||||
class="btn btn-sm btn-success"
|
||||
:disabled="team.status !== 'ACTIVE'"
|
||||
>
|
||||
Advance
|
||||
</button>
|
||||
<button
|
||||
@click.stop="deductTime(team.id)"
|
||||
class="btn btn-sm btn-warning"
|
||||
:disabled="team.status !== 'ACTIVE'"
|
||||
>
|
||||
Deduct Time
|
||||
</button>
|
||||
<button
|
||||
@click.stop="disqualifyTeam(team.id)"
|
||||
class="btn btn-sm btn-danger"
|
||||
:disabled="team.status !== 'ACTIVE'"
|
||||
>
|
||||
Disqualify
|
||||
</button>
|
||||
</div>
|
||||
<article
|
||||
v-for="team in teams"
|
||||
:key="team.id"
|
||||
:class="{ selected: selectedTeam?.id === team.id }"
|
||||
style="margin-bottom: 0.5rem; cursor: pointer;"
|
||||
@click="selectTeam(team)"
|
||||
>
|
||||
<h3 style="display: flex; justify-content: space-between; align-items: center;">
|
||||
{{ team.name }}
|
||||
<span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
</h3>
|
||||
<footer>
|
||||
<small>
|
||||
{{ team.members?.length || 0 }} members ·
|
||||
Leg {{ game.legs?.findIndex(l => l.id === team.currentLegId) + 1 || 0 }} / {{ game.legs?.length || 0 }}
|
||||
<span v-if="team.totalTimeDeduction"> · -{{ team.totalTimeDeduction }}s</span>
|
||||
</small>
|
||||
</footer>
|
||||
|
||||
<div v-if="selectedTeam?.id === team.id" style="margin-top: 1rem;">
|
||||
<button
|
||||
@click.stop="advanceTeam(team.id)"
|
||||
:disabled="team.status !== 'ACTIVE'"
|
||||
>
|
||||
Advance
|
||||
</button>
|
||||
<button
|
||||
@click.stop="deductTime(team.id)"
|
||||
class="secondary"
|
||||
:disabled="team.status !== 'ACTIVE'"
|
||||
>
|
||||
Deduct Time
|
||||
</button>
|
||||
<button
|
||||
@click.stop="disqualifyTeam(team.id)"
|
||||
class="contrast"
|
||||
:disabled="team.status !== 'ACTIVE'"
|
||||
>
|
||||
Disqualify
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="chat-section">
|
||||
<section>
|
||||
<h2>Chat</h2>
|
||||
<div class="chat-messages">
|
||||
<div v-for="msg in chatMessages" :key="msg.id" class="chat-message">
|
||||
<article v-for="msg in chatMessages" :key="msg.id" style="margin: 0.5rem 0; padding: 0.5rem;">
|
||||
<strong>{{ msg.userName }}:</strong> {{ msg.message }}
|
||||
</div>
|
||||
<div v-if="!chatMessages.length" class="empty-chat">
|
||||
</article>
|
||||
<article v-if="!chatMessages.length" style="text-align: center; color: var(--pico-muted-color);">
|
||||
No messages yet
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<form @submit.prevent="sendChat" class="chat-input">
|
||||
<form @submit.prevent="sendChat" class="grid">
|
||||
<input v-model="chatMessage" placeholder="Type a message..." />
|
||||
<button type="submit" class="btn btn-sm btn-primary">Send</button>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.live-dashboard {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.live-badge {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px 300px;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.teams-section, .chat-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.teams-section h2, .chat-section h2 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.teams-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.team-card.selected {
|
||||
border-color: #667eea;
|
||||
background: #f0f4ff;
|
||||
}
|
||||
|
||||
.team-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.status.active { background: #d4edda; color: #155724; }
|
||||
.status.disqualified { background: #f8d7da; color: #721c24; }
|
||||
.status.finished { background: #cce5ff; color: #004085; }
|
||||
|
||||
.team-actions {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
height: calc(100vh - 200px);
|
||||
border-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 0.875rem;
|
||||
.selected {
|
||||
border: 2px solid var(--pico-primary-focus);
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
.status {
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-sm { padding: 0.25rem 0.5rem; }
|
||||
.btn-primary { background: #667eea; color: white; }
|
||||
.btn-success { background: #28a745; color: white; }
|
||||
.btn-warning { background: #ffc107; color: #333; }
|
||||
.btn-danger { background: #dc3545; color: white; }
|
||||
|
||||
.empty-chat {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 2rem;
|
||||
}
|
||||
.status.active { background: var(--pico-ins-background-color); }
|
||||
.status.disqualified { background: var(--pico-del-background-color); }
|
||||
.status.finished { background: var(--pico-primary-background-color); color: var(--pico-primary-color); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,28 @@ async function publishGame() {
|
|||
}
|
||||
}
|
||||
|
||||
async function archiveGame() {
|
||||
if (!confirm('Are you sure you want to archive this game?')) return;
|
||||
|
||||
try {
|
||||
await gameService.archive(gameId.value);
|
||||
await loadGame();
|
||||
} catch (err) {
|
||||
alert('Failed to archive game');
|
||||
}
|
||||
}
|
||||
|
||||
async function unarchiveGame() {
|
||||
if (!confirm('Are you sure you want to unarchive this game?')) return;
|
||||
|
||||
try {
|
||||
await gameService.unarchive(gameId.value);
|
||||
await loadGame();
|
||||
} catch (err) {
|
||||
alert('Failed to unarchive game');
|
||||
}
|
||||
}
|
||||
|
||||
async function endGame() {
|
||||
if (!confirm('Are you sure you want to end this game?')) return;
|
||||
|
||||
|
|
@ -67,255 +89,132 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="game-page">
|
||||
<div v-if="loading" class="loading">Loading game...</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
<main class="container">
|
||||
<article v-if="loading">Loading game...</article>
|
||||
<article v-else-if="error">{{ error }}</article>
|
||||
|
||||
<template v-else-if="game">
|
||||
<header class="game-header">
|
||||
<div>
|
||||
<h1>{{ game.name }}</h1>
|
||||
<div class="game-meta">
|
||||
<span :class="['status', game.status.toLowerCase()]">{{ game.status }}</span>
|
||||
<span>{{ game.visibility }}</span>
|
||||
<span v-if="game.startDate">Starts: {{ new Date(game.startDate).toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isGameMaster" class="gm-actions">
|
||||
<RouterLink v-if="game.status === 'DRAFT'" :to="`/games/${game.id}/edit`" class="btn btn-secondary">
|
||||
Edit Game
|
||||
</RouterLink>
|
||||
<button v-if="game.status === 'DRAFT'" @click="publishGame" class="btn btn-primary">
|
||||
Publish Game
|
||||
</button>
|
||||
<RouterLink v-if="game.status === 'LIVE'" :to="`/games/${game.id}/live`" class="btn btn-primary">
|
||||
Live Dashboard
|
||||
</RouterLink>
|
||||
<button v-if="game.status === 'LIVE'" @click="endGame" class="btn btn-danger">
|
||||
End Game
|
||||
</button>
|
||||
<button @click="copyInviteLink" class="btn btn-secondary">
|
||||
Copy Invite Link
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="player-actions">
|
||||
<RouterLink v-if="game.status === 'DRAFT'" :to="`/games/${game.id}/join`" class="btn btn-primary">
|
||||
Join Game
|
||||
</RouterLink>
|
||||
<RouterLink v-if="game.status === 'LIVE'" :to="`/games/${game.id}/join`" class="btn btn-primary">
|
||||
Join Game
|
||||
</RouterLink>
|
||||
<RouterLink v-if="game.status !== 'DRAFT'" :to="`/games/${game.id}/spectate`" class="btn btn-secondary">
|
||||
Spectate
|
||||
</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li><RouterLink to="/dashboard">Dashboard</RouterLink></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="game-content">
|
||||
<section v-if="game.description" class="game-section">
|
||||
<h2>Description</h2>
|
||||
<p>{{ game.description }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="game.prizeDetails" class="game-section">
|
||||
<h2>Prize</h2>
|
||||
<p>{{ game.prizeDetails }}</p>
|
||||
</section>
|
||||
|
||||
<section class="game-section">
|
||||
<h2>Game Details</h2>
|
||||
<dl>
|
||||
<dt>Location</dt>
|
||||
<dd v-if="game.locationLat && game.locationLng">
|
||||
{{ game.locationLat.toFixed(4) }}, {{ game.locationLng.toFixed(4) }}
|
||||
</dd>
|
||||
<dd v-else>Not set</dd>
|
||||
|
||||
<dt>Search Radius</dt>
|
||||
<dd>{{ game.searchRadius || 500 }} meters</dd>
|
||||
|
||||
<dt>Time Limit per Leg</dt>
|
||||
<dd>{{ game.timeLimitPerLeg || 30 }} minutes</dd>
|
||||
|
||||
<dt>Time Deduction Penalty</dt>
|
||||
<dd>{{ game.timeDeductionPenalty || 60 }} seconds</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section v-if="game.legs?.length" class="game-section">
|
||||
<h2>Legs ({{ game.legs.length }})</h2>
|
||||
<div class="legs-list">
|
||||
<div v-for="leg in game.legs" :key="leg.id" class="leg-item">
|
||||
<div class="leg-number">{{ leg.sequenceNumber }}</div>
|
||||
<div class="leg-content">
|
||||
<p>{{ leg.description }}</p>
|
||||
<div class="leg-meta">
|
||||
<span>Type: {{ leg.conditionType }}</span>
|
||||
<span v-if="leg.timeLimit">Time: {{ leg.timeLimit }} min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="game.teams?.length" class="game-section">
|
||||
<h2>Teams ({{ game.teams.length }})</h2>
|
||||
<div class="teams-list">
|
||||
<div v-for="team in game.teams" :key="team.id" class="team-item">
|
||||
<span class="team-name">{{ team.name }}</span>
|
||||
<span :class="['team-status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
<span class="team-members">{{ team.members?.length || 0 }} members</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hgroup>
|
||||
<h1>{{ game.name }}</h1>
|
||||
<p>
|
||||
<span :class="['status', game.status.toLowerCase()]">{{ game.status }}</span>
|
||||
· {{ game.visibility }}
|
||||
<span v-if="game.startDate">· Starts: {{ new Date(game.startDate).toLocaleString() }}</span>
|
||||
</p>
|
||||
</hgroup>
|
||||
|
||||
<div v-if="isGameMaster" class="grid">
|
||||
<RouterLink v-if="game.status === 'DRAFT'" :to="`/games/${game.id}/edit`" role="button" class="secondary">Edit Game</RouterLink>
|
||||
<button v-if="game.status === 'DRAFT'" @click="publishGame">Publish Game</button>
|
||||
<RouterLink v-if="game.status === 'LIVE'" :to="`/games/${game.id}/live`" role="button">Live Dashboard</RouterLink>
|
||||
<button v-if="game.status === 'LIVE'" @click="endGame" class="contrast">End Game</button>
|
||||
<button v-if="game.status === 'ENDED'" @click="archiveGame" class="secondary">Archive Game</button>
|
||||
<button v-if="game.status === 'ARCHIVED'" @click="unarchiveGame" class="secondary">Unarchive Game</button>
|
||||
<button @click="copyInviteLink" class="secondary outline">Copy Invite Link</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid">
|
||||
<RouterLink v-if="game.status === 'DRAFT' || game.status === 'LIVE'" :to="`/games/${game.id}/join`" role="button">Join Game</RouterLink>
|
||||
<RouterLink v-if="game.status !== 'DRAFT'" :to="`/games/${game.id}/spectate`" role="button" class="secondary">Spectate</RouterLink>
|
||||
</div>
|
||||
|
||||
<section v-if="game.description">
|
||||
<h2>Description</h2>
|
||||
<p>{{ game.description }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="game.prizeDetails">
|
||||
<h2>Prize</h2>
|
||||
<p>{{ game.prizeDetails }}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Game Details</h2>
|
||||
<dl>
|
||||
<dt>Location</dt>
|
||||
<dd v-if="game.locationLat && game.locationLng">
|
||||
{{ game.locationLat.toFixed(4) }}, {{ game.locationLng.toFixed(4) }}
|
||||
</dd>
|
||||
<dd v-else>Not set</dd>
|
||||
|
||||
<dt>Search Radius</dt>
|
||||
<dd>{{ game.searchRadius || 500 }} meters</dd>
|
||||
|
||||
<dt>Time Limit per Leg</dt>
|
||||
<dd>{{ game.timeLimitPerLeg || 30 }} minutes</dd>
|
||||
|
||||
<dt>Time Deduction Penalty</dt>
|
||||
<dd>{{ game.timeDeductionPenalty || 60 }} seconds</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section v-if="game.legs?.length">
|
||||
<h2>Legs ({{ game.legs.length }})</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Description</th>
|
||||
<th>Type</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="leg in game.legs" :key="leg.id">
|
||||
<td>{{ leg.sequenceNumber }}</td>
|
||||
<td>{{ leg.description }}</td>
|
||||
<td>{{ leg.conditionType }}</td>
|
||||
<td>{{ leg.timeLimit ? `${leg.timeLimit} min` : '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section v-if="game.teams?.length">
|
||||
<h2>Teams ({{ game.teams.length }})</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Members</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="team in game.teams" :key="team.id">
|
||||
<td>{{ team.name }}</td>
|
||||
<td><span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span></td>
|
||||
<td>{{ team.members?.length || 0 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.game-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.game-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.game-header h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.game-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status.draft { background: #fff3cd; color: #856404; }
|
||||
.status.live { background: #d4edda; color: #155724; }
|
||||
.status.ended { background: #e2e3e5; color: #383d41; }
|
||||
.status.draft { background: var(--pico-mark-background-color); }
|
||||
.status.live { background: var(--pico-ins-background-color); }
|
||||
.status.ended { background: var(--pico-muted-color); color: var(--pico-muted-border-color); }
|
||||
.status.archived { background: var(--pico-muted-color); color: var(--pico-muted-border-color); }
|
||||
.status.active { background: var(--pico-ins-background-color); }
|
||||
.status.disqualified { background: var(--pico-del-background-color); }
|
||||
.status.finished { background: var(--pico-primary-background-color); color: var(--pico-primary-background-color); }
|
||||
|
||||
.gm-actions, .player-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary { background: #667eea; color: white; }
|
||||
.btn-secondary { background: #e0e0e0; color: #333; }
|
||||
.btn-danger { background: #dc3545; color: white; }
|
||||
|
||||
.game-section {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.game-section h2 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.game-section dl {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.game-section dt {
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.legs-list, .teams-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.leg-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.leg-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
dt {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.leg-content p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.leg-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.team-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.team-status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.team-status.active { background: #d4edda; color: #155724; }
|
||||
.team-status.disqualified { background: #f8d7da; color: #721c24; }
|
||||
.team-status.finished { background: #cce5ff; color: #004085; }
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,160 +26,80 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home">
|
||||
<header class="hero">
|
||||
<h1>Treasure Trails</h1>
|
||||
<p>Online scavenger hunt adventure</p>
|
||||
<div class="hero-actions">
|
||||
<RouterLink to="/register" class="btn btn-primary">Get Started</RouterLink>
|
||||
<RouterLink to="/login" class="btn btn-secondary">Login</RouterLink>
|
||||
<main class="container">
|
||||
<section aria-label="Hero">
|
||||
<hgroup>
|
||||
<h1>Treasure Trails</h1>
|
||||
<p>Online scavenger hunt adventure</p>
|
||||
</hgroup>
|
||||
<div class="grid">
|
||||
<RouterLink to="/register" role="button">Get Started</RouterLink>
|
||||
<RouterLink to="/login" role="button" class="secondary">Login</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section class="games-section">
|
||||
<section aria-label="Active Games">
|
||||
<h2>Active Public Games</h2>
|
||||
|
||||
<div class="search-bar">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Search games..."
|
||||
@keyup.enter="loadGames"
|
||||
/>
|
||||
<button @click="loadGames" class="btn">Search</button>
|
||||
</div>
|
||||
<form @submit.prevent="loadGames">
|
||||
<div class="grid">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Search games..."
|
||||
/>
|
||||
<button type="submit">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="loading" class="loading">Loading games...</div>
|
||||
<article v-if="loading">Loading games...</article>
|
||||
|
||||
<div v-else-if="games.length === 0" class="empty">
|
||||
No active games found. Be the first to create one!
|
||||
</div>
|
||||
<article v-else-if="games.length === 0">
|
||||
<p>No active games found. Be the first to create one!</p>
|
||||
</article>
|
||||
|
||||
<div v-else class="games-grid">
|
||||
<div v-else class="grid">
|
||||
<RouterLink
|
||||
v-for="game in games"
|
||||
:key="game.id"
|
||||
:to="`/games/${game.id}`"
|
||||
class="game-card"
|
||||
class="card"
|
||||
>
|
||||
<h3>{{ game.name }}</h3>
|
||||
<p v-if="game.description">{{ game.description.slice(0, 100) }}...</p>
|
||||
<div class="game-meta">
|
||||
<span>{{ game._count?.legs || 0 }} legs</span>
|
||||
<span>{{ game._count?.teams || 0 }} teams</span>
|
||||
<span v-if="game.startDate">{{ new Date(game.startDate).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
<footer>
|
||||
<small>{{ game._count?.legs || 0 }} legs · {{ game._count?.teams || 0 }} teams</small>
|
||||
<small v-if="game.startDate">{{ new Date(game.startDate).toLocaleDateString() }}</small>
|
||||
</footer>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.games-section h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
.card {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
border: var(--pico-border-width) solid var(--pico-muted-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
}
|
||||
|
||||
.game-card h3 {
|
||||
.card h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.game-meta {
|
||||
.card footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import type { Game } from '../types';
|
||||
import { gameService } from '../services/api';
|
||||
|
|
@ -13,8 +13,6 @@ const error = ref('');
|
|||
|
||||
const inviteCode = computed(() => route.params.code as string);
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
async function loadGame() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
|
|
@ -41,116 +39,48 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="invite-page">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
<main class="container">
|
||||
<article v-if="loading">Loading...</article>
|
||||
<article v-else-if="error" class="error">{{ error }}</article>
|
||||
|
||||
<template v-else-if="game">
|
||||
<div class="invite-card">
|
||||
<h1>You're Invited!</h1>
|
||||
<p class="game-name">{{ game.name }}</p>
|
||||
<h1>You're Invited!</h1>
|
||||
<h2>{{ game.name }}</h2>
|
||||
|
||||
<p v-if="game.description">{{ game.description }}</p>
|
||||
|
||||
<dl>
|
||||
<dt>Game Master</dt>
|
||||
<dd>{{ game.gameMaster?.name }}</dd>
|
||||
|
||||
<div v-if="game.description" class="description">
|
||||
{{ game.description }}
|
||||
</div>
|
||||
<dt v-if="game.startDate">Start Date</dt>
|
||||
<dd v-if="game.startDate">{{ new Date(game.startDate).toLocaleString() }}</dd>
|
||||
|
||||
<div class="game-info">
|
||||
<div class="info-row">
|
||||
<span>Game Master:</span>
|
||||
<span>{{ game.gameMaster?.name }}</span>
|
||||
</div>
|
||||
<div v-if="game.startDate" class="info-row">
|
||||
<span>Start Date:</span>
|
||||
<span>{{ new Date(game.startDate).toLocaleString() }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span>Status:</span>
|
||||
<span :class="['status', game.status.toLowerCase()]">{{ game.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="goToGame" class="btn btn-primary">
|
||||
Join Game
|
||||
</button>
|
||||
</div>
|
||||
<dt>Status</dt>
|
||||
<dd>
|
||||
<span :class="['status', game.status.toLowerCase()]">{{ game.status }}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<button @click="goToGame">
|
||||
Join Game
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.invite-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.invite-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invite-card h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #666;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
.error {
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.status.draft { background: #fff3cd; color: #856404; }
|
||||
.status.live { background: #d4edda; color: #155724; }
|
||||
.status.ended { background: #e2e3e5; color: #383d41; }
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
.status.draft { background: var(--pico-mark-background-color); }
|
||||
.status.live { background: var(--pico-ins-background-color); }
|
||||
.status.ended { background: var(--pico-muted-color); color: var(--pico-muted-border-color); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -84,147 +84,52 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="join-game">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
<main class="container">
|
||||
<article v-if="loading">Loading...</article>
|
||||
|
||||
<template v-else-if="game">
|
||||
<header class="page-header">
|
||||
<h1>Join: {{ game.name }}</h1>
|
||||
</header>
|
||||
<h1>Join: {{ game.name }}</h1>
|
||||
|
||||
<div v-if="userTeam" class="already-joined">
|
||||
<article v-if="userTeam">
|
||||
<p>You are on team: <strong>{{ userTeam.name }}</strong></p>
|
||||
<button @click="startPlaying" class="btn btn-primary">
|
||||
<button @click="startPlaying">
|
||||
{{ game.status === 'LIVE' ? 'Start Playing' : 'View Team' }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div v-else class="join-content">
|
||||
<section class="create-team">
|
||||
<template v-else>
|
||||
<article>
|
||||
<h2>Create a Team</h2>
|
||||
<form @submit.prevent="createTeam">
|
||||
<input
|
||||
v-model="newTeamName"
|
||||
type="text"
|
||||
placeholder="Enter team name"
|
||||
required
|
||||
/>
|
||||
<button type="submit" class="btn btn-primary" :disabled="creating">
|
||||
{{ creating ? 'Creating...' : 'Create Team (3-5 members)' }}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="join-team">
|
||||
<h2>Or Join an Existing Team</h2>
|
||||
<div class="teams-list">
|
||||
<div v-for="team in teams" :key="team.id" class="team-item">
|
||||
<div class="team-info">
|
||||
<span class="team-name">{{ team.name }}</span>
|
||||
<span class="team-members">{{ team.members?.length || 0 }}/5 members</span>
|
||||
</div>
|
||||
<button
|
||||
@click="joinTeam(team.id)"
|
||||
class="btn btn-secondary"
|
||||
:disabled="(team.members?.length || 0) >= 5 || joining"
|
||||
>
|
||||
Join
|
||||
<div class="grid">
|
||||
<input
|
||||
v-model="newTeamName"
|
||||
type="text"
|
||||
placeholder="Enter team name"
|
||||
required
|
||||
/>
|
||||
<button type="submit" :disabled="creating">
|
||||
{{ creating ? 'Creating...' : 'Create Team' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
<p><small>Teams can have 3-5 members</small></p>
|
||||
</article>
|
||||
|
||||
<h2>Or Join an Existing Team</h2>
|
||||
<article v-for="team in teams" :key="team.id">
|
||||
<h3>{{ team.name }}</h3>
|
||||
<footer>
|
||||
<small>{{ team.members?.length || 0 }}/5 members</small>
|
||||
</footer>
|
||||
<button
|
||||
@click="joinTeam(team.id)"
|
||||
:disabled="(team.members?.length || 0) >= 5 || joining"
|
||||
>
|
||||
Join
|
||||
</button>
|
||||
</article>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.join-game {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.already-joined {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.already-joined p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.join-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.create-team, .join-team {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.create-team h2, .join-team h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.create-team form {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.create-team input {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.teams-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.team-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-members {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary { background: #667eea; color: white; }
|
||||
.btn-secondary { background: #e0e0e0; color: #333; }
|
||||
.btn:disabled { opacity: 0.5; }
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,119 +29,43 @@ async function handleSubmit() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-page">
|
||||
<div class="auth-card">
|
||||
<main class="container">
|
||||
<article>
|
||||
<h1>Login</h1>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Your password"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Your password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" :disabled="authStore.loading">
|
||||
<button type="submit" :disabled="authStore.loading">
|
||||
{{ authStore.loading ? 'Logging in...' : 'Login' }}
|
||||
</button>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
</form>
|
||||
|
||||
<p class="switch-auth">
|
||||
Don't have an account? <RouterLink to="/register">Register</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Don't have an account? <RouterLink to="/register">Register</RouterLink></p>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.switch-auth {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.switch-auth a {
|
||||
color: #667eea;
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { io, Socket } from 'socket.io-client';
|
|||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import type { Game, Team, Leg, ChatMessage } from '../types';
|
||||
import type { Game, Team, ChatMessage } from '../types';
|
||||
import { teamService, uploadService } from '../services/api';
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -219,165 +219,99 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="play-game">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
<main class="play-game">
|
||||
<article v-if="loading">Loading...</article>
|
||||
|
||||
<template v-else-if="game && team">
|
||||
<header class="game-header">
|
||||
<h1>{{ game.name }}</h1>
|
||||
<span class="team-name">Team: {{ team.name }}</span>
|
||||
</header>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li><strong>{{ game.name }}</strong></li>
|
||||
<li>Team: {{ team.name }}</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="game-content">
|
||||
<div class="clue-section">
|
||||
<div v-if="currentLeg" class="current-clue">
|
||||
<div class="grid" style="grid-template-columns: 350px 1fr 280px;">
|
||||
<section>
|
||||
<article v-if="currentLeg">
|
||||
<h2>Current Clue</h2>
|
||||
<p class="clue-text">{{ currentLeg.description }}</p>
|
||||
<div class="clue-meta">
|
||||
<span>Type: {{ currentLeg.conditionType }}</span>
|
||||
<span v-if="currentLeg.timeLimit">Time limit: {{ currentLeg.timeLimit }} min</span>
|
||||
</div>
|
||||
|
||||
<p>{{ currentLeg.description }}</p>
|
||||
<footer>
|
||||
<small>
|
||||
Type: {{ currentLeg.conditionType }}
|
||||
<span v-if="currentLeg.timeLimit"> · Time limit: {{ currentLeg.timeLimit }} min</span>
|
||||
</small>
|
||||
</footer>
|
||||
<button
|
||||
v-if="currentLeg.conditionType === 'photo'"
|
||||
@click="showPhotoUpload = true"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
📷 Submit Photo Proof
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div v-else class="no-clue">
|
||||
<article v-else>
|
||||
<p v-if="team.status === 'FINISHED'">🎉 Congratulations! You've completed the hunt!</p>
|
||||
<p v-else>Waiting for the game to start...</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="progress">
|
||||
<article>
|
||||
<h3>Progress</h3>
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${((currentLegIndex + 1) / (game.legs?.length || 1)) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<p>Leg {{ currentLegIndex + 1 }} of {{ game.legs?.length || 0 }}</p>
|
||||
<p v-if="team.totalTimeDeduction" class="penalty">
|
||||
Time penalty: {{ team.totalTimeDeduction }} seconds
|
||||
<progress
|
||||
:value="currentLegIndex + 1"
|
||||
:max="game.legs?.length || 1"
|
||||
></progress>
|
||||
<p><small>Leg {{ currentLegIndex + 1 }} of {{ game.legs?.length || 0 }}</small></p>
|
||||
<p v-if="team.totalTimeDeduction" class="error">
|
||||
<small>Time penalty: {{ team.totalTimeDeduction }} seconds</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="map-section">
|
||||
<section>
|
||||
<div id="map" class="map-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="chat-section">
|
||||
<section>
|
||||
<h3>Chat</h3>
|
||||
<div class="chat-messages">
|
||||
<div v-for="msg in chatMessages" :key="msg.id" class="chat-message">
|
||||
<article v-for="msg in chatMessages" :key="msg.id" style="margin: 0.5rem 0; padding: 0.5rem;">
|
||||
<strong>{{ msg.userName }}:</strong> {{ msg.message }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<form @submit.prevent="sendChat" class="chat-input">
|
||||
<form @submit.prevent="sendChat" class="grid">
|
||||
<input v-model="chatMessage" placeholder="Type..." />
|
||||
<button type="submit" class="btn btn-sm">Send</button>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-if="showPhotoUpload" class="modal-overlay" @click.self="showPhotoUpload = false">
|
||||
<div class="modal">
|
||||
<dialog :open="showPhotoUpload">
|
||||
<article>
|
||||
<h3>Submit Photo Proof</h3>
|
||||
<input type="file" accept="image/*" @change="handlePhotoSelect" />
|
||||
<div class="modal-actions">
|
||||
<button @click="submitPhoto" class="btn btn-primary" :disabled="uploading">
|
||||
<label>
|
||||
Select Photo
|
||||
<input type="file" accept="image/*" @change="handlePhotoSelect" />
|
||||
</label>
|
||||
<footer class="grid">
|
||||
<button @click="submitPhoto" :disabled="uploading">
|
||||
{{ uploading ? 'Uploading...' : 'Submit' }}
|
||||
</button>
|
||||
<button @click="showPhotoUpload = false" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="showPhotoUpload = false" class="secondary">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.play-game {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.game-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.game-content {
|
||||
display: grid;
|
||||
grid-template-columns: 350px 1fr 280px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.clue-section, .chat-section {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.current-clue {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.clue-text {
|
||||
font-size: 1.125rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.clue-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #667eea;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.penalty {
|
||||
color: #dc3545;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
height: calc(100vh - 200px);
|
||||
border-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
|
|
@ -385,69 +319,7 @@ onUnmounted(() => {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
|
||||
.btn-primary { background: #667eea; color: white; }
|
||||
.btn-secondary { background: #e0e0e0; color: #333; }
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal input[type="file"] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
.error {
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,130 +30,52 @@ async function handleSubmit() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-page">
|
||||
<div class="auth-card">
|
||||
<main class="container">
|
||||
<article>
|
||||
<h1>Register</h1>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Create a password"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Create a password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" :disabled="authStore.loading">
|
||||
<button type="submit" :disabled="authStore.loading">
|
||||
{{ authStore.loading ? 'Creating account...' : 'Register' }}
|
||||
</button>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
</form>
|
||||
|
||||
<p class="switch-auth">
|
||||
Already have an account? <RouterLink to="/login">Login</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Already have an account? <RouterLink to="/login">Login</RouterLink></p>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.switch-auth {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.switch-auth a {
|
||||
color: #667eea;
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -115,186 +115,83 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="spectate-game">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
<main class="spectate-game">
|
||||
<article v-if="loading">Loading...</article>
|
||||
|
||||
<template v-else-if="game">
|
||||
<header class="spectate-header">
|
||||
<h1>{{ game.name }} - Spectator View</h1>
|
||||
<span class="live-badge">LIVE</span>
|
||||
</header>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li><strong>{{ game.name }}</strong></li>
|
||||
<li><mark>SPECTATING</mark></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="spectate-content">
|
||||
<div class="map-section">
|
||||
<div class="grid" style="grid-template-columns: 1fr 320px;">
|
||||
<section>
|
||||
<div id="map" class="map-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="sidebar">
|
||||
<section class="leaderboard">
|
||||
<h2>Leaderboard</h2>
|
||||
<div class="team-list">
|
||||
<div
|
||||
v-for="(team, index) in leaderboard"
|
||||
:key="team.id"
|
||||
class="team-row"
|
||||
:class="{ finished: team.status === 'FINISHED' }"
|
||||
>
|
||||
<span class="rank">#{{ index + 1 }}</span>
|
||||
<span class="name">{{ team.name }}</span>
|
||||
<span class="leg">
|
||||
{{ game.legs?.findIndex(l => l.id === team.currentLegId) + 1 || 0 }}/{{ game.legs?.length || 0 }}
|
||||
</span>
|
||||
<span v-if="team.totalTimeDeduction" class="penalty">
|
||||
-{{ team.totalTimeDeduction }}s
|
||||
</span>
|
||||
<span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
</div>
|
||||
<aside>
|
||||
<h2>Leaderboard</h2>
|
||||
<article
|
||||
v-for="(team, index) in leaderboard"
|
||||
:key="team.id"
|
||||
:class="{ 'finished': team.status === 'FINISHED' }"
|
||||
style="margin-bottom: 0.5rem;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<strong>#{{ index + 1 }} {{ team.name }}</strong>
|
||||
<span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<small>
|
||||
Leg {{ game.legs?.findIndex(l => l.id === team.currentLegId) + 1 || 0 }}/{{ game.legs?.length || 0 }}
|
||||
<span v-if="team.totalTimeDeduction" class="error"> · -{{ team.totalTimeDeduction }}s</span>
|
||||
</small>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="teams-overview">
|
||||
<h2>Teams</h2>
|
||||
<div class="team-cards">
|
||||
<div v-for="team in teams" :key="team.id" class="team-card">
|
||||
<span class="team-name">{{ team.name }}</span>
|
||||
<span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
<div class="team-members">{{ team.members?.length || 0 }} members</div>
|
||||
</div>
|
||||
<h2>Teams</h2>
|
||||
<article v-for="team in teams" :key="team.id" style="margin-bottom: 0.5rem;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<strong>{{ team.name }}</strong>
|
||||
<span :class="['status', team.status.toLowerCase()]">{{ team.status }}</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<small>{{ team.members?.length || 0 }} members</small>
|
||||
</footer>
|
||||
</article>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spectate-game {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spectate-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.live-badge {
|
||||
background: #dc3545;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.spectate-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
height: calc(100vh - 200px);
|
||||
border-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 320px;
|
||||
background: white;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.leaderboard, .teams-overview {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.leaderboard h2, .teams-overview h2 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.team-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.team-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.team-row.finished {
|
||||
background: #d4edda;
|
||||
}
|
||||
|
||||
.rank {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.leg {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.penalty {
|
||||
font-size: 0.75rem;
|
||||
color: #dc3545;
|
||||
.finished {
|
||||
background: var(--pico-ins-background-color) !important;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 0.125rem 0.375rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.status.active { background: #d4edda; color: #155724; }
|
||||
.status.disqualified { background: #f8d7da; color: #721c24; }
|
||||
.status.finished { background: #cce5ff; color: #004085; }
|
||||
|
||||
.team-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
padding: 0.75rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-members {
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
.status.active { background: var(--pico-ins-background-color); }
|
||||
.status.disqualified { background: var(--pico-del-background-color); }
|
||||
.status.finished { background: var(--pico-primary-background-color); color: var(--pico-primary-color); }
|
||||
|
||||
.error {
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,8 +30,10 @@ export const gameService = {
|
|||
create: (data: Partial<Game>) => api.post<Game>('/games', data),
|
||||
update: (id: string, data: Partial<Game>) => api.put<Game>(`/games/${id}`, data),
|
||||
delete: (id: string) => api.delete(`/games/${id}`),
|
||||
publish: (id: string) => api.post<Game>(`/${id}/publish`),
|
||||
end: (id: string) => api.post<Game>(`/${id}/end`),
|
||||
publish: (id: string) => api.post<Game>(`/games/${id}/publish`),
|
||||
end: (id: string) => api.post<Game>(`/games/${id}/end`),
|
||||
archive: (id: string) => api.post<Game>(`/games/${id}/archive`),
|
||||
unarchive: (id: string) => api.post<Game>(`/games/${id}/unarchive`),
|
||||
getInvite: (id: string) => api.get<{ inviteCode: string }>(`/games/${id}/invite`),
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,296 +1,7 @@
|
|||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export interface Game {
|
|||
searchRadius?: number;
|
||||
timeLimitPerLeg?: number;
|
||||
timeDeductionPenalty?: number;
|
||||
status: 'DRAFT' | 'LIVE' | 'ENDED';
|
||||
status: 'DRAFT' | 'LIVE' | 'ENDED' | 'ARCHIVED';
|
||||
inviteCode?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue