Skip to content

feat: achievement system plan and UI mockup#478

Draft
garrappachc wants to merge 1 commit intomasterfrom
feat/achievement-system-mockup
Draft

feat: achievement system plan and UI mockup#478
garrappachc wants to merge 1 commit intomasterfrom
feat/achievement-system-mockup

Conversation

@garrappachc
Copy link
Member

Summary

  • Add achievements.plan.md with full feature plan for a player achievement system (20 achievements across 7 categories)
  • Include working UI mockup in the player profile page with fake data to preview the layout and styling
  • Two-column layout: scrollable achievements grid on the left, game history on the right
  • Unlocked achievements shown normally, locked ones collapsed behind a toggle ("6 locked achievements")
  • New achievement categories include logs.tf-based stats (top DPM, high HPM) requiring API integration

What's included

Plan (achievements.plan.md)

  • Achievement definitions with tiers (bronze/silver/gold/australium)
  • Database model design
  • Logs.tf JSON API integration for DPM/HPM stats
  • Implementation steps (types, DB, plugins, UI, migration)

UI Mockup (in player profile)

  • Achievement badge component with tier-colored icons, borders, and tooltips
  • Scrollable grid with fade-scroll mask (reuses existing fade-scroll utility)
  • Collapsible locked achievements section using native <details>
  • Progress bars on locked achievements
  • Counter in heading (e.g. "11/17")

Note: The mockup uses hardcoded fake data in player.page.tsx — this will be replaced with real data from the playerachievements collection during implementation.

Test plan

  • Review the plan document for completeness
  • Run dev server (pnpm dev) and visit any player profile to see the mockup
  • Verify scrollable achievements, collapsible locked section, and tooltips work
  • Discuss and finalize visual design before implementation

🤖 Generated with Claude Code

Add feature plan for a player achievement system with 20 achievements
across 7 categories (games played, class-specific, substitute, server
join speed, no disconnects, top DPM, high HPM). The DPM and HPM
achievements require fetching stats from the logs.tf JSON API.

Include a working UI mockup directly in the player profile page with
fake data to visualize the two-column layout: achievements on the left
(scrollable with fade mask, collapsible locked section) and game history
on the right.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions
Copy link

Playwright test results

passed  114 passed
flaky  3 flaky

Details

stats  117 tests across 25 suites
duration  7 minutes, 25 seconds
commit  6c997d4

Flaky tests

chromium › 10-queue/09-tracks-online-players.spec.ts › tracks online players @6v6 @9v9
chromium › 10-queue/09-tracks-online-players.spec.ts › tracks online players @6v6 @9v9
chromium › 20-game/02-free-players.spec.ts › free players when the game ends @6v6 @9v9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant