Files

T

Mathew Sir Guest the bestandClaude Opus 4.6 36c3c712fe feat: add scoreboard with player names, per-category leaderboards, and themed tables

Add player_name column to games (migration included), with regex-based
validation and anti-abuse sanitization. New /scoreboard page shows recent
games from localStorage, popular categories with play counts, and top-10
per-category leaderboards sorted by completion time. Also includes
two-click reverse word matching, base URL prefix support for reverse-proxy
hosting, BasePageHandler refactoring, themed table CSS for all 5 themes,
and comprehensive test coverage for player names and scoreboard API.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-05-07 10:38:19 -06:00

3.8 KiB

Raw Permalink Blame History

Website Redesign — Design Spec

Context

The word search game has a functional but bare-bones frontend — two pages, a basic teal dark theme, no footer, no imagery. This redesign makes it visually polished and adds two new content pages, while keeping the existing Tornado template architecture.

Decisions

Palette: Dark Indigo + Warm Pop — #1a1a2e base, #16213e navbar/cards, #0f3460 borders/active states, #e94560 coral accent, #f5c518 gold highlights
Approach: Enhance in place — modify existing templates and CSS, add new templates and handlers
Nav: 4 links — Home, Play, How to Play, About — rendered as pill-style buttons with active state highlighting
Footer: Minimal — copyright line only
Icons: Bootstrap Icons (CDN) for UI elements (nav, buttons)
Emoji: In content headings and hero sections for personality

Pages

Home (`/`)

Hero section with puzzle piece emoji, heading, description, coral "Start Game" CTA button with gamepad emoji
Semantic: <header> for hero, <main> wrapper from base

Play (`/game`)

Existing game board placeholder, restyled with new palette
No structural changes

How to Play (`/howtoplay`) — NEW

Step-by-step instructions for word search:
1. Look at the word list on the side of the grid
2. Scan the grid for the first letter of a word
3. Words can run horizontally, vertically, or diagonally (forward or backward)
4. Click/tap the first letter, then the last letter to select a word
5. Found words are crossed off the list
6. Find all words to win
Use numbered steps with emoji accents (e.g. magnifying glass, eyes, checkmark)
Tips section at the bottom

About (`/about`) — NEW

Short app description: what it is, what it's built with (Python, Tornado, Bootstrap)
Author: Claude (AI assistant by Anthropic) — listed as co-author with the project creator
Placeholder for git repo link (to be added later)
Use emoji accents (robot face, tools, etc.)

Files to Modify

`static/css/theme.css`

Replace teal CSS custom properties with indigo palette
Add navbar pill-button styles (.nav-link as rounded pills, active state with #0f3460 fill)
Add footer styles (border-top, muted text, centered)
Add hero section styles
Style the new content pages (step lists, about section)

`templates/base.html`

Add Bootstrap Icons CDN link in <head>
Restructure navbar: brand gets magnifying glass icon, nav links get pill-button classes
Active-link logic: each child template sets {% block active_page %}home{% end %}, base template uses conditionals to add an .active class to the matching nav link
Wrap <main> content area properly
Add <footer> with copyright before closing </body>
Use semantic HTML: <nav>, <main>, <footer>

`templates/main.html`

Restyle hero with emoji, updated button classes for coral accent

`templates/game.html`

Update card styling to match new palette (no structural changes)

`app.py`

Add routes: /howtoplay -> HowToPlayHandler, /about -> AboutHandler
Import new handlers

Files to Create

`handlers/howtoplay.py`

HowToPlayHandler — renders howtoplay.html

`handlers/about.py`

AboutHandler — renders about.html

`templates/howtoplay.html`

Extends base.html
Numbered instruction steps with emoji
Tips section

`templates/about.html`

Extends base.html
App description, author info, repo link placeholder

Verification

Run uv run python app.py and open http://localhost:8888
Check all 4 pages render correctly with new palette
Verify navbar highlights active page
Verify footer appears on all pages
Check responsive behavior (navbar collapses on mobile)
Run uv run pytest to confirm e2e test still passes
Run uv run black . and uv run flake8 for code quality

3.8 KiB Raw Permalink Blame History

Website Redesign — Design Spec

Context

Decisions

Pages

Home (/)

Play (/game)

How to Play (/howtoplay) — NEW

About (/about) — NEW

Files to Modify

static/css/theme.css

templates/base.html

templates/main.html

templates/game.html

app.py