File size: 2,202 Bytes
54ab054 a8636b2 565e57b a8636b2 565e57b 54ab054 565e57b 54ab054 565e57b 54ab054 565e57b 54ab054 565e57b 54ab054 565e57b 54ab054 3c7dac0 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 81 82 83 84 85 86 |
<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 rarity score
const progressColor = $derived.by(() => {
const score = gameState?.rarityScore ?? 0;
return getProgressColor(score);
});
function getProgressColor(score: number): string {
if (score < 100) return '#4caf50'; // green - beginner
if (score < 500) return '#ffc107'; // yellow - intermediate
if (score < 1000) return '#ff9800'; // orange - advanced
if (score < 2000) return '#f44336'; // red - expert
return '#9c27b0'; // purple - master
}
onMount(() => {
// Load game state
getOrCreateGameState().then(state => {
gameState = state;
});
// Refresh game state periodically
const interval = setInterval(() => {
getOrCreateGameState().then(state => {
gameState = state;
});
}, 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: {Math.min((gameState.rarityScore / 2000) * 100, 100)}%; background-color: {progressColor}"></div>
</div>
<span class="progress-stats">📷 {gameState.totalDiscoveries} 🔍 {gameState.uniqueDiscoveries}</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> |