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

feat(my-journey): winding-path progression visualization — optional, menu-launched (frontend) #333

New Issue
Closed
opened 2026-07-02 05:39:54 +00:00 by spikerj · 2 comments
spikerj commented 2026-07-02 05:39:54 +00:00
Owner
Copy Link
Copy Source

Implements the frontend of the #330 spike. Optional, opt-in via Learn ▸ My Journey; the lesson/playground flow is unchanged.

Scope

  • New Nx lib feature-my-journey: standalone component rendering a per-language winding SVG trail of lesson nodes computed from progress + curriculum order.
  • Node states: completed, current, available, locked-prereq, locked-horizon (#329 gate, feature-flagged — degrades to sign-in CTA when #329 not present).
  • JourneyAudioService: single AudioContext, synthesized blips (success / lock / level-up). No audio assets, no CDN. Do not reuse dungeon-crawler/audio-system.ts (THREE-based).
  • JourneyPrefsService: persist sound + motion to localStorage, seed motion from matchMedia('(prefers-reduced-motion: reduce)'). Establishes the repo's first reduced-motion pattern. Header toggles.
  • Feedback animations via Web Animations API + CSS keyframes (node fill, checkmark draw, CSS-particle confetti). No Lottie.
  • Menu item in Learn dropdown + route /my-journey (public shell, auth-gated data), mirroring /tree-of-knowledge.
  • i18n keys en/es. Dev-tools/Storybook prototype route. Unit tests (node-model computation, prefs, reduced-motion no-op).

Out of scope: streaks (separate ticket), any change to the lesson flow, third-party deps.

Depends on / integrates: #330 (spike), #329 (horizon lock — optional, flag-gated), backend aggregation ticket (optional).

Data source: GET /api/Lessons/progress + curriculum order (or the thin /api/Lessons/journey endpoint if that ticket lands first).

Implements the frontend of the #330 spike. Optional, opt-in via `Learn ▸ My Journey`; the lesson/playground flow is unchanged. **Scope** - New Nx lib `feature-my-journey`: standalone component rendering a per-language winding SVG trail of lesson nodes computed from progress + curriculum order. - Node states: `completed`, `current`, `available`, `locked-prereq`, `locked-horizon` (#329 gate, feature-flagged — degrades to sign-in CTA when #329 not present). - `JourneyAudioService`: single `AudioContext`, synthesized blips (success / lock / level-up). No audio assets, no CDN. Do **not** reuse `dungeon-crawler/audio-system.ts` (THREE-based). - `JourneyPrefsService`: persist `sound` + `motion` to `localStorage`, seed `motion` from `matchMedia('(prefers-reduced-motion: reduce)')`. Establishes the repo's first reduced-motion pattern. Header toggles. - Feedback animations via Web Animations API + CSS keyframes (node fill, checkmark draw, CSS-particle confetti). No Lottie. - Menu item in `Learn` dropdown + route `/my-journey` (public shell, auth-gated data), mirroring `/tree-of-knowledge`. - i18n keys en/es. Dev-tools/Storybook prototype route. Unit tests (node-model computation, prefs, reduced-motion no-op). **Out of scope:** streaks (separate ticket), any change to the lesson flow, third-party deps. **Depends on / integrates:** #330 (spike), #329 (horizon lock — optional, flag-gated), backend aggregation ticket (optional). Data source: `GET /api/Lessons/progress` + curriculum order (or the thin `/api/Lessons/journey` endpoint if that ticket lands first).
spikerj commented 2026-07-02 06:18:53 +00:00
Author
Owner
Copy Link
Copy Source

Done in spikersoft-angular#98 (merged to master). feature-my-journey ships the opt-in winding-path visualization with streak flame, synthesized audio, reduced-motion prefs, and the Learn ▸ My Journey route/menu wiring. Streaks landed in v1 per the #330 sign-off; horizon gate state reserved for #329. 16 tests green. Closing.

Done in spikersoft-angular#98 (merged to master). `feature-my-journey` ships the opt-in winding-path visualization with streak flame, synthesized audio, reduced-motion prefs, and the `Learn ▸ My Journey` route/menu wiring. Streaks landed in v1 per the #330 sign-off; horizon gate state reserved for #329. 16 tests green. Closing.
spikerj commented 2026-07-02 15:06:59 +00:00
Author
Owner
Copy Link
Copy Source

Done — merged to master. feature-my-journey winding-path visualization (node states incl. locked-horizon, JourneyAudioService, JourneyPrefsService with reduced-motion, /my-journey route + Learn menu item, i18n, unit tests) landed in PR #98 (4f3d0d4). The #329 horizon-lock integration was completed in #332 pt2 (anonymous horizon overlay). Closing.

Done — merged to `master`. `feature-my-journey` winding-path visualization (node states incl. `locked-horizon`, JourneyAudioService, JourneyPrefsService with reduced-motion, `/my-journey` route + Learn menu item, i18n, unit tests) landed in PR #98 (`4f3d0d4`). The #329 horizon-lock integration was completed in #332 pt2 (anonymous horizon overlay). Closing.
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#333