mirror of
https://github.com/tiennm99/vngeoguessr.git
synced 2026-10-11 12:29:01 +00:00
tiennm99
b0a090f625
Shows what the index actually holds: pick a city, see its outline and a dot for every panorama, and click near one to open it in the viewer. It answers the question the counts alone could not, which is whether coverage spans a city or clusters on a few streets. Points come back for the current viewport only. Ha Noi holds 225,985 of them, which is far more than a map can draw and 13.8MB to send, so a zoomed-out view gets an even sample and says so, and zooming in yields every panorama in view. Selection is resolved against the point list on a map click rather than through per-marker handlers. Canvas hit-testing did not fire for these markers, and requiring a pixel-perfect hit on a 2.5px dot would be unpleasant even where it works; the nearest point within a small radius wins instead. The outline is sent only on the first request for a city. Returning it with every viewport query gave the client a new object each time, which made the map refit to the whole city, cancel whatever the user had zoomed into, and trigger another fetch: it never settled. Thumbnail URLs are signed and short-lived, so the index stores ids and the picture is resolved when a point is opened. That lookup is the same one the game uses, lifted out of fetchCityPanorama rather than copied.
VNGeoGuessr
A GeoGuessr clone focused on Vietnamese locations with accurate boundary detection and anti-cheat security. Play geolocation guessing games across 5 Vietnamese locations using real street-level imagery.
🎮 Features
- 5 Vietnamese Locations: Ha Noi, Da Nang, Ho Chi Minh, Da Lat, Duc Hoa (Long An)
- 360° Street View: Mapillary panoramic images with PhotoSphere viewer
- Anti-Cheat Security: Server-side session management prevents cheating
- Distance-Based Scoring: 0-5 point system based on accuracy
- Persistent Leaderboards: Redis-powered top 200 player rankings
- Accurate Boundaries: Nominatim API + Turf.js for precise city detection
📚 Documentation
For detailed information about this project, see the documentation in /docs/:
- Project Overview - Project summary and key characteristics
- Features - Complete feature list and game mechanics
- Tech Stack - Technology stack and dependencies
- Development Guidelines - Development setup and coding standards
- Game Flow - Complete gameplay flow documentation
- Project Structure - Codebase organization and architecture
🚀 Getting Started
Prerequisites
- Node.js 18+
- npm 11+
- Redis server (for leaderboards)
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linting
npm run lint
Open http://localhost:3000 to play the game.
🏗️ Built With
- Frontend: Next.js 15 + React 19 + Tailwind CSS 4
- Street View: Mapillary API + PhotoSphere Viewer
- Maps: Leaflet + OpenStreetMap
- Geographic Data: Nominatim API + Turf.js
- Storage: Redis (leaderboards) + In-memory sessions
- UI Components: shadcn/ui
🎯 How to Play
- Enter your username
- Select a Vietnamese location
- View the 360° street panorama
- Place your guess on the map
- Earn points based on accuracy (closer = more points)
- Compete for the top 200 leaderboard spots!
📋 Development Notes
- JavaScript Only: No TypeScript files
- Individual Parameters: Functions use separate parameters, not object destructuring
- Server-Side Security: Game coordinates never sent to client
- Session Management: Automatic cleanup after 30 minutes
🤝 Contributing
This project follows specific development guidelines. Please read the Development Guidelines before contributing.