Spaces:
Running
Running
File size: 3,911 Bytes
31d3580 95e3d2a 15d8696 31d3580 8899818 31d3580 95e3d2a 8899818 31d3580 8899818 95e3d2a 31d3580 95e3d2a 31d3580 95e3d2a 8899818 31d3580 8899818 15d8696 31d3580 95e3d2a 31d3580 8899818 15d8696 31d3580 8899818 15d8696 31d3580 8899818 31d3580 15d8696 31d3580 15d8696 31d3580 95e3d2a 15d8696 31d3580 15d8696 31d3580 8899818 15d8696 31d3580 8899818 31d3580 15d8696 31d3580 | 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <script lang="ts">
import type { Match } from '$lib/types';
import { Badge } from '$lib/components/ui/badge';
import { cn } from '$lib/utils';
import CalendarIcon from 'phosphor-svelte/lib/CalendarIcon';
import MapPinIcon from 'phosphor-svelte/lib/MapPinIcon';
import ShieldIcon from 'phosphor-svelte/lib/ShieldIcon';
import SwordIcon from 'phosphor-svelte/lib/SwordIcon';
import FilmSlateIcon from 'phosphor-svelte/lib/FilmSlateIcon';
import ArrowSquareOutIcon from 'phosphor-svelte/lib/ArrowSquareOutIcon';
import HashIcon from 'phosphor-svelte/lib/HashIcon';
import { formatDateTime, prettyMap } from '$lib/utils/format';
import { mapColorClasses } from '$lib/utils/map-colors';
interface Props {
match: Match;
}
let { match }: Props = $props();
const team1Wins = $derived(match.winner === 'team1');
const winnerSide = $derived((match.winner_side ?? '').toLowerCase());
</script>
<div class="space-y-3">
<div>
<div class="text-xs tracking-wide text-muted-foreground uppercase">Event</div>
<div class="mt-0.5 font-heading text-sm font-semibold">{match.event}</div>
</div>
<div class="border-y py-3">
<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<div
data-winning={team1Wins}
class="text-right text-sm font-medium data-[winning=false]:text-muted-foreground"
>
{match.team1}
</div>
<div class="flex items-center gap-1 font-heading text-xl font-bold tabular-nums">
<span data-winning={team1Wins} class="data-[winning=true]:text-primary">{match.score1}</span
>
<span class="text-muted-foreground/40">:</span>
<span data-winning={!team1Wins} class="data-[winning=true]:text-primary"
>{match.score2}</span
>
</div>
<div
data-winning={!team1Wins}
class="text-left text-sm font-medium data-[winning=false]:text-muted-foreground"
>
{match.team2}
</div>
</div>
</div>
<dl class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
<dt class="inline-flex items-center gap-1 text-muted-foreground">
<MapPinIcon size={12} weight="duotone" /> Map
</dt>
<dd class="text-right">
<Badge class={cn('gap-1 border capitalize', mapColorClasses(match.map_name))}>
{prettyMap(match.map_name)}
</Badge>
</dd>
<dt class="inline-flex items-center gap-1 text-muted-foreground">
<FilmSlateIcon size={12} weight="duotone" /> Format
</dt>
<dd class="text-right font-medium uppercase">{match.format}</dd>
<dt class="inline-flex items-center gap-1 text-muted-foreground">
<CalendarIcon size={12} weight="duotone" /> Played
</dt>
<dd class="text-right font-medium">{formatDateTime(match.match_date)}</dd>
{#if winnerSide === 'ct' || winnerSide === 't'}
<dt class="inline-flex items-center gap-1 text-muted-foreground">
{#if winnerSide === 'ct'}
<ShieldIcon size={12} weight="duotone" />
{:else}
<SwordIcon size={12} weight="duotone" />
{/if}
Winner
</dt>
<dd class="text-right">
{#if winnerSide === 'ct'}
<Badge
class="gap-1 border border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300"
>
<ShieldIcon size={11} weight="duotone" /> CT won
</Badge>
{:else}
<Badge
class="gap-1 border border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300"
>
<SwordIcon size={11} weight="duotone" /> T won
</Badge>
{/if}
</dd>
{/if}
<dt class="inline-flex items-center gap-1 text-muted-foreground">
<HashIcon size={12} weight="duotone" /> Rounds
</dt>
<dd class="text-right font-medium tabular-nums">{match.rounds_played}</dd>
</dl>
{#if match.match_url}
<a
class="inline-flex items-center gap-1 text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
href={match.match_url}
target="_blank"
rel="noreferrer noopener"
>
<ArrowSquareOutIcon size={12} weight="duotone" /> View on HLTV
</a>
{/if}
</div>
|