csgowtf/src/lib/components/match/MatchCard.svelte

<script lang="ts">
	import Badge from '$lib/components/ui/Badge.svelte';
	import type { MatchListItem } from '$lib/types';
	import { storeMatchesState } from '$lib/utils/navigation';
	import { getMapBackground, formatMapName } from '$lib/utils/mapAssets';

	interface Props {
		match: MatchListItem;
		loadedCount?: number;
	}

	let { match, loadedCount = 0 }: Props = $props();

	const formattedDate = new Date(match.date).toLocaleString('en-US', {
		month: 'short',
		day: 'numeric',
		hour: '2-digit',
		minute: '2-digit'
	});

	const mapName = formatMapName(match.map);
	const mapBg = getMapBackground(match.map);

	function handleClick() {
		// Store navigation state before navigating
		storeMatchesState(match.match_id, loadedCount);
	}

	function handleImageError(event: Event) {
		const img = event.target as HTMLImageElement;
		img.src = '/images/map_screenshots/default.webp';
	}
</script>

<a
	href={`/match/${match.match_id}`}
	class="block transition-transform hover:scale-[1.02]"
	data-match-id={match.match_id}
	onclick={handleClick}
>
	<div
		class="overflow-hidden rounded-lg border border-base-300 bg-base-100 shadow-md transition-shadow hover:shadow-xl"
	>
		<!-- Map Header with Background Image -->
		<div class="relative h-32 overflow-hidden">
			<!-- Background Image -->
			<img
				src={mapBg}
				alt={mapName}
				class="absolute inset-0 h-full w-full object-cover"
				loading="lazy"
				onerror={handleImageError}
			/>
			<!-- Overlay for better text contrast -->
			<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20"></div>
			<!-- Content -->
			<div class="relative flex h-full items-end justify-between p-3">
				<div class="flex flex-col gap-1">
					{#if match.map}
						<Badge variant="default">{match.map}</Badge>
					{/if}
					<span class="text-lg font-bold text-white drop-shadow-lg">{mapName}</span>
				</div>
				{#if match.demo_parsed}
					<Badge variant="success" size="sm">Parsed</Badge>
				{/if}
			</div>
		</div>

		<!-- Match Info -->
		<div class="p-4">
			<!-- Score -->
			<div class="mb-3 flex items-center justify-center gap-3">
				<span class="font-mono text-2xl font-bold text-terrorist">{match.score_team_a}</span>
				<span class="text-base-content/40">-</span>
				<span class="font-mono text-2xl font-bold text-ct">{match.score_team_b}</span>
			</div>

			<!-- Meta -->
			<div class="flex items-center justify-between text-sm text-base-content/60">
				<span>{formattedDate}</span>
				{#if match.duration}
					<span>{Math.floor(match.duration / 60)}m</span>
				{/if}
			</div>

			<!-- Result Badge (inferred from score) -->
			<div class="mt-3 flex justify-center">
				{#if match.score_team_a === match.score_team_b}
					<Badge variant="warning" size="sm">Tie</Badge>
				{:else if match.score_team_a > match.score_team_b}
					<Badge variant="success" size="sm">Team A Win</Badge>
				{:else}
					<Badge variant="error" size="sm">Team B Win</Badge>
				{/if}
			</div>
		</div>
	</div>
</a>