183 lines
6.9 KiB
HTML
183 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="h-full bg-gray-50">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Statistics - EDH Stats Tracker</title>
|
|
<meta
|
|
name="description"
|
|
content="View detailed statistics for your EDH/Commander games"
|
|
/>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
|
</head>
|
|
<body class="h-full" x-data="statsManager()">
|
|
<!-- Navigation Header -->
|
|
<header class="bg-slate-900 text-white shadow-lg">
|
|
<nav class="container mx-auto px-4 py-4">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold font-mtg">Statistics</h1>
|
|
<div class="flex space-x-4">
|
|
<a
|
|
href="/dashboard.html"
|
|
class="hover:text-edh-accent transition-colors"
|
|
>
|
|
← Back to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- Stats Filters (Future Phase) -->
|
|
<!-- <div class="mb-8 card">
|
|
<h3 class="font-semibold mb-4">Filters</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
<select class="form-select w-auto">
|
|
<option>All Time</option>
|
|
<option>Last 30 Days</option>
|
|
<option>Last Year</option>
|
|
</select>
|
|
<select class="form-select w-auto">
|
|
<option>All Commanders</option>
|
|
<option>Color: White</option>
|
|
<option>Color: Blue</option>
|
|
<option>Color: Black</option>
|
|
<option>Color: Red</option>
|
|
<option>Color: Green</option>
|
|
</select>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Overview Cards (loaded via stats-cards-loader.js) -->
|
|
<div id="stats-cards-container"></div>
|
|
|
|
<!-- Charts Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
<!-- Win Rate by Color -->
|
|
<div class="card">
|
|
<h3 class="text-lg font-semibold mb-6">Win Rate by Color Identity</h3>
|
|
<div class="h-64 relative">
|
|
<canvas id="colorWinRateChart"></canvas>
|
|
<div
|
|
x-show="loading"
|
|
class="absolute inset-0 flex items-center justify-center bg-white/50"
|
|
>
|
|
<div class="loading-spinner w-8 h-8"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Games per Month (Future) -->
|
|
<!-- <div class="card">
|
|
<h3 class="text-lg font-semibold mb-6">Games Played History</h3>
|
|
<div class="h-64 relative">
|
|
<canvas id="gamesHistoryChart"></canvas>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Win Rate by Player Count -->
|
|
<div class="card">
|
|
<h3 class="text-lg font-semibold mb-6">Win Rate by Player Count</h3>
|
|
<div class="h-64 relative">
|
|
<canvas id="playerCountChart"></canvas>
|
|
<div
|
|
x-show="loading"
|
|
class="absolute inset-0 flex items-center justify-center bg-white/50"
|
|
>
|
|
<div class="loading-spinner w-8 h-8"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Stats Table -->
|
|
<div class="card">
|
|
<h3 class="text-lg font-semibold mb-6">Commander Performance</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead
|
|
class="bg-gray-50 text-gray-600 text-xs uppercase font-semibold"
|
|
>
|
|
<tr>
|
|
<th class="px-6 py-3">Commander</th>
|
|
<th class="px-6 py-3 text-center">Games</th>
|
|
<th class="px-6 py-3 text-center">Win Rate</th>
|
|
<th class="px-6 py-3 text-center">Avg Rounds</th>
|
|
<th class="px-6 py-3 text-center">Starting Win %</th>
|
|
<th class="px-6 py-3 text-center">Sol Ring Win %</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<template x-for="stat in commanderStats" :key="stat.commanderId">
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div
|
|
class="font-medium text-gray-900"
|
|
x-text="stat.name"
|
|
></div>
|
|
<div class="flex space-x-1 mt-1">
|
|
<template x-for="color in stat.colors">
|
|
<div
|
|
class="w-3 h-3 rounded-sm"
|
|
:class="'color-' + color.toLowerCase()"
|
|
:title="color"
|
|
></div>
|
|
</template>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-6 py-4 text-center"
|
|
x-text="stat.totalGames"
|
|
></td>
|
|
<td class="px-6 py-4 text-center">
|
|
<span
|
|
class="px-2 py-1 rounded text-xs font-semibold"
|
|
:class="stat.winRate >= 25 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
|
|
x-text="stat.winRate + '%'"
|
|
></span>
|
|
</td>
|
|
<td
|
|
class="px-6 py-4 text-center"
|
|
x-text="Math.round(stat.avgRounds)"
|
|
></td>
|
|
<td
|
|
class="px-6 py-4 text-center text-sm text-gray-500"
|
|
x-text="calculatePercentage(stat.startingPlayerWins, stat.totalGames) + '%'"
|
|
></td>
|
|
<td
|
|
class="px-6 py-4 text-center text-sm text-gray-500"
|
|
x-text="calculatePercentage(stat.solRingWins, stat.totalGames) + '%'"
|
|
></td>
|
|
</tr>
|
|
</template>
|
|
<tr x-show="commanderStats.length === 0">
|
|
<td colspan="6" class="px-6 py-8 text-center text-gray-500">
|
|
No data available yet.
|
|
<a href="/games.html" class="text-edh-primary hover:underline"
|
|
>Log some more games!</a
|
|
>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script
|
|
defer
|
|
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
|
|
></script>
|
|
<script src="/js/auth-guard.js"></script>
|
|
<script src="/js/stats-cards-loader.js"></script>
|
|
<script src="/js/stats.js"></script>
|
|
<script src="/js/footer-loader.js"></script>
|
|
</body>
|
|
</html>
|