diff --git a/src/lib/components/player/RecentPlayers.svelte b/src/lib/components/player/RecentPlayers.svelte new file mode 100644 index 0000000..82649fd --- /dev/null +++ b/src/lib/components/player/RecentPlayers.svelte @@ -0,0 +1,81 @@ + + +{#if recentPlayers.length > 0} + +
+ +

Recently Visited Players

+
+ +
+ {#each recentPlayers as player (player.id)} +
+ + {player.name} +
+
{player.name}
+
{formatTimeAgo(player.visitedAt)}
+
+
+ + + +
+ {/each} +
+ +
+ Showing up to {recentPlayers.length} recently visited player{recentPlayers.length !== 1 + ? 's' + : ''} +
+
+{/if} diff --git a/src/lib/utils/recentPlayers.ts b/src/lib/utils/recentPlayers.ts new file mode 100644 index 0000000..d5dc0df --- /dev/null +++ b/src/lib/utils/recentPlayers.ts @@ -0,0 +1,87 @@ +/** + * Utility for managing recently visited players in localStorage + */ + +const STORAGE_KEY = 'cs2wtf_recent_players'; +const MAX_RECENT_PLAYERS = 10; + +export interface RecentPlayer { + id: string; + name: string; + avatar: string; + visitedAt: number; // Unix timestamp +} + +/** + * Get all recently visited players from localStorage + */ +export function getRecentPlayers(): RecentPlayer[] { + if (typeof window === 'undefined') return []; + + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (!stored) return []; + + const players: RecentPlayer[] = JSON.parse(stored); + // Sort by most recent first + return players.sort((a, b) => b.visitedAt - a.visitedAt); + } catch (error) { + console.error('Failed to load recent players:', error); + return []; + } +} + +/** + * Add or update a player in the recently visited list + */ +export function addRecentPlayer(player: Omit): void { + if (typeof window === 'undefined') return; + + try { + const recent = getRecentPlayers(); + + // Remove existing entry if present + const filtered = recent.filter((p) => p.id !== player.id); + + // Add new entry with current timestamp + const newPlayer: RecentPlayer = { + ...player, + visitedAt: Date.now() + }; + + // Keep only the most recent MAX_RECENT_PLAYERS + const updated = [newPlayer, ...filtered].slice(0, MAX_RECENT_PLAYERS); + + localStorage.setItem(STORAGE_KEY, JSON.stringify(updated)); + } catch (error) { + console.error('Failed to save recent player:', error); + } +} + +/** + * Clear all recently visited players + */ +export function clearRecentPlayers(): void { + if (typeof window === 'undefined') return; + + try { + localStorage.removeItem(STORAGE_KEY); + } catch (error) { + console.error('Failed to clear recent players:', error); + } +} + +/** + * Remove a specific player from the recently visited list + */ +export function removeRecentPlayer(playerId: string): void { + if (typeof window === 'undefined') return; + + try { + const recent = getRecentPlayers(); + const filtered = recent.filter((p) => p.id !== playerId); + localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered)); + } catch (error) { + console.error('Failed to remove recent player:', error); + } +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5cbd20e..64f1d76 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,6 +4,7 @@ import Card from '$lib/components/ui/Card.svelte'; import Badge from '$lib/components/ui/Badge.svelte'; import MatchCard from '$lib/components/match/MatchCard.svelte'; + import RecentPlayers from '$lib/components/player/RecentPlayers.svelte'; import type { PageData } from './$types'; // Get data from page loader @@ -150,6 +151,13 @@ + +
+
+ +
+
+
diff --git a/src/routes/player/[id]/+page.svelte b/src/routes/player/[id]/+page.svelte index ea3e2ca..3e3f161 100644 --- a/src/routes/player/[id]/+page.svelte +++ b/src/routes/player/[id]/+page.svelte @@ -18,11 +18,22 @@ import TrackPlayerModal from '$lib/components/player/TrackPlayerModal.svelte'; import { preferences } from '$lib/stores'; import { invalidateAll } from '$app/navigation'; + import { addRecentPlayer } from '$lib/utils/recentPlayers'; + import { onMount } from 'svelte'; import type { PageData } from './$types'; let { data }: { data: PageData } = $props(); const { profile, recentMatches, playerStats } = data; + // Track this player visit + onMount(() => { + addRecentPlayer({ + id: profile.id, + name: profile.name, + avatar: profile.avatar + }); + }); + // Track player modal state let isTrackModalOpen = $state(false);