README.md

@@ -1,17 +1,51 @@
-# FS 2026 Frontendentwicklung
+Todos:
+- für Backend und weitere Änderungen anpassen
+- evtl. kurze Self-Reflection 
 
-## Game: Drawing countries
+# GeoDraw - FS 2026 Frontendentwicklung
 
-### Gameplay loop
+**[Link to our presentation](https://fhgraubuenden-my.sharepoint.com/:p:/g/personal/pengniklas_fhgr_ch/IQDz4D0YTsysR7oDcVnon2lnAYEj1K0Ie75lc4-guWgusns?e=gjZJ58)**
 
-This game can be played as one person or more.
+---
 
-1. You are given a blank canvas with an example country. In this case, **Switzerland**.
-   You are also given the location of 2-3 major cities within that country (**Bern**, **Zürich**)
+## Project Description
 
-2. With those references, draw the outline of the country from memory. You have 60 seconds. (may be adjusted for balancing)
+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.
 
-3. After the time is up, you will be given a score based on how accurate you were. The goal is to be the best in the configured amount of rounds.
+The game supports single-player sessions with a local leaderboard tracking top scores across multiple players on the same device.
+
+---
+
+## How to start
+
+Open the `frontend/index.html` file in a browser. That's it.
+
+---
+
+## How to play
+
+1. **Create a lobby** — enter a lobby name and start the session
+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. **Score** — your drawing is graded on accuracy (grades S / A / B / C / D)
+5. **Results** — after 3 rounds, see your total score and round breakdown
+6. **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
 
@@ -32,10 +66,6 @@ The backend is planned to be written in PHP, with a database using PostgreSQL. L
 
 The drawing part will likely be handled by WebGL and a canvas.
 
-### Coding environment
-
-This project uses [Biomejs](https://biomejs.dev/) for linting and formatting.
-[Npm](https://www.npmjs.com/) is used for library management.
 
 ### Coding aspects
 
@@ -44,6 +74,21 @@ This project uses [Biomejs](https://biomejs.dev/) for linting and formatting.
 - 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
@@ -55,3 +100,26 @@ Open the `frontend/index.html` file in a browser. That's it.
 ### 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