spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chemistry): periodic-table sizing fix + camera reset/axis views + in-scene element zoom #741

New Issue
Closed
opened 2026-07-20 18:28:51 +00:00 by spikerj · 2 comments
spikerj commented 2026-07-20 18:28:51 +00:00
Owner
Copy Link
Copy Source

Follow-up to spikersoft-issues#738 (Phase 1 landing, merged in spikerj/spikersoft-angular#467). User feedback on the running build:

  1. Bottom-gap / not centered — the scene used height: calc(100vh - 8rem) (128px) but the fixed menu bar is 64px (56px mobile), leaving ~64px of dead space at the bottom. Fix: use the shared --app-toolbar-height token with the space-game position: fixed precedent (issue #168).
  2. Camera reset + axis views — no way to recover a weird orbit. Add a Reset (home, restores orientation + zoom/pan) plus animated Front (Z) / Top (Y) / Side (X) preset-view buttons (reorient at current zoom distance).
  3. Element click → in-scene CSS3D zoom — clicking a tile flies it to center, scales it up, dims the rest, and reveals a per-element detail card (atomic number/symbol/name/weight now, with a placeholder hook for future learning content). Click uses DOM listeners on the real CSS3D tiles with a movement threshold to distinguish click from trackball drag; ESC / click-away / close button exits.

Acceptance criteria

  • scene fills below the menu bar with no bottom gap, on desktop + mobile (token-driven)
  • Reset / Front / Top / Side glide the camera to the expected poses
  • clicking a tile zooms it in-scene, dims others, shows the detail card; ESC/click-away/close returns it; switching layout/view closes focus
  • pure helpers (axisViewPose, isClick) unit-tested; nx build spikersoft green with three.js still absent from main.js; lint/styles/i18n clean

Part of the Chemistry section roadmap; Phase 3 (progressive unlock gating) remains a separate future ticket.

Follow-up to spikersoft-issues#738 (Phase 1 landing, merged in spikerj/spikersoft-angular#467). User feedback on the running build: 1. **Bottom-gap / not centered** — the scene used `height: calc(100vh - 8rem)` (128px) but the fixed menu bar is 64px (56px mobile), leaving ~64px of dead space at the bottom. Fix: use the shared `--app-toolbar-height` token with the space-game `position: fixed` precedent (issue #168). 2. **Camera reset + axis views** — no way to recover a weird orbit. Add a Reset (home, restores orientation + zoom/pan) plus animated **Front (Z) / Top (Y) / Side (X)** preset-view buttons (reorient at current zoom distance). 3. **Element click → in-scene CSS3D zoom** — clicking a tile flies it to center, scales it up, dims the rest, and reveals a per-element detail card (atomic number/symbol/name/weight now, with a placeholder hook for future learning content). Click uses DOM listeners on the real CSS3D tiles with a movement threshold to distinguish click from trackball drag; ESC / click-away / close button exits. ### Acceptance criteria - [ ] scene fills below the menu bar with no bottom gap, on desktop + mobile (token-driven) - [ ] Reset / Front / Top / Side glide the camera to the expected poses - [ ] clicking a tile zooms it in-scene, dims others, shows the detail card; ESC/click-away/close returns it; switching layout/view closes focus - [ ] pure helpers (`axisViewPose`, `isClick`) unit-tested; `nx build spikersoft` green with three.js still absent from `main.js`; lint/styles/i18n clean Part of the Chemistry section roadmap; Phase 3 (progressive unlock gating) remains a separate future ticket.
spikerj commented 2026-07-20 18:36:45 +00:00
Author
Owner
Copy Link
Copy Source

PR open: spikerj/spikersoft-angular#469 (branch feat/chemistry-controls-zoom, base master). Sizing fix + camera reset/axis views + in-scene element zoom. Will comment the merge SHA and close this ticket once it merges.

PR open: spikerj/spikersoft-angular#469 (branch `feat/chemistry-controls-zoom`, base `master`). Sizing fix + camera reset/axis views + in-scene element zoom. Will comment the merge SHA and close this ticket once it merges.
spikerj commented 2026-07-20 18:41:44 +00:00
Author
Owner
Copy Link
Copy Source

Merged to master via spikerj/spikersoft-angular#469 (merge commit 577850351180, 2026-07-20). All three items shipped: sizing fix (--app-toolbar-height token), camera Reset + Front/Top/Side axis views, and in-scene element-zoom detail card. three.js stays out of main.js; 17 chemistry unit tests green. Closing.

Phase 3 (progressive unlock gating) remains a future ticket.

Merged to `master` via spikerj/spikersoft-angular#469 (merge commit `577850351180`, 2026-07-20). All three items shipped: sizing fix (`--app-toolbar-height` token), camera Reset + Front/Top/Side axis views, and in-scene element-zoom detail card. three.js stays out of `main.js`; 17 chemistry unit tests green. Closing. Phase 3 (progressive unlock gating) remains a future ticket.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#741