Files

T

emil 1c38df7e74 style(dm): redesign dashboard with purple-gold theme

Redesign DM Dashboard (/dm/, /ru/dm/) with purple-gold theme (#534AB7 + #c8a84b):

Design System:
- Update dm-theme.css with 49 purple-gold tokens (transitions, shadows, hover states)
- Create DmTabs.astro with ARIA, keyboard nav, URL hash sync, localStorage persistence
- Create DmSidebar.astro for desktop navigation
- Redesign DmHeader with gold accent
- Update DmButton, DmCard, DmInput primitives
- Expand i18n to 47 strings

Layout:
- Redesign DmLayout with 3-column dashboard grid (sidebar|main|context)
- Update /dm/index.astro and /ru/dm/index.astro with named slots

Feature Components:
- DiceRoller: empty state, ARIA live, color-coded history, storage key fallback
- InitiativeTracker: HP editing, active highlighting, storage key fallback
- Open5eReference: skeletons, debounce, error retry, gold tabs
- NotesPanel: cross-tab sync, copy-to-clipboard, auto-save
- AuthPanel: VK/Yandex brand colors, pill buttons

Tests:
- Add 50 Playwright E2E tests (smoke, dice, initiative, reference, notes, data-migration)

Fixes:
- Document Open5e client.ts URL bugfix
- Add backward-compatible storage key fallback for dice/initiative
- Preserve legacy sessionStorage data on load

2026-05-15 17:49:32 +03:00

2.7 KiB

Raw Blame History

F3 Manual QA Report — DM Dashboard Redesign

Test Environment

URL: http://localhost:4321/dm/
Browser: Chromium + Mobile Chromium (Pixel 5)
Dev Server: Astro dev on localhost:4321

Automated Test Suite (Playwright CLI)

Total tests: 50
Passed: 50
Failed: 0
Projects: chromium (Desktop Chrome), mobile-chromium (Pixel 5)
Test files: smoke.spec.ts, dice.spec.ts, initiative.spec.ts, reference.spec.ts, notes.spec.ts, data-migration.spec.ts

Manual QA — Browser Automation Results

Scenario 1: Dice Roller

Navigate to /dm/#dice
Click d20 button → result appears
Enter custom formula 2d6+3 → roll works
History persists after refresh
Status: PASS | Console Errors: none

Scenario 2: Initiative Tracker

Navigate to /dm/#initiative
Add combatant "Гоблин" → appears in list
Add second combatant, click Next Turn → active combatant cycles
Data persists after refresh
Status: PASS | Console Errors: none

Scenario 3: Open5e Reference

Navigate to /dm/#reference
Search for "goblin" → results appear
Click result → detail modal opens
Click overlay → modal closes
Status: PASS | Console Errors: none

Scenario 4: Notes Panel

Navigate to /dm/#notes
Type text → auto-save indicator appears
Refresh page → text persists in localStorage
Status: PASS | Console Errors: none

Scenario 5: Responsive Desktop (1440px)

Viewport 1440×900
Dice, Initiative, and Reference sections all visible simultaneously
3-column layout confirmed
Status: PASS | Console Errors: none

Scenario 6: Responsive Mobile (375px)

Viewport 375×812
Tab navigation visible and functional
Single-column layout, tab switching works across all 4 sections
Status: PASS | Console Errors: none

Visual Verification

Screenshots captured for all scenarios:

.sisyphus/evidence/f3-screenshots/f3-dice-roller.png
.sisyphus/evidence/f3-screenshots/f3-initiative.png
.sisyphus/evidence/f3-screenshots/f3-open5e.png
.sisyphus/evidence/f3-screenshots/f3-notes.png
.sisyphus/evidence/f3-screenshots/f3-responsive-desktop.png
.sisyphus/evidence/f3-screenshots/f3-responsive-mobile.png

Console Errors

None detected across all manual QA flows and all 50 automated tests.

Data Persistence

Dice history: sessionStorage ✅
Initiative tracker: sessionStorage ✅
Notes: localStorage ✅

VERDICT: APPROVE

All 4 DM Dashboard sections (Dice Roller, Initiative Tracker, Open5e Reference, Notes Panel) function correctly. Responsive layouts work on both desktop (1440px) and mobile (375px). No console errors, no broken layouts, all interactive elements respond to input, and data persistence works as expected.

2.7 KiB Raw Blame History Unescape Escape