Merge pull request 'Revised README' (#3) from niklas into master
Reviewed-on: #3 Reviewed-by: Luca Jakob <luca.jakob@stud.fhgr.ch>
This commit is contained in:
commit
e54f99999b
92
README.md
92
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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user