Mathew Sir Guest the bestandClaude Opus 4.6
36c3c712fe
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>
96 lines
3.8 KiB
Markdown
96 lines
3.8 KiB
Markdown
# 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
|
|
|
|
1. Run `uv run python app.py` and open `http://localhost:8888`
|
|
2. Check all 4 pages render correctly with new palette
|
|
3. Verify navbar highlights active page
|
|
4. Verify footer appears on all pages
|
|
5. Check responsive behavior (navbar collapses on mobile)
|
|
6. Run `uv run pytest` to confirm e2e test still passes
|
|
7. Run `uv run black .` and `uv run flake8` for code quality
|