58 lines
1.5 KiB
Markdown
58 lines
1.5 KiB
Markdown
# FS 2026 Frontendentwicklung
|
|
|
|
## Game: Drawing countries
|
|
|
|
### Gameplay loop
|
|
|
|
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**)
|
|
|
|
2. With those references, draw the outline of the country from memory. You have 60 seconds. (may be adjusted for balancing)
|
|
|
|
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.
|
|
|
|
## 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 environment
|
|
|
|
This project uses [Biomejs](https://biomejs.dev/) for linting and formatting.
|
|
[Npm](https://www.npmjs.com/) is used for library management.
|
|
|
|
### 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)
|
|
|
|
## Setup
|
|
|
|
### Frontend
|
|
|
|
Your browser must support **WebGL**. If you are uncertain, [check this website](https://get.webgl.org/).
|
|
|
|
Open the `frontend/index.html` file in a browser. That's it.
|
|
|
|
### Backend
|
|
|
|
Setup for backend is WIP.
|