Guessbridge

A simple browser game I built to test how well people know Cambridge. Look at a photo, guess where it was taken on a map, and see how close you were. That's it!

Play it here: arikatz123.github.io/guessbridge-cuabc-demo

How It Works

You get 5 days to choose from, each with 4 different Cambridge locations. Click on a map to guess where each photo was taken. The closer you are, the more points you get (max 1000 per round). After 4 rounds, you'll see your total score and can try another day.

Running It Locally

git clone https://github.com/arikatz123/guessbridge-cuabc-demo.git
cd guessbridge-cuabc-demo
python3 -m http.server 8000

Then open http://localhost:8000 in your browser.

Built With AI

This entire project was built using Claude Code with zero manual coding. Just natural language prompts → working game.

The Master Prompt

If you want to build something similar, here's the all-in-one prompt that would recreate this:

I want to build a browser-based location guessing game for Cambridge, UK.

GAME CONCEPT:
- Players see photos of Cambridge locations and guess where they were taken on a map
- Similar to GeoGuessr but focused on one city

STRUCTURE:
- Home screen with "Start Game" button
- Day selection screen with 5 days, each containing 4 location challenges
- Game screen with image on left (50% width) and interactive OpenStreetMap on right (50% width)
- Progress header showing "Round X of 4" and running total score
- Results overlay on the map (not full-screen) showing location name, distance, and round score
- Final results screen after completing all 4 rounds showing total score and breakdown

GAMEPLAY FLOW:
1. Player selects a day
2. For each of 4 rounds:
   - Image displays on left
   - Player clicks map on right to place red marker
   - "Submit Guess" button activates
   - On submit: green marker shows actual location, line drawn between markers
   - Results overlay shows location name, distance (m or km), and score
   - "Next Round" button (or "View Final Results" on round 4)
3. Final results screen shows total score, breakdown by round, and "Select Another Day" button

TECHNICAL REQUIREMENTS:
- Vanilla JavaScript (no frameworks)
- Leaflet.js for maps with OpenStreetMap tiles
- Scoring: 1000 * e^(-0.001 * distance) so closer guesses = higher scores
- Screen format: side-by-side on desktop, stacked on mobile

FEATURES NEEDED:
- GPS coordinate extraction from image EXIF data if available
- Clean, modern gradient UI (purple-blue gradient: #667eea to #764ba2)
- Round-by-round score tracking
- Final score breakdown with per-round details
- Line connecting guess marker to actual location marker

Create all necessary files: index.html, styles.css, game.js, and a template locations.json.
Include a .gitignore for macOS and Python files.

Development Tips

If you're building this with AI:

• Start with the basic MVP, then add features one at a time
• Test in the browser after each change
• Share screenshots when debugging UI issues
• Use console.log() liberally to debug - ask the AI to add logging when stuck
• If image coordinates aren't working, make sure your images have GPS EXIF data

Tech Stack

• HTML/CSS/JavaScript (no build tools needed)
• Leaflet.js for the interactive map
• OpenStreetMap for map tiles
• Python for local server (or use VS Code Live Server)

File Structure

├── index.html          # Main page
├── styles.css          # All styling
├── game.js            # Game logic
├── locations.json     # Location data with GPS coords
└── images/            # Photos organized by day
    ├── Day 1/
    ├── Day 2/
    └── ...

Adding Your Own Locations

1. Take photos with GPS enabled on your phone
2. Add them to images/Day X/ folder
3. Extract coordinates: exiftool -GPSLatitude -GPSLongitude -n image.jpg
4. Add entry to locations.json with the name, path, and coordinates

Customizing

Make it harder/easier: Edit game.js line 223: const decayFactor = 0.001 (higher = harder)

Change max score: Edit game.js line 222: const maxScore = 1000

Change map center: Edit game.js line 13: const CAMBRIDGE_CENTER = [52.2053, 0.1218]

Why I Built This

Wanted to test out AI-assisted development and see how fast I could go from idea to working game. Turns out: really fast. The whole thing took about an hour of back-and-forth with Claude, including debugging and polish.

License

MIT - do whatever you want with it!

---

Built entirely with Claude Code - an experiment in AI-assisted development