From f50daf842430833d8a63dff7408d3844468d2484 Mon Sep 17 00:00:00 2001 From: pengniklas Date: Sun, 31 May 2026 23:02:35 +0200 Subject: [PATCH 1/2] Revised README --- README.md | 94 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 82 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 080590e..ae5521f 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,53 @@ -# FS 2026 Frontendentwicklung -## Game: Drawing countries +Todos: +- für Backend und weitere Änderungen anpassen +- evtl. kurze Self-Reflection +Aktuelles Readme: -### Gameplay loop +# GeoDraw - FS 2026 Frontendentwicklung -This game can be played as one person or more. +**[Link to our presentation](https://fhgraubuenden-my.sharepoint.com/:p:/g/personal/pengniklas_fhgr_ch/IQDz4D0YTsysR7oDcVnon2lnAYEj1K0Ie75lc4-guWgusns?e=gjZJ58)** -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**) +--- -2. With those references, draw the outline of the country from memory. You have 60 seconds. (may be adjusted for balancing) +## Project Description -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. +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 + +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 +68,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 +76,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 +102,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 -- 2.30.2 From 425976228158bea9bd960fcf288f8cd2c4d1d5bf Mon Sep 17 00:00:00 2001 From: Niklas Peng Date: Sun, 31 May 2026 23:16:07 +0200 Subject: [PATCH 2/2] Update README.md --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index ae5521f..130a30b 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ - Todos: - für Backend und weitere Änderungen anpassen - evtl. kurze Self-Reflection -Aktuelles Readme: # GeoDraw - FS 2026 Frontendentwicklung -- 2.30.2