feature(sponsor): family card member spotlight + globe.gl choropleth dream globe on the family page #752

New Issue

2026-07-20T23:37:34Z

spikerj commented

2026-07-20 23:37:34 +00:00

Polish pass on the Sponsor a Journey family experience (#749), design approved with @spikerj 2026-07-20:

Member spotlight (family card): clicking a member's avatar in the stack — or their name in the member rows — expands that member's details inside the card (bigger avatar, bio/custom message, their own destination chips with parent-approval checks, their goal bar, Donate) without leaving the list. Click again / X / Escape closes.

Dream globe (family detail page): replace the flat Leaflet maps on /sponsor/family/{key} with a globe.gl (three.js) choropleth — all countries as faint neutral context, only the family's wanted countries/states colored (shared dream = accent + raised, individual wishes = wishlist blue; Louisiana glows on a dim USA). Hovering a wanted place shows WHICH family member(s) want to go there, plus child-approval status. Self-contained (no CDN textures), @defer-split so three/globe.gl stay out of the initial bundle, auto-rotate until first interaction, WebGL-unavailable fallback.

Frontend-only (member attribution computed client-side from the existing families payload). Deps: globe.gl (+pnpm override pinning the existing three ^0.185.1 to keep one copy).

Repo: spikersoft-angular

Polish pass on the Sponsor a Journey family experience (#749), design approved with @spikerj 2026-07-20: **Member spotlight (family card)**: clicking a member's avatar in the stack — or their name in the member rows — expands that member's details inside the card (bigger avatar, bio/custom message, their own destination chips with parent-approval checks, their goal bar, Donate) without leaving the list. Click again / X / Escape closes. **Dream globe (family detail page)**: replace the flat Leaflet maps on /sponsor/family/{key} with a globe.gl (three.js) choropleth — all countries as faint neutral context, only the family's wanted countries/states colored (shared dream = accent + raised, individual wishes = wishlist blue; Louisiana glows on a dim USA). Hovering a wanted place shows WHICH family member(s) want to go there, plus child-approval status. Self-contained (no CDN textures), @defer-split so three/globe.gl stay out of the initial bundle, auto-rotate until first interaction, WebGL-unavailable fallback. Frontend-only (member attribution computed client-side from the existing families payload). Deps: globe.gl (+pnpm override pinning the existing three ^0.185.1 to keep one copy). Repo: spikersoft-angular

spikerj commented

2026-07-21 00:00:12 +00:00

Shipped — spikersoft-angular PR #485 merged to master (c9cc768d):

Member spotlight: clicking a member's avatar (interactive stack with highlight ring) or their name on the family card opens the in-card panel — bigger avatar, bio/message, their destination chips with parent-approval ✓, their goal bar, Donate. Same click / ✕ / Escape closes.
Dream globe: /sponsor/family/{key} now renders the globe.gl (three.js) choropleth — dim landmass context, family's wanted countries in wishlist blue, the shared dream in gold raised above the surface (Louisiana glows on a dim USA), hover shows which member(s) want to go plus child-approval ("Louisiana ⭐ Whole family: Joseph S. & Todd S. ✓ Approved for Todd S."). Auto-rotates until first drag, self-contained (no CDN textures), WebGL fallback, and @defer-split so the main bundle gained zero bytes.
Deps: globe.gl 2.46.1 riding the workspace's existing three, pinned to one copy via pnpm override.

Closing.

Shipped — spikersoft-angular PR #485 merged to master (`c9cc768d`): - **Member spotlight**: clicking a member's avatar (interactive stack with highlight ring) or their name on the family card opens the in-card panel — bigger avatar, bio/message, their destination chips with parent-approval ✓, their goal bar, Donate. Same click / ✕ / Escape closes. - **Dream globe**: /sponsor/family/{key} now renders the globe.gl (three.js) choropleth — dim landmass context, family's wanted countries in wishlist blue, the shared dream in gold raised above the surface (Louisiana glows on a dim USA), hover shows which member(s) want to go plus child-approval ("Louisiana ⭐ Whole family: Joseph S. & Todd S. ✓ Approved for Todd S."). Auto-rotates until first drag, self-contained (no CDN textures), WebGL fallback, and @defer-split so the main bundle gained zero bytes. - Deps: globe.gl 2.46.1 riding the workspace's existing three, pinned to one copy via pnpm override. Closing.

spikerj closed this issue

2026-07-21 00:00:13 +00:00

spikerj referenced this issue

2026-07-21 03:25:21 +00:00

Dream globe: context countries nearly invisible; show grey state boundaries for supported countries #763

spikerj referenced this issue

2026-07-21 03:25:30 +00:00

Dream globe: choropleth invisible while hovering and past a zoom threshold (small polygons) #764

spikerj referenced this issue

2026-07-21 03:25:37 +00:00

Dream globe: chip click flies globe to destination; polygon click offers "Explore in Geography" #765

spikerj referenced this issue