Replace scrollable form content with responsive sizing that
automatically scales elements to fit available viewport height.
CSS improvements:
- Disable scrolling: overflow-y:auto → overflow:hidden in form-content
- Implement fluid typography with clamp() for titles, labels, buttons
- Add responsive spacing using clamp() for margins and padding
- Scale progress dots from 10px-16px based on viewport height
- Reduce button dimensions (60px min-width, 36px min-height)
- Enable element shrinking with flex-shrink:1 and min-height:0
Component cleanup:
- Remove auto-focus useEffect from Player1/2/3Step components
- Prevents unwanted layout shifts on wizard mount
Benefits:
- All elements visible without scrolling
- Responsive design scales smoothly across viewport sizes
- Cleaner UX with no scrollbars in form wizard
- Better space utilization on small screens
Restructure app layout to prevent whole-page scrolling. The viewport
is now locked at 100vh with overflow:hidden, and individual content
areas scroll internally.
Architecture changes:
- Lock html/body at 100% height with overflow:hidden
- Fix Layout component to 100vh, Screen to 100% height
- Enable internal scrolling for content areas with flex:1 + overflow-y:auto
New game wizard improvements:
- Split forms into three sections: form-header (fixed), form-content
(scrollable), form-footer (fixed with arrow navigation)
- Fixes issue where many player names pushed navigation arrows off-screen
- Applied to Player1Step, Player2Step, Player3Step, GameTypeStep
Game list improvements:
- Filter buttons stay fixed at top
- Games container scrolls internally with overflow-y:auto
- "Neues Spiel" button wrapped with flex-shrink:0
Game detail improvements:
- Game controls stay visible while content scrolls
Additional changes:
- Add Playwright test artifact exclusions to .gitignore
- Add Docker build instructions to README.md
- Remove unnecessary setSelectionRange calls from player input steps
Benefits:
- No accidental page scrolling
- Cleaner mobile UX (no address bar show/hide issues)
- Navigation controls always visible
- Predictable, contained scrolling behavior
- Add @playwright/test as dev dependency
- Create playwright.config.ts with Chrome-only testing config
- Add npm scripts: test:record, test:e2e, test:replay
- Create 13 test recordings covering:
- 2-player and 3-player games
- 8-ball, 9-ball, and 10-ball game types
- Various race-to values (1, 3, 5, 7, 9) and "endlos" mode
- Both wechselbreak (alternating) and winnerbreak rules
- Fix Infinity handling in gameService.ts and NewGameScreen.tsx
- Parse "endlos" and "Infinity" strings as Infinity number
- Properly serialize Infinity as string in form data
- Increase GameDetail score font size from 20vh to 40vh
- Update README.md with testing documentation:
- Quick start guide for recording and running tests
- Move E2E testing from "Future Improvements" (now implemented)
- Add comprehensive tests/recordings/README.md documentation
Purpose: Establishes browser automation testing infrastructure with
real workflow recordings, enabling regression testing and interaction
documentation for all game configuration combinations.
- Apply selected styling to first/second player buttons in `BreakOrderStep.tsx`
- Mirrors selection UX from `BreakRuleStep.tsx` for visual feedback
Refs #30
- Default Break rule to 'winnerbreak' in BreakRuleStep
- Ensure selected quick-pick button styling matches Race To buttons
- Simplify Weiter button since rule is always defined
Fixes#30
- Remove plus/minus score controls in GameDetail; tap on score increments by +1
- Keep global Undo control for reversals; maintain keyboard accessibility on score
- No changes to scoring logic beyond UI control removal
Refs #30
- Add GameTypeStep.tsx and RaceToStep.tsx under src/components/new-game
- Replace inline components with imports in NewGame.tsx
- Pure refactor; behavior unchanged
Refs #30
- Add Player2Step.tsx and Player3Step.tsx under src/components/new-game
- Replace inline definitions with imports in NewGame.tsx
- No behavior changes
- Disable right-arrow on Player1/2 until name entered
- Disable right-arrow on Player3 unless name entered (skip still available)
- Disable right-arrow on Race To until value present
- Break type: no preselect; disable next until rule chosen
- First break: no preselect; disable next until required choices
Purpose: Ensure consistent UX in new game wizard
Refs #28
- BreakRuleStep now starts with no selection when not prefilled
- Right arrow disabled and dimmed until a rule is chosen (like game type)
- Keeps auto-advance on clicking a rule
Refs #28
- BreakRule step now shows a right arrow that advances using current selection
- Back navigation from BreakRule returns to Race To instead of exiting to list
Refs #28
- NewGameScreen now calls onCreateGame after BreakOrder step instead of stopping
- Ensures flow creates game and navigates to detail after selecting breaker
Refs #28
- Player 1/2/3: “Name Spieler X”
- Game type: “Spielart auswählen”
- Race to: “Race To auswählen”
- Break rule: “Break-Regel wählen”
- First break: “Wer bricht zuerst?”
Refs #28
- Order: player1 → player2 → player3 → game type → race to → break type → first break
- Removed all step title labels from forms; kept progress dots only
- Adjusted navigation and back behavior accordingly
Refs #28
- Auto-advance when selecting first breaker for Winnerbreak and 2-player Wechselbreak
- Keep auto-advance after choosing second for 3-player Wechselbreak
- Add explicit right arrow to continue manually based on current selection
Refs #28
- Types: add BreakRule, break metadata to StandardGame, extend NewGameData/steps
- NewGame: add BreakRule and BreakOrder steps with auto-advance
- NewGameScreen: wire new steps into flow
- GameService: set up defaults, persist break order, compute next breaker on +1
- GameDetail: show breaker indicator; treat -1 as undo equivalent
Backfill defaults for existing games via service logic.
Refs #28
- Step 4: selecting a game type immediately advances to step 5
- Step 5: selecting Endlos or a quick-pick number immediately finalizes race-to
Improves flow by removing an extra click. No changes to validation.
Refs #26
Apply game-item grid layout to game list rows and switch to two-column layout (1fr auto) so the delete action has a fixed-width slot on the right.
Keeps existing delete button and accessibility attributes; prevents layout stretch.
No behavioral changes beyond layout; click targets unchanged.
Refs #26
- Add IndexedDB service with schema, indexes, and player stats
- Migrate GameService to async IndexedDB and auto-migrate from localStorage
- Update hooks and App handlers to async; add error handling and UX feedback
- Convert remaining JSX components to TSX
- Add test utility for IndexedDB and migration checks
- Extend game types with sync fields for future online sync
- Change endlos raceTo from 0 to Infinity to prevent automatic completion
- Update NewGame component to handle Infinity values properly
- Add Infinity checks in game completion and winner logic
- Fix game progress calculation for endless games
Fixes issue where selecting 'endlos' mode would end the match
immediately when any player scored their first point.
- Re-rack logic fixed to accumulate and score correctly
- Turn switch button now shows two opposing arrows (⇄)
- Two foul buttons replaced by a single 'Foul -1' button styled like re-rack, can be pressed multiple times
Refs #26
- Turns are now only changed by a big, prominent button
- Players can make multiple inputs (balls left, fouls, re-rack) before changing turns
- Players can change turn with no input (0 balls potted, 0 foul)
- All actions are accumulated in local state and finalized on turn change
- No automatic turn changes remain
Refs #26
- Table now groups turns into rounds (Aufnahmen) and displays sum of all foul points (including penalties) for each player in each round
- Improves clarity and accuracy of move log for 14/1
Refs #26
- The '0' button is no longer shown in the 'Bälle am Ende der Aufnahme' grid
- Only buttons for 1–15 balls are now available, matching real game scenarios
Refs #26
- Active player card now features thick, glowing orange border, strong background highlight, left accent bar, and animated pulse
- Player name and score have increased contrast for unmistakable visibility
Refs #26
- Player score incremented by (balls on table before re-rack + balls added - 15)
- Balls on table always set to 15 after re-rack
- Log entry includes all relevant details for traceability
Refs #26
- Only player input containers use the new color backgrounds, borders, and shadows
- Game type selection and other steps are visually unaffected
- Ensures clear, consistent player association without UI side effects
Refs #26
