From 8093d4d30876a472d0c365103905b8234336bc41 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Tue, 4 Nov 2025 23:42:50 +0100
Subject: [PATCH] feat: Implement Flashes Tab with real flash effectiveness
 data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces placeholder with fully functional flash analysis tab showing:
- Summary stats: total enemies blinded, flash assists, blind time
- Team comparison cards (T vs CT)
- Flash effectiveness leaderboard (sortable DataTable)
- Per-team detailed flash stats tables
- Average blind duration per flash calculation
- Self-flash and team-flash tracking

Data includes:
- Enemies blinded count
- Average blind duration (in seconds)
- Flash assists (kills while enemy blinded)
- Teammates flashed (accidents)
- Self-flashed count

Completes Phase 5.7 from TODO.md (Flash Tab implementation).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/routes/match/[id]/flashes/+page.svelte | 206 +++++++++++++++++++--
 1 file changed, 186 insertions(+), 20 deletions(-)

diff --git a/src/routes/match/[id]/flashes/+page.svelte b/src/routes/match/[id]/flashes/+page.svelte
index 8a96e72..aa421e0 100644
--- a/src/routes/match/[id]/flashes/+page.svelte
+++ b/src/routes/match/[id]/flashes/+page.svelte
@@ -1,32 +1,198 @@
 <script lang="ts">
-	import { Zap, Eye } from 'lucide-svelte';
+	import { Eye, Zap, Users } from 'lucide-svelte';
 	import Card from '$lib/components/ui/Card.svelte';
-	import Badge from '$lib/components/ui/Badge.svelte';
+	import DataTable from '$lib/components/data-display/DataTable.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	const { match } = data;
+
+	// Calculate flash effectiveness for each player
+	const flashStats = (match.players || [])
+		.map((player) => ({
+			name: player.name,
+			team_id: player.team_id,
+			enemies_blinded: player.flash_total_enemy || 0,
+			teammates_blinded: player.flash_total_team || 0,
+			self_blinded: player.flash_total_self || 0,
+			enemy_blind_duration: player.flash_duration_enemy || 0,
+			team_blind_duration: player.flash_duration_team || 0,
+			self_blind_duration: player.flash_duration_self || 0,
+			flash_assists: player.flash_assists || 0,
+			// Calculate average blind duration per flash
+			avg_blind_duration:
+				player.flash_total_enemy && player.flash_total_enemy > 0
+					? ((player.flash_duration_enemy || 0) / player.flash_total_enemy).toFixed(1)
+					: '0.0'
+		}))
+		.sort((a, b) => b.enemies_blinded - a.enemies_blinded);
+
+	// Separate by team
+	const teamAFlashStats = flashStats.filter((p) => p.team_id === 2);
+	const teamBFlashStats = flashStats.filter((p) => p.team_id === 3);
+
+	// Calculate team totals
+	const calcTeamTotals = (players: typeof flashStats) => ({
+		total_enemies_blinded: players.reduce((sum, p) => sum + p.enemies_blinded, 0),
+		total_flash_assists: players.reduce((sum, p) => sum + p.flash_assists, 0),
+		total_enemy_blind_time: players.reduce((sum, p) => sum + p.enemy_blind_duration, 0),
+		avg_per_player: (
+			players.reduce((sum, p) => sum + p.enemies_blinded, 0) / players.length
+		).toFixed(1)
+	});
+
+	const teamATotals = calcTeamTotals(teamAFlashStats);
+	const teamBTotals = calcTeamTotals(teamBFlashStats);
+
+	// Table columns
+	const columns = [
+		{ key: 'name', label: 'Player', sortable: true },
+		{
+			key: 'enemies_blinded',
+			label: 'Enemies Blinded',
+			sortable: true,
+			align: 'center' as const
+		},
+		{
+			key: 'avg_blind_duration',
+			label: 'Avg Duration (s)',
+			sortable: true,
+			align: 'center' as const,
+			formatter: (value: string) => `${value}s`
+		},
+		{
+			key: 'flash_assists',
+			label: 'Flash Assists',
+			sortable: true,
+			align: 'center' as const
+		},
+		{
+			key: 'teammates_blinded',
+			label: 'Team Flashed',
+			sortable: true,
+			align: 'center' as const
+		},
+		{
+			key: 'self_blinded',
+			label: 'Self Flashed',
+			sortable: true,
+			align: 'center' as const
+		}
+	];
 </script>
 
 <div class="space-y-6">
-	<Card padding="lg">
-		<div class="text-center">
-			<Eye class="mx-auto mb-4 h-16 w-16 text-warning" />
-			<h2 class="mb-2 text-2xl font-bold text-base-content">Flash Analysis</h2>
-			<p class="mb-4 text-base-content/60">
-				Flash effectiveness, enemies blinded, flash assists, and positioning heatmaps.
-			</p>
-			<Badge variant="warning" size="lg">Coming in Future Update</Badge>
-		</div>
-	</Card>
-
-	<div class="grid gap-6 md:grid-cols-2">
+	<!-- Summary Stats -->
+	<div class="grid gap-6 md:grid-cols-3">
 		<Card padding="lg">
-			<Zap class="mb-2 h-8 w-8 text-warning" />
-			<h3 class="mb-1 text-lg font-semibold">Flash Effectiveness</h3>
-			<p class="text-sm text-base-content/60">Enemies blinded and average blind duration</p>
+			<Eye class="mb-2 h-8 w-8 text-warning" />
+			<div class="text-3xl font-bold text-base-content">
+				{teamATotals.total_enemies_blinded + teamBTotals.total_enemies_blinded}
+			</div>
+			<div class="text-sm text-base-content/60">Total Enemies Blinded</div>
 		</Card>
 
 		<Card padding="lg">
-			<Eye class="mb-2 h-8 w-8 text-success" />
-			<h3 class="mb-1 text-lg font-semibold">Flash Assists</h3>
-			<p class="text-sm text-base-content/60">Blinded enemies killed by teammates</p>
+			<Zap class="mb-2 h-8 w-8 text-success" />
+			<div class="text-3xl font-bold text-base-content">
+				{teamATotals.total_flash_assists + teamBTotals.total_flash_assists}
+			</div>
+			<div class="text-sm text-base-content/60">Total Flash Assists</div>
+		</Card>
+
+		<Card padding="lg">
+			<Users class="mb-2 h-8 w-8 text-info" />
+			<div class="text-3xl font-bold text-base-content">
+				{((teamATotals.total_enemy_blind_time + teamBTotals.total_enemy_blind_time) / 1000).toFixed(
+					1
+				)}s
+			</div>
+			<div class="text-sm text-base-content/60">Total Enemy Blind Time</div>
 		</Card>
 	</div>
+
+	<!-- Team Comparison -->
+	<div class="grid gap-6 md:grid-cols-2">
+		<Card padding="lg">
+			<h3 class="mb-4 text-xl font-bold text-terrorist">Terrorists</h3>
+			<div class="space-y-3">
+				<div class="flex justify-between">
+					<span class="text-sm text-base-content/60">Enemies Blinded</span>
+					<span class="font-mono font-bold">{teamATotals.total_enemies_blinded}</span>
+				</div>
+				<div class="flex justify-between">
+					<span class="text-sm text-base-content/60">Flash Assists</span>
+					<span class="font-mono font-bold">{teamATotals.total_flash_assists}</span>
+				</div>
+				<div class="flex justify-between">
+					<span class="text-sm text-base-content/60">Avg per Player</span>
+					<span class="font-mono font-bold">{teamATotals.avg_per_player}</span>
+				</div>
+			</div>
+		</Card>
+
+		<Card padding="lg">
+			<h3 class="mb-4 text-xl font-bold text-ct">Counter-Terrorists</h3>
+			<div class="space-y-3">
+				<div class="flex justify-between">
+					<span class="text-sm text-base-content/60">Enemies Blinded</span>
+					<span class="font-mono font-bold">{teamBTotals.total_enemies_blinded}</span>
+				</div>
+				<div class="flex justify-between">
+					<span class="text-sm text-base-content/60">Flash Assists</span>
+					<span class="font-mono font-bold">{teamBTotals.total_flash_assists}</span>
+				</div>
+				<div class="flex justify-between">
+					<span class="text-sm text-base-content/60">Avg per Player</span>
+					<span class="font-mono font-bold">{teamBTotals.avg_per_player}</span>
+				</div>
+			</div>
+		</Card>
+	</div>
+
+	<!-- Flash Effectiveness Leaderboard -->
+	<Card padding="none">
+		<div class="p-6">
+			<h2 class="text-2xl font-bold text-base-content">Flash Effectiveness Leaderboard</h2>
+			<p class="mt-1 text-sm text-base-content/60">
+				Ranked by total enemies blinded during the match
+			</p>
+		</div>
+
+		<DataTable data={flashStats} {columns} striped hoverable />
+	</Card>
+
+	<!-- Team A Details -->
+	<Card padding="none">
+		<div class="border-b border-base-300 bg-terrorist/5 p-6">
+			<h3 class="text-xl font-bold text-terrorist">Terrorists - Flash Stats</h3>
+		</div>
+		<DataTable data={teamAFlashStats} {columns} striped hoverable />
+	</Card>
+
+	<!-- Team B Details -->
+	<Card padding="none">
+		<div class="border-b border-base-300 bg-ct/5 p-6">
+			<h3 class="text-xl font-bold text-ct">Counter-Terrorists - Flash Stats</h3>
+		</div>
+		<DataTable data={teamBFlashStats} {columns} striped hoverable />
+	</Card>
+
+	<!-- Info Box -->
+	<Card padding="lg" variant="elevated">
+		<div class="text-sm text-base-content/60">
+			<p class="mb-2 font-semibold">Understanding Flash Stats:</p>
+			<ul class="list-inside list-disc space-y-1">
+				<li><strong>Enemies Blinded:</strong> Total number of enemy players flashed</li>
+				<li>
+					<strong>Avg Duration:</strong> Average time enemies were blinded per flash (in seconds)
+				</li>
+				<li>
+					<strong>Flash Assists:</strong> Enemies killed by teammates while blinded by your flash
+				</li>
+				<li><strong>Team Flashed:</strong> Number of times you accidentally flashed teammates</li>
+				<li><strong>Self Flashed:</strong> Number of times you flashed yourself</li>
+			</ul>
+		</div>
+	</Card>
 </div>