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 based on accuracy. The goal is to achieve the highest total score across three rounds.

The game supports single-player sessions with a local leaderboard tracking top scores across multiple players on the same device.

How to start

From the project root, run:

php serve.php

Then open http://localhost:8000/ in a browser. You can override the port, but the default will be 8000.

How to play

Create a lobby — enter a lobby name and start the session
Enter your username — your name will appear on the leaderboard
Draw — sketch the country border from memory within 60 seconds; city dots are your hints
Score — your drawing is graded on accuracy (grades S / A / B / C / D)
Results — after 3 rounds, see your total score and round breakdown
Leaderboard — compare your score with previous sessions

Special Features

Freehand canvas drawing using the Pointer Events API (mouse & touch support)
City hint markers rendered directly on the canvas with labelled pins
Live countdown timer with colour-coded urgency states (green → yellow → red)
Score feedback overlay displayed on the canvas after each round
Animated results page with per-round bar chart breakdown
Persistent leaderboard stored in localStorage, top 20 entries ranked by total score
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
├── HTML
├── Vanilla CSS
└── Vanilla JavaScript
    └── Pixi.js (TBD)
backend
└── PHP (TBD)
    └── Postgres (TBD)

The backend is planned to be written in PHP, with a database using PostgreSQL. Language is pending.

The drawing part will likely be handled by WebGL and a canvas.

Coding aspects

Evaluating arbitrary shapes and determining their surface area
Comparing two arbitrary shapes to calculate a score
Storing and receiving data in the database
Handling user events (drawing, clicks, navigation)

Technologies, Libraries & Frameworks

Layer	Technology	Reason
HTML	Vanilla HTML5	Semantic markup, no abstraction needed
CSS	Vanilla CSS3 (Flexbox + Grid)	Full control over design, no framework overhead
JavaScript	Vanilla ES6+	Core learning goal of the module; no build step required
Drawing	Canvas 2D API + Pointer Events	Native browser API, no library dependency
Backend	PHP	Server-side logic and REST API
Database	PostgreSQL	Relational data storage for scores and lobbies
Linting / Formatting	Biome	Fast, unified linter and formatter replacing ESLint + Prettier
Package Manager	npm	Manages dev dependencies (Biome only)

Setup

Frontend

Your browser must support WebGL. If you are uncertain, check this website.

Start the app from the project root:

php serve.php

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

Backend

Setup for backend is WIP.

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

Self-Reflection

Ivan Szabo: tbd

Luca Jakob: tbd

Niklas Peng: tbd