mirror of
https://github.com/tiennm99/vigeoguessr.git
synced 2026-10-11 03:13:55 +00:00
tiennm99
5730302515
Replace pnpm-lock.yaml with package-lock.json. There was no pnpm-workspace.yaml and no packageManager field, so the lockfile was the only pnpm-specific config. Add package.json#allowScripts for sharp and unrs-resolver. pnpm 11 refuses to install this branch at all without that approval (ERR_PNPM_IGNORED_BUILDS), so recording it under npm keeps the branch installable; sharp backs next/image and unrs-resolver backs eslint module resolution. Update CLAUDE.md to describe npm commands and drop the stale pnpm permission from the tracked local settings. next-env.d.ts and tsconfig.tsbuildinfo are regenerated by the build. Type-check, lint, test, and build fail on this branch exactly as they did on the pnpm lockfile: six TS errors, an unresolvable @typescript-eslint/recommended config, and a jest.config.ts that imports next/jest instead of next/jest.js. Verified against the pre-change tree; none of it is caused by this commit.
VIGEOGUESSR
A Next.js-based Vietnamese geography guessing game where players guess the location of panoramic street view images from various Vietnamese cities.
Features
- 🗺️ Multiple Vietnamese cities: Hanoi, Ho Chi Minh City, Hai Phong, Nam Dinh, Da Lat, and Duc Hoa
- 📱 Responsive design that works on desktop and mobile
- 🎯 Interactive map for location guessing
- 📊 Distance-based scoring system
- 🖼️ 360° panoramic street view images using Photo Sphere Viewer
- ⚡ Built with Next.js 15 and TypeScript for performance and type safety
Tech Stack
- Framework: Next.js 15 with App Router
- Language: TypeScript with strict type checking
- Styling: Tailwind CSS with custom design tokens
- Maps: MapLibre GL JS
- 360° Images: MapillaryJS
- Image API: Mapillary Graph API
Getting Started
Prerequisites
- Node.js 18+
- npm or yarn
Installation
- Clone the repository:
git clone <repository-url>
cd vigeoguessr
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser.
Building for Production
npm run build
npm start
Project Structure
├── app/ # Next.js app directory
│ ├── game/ # Game page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # Reusable React components
│ ├── DonateModal.tsx
│ ├── GameMap.tsx
│ ├── Header.tsx
│ ├── PanoViewer.tsx
│ └── ResultModal.tsx
├── lib/ # Utility functions
│ └── utils.ts # Utility functions
└── public/ # Static assets
Key Improvements from Original
- Modern Framework: Migrated from vanilla HTML/JS to Next.js with TypeScript
- Component-Based Architecture: Modular, reusable React components
- Clean Code: Well-structured TypeScript with proper type safety and organization
- Code Deduplication: Eliminated duplicate code and consolidated utilities
- Performance: Optimized with Next.js built-in optimizations
- Maintainability: Cleaner code structure and separation of concerns
- Responsive Design: Better mobile experience