Skip to content

✨ feat(radar-map): add GTA-style circular radar map with rotating compass#88

Closed
leandroruel wants to merge 3 commits intosrizzon:mainfrom
leandroruel:feat/mini-map
Closed

✨ feat(radar-map): add GTA-style circular radar map with rotating compass#88
leandroruel wants to merge 3 commits intosrizzon:mainfrom
leandroruel:feat/mini-map

Conversation

@leandroruel
Copy link
Copy Markdown
Contributor

Summary

Addresses the two issues raised in #7:

  • Removed old MiniMap — the bottom-right legacy mini-map has been fully removed (dynamic import + JSX); only the new RadarMap remains
  • Rebased on current main — merged upstream/main (includes pixels system, E.Arcade, compare cinematic, wallpaper mode, sponsor landmarks, and all other recent features)

What this adds

  • New RadarMap component (bottom-left): canvas raster layer renders building dots per district + SVG overlay for player position, camera field-of-view cone, N/S/E/W cardinal labels, and circular bezel ring
  • Heading-up rotation: map rotates with camera direction using a shortest-arc normalization algorithm to prevent CSS transition wrap-around flips at the ±180° boundary
  • Camera position tracking in OrbitScene: useFrame throttled to every 6th frame (~10fps) via onCameraMove prop
  • District-aware coloring: buildings colored by district; current district highlighted
  • Compass readability: N/S/E/W labels counter-rotated via SVG transform so they stay upright as the map spins
  • Visibility: radar only appears after user enters the city (exploreMode || flyMode)

Files changed

File Change
src/components/RadarMap.tsx New component
src/components/CityCanvas.tsx Added onCameraMove prop to OrbitScene; merged with upstream new props (focusPosition, isCompareCinematicPlaying, wallpaperMode, etc.)
src/app/page.tsx Removed MiniMap; wired RadarMap + cameraPos/playerYaw state

Test plan

  • Title screen → RadarMap should NOT appear
  • Click "Explore City" → RadarMap appears bottom-left
  • Rotate camera → map rotates heading-up (like GTA radar)
  • Fly mode → radar shows player yaw heading
  • Confirm old bottom-right mini-map is gone
  • All upstream features (E.Arcade, pixels, compare cinematic, wallpaper) still work

…pass

- New RadarMap component (bottom-left): canvas raster layer for buildings
  + SVG overlay for player dot, camera cone, cardinal directions, and bezel
- Heading-up rotation: map rotates with camera direction using shortest-arc
  normalization to prevent CSS transition wrap-around flips
- District-colored building dots; current district highlighted on the map
- Camera position tracking in OrbitScene via useFrame (throttled to ~10fps)
  to avoid flooding React state with 60 updates/second
- N/S/E/W compass labels rotate with the map; counter-rotated to stay readable
- Visible only after user enters the city (exploreMode or flyMode)
# Conflicts:
#	src/app/page.tsx
#	src/components/CityCanvas.tsx
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 26, 2026

@leandroruel is attempting to deploy a commit to the Samuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

The radio portal slot at line 2851 was missing suppressHydrationWarning,
causing a hydration mismatch when GlobalRadio portaled LofiRadio into it
on the client while the server rendered it empty.
srizzon added a commit that referenced this pull request Apr 7, 2026
…pass

Cherry-picked from leandroruel/git-city@d355509 (PR #88)
Co-authored-by: leandroruel <leandroruel@users.noreply.github.com>
@srizzon
Copy link
Copy Markdown
Owner

srizzon commented Apr 7, 2026

Hey @leandroruel, thanks for the awesome RadarMap contribution! Really well done with the heading-up rotation and district-aware coloring.

I cherry-picked your commit into main (with Co-authored-by attribution) and built on top of it — added remote pilot blips so you can see other players flying on the radar, repositioned it to bottom-right, and removed the legacy MiniMap.

Closing this PR since the changes are already merged. Thanks again for the contribution! 🙌

@srizzon srizzon closed this Apr 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants