4.1 KiB
Todos:
- für Backend und weitere Änderungen anpassen
- evtl. kurze Self-Reflection
GeoDraw - FS 2026 Frontendentwicklung
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 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