jedarden/ai-code-battle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): add enriched replay badge to bot profile match history

Browse source 
§13.3: Display "Narrated" badge on enriched matches in bot profile
recent matches section, matching the match list page behavior.

- Add enriched badge rendering to renderMatchItem() in bot-profile.ts
- Add .enriched-badge CSS style (pink/magenta color to match
  playlist category styling)

The index builder already sets the Enriched flag via isMatchEnriched()
which checks R2 for commentary file existence. The match list page
(matches.ts) already displays this badge.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-04-22 18:00:07 -04:00
parent b58e90a94f
commit 77f713697e
2 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/pages/bot-profile.ts
View file

@ -180,12 +180,14 @@ function renderMatchItem(match: BotProfile['recent_matches'][number]): string {
const opponent = match.participants.find(p => p.bot_id !== match.winner_id);
const won = match.participants.some(p => p.won);
const resultClass = won ? 'match-won' : 'match-lost';
const enrichedBadge = match.enriched ? `<span class="enriched-badge" title="Narrated replay with AI commentary">Narrated</span>` : '';
return `
<div class="match-item ${resultClass}">
<span class="match-result">${won ? 'W' : 'L'}</span>
<span class="match-opponent">${opponent ? escapeHtml(opponent.name) : 'Unknown'}</span>
<span class="match-score">${match.participants.map(p => p.score).join(' - ')}</span>
${enrichedBadge}
<a href="#/watch/replay?url=/replays/${match.id}.json.gz" class="btn small">Watch</a>
</div>
`;

13
web/src/styles/components.css
View file

@ -166,6 +166,19 @@ tbody tr:hover {
.badge.error { background-color: rgba(239, 68, 68, 0.2); color: var(--error); }
.badge.info { background-color: rgba(59, 130, 246, 0.2); color: var(--accent); }
/* Enriched replay badge (§13.3) */
.enriched-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-sm);
font-size: 0.7rem;
font-weight: 500;
border-radius: var(--radius-sm);
white-space: nowrap;
background-color: rgba(236, 72, 153, 0.2);
color: #ec4899;
}
/* Loading Spinner */
.spinner {
display: inline-block;