# basket-utils — UI redesign

2026-09-07

## Reference projects

- [CoachCanvas](https://coachcanvas.app/): concise basketball product presentation, neutral surfaces, a clear primary action, and court-centered authoring. Its public website and welcome screen were inspected; no account was created and no assets were copied.
- [tldraw UI components](https://tldraw.dev/sdk-features/ui-components): separation of canvas, tool palette, property panel and navigation; properties move into a popover on mobile. This project uses the layout principles, not its SDK.
- `../network_dashboard/web/src/styles.css`: local reference for light surfaces, restrained borders, semantic color tokens and compact application controls.
- `../arena/src/styles/base.css` and `game-ui.css`: local reference for a dark central scene with unobtrusive tools. No files in either project were changed.

## Design decisions

- Warm white shell, dark evergreen canvas, terracotta primary actions, muted blue defense markers, procedural timber court.
- Court overlays use deep blue (`#174a7e`) movement lines and deep purple (`#5b2a83`) dashed pass arrows to contrast with the timber surface. Team marker colors remain independent of action colors.
- Header prioritizes identity, document name and save; setup, load, file operations and debug data live in the project menu.
- Left column shows lineup and possession. Right column shows action list and only exposes properties when an action is selected.
- Floating court tools use a consistent original SVG icon set and text labels. View controls stay at the top of the canvas.
- Playback occupies its own bottom deck. Step thumbnails derive from the actual sequence starting positions and action counts.
- Tactical view uses flat player markers and a diagram hoop. Physical hoop, backboard and articulated avatars remain available in Player POV.
- Phone portrait uses switchable panels. Landscape puts panel navigation on the left and action tools on the right.

## Implementation

- `src/ui.js`: markup, SVG icons and data-driven step thumbnails.
- `src/style.css`: design tokens, components and responsive layouts; replaces the earlier dark-dashboard stylesheet.
- `src/main.js`: existing editing handlers remain connected to the new layout; project menu dismissal and contextual properties.
- `src/scene.js`: procedural court material, team palette, flat markers and view-specific hoop representation.

## Verification

- Existing 91 tests pass; production build succeeds. Existing Three.js bundle-size warning remains.
- Browser inspection: 1440×1000 desktop, 390×844 portrait, 844×390 landscape.
- Verified action selection, gaze updates, playback, pause, menu opening and Escape dismissal; no browser errors observed.
- Landscape document dimensions match the viewport without horizontal or vertical overflow.
- Visual assets were authored in code. No reference screenshots, product logos or proprietary illustrations are embedded.