File size: 2,086 Bytes
54ab054 ee3dc87 54ab054 ee3dc87 54ab054 6417e78 54ab054 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<script lang="ts">
import { onMount } from 'svelte';
import { getOrCreateGameState } from '$lib/db/gameState';
import type { GameState } from '$lib/db/schema';
let gameState: GameState | null = $state(null);
// Progress bar color based on progress
const progressColor = $derived(getProgressColor(gameState?.progressPoints || 0));
function getProgressColor(points: number): string {
const progress = points / 1000;
if (progress < 0.2) return '#4caf50'; // green
if (progress < 0.4) return '#ffc107'; // yellow
if (progress < 0.6) return '#ff9800'; // orange
if (progress < 0.8) return '#f44336'; // red
return '#9c27b0'; // purple
}
onMount(async () => {
// Load game state
gameState = await getOrCreateGameState();
// Refresh game state periodically
const interval = setInterval(async () => {
gameState = await getOrCreateGameState();
}, 5000); // Update every 5 seconds
return () => clearInterval(interval);
});
</script>
{#if gameState}
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" style="width: {(gameState.progressPoints / 1000) * 100}%; background-color: {progressColor}"></div>
</div>
<span class="progress-stats">👥 {gameState.trainersDefeated} 📷 {gameState.picletsCapured}</span>
</div>
{/if}
<style>
.progress-container {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 1rem;
padding-top: env(safe-area-inset-top);
background: white;
border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
.progress-container {
padding: 0.3rem 1rem;
padding-top: env(safe-area-inset-top);
}
}
.progress-bar {
margin-top: 5px;
flex: 1;
background: #f0f0f0;
height: 6px;
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
transition: width 0.8s ease;
}
.progress-stats {
font-size: 0.875rem;
color: #666;
font-weight: 500;
white-space: nowrap;
}
</style> |