37 lines
2.9 KiB
Markdown
37 lines
2.9 KiB
Markdown
# 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.
|