Files
mandaloreandClaude Sonnet 5 345f952970 Add a Circuit filter to the filter bar
Buttons are generated from CONFIG.circuits (not hand-written in
index.html), so adding a circuit to the config still only takes one
line — its filter button appears automatically. Uses accent color to
match the circuit badges on the cards, same active/dimmed styling as
Format/Scope. An event matches the circuit filter if it belongs to any
active circuit (OR within the group), not all of them, since an event
can legitimately carry more than one circuit tag.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SBzcNkW7JcYipnAX6HfgmK
2026-09-04 17:10:20 -05:00

58 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gateway Gamers — Events</title>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body class="min-h-screen flex flex-col">
<div id="header"></div>
<main class="flex-1 max-w-5xl w-full mx-auto px-6 py-10">
<!-- Page heading -->
<div class="mb-8">
<h1 class="text-4xl font-bold uppercase tracking-wide">Upcoming Events</h1>
<p class="text-sm opacity-50 uppercase tracking-widest mt-1">Across the circuits Gateway Gamers follows</p>
</div>
<!-- Filters: toggle any combination off to narrow the list below -->
<div class="flex flex-wrap items-center gap-2 mb-8" id="filters">
<span class="text-xs uppercase tracking-widest opacity-50 mr-1">Format</span>
<button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Singles">Singles</button>
<button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
<span class="text-xs uppercase tracking-widest opacity-50 ml-3 mr-1">Scope</span>
<button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="RTT">RTT</button>
<button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="GT">GT</button>
<span class="text-xs uppercase tracking-widest opacity-50 ml-3 mr-1">Circuit</span>
<span id="circuit-filters" class="contents"></span>
</div>
<!-- Loading skeleton -->
<div class="space-y-8" id="loading">
<div class="space-y-3">
<div class="skeleton h-6 w-1/3"></div>
<div class="skeleton h-24 w-full"></div>
<div class="skeleton h-24 w-full"></div>
</div>
</div>
<!-- One consolidated, deduped, chronologically-sorted event list -->
<div class="hidden" id="events"></div>
<div class="divider mt-8"></div>
<p class="text-xs text-base-content/40 text-center">
Data from Best Coast Pairings · showing only upcoming events, soonest first
</p>
</main>
<div id="footer"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>