GeoDraw — FS 2026 Frontend-Entwicklung

Link to our presentation

---

Project Description

GeoDraw is a competitive browser-based geography game. Players are shown the name of a country and must draw its border from memory on a blank canvas. City markers serve as spatial hints. After each round the drawing is scored by comparing the player's polygon against the real GeoJSON border using an Intersection over Union (IoU) algorithm. The goal is to achieve the highest total score across three rounds.

Players create or join a shared lobby. Scores are stored per lobby on the backend, so multiple players can compete and compare results on a shared leaderboard.

---

How to start

From the project root, run:

php serve.php

Then open http://localhost:8000/ in your browser. PHP 8.0+ is required.

---

How to play

1. Create or join a lobby — create a new lobby and share its name with friends, or enter an existing lobby name to join
2. Enter your username — your name will appear on the leaderboard
3. Draw — sketch the country border from memory within 60 seconds; city dots are your hints
4. Submit — submit your drawing to see the real border overlaid on yours
5. Score — your drawing is graded on accuracy (grades S / A / B / C / D)
6. Results — after 3 rounds, see your total score and round breakdown
7. Leaderboard — compare your score with other players in the same lobby

---

Special Features

• Freehand canvas drawing using the Pointer Events API (mouse & touch support)
• Real polygon scoring via rasterized IoU (96×96 grid) against GeoJSON country outlines
• Reference outline overlay revealed on the canvas after each round submission
• City hint markers rendered directly on the canvas with labelled pins
• Live countdown timer with colour-coded urgency states (green → yellow → red)
• Per-lobby leaderboard stored on the PHP backend, top 20 entries per lobby
• Scroll reveal animations on the landing page via IntersectionObserver
• Fully responsive layout across desktop, tablet and mobile
• WCAG Level A accessibility — semantic HTML, aria-label, aria-hidden, prefers-reduced-motion

---

Architecture

Stack

frontend/
├── HTML5
├── Vanilla CSS3
└── Vanilla ES6+ (ES modules)
    └── Canvas 2D API + Pointer Events (drawing & scoring)

backend/
└── PHP 8.5
    └── JSON file storage (backend/data/lobbies.json)

frontend/data/
├── countries.json        — country metadata and city coordinates
└── outlines/*.json       — GeoJSON polygon outlines (10 countries)

tools/
└── convert-geojson-outlines.js  — data pipeline: Natural Earth GeoJSON → game outlines

Technologies, Libraries & Frameworks

Layer	Technology	Reason
HTML	Vanilla HTML5	Semantic markup, no abstraction needed
CSS	Vanilla CSS3 (Flexbox + Grid)	Full control; CSS fundamentals are a learning objective
JavaScript	Vanilla ES6+ (ES modules)	No build step required; core learning goal of the module
Drawing & Scoring	Canvas 2D API + Pointer Events	Native browser APIs; IoU scoring via 96×96 raster grid
Country data	GeoJSON outlines	Standard geospatial format, lightweight and precise
Backend	PHP 8.5	Server-side REST API
Storage	JSON file (lobbies.json)	Dependency-free; no database server needed for this scope
Testing	Node.js built-in test runner	Unit tests for IoU scoring algorithm (scoring.test.mjs)
Linting / Formatting	Biome	Fast unified linter and formatter
Package Manager	npm	Dev-only dependency (Biome)

---

Group Members & Roles

Name	Role
Ivan Szabo	Frontend development (initial/base: pages, scripts, styles...)
Luca Jakob	Frontend review; Backend development
Niklas Peng	Frontend improvements (accessibility, code quality, CSS consolidation, JSDoc...); Backend review