# 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.