fix: README

# Conflicts:
#	frontend/src/components/Login.vue

.env.example

@@ -1,5 +1,6 @@
 POSTGRES_PORT=5432
 EXPRESS_PORT=3000
+FRONTEND_PORT=8080
 
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres

README.md

@@ -1,163 +1,30 @@
 # RaspberryRocketeer
 
-## Class Diagram of all classes
+## How to run
 
-```mermaid
+### Copy .env
-classDiagram
+First you need to copy the `.env.example`.
-direction BT
-class Collidable {
-   collides(o: Entity) boolean
-}
-class Database {
-   any _db
-   any db
-}
-class Entity {
-   constructor(position: Position, width: number, height: number, fill: number) 
-   Position _position
-   number _width
-   number _height
-   number fill
-   boolean _showHitbox
-   update() void
-   draw() void
-   Position position
-   number width
-   number height
-   boolean showHitbox
-}
-class Game {
-   number id
-   number score
-   string playtime
-   Date date
-   number userId
-}
-class GamePgPromiseRepository {
-   insert(game: Game) Promise~Game~
-   serialize(raw: any) Game
-}
-class GameRepository {
-   insert(game: Game) Promise~Game~
-}
-class HighscoreLeaderboard
-class HighscoreLeaderboardPgPromiseRepository {
-   getAll() Promise~HighscoreLeaderboard~
-   serialize(raw: any) HighscoreLeaderboard
-}
-class HighscoreLeaderboardRepository {
-   getAll() Promise~HighscoreLeaderboard~
-}
-class Leaderboard
-class LeaderboardEntry {
-   number username
-   number rank
-   T score
-}
-class Obstacle {
-   constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) 
-   Pipe pipeTop
-   Pipe pipeBottom
-   number padding
-   number speed
-   number _distanceBetweenPipes
-   number _startX
-   resetPosition() void
-   randomizeHeight() void
-   randomRange(min: number, max: number) number
-   update() void
-   draw() void
-   collides(o: Entity) boolean
-   any startX
-   any distanceBetweenPipes
-}
-class Pipe {
-   constructor(positionX: number, width: number, height: number) 
-   any _image
-   update() void
-   draw() void
-   move(speed: number) void
-   collides(o: Entity) boolean
-   any image
-}
-class Position {
-   constructor(x: number, y: number) 
-   number _x
-   number _y
-   number x
-   number y
-}
-class Raspberry {
-   constructor(image: string) 
-   number lift
-   number gravity
-   number _velocity
-   any _image
-   Position position
-   number maxVelocity
-   number WIDTH
-   number HEIGHT
-   number FILL
-   update() void
-   applyGravity() void
-   forceBoundaries() void
-   boost() void
-   draw() void
-   number velocity
-   any image
-}
-class TimeLeaderboard
-class TimeLeaderboardPgPromiseRepository {
-   getAll() Promise~TimeLeaderboard~
-   serialize(raw: any) TimeLeaderboard
-}
-class TimeLeaderboardRepository {
-   getAll() Promise~TimeLeaderboard~
-}
-class User {
-   number id
-   string name
-}
-class UserPgPromiseRepository {
-   getById(id: number) Promise~User~
-   getByName(name: string) Promise~User~
-   withIdExists(id: number) Promise~boolean~
-   withNameExists(name: string) Promise~boolean~
-   insert(user: Omit~User, "id"~) Promise~User~
-   serialize(raw: any) User
-}
-class UserRepository {
-   getById(id: number) Promise~User~
-   getByName(name: string) Promise~User~
-   withIdExists(userId: number) Promise~boolean~
-   withNameExists(username: string) Promise~boolean~
-   insert(user: Omit~User, "id"~) Promise~User~
-}
-class UserScores {
-   number userId
-   number highscore
-   number totalScore
-   string totalPlaytime
-   number averageScore
-   number gamesPlayed
-}
-class UserScoresPgPromiseRepository {
-   getById(id: number) Promise~UserScores~
-   serialize(raw: any) UserScores
-}
-class UserScoresRepository {
-   getById(userId: number) Promise~UserScores~
-}
-
-GamePgPromiseRepository  -->  GameRepository 
-HighscoreLeaderboardPgPromiseRepository  -->  HighscoreLeaderboardRepository 
-Obstacle  ..>  Collidable 
-Obstacle  -->  Entity 
-Pipe  ..>  Collidable 
-Pipe  -->  Entity 
-Raspberry  -->  Entity 
-TimeLeaderboardPgPromiseRepository  -->  TimeLeaderboardRepository 
-UserPgPromiseRepository  -->  UserRepository 
-UserScoresPgPromiseRepository  -->  UserScoresRepository 
 
+```shell
+cp .env.example .env
 ```
+
+<small>Note: It is recommended to change the values for the database user.</small>
+
+### Install node packages
+Go into the frontend folder using
+```shell
+cd frontend
+```
+and run:
+```shell
+npm install
+```
+
+### Start the container (in the project root)
+
+```shell
+docker compose up --build
+```
+
+You can then access the website on `localhost:8080`

backend/api/src/gameRoute.ts

@@ -9,6 +9,9 @@ export const gameRoute = express.Router()
 
 gameRoute.use(express.json())
 
+/**
+ * Test
+ */
 gameRoute.post(
     '/add',
     body('playtime')
@@ -18,6 +21,8 @@ gameRoute.post(
     body('userId')
         .isInt({min: 1})
         .custom(userWithIdExists),
+    body('score')
+        .isInt({min: 0}),
     /**
      * After processing the errors of express-validator, inserts the game into the DB
      * @param req

backend/api/src/leaderboardRoute.ts

@@ -1,4 +1,5 @@
 import express from 'express';
+import {query, validationResult} from 'express-validator';
 import {TimeLeaderboardRepository} from "./repositories/TimeLeaderboardRepository.js";
 import {TimeLeaderboardPgPromiseRepository} from "./repositories/pgPromise/TimeLeaderboardPgPromiseRepository.js";
 import {HighscoreLeaderboardPgPromiseRepository} from "./repositories/pgPromise/HighscoreLeaderboardPgPromiseRepository.js";
@@ -8,6 +9,9 @@ import {HighscoreLeaderboard, TimeLeaderboard} from "./model/Leaderboard.js";
 export const leaderboardRoute = express.Router()
 
 leaderboardRoute.get('/highscore',
+    query('pagination').toBoolean(),
+    query('entriesPerPage').optional().isInt({min: 1}).toInt(),
+    query('page').optional().isInt({min: 0}).toInt(),
     /**
      * Returns the highscore leaderboard as JSON response, fetched from DB
      * @param req
@@ -15,8 +19,21 @@ leaderboardRoute.get('/highscore',
      */
     async (req, res) => {
     try {
+        //region validate parameters
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({ errors: errors.array() });
+        }
+        //endregion
         const highscoreLeaderboardRepo: HighscoreLeaderboardRepository = new HighscoreLeaderboardPgPromiseRepository;
-        const highscoreLeaderboard: HighscoreLeaderboard = await highscoreLeaderboardRepo.getAll();
+        let highscoreLeaderboard: HighscoreLeaderboard;
+        if (req.query.pagination == true) {
+            const entriesPerPage = req.query.entriesPerPage;
+            const page = req.query.page;
+            highscoreLeaderboard = await highscoreLeaderboardRepo.getPage(entriesPerPage, page);
+        } else {
+            highscoreLeaderboard = await highscoreLeaderboardRepo.getAll();
+        }
         res.send(highscoreLeaderboard);
     } catch (error) {
         // handle errors
@@ -26,6 +43,9 @@ leaderboardRoute.get('/highscore',
 })
 
 leaderboardRoute.get('/totalplaytime',
+    query('pagination').toBoolean(),
+    query('entriesPerPage').optional().isInt({min: 1}).toInt(),
+    query('page').optional().isInt({min: 0}).toInt(),
     /**
      * Returns the total playtime leaderboard as JSON response, fetched from DB
      * @param req
@@ -33,8 +53,23 @@ leaderboardRoute.get('/totalplaytime',
      */
     async (req, res) => {
     try {
+        console.log(req.query)
+        //region validate parameters
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({ errors: errors.array() });
+        }
+        //endregion
         const timeLeaderboardRepo: TimeLeaderboardRepository = new TimeLeaderboardPgPromiseRepository;
-        const timeLeaderboard: TimeLeaderboard = await timeLeaderboardRepo.getAll();
+        let timeLeaderboard: TimeLeaderboard;
+        console.log(req.query)
+        if (req.query.pagination == true) {
+            const entriesPerPage = req.query.entriesPerPage;
+            const page = req.query.page;
+            timeLeaderboard = await timeLeaderboardRepo.getPage(entriesPerPage, page);
+        } else {
+            timeLeaderboard = await timeLeaderboardRepo.getAll();
+        }
         res.send(timeLeaderboard);
     } catch (error) {
         // handle errors

backend/api/src/repositories/HighscoreLeaderboardRepository.ts

@@ -2,4 +2,5 @@ import {HighscoreLeaderboard} from "../model/Leaderboard.js";
 
 export abstract class HighscoreLeaderboardRepository {
     abstract getAll(): Promise<HighscoreLeaderboard>;
+    abstract getPage(entriesPerPage: number, page: number): Promise<HighscoreLeaderboard>
 }

backend/api/src/repositories/TimeLeaderboardRepository.ts

@@ -2,4 +2,5 @@ import {TimeLeaderboard} from "../model/Leaderboard.js";
 
 export abstract class TimeLeaderboardRepository {
     abstract getAll(): Promise<TimeLeaderboard>;
+    abstract getPage(entriesPerPage: number, page: number);
 }

backend/api/src/repositories/pgPromise/HighscoreLeaderboardPgPromiseRepository.ts

@@ -5,7 +5,15 @@ import {Database} from "../../Database.js";
 export class HighscoreLeaderboardPgPromiseRepository extends HighscoreLeaderboardRepository {
     async getAll(): Promise<HighscoreLeaderboard> {
         const raw: any = await Database.db.manyOrNone(
-            'SELECT * FROM lb_highscore INNER JOIN "user" ON user_id = id ORDER BY RANK;'
+            'SELECT * FROM lb_highscore INNER JOIN "user" ON user_id = id ORDER BY rank;'
+        );
+        return this.serialize(raw);
+    }
+
+    async getPage(entriesPerPage, page): Promise<HighscoreLeaderboard> {
+        const raw: any = await Database.db.manyOrNone(
+            'SELECT * FROM lb_highscore INNER JOIN "user" ON user_id = id ORDER BY rank LIMIT $1 OFFSET $2;',
+            [entriesPerPage, page * entriesPerPage]
         );
         return this.serialize(raw);
     }

backend/api/src/repositories/pgPromise/TimeLeaderboardPgPromiseRepository.ts

@@ -5,7 +5,15 @@ import {Database} from "../../Database.js";
 export class TimeLeaderboardPgPromiseRepository extends TimeLeaderboardRepository {
     async getAll(): Promise<TimeLeaderboard> {
         const raw: any = await Database.db.manyOrNone(
-            'SELECT * FROM lb_total_playtime INNER JOIN "user" ON user_id = id ORDER BY RANK;'
+            'SELECT * FROM lb_total_playtime INNER JOIN "user" ON user_id = id ORDER BY rank;'
+        );
+        return this.serialize(raw);
+    }
+
+    async getPage(entriesPerPage: number, page: number): Promise<TimeLeaderboard> {
+        const raw: any = await Database.db.manyOrNone(
+            'SELECT * FROM lb_total_playtime INNER JOIN "user" ON user_id = id ORDER BY rank LIMIT $1 OFFSET $2;',
+            [entriesPerPage, page * entriesPerPage]
         );
         return this.serialize(raw);
     }

backend/api/src/userRoute.ts

@@ -84,3 +84,30 @@ userRoute.get('/:userId/scores',
         }
     }
 )
+
+userRoute.get('/:name',
+    param('name')
+        .isString()
+        .isLength({min: 3, max: 32})
+        .matches(USERNAME_VALIDATION_REGEX),
+
+    async (req, res) => {
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({ errors: errors.array() });
+        }
+
+        const name: string = req.params.name;
+        console.log(name)
+
+        try {
+            // get & return data
+            const userRepo: UserPgPromiseRepository = new UserPgPromiseRepository();
+            const user = await userRepo.getByName(name);
+            res.json(user);
+        } catch (error) {
+            // handle errors
+            console.log(error)
+            res.status(500).json({ errors: [{msg: "Internal server error"}]})
+        }
+    })

backend/db/initScripts/loadMockData.sql

@@ -1,40 +0,0 @@
-insert into "user" (name) values ('dpettus0');
-insert into "user" (name) values ('egreetland1');
-insert into "user" (name) values ('smontford2');
-insert into "user" (name) values ('idagwell3');
-insert into "user" (name) values ('lgagan4');
-insert into "user" (name) values ('acarmont5');
-insert into "user" (name) values ('kjermyn6');
-insert into "user" (name) values ('dokieran7');
-insert into "user" (name) values ('pdrinkel8');
-
-insert into game (user_id, score, playtime, date) values ('1', 74, '19:59', '2022-07-19');
-insert into game (user_id, score, playtime, date) values ('1', 86, '20:32', '2022-11-24');
-insert into game (user_id, score, playtime, date) values ('1', 68, '10:41', '2022-03-24');
-insert into game (user_id, score, playtime, date) values ('2', 39, '5:55', '2022-06-01');
-insert into game (user_id, score, playtime, date) values ('2', 20, '9:23', '2022-03-12');
-insert into game (user_id, score, playtime, date) values ('2', 28, '23:45', '2022-04-01');
-insert into game (user_id, score, playtime, date) values ('2', 44, '18:43', '2022-06-24');
-insert into game (user_id, score, playtime, date) values ('3', 92, '14:54', '2022-11-06');
-insert into game (user_id, score, playtime, date) values ('3', 73, '0:45', '2022-07-26');
-insert into game (user_id, score, playtime, date) values ('3', 27, '2:49', '2022-02-03');
-insert into game (user_id, score, playtime, date) values ('4', 26, '2:32', '2022-07-19');
-insert into game (user_id, score, playtime, date) values ('4', 12, '17:03', '2022-04-25');
-insert into game (user_id, score, playtime, date) values ('4', 6, '8:49', '2021-12-03');
-insert into game (user_id, score, playtime, date) values ('4', 22, '22:27', '2022-03-02');
-insert into game (user_id, score, playtime, date) values ('5', 94, '1:04', '2022-10-19');
-insert into game (user_id, score, playtime, date) values ('5', 2, '2:14', '2022-04-06');
-insert into game (user_id, score, playtime, date) values ('5', 21, '17:18', '2022-06-03');
-insert into game (user_id, score, playtime, date) values ('6', 33, '16:01', '2022-02-02');
-insert into game (user_id, score, playtime, date) values ('6', 27, '7:03', '2022-02-06');
-insert into game (user_id, score, playtime, date) values ('6', 62, '0:45', '2022-11-15');
-insert into game (user_id, score, playtime, date) values ('7', 12, '8:54', '2022-06-29');
-insert into game (user_id, score, playtime, date) values ('7', 63, '16:01', '2022-11-05');
-insert into game (user_id, score, playtime, date) values ('7', 29, '0:46', '2022-10-01');
-insert into game (user_id, score, playtime, date) values ('8', 67, '1:27', '2022-09-29');
-insert into game (user_id, score, playtime, date) values ('8', 84, '10:37', '2021-12-18');
-insert into game (user_id, score, playtime, date) values ('8', 14, '19:14', '2022-01-31');
-insert into game (user_id, score, playtime, date) values ('9', 21, '19:04', '2022-03-08');
-insert into game (user_id, score, playtime, date) values ('9', 46, '2:34', '2022-04-18');
-insert into game (user_id, score, playtime, date) values ('9', 78, '9:33', '2022-09-10');
-insert into game (user_id, score, playtime, date) values ('9', 82, '11:19', '2022-11-29');

docker-compose.yml

@@ -1,23 +1,32 @@
-version: '3.1'
+version: '3.1'
-
+
-services:
+services:
-  db:
+  db:
-    build: backend/db
+    build: backend/db
-    container_name: postgres-db
+    container_name: postgres-db
-    environment:
+    environment:
-      POSTGRES_DB: ${POSTGRES_DB}
+      POSTGRES_DB: ${POSTGRES_DB}
-      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
-    ports:
+    ports:
-      - "${POSTGRES_PORT}:5432"
+      - "${POSTGRES_PORT}:5432"
-    volumes:
+    volumes:
-      - ./backend/pgdata:/var/lib/postgresql/data
+      - ./backend/pgdata:/var/lib/postgresql/data
-
+
-  api:
+  api:
-    build: backend/api
+    build: backend/api
-    depends_on:
+    depends_on:
-      - db
+      - db
-    container_name: express-api
+    container_name: express-api
-    ports:
+    ports:
-      - "${EXPRESS_PORT}:3000"
+      - "${EXPRESS_PORT}:3000"
-
+
+  vue:
+    build: frontend
+    container_name: frontend
+    ports:
+      - "${FRONTEND_PORT}:8080"
+
+
+    volumes:
+      - ./frontend:/app

docs/classes/Entity.Entity.html

@@ -28,7 +28,7 @@
 <li><a href="Pipe.Pipe.html" class="tsd-signature-type" data-tsd-kind="Class">Pipe</a></li>
 <li><a href="Raspberry.Raspberry.html" class="tsd-signature-type" data-tsd-kind="Class">Raspberry</a></li></ul></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L4">Entity.ts:4</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L4">Entity.ts:4</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -88,7 +88,7 @@
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <a href="Entity.Entity.html" class="tsd-signature-type" data-tsd-kind="Class">Entity</a></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L105">Entity.ts:105</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L105">Entity.ts:105</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_height" class="tsd-anchor"></a>
@@ -97,35 +97,35 @@
 <div class="tsd-comment tsd-typography"><p>Height.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L21">Entity.ts:21</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L21">Entity.ts:21</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_position" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>_position</span><a href="#_position" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_position<span class="tsd-signature-symbol">:</span> <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></div>
 <div class="tsd-comment tsd-typography"><p>Position.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L9">Entity.ts:9</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L9">Entity.ts:9</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_showHitbox" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>_show<wbr/>Hitbox</span><a href="#_showHitbox" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_show<wbr/>Hitbox<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
 <div class="tsd-comment tsd-typography"><p>Whether the hitbox (rectangular surrounding) is shown, or not.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L33">Entity.ts:33</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L33">Entity.ts:33</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_width" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>_width</span><a href="#_width" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_width<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>Width.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L15">Entity.ts:15</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L15">Entity.ts:15</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="fill" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>fill</span><a href="#fill" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">fill<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>Color.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L27">Entity.ts:27</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L27">Entity.ts:27</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="height" class="tsd-anchor"></a>
@@ -137,7 +137,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
 <li class="tsd-signature" id="height.height-2"><span class="tsd-signature-symbol">set</span> height<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set height.</p>
@@ -149,7 +149,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="position" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>position</span><a href="#position" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -159,7 +159,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
 <li class="tsd-signature" id="position.position-2"><span class="tsd-signature-symbol">set</span> position<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set position.</p>
@@ -171,7 +171,7 @@
 <h5>value: <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="showHitbox" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>show<wbr/>Hitbox</span><a href="#showHitbox" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -181,7 +181,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
 <li class="tsd-signature" id="showHitbox.showHitbox-2"><span class="tsd-signature-symbol">set</span> showHitbox<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set the hitbox&#39;s visibility.</p>
@@ -193,7 +193,7 @@
 <h5>value: <span class="tsd-signature-type">boolean</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="width" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>width</span><a href="#width" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -203,7 +203,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
 <li class="tsd-signature" id="width.width-2"><span class="tsd-signature-symbol">set</span> width<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set width.</p>
@@ -215,7 +215,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Methods</h2>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="draw" class="tsd-anchor"></a>
@@ -227,7 +227,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L121">Entity.ts:121</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L121">Entity.ts:121</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="update" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagAbstract">Abstract</code> <span>update</span><a href="#update" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -237,7 +237,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L116">Entity.ts:116</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L116">Entity.ts:116</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

docs/classes/Obstacle.Obstacle.html

@@ -30,7 +30,7 @@
 <ul class="tsd-hierarchy">
 <li><a href="../interfaces/Collidable.Collidable.html" class="tsd-signature-type" data-tsd-kind="Interface">Collidable</a></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L4">Obstacle.ts:4</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L4">Obstacle.ts:4</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -99,39 +99,39 @@
 <h4 class="tsd-returns-title">Returns <a href="Obstacle.Obstacle.html" class="tsd-signature-type" data-tsd-kind="Class">Obstacle</a></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#constructor">constructor</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L28">Obstacle.ts:28</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L28">Obstacle.ts:28</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="padding" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>padding</span><a href="#padding" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">padding<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 150</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L7">Obstacle.ts:7</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L7">Obstacle.ts:7</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="pipeBottom" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>pipe<wbr/>Bottom</span><a href="#pipeBottom" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">pipe<wbr/>Bottom<span class="tsd-signature-symbol">:</span> <a href="Pipe.Pipe.html" class="tsd-signature-type" data-tsd-kind="Class">Pipe</a></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L6">Obstacle.ts:6</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L6">Obstacle.ts:6</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="pipeTop" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>pipe<wbr/>Top</span><a href="#pipeTop" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">pipe<wbr/>Top<span class="tsd-signature-symbol">:</span> <a href="Pipe.Pipe.html" class="tsd-signature-type" data-tsd-kind="Class">Pipe</a></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L5">Obstacle.ts:5</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L5">Obstacle.ts:5</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="speed" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>speed</span><a href="#speed" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">speed<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 3</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L8">Obstacle.ts:8</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L8">Obstacle.ts:8</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_distanceBetweenPipes" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <span>_distance<wbr/>Between<wbr/>Pipes</span><a href="#_distanceBetweenPipes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_distance<wbr/>Between<wbr/>Pipes<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L10">Obstacle.ts:10</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L10">Obstacle.ts:10</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_startX" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <span>_startX</span><a href="#_startX" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_startX<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L11">Obstacle.ts:11</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L11">Obstacle.ts:11</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="height" class="tsd-anchor"></a>
@@ -144,7 +144,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.height</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
 <li class="tsd-signature" id="height.height-2"><span class="tsd-signature-symbol">set</span> height<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set height.</p>
@@ -157,7 +157,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.height</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="position" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>position</span><a href="#position" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -168,7 +168,7 @@
 <h4 class="tsd-returns-title">Returns <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></h4><aside class="tsd-sources">
 <p>Inherited from Entity.position</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
 <li class="tsd-signature" id="position.position-2"><span class="tsd-signature-symbol">set</span> position<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set position.</p>
@@ -181,7 +181,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.position</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="showHitbox" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>show<wbr/>Hitbox</span><a href="#showHitbox" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -192,7 +192,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.showHitbox</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
 <li class="tsd-signature" id="showHitbox.showHitbox-2"><span class="tsd-signature-symbol">set</span> showHitbox<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set the hitbox&#39;s visibility.</p>
@@ -205,7 +205,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.showHitbox</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="width" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>width</span><a href="#width" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -216,7 +216,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.width</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
 <li class="tsd-signature" id="width.width-2"><span class="tsd-signature-symbol">set</span> width<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set width.</p>
@@ -229,7 +229,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.width</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="distanceBetweenPipes" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>distance<wbr/>Between<wbr/>Pipes</span><a href="#distanceBetweenPipes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -242,7 +242,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L17">Obstacle.ts:17</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L17">Obstacle.ts:17</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="startX" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>startX</span><a href="#startX" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -255,7 +255,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L13">Obstacle.ts:13</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L13">Obstacle.ts:13</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Methods</h2>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="collides" class="tsd-anchor"></a>
@@ -275,7 +275,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <p>Implementation of <a href="../interfaces/Collidable.Collidable.html">Collidable</a>.<a href="../interfaces/Collidable.Collidable.html#collides">collides</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L89">Obstacle.ts:89</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L89">Obstacle.ts:89</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="createPipes" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>create<wbr/>Pipes</span><a href="#createPipes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -296,7 +296,7 @@
 <h5>pipeImagePath: <span class="tsd-signature-type">string</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L41">Obstacle.ts:41</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L41">Obstacle.ts:41</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="draw" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>draw</span><a href="#draw" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -307,7 +307,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#draw">draw</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L80">Obstacle.ts:80</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L80">Obstacle.ts:80</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="randomRange" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>random<wbr/>Range</span><a href="#randomRange" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -328,7 +328,7 @@
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L70">Obstacle.ts:70</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L70">Obstacle.ts:70</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="randomizeHeight" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>randomize<wbr/>Height</span><a href="#randomizeHeight" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -338,7 +338,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L59">Obstacle.ts:59</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L59">Obstacle.ts:59</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="resetPosition" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>reset<wbr/>Position</span><a href="#resetPosition" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -349,7 +349,7 @@ Randomises the height of the pipes using the padding variable</p>
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L50">Obstacle.ts:50</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L50">Obstacle.ts:50</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="update" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>update</span><a href="#update" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -360,7 +360,7 @@ Randomises the height of the pipes using the padding variable</p>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#update">update</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Obstacle.ts#L74">Obstacle.ts:74</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Obstacle.ts#L74">Obstacle.ts:74</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

docs/classes/Pipe.Pipe.html

@@ -30,7 +30,7 @@
 <ul class="tsd-hierarchy">
 <li><a href="../interfaces/Collidable.Collidable.html" class="tsd-signature-type" data-tsd-kind="Interface">Collidable</a></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L4">Pipe.ts:4</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L4">Pipe.ts:4</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -90,7 +90,7 @@
 <h4 class="tsd-returns-title">Returns <a href="Pipe.Pipe.html" class="tsd-signature-type" data-tsd-kind="Class">Pipe</a></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#constructor">constructor</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L35">Pipe.ts:35</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L35">Pipe.ts:35</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_image" class="tsd-anchor"></a>
@@ -99,7 +99,7 @@
 <div class="tsd-comment tsd-typography"><p>Pipe&#39;s image.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L9">Pipe.ts:9</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L9">Pipe.ts:9</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="height" class="tsd-anchor"></a>
@@ -112,7 +112,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.height</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
 <li class="tsd-signature" id="height.height-2"><span class="tsd-signature-symbol">set</span> height<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set height.</p>
@@ -125,7 +125,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.height</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="image" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>image</span><a href="#image" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -135,7 +135,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Image</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L15">Pipe.ts:15</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L15">Pipe.ts:15</a></li></ul></aside></li>
 <li class="tsd-signature" id="image.image-2"><span class="tsd-signature-symbol">set</span> image<span class="tsd-signature-symbol">(</span>path<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Sets the image.</p>
@@ -149,7 +149,7 @@
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L23">Pipe.ts:23</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L23">Pipe.ts:23</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="position" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>position</span><a href="#position" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -160,7 +160,7 @@
 <h4 class="tsd-returns-title">Returns <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></h4><aside class="tsd-sources">
 <p>Inherited from Entity.position</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
 <li class="tsd-signature" id="position.position-2"><span class="tsd-signature-symbol">set</span> position<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set position.</p>
@@ -173,7 +173,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.position</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="showHitbox" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>show<wbr/>Hitbox</span><a href="#showHitbox" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -184,7 +184,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.showHitbox</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
 <li class="tsd-signature" id="showHitbox.showHitbox-2"><span class="tsd-signature-symbol">set</span> showHitbox<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set the hitbox&#39;s visibility.</p>
@@ -197,7 +197,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.showHitbox</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="width" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>width</span><a href="#width" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -208,7 +208,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.width</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
 <li class="tsd-signature" id="width.width-2"><span class="tsd-signature-symbol">set</span> width<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set width.</p>
@@ -221,7 +221,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.width</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Methods</h2>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="collides" class="tsd-anchor"></a>
@@ -241,7 +241,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <p>Implementation of <a href="../interfaces/Collidable.Collidable.html">Collidable</a>.<a href="../interfaces/Collidable.Collidable.html#collides">collides</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L68">Pipe.ts:68</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L68">Pipe.ts:68</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="draw" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>draw</span><a href="#draw" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -252,7 +252,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#draw">draw</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L48">Pipe.ts:48</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L48">Pipe.ts:48</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="move" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>move</span><a href="#move" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -269,7 +269,7 @@
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L60">Pipe.ts:60</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L60">Pipe.ts:60</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="update" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>update</span><a href="#update" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -280,7 +280,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#update">update</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Pipe.ts#L43">Pipe.ts:43</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Pipe.ts#L43">Pipe.ts:43</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

docs/classes/Position.Position.html

@@ -24,7 +24,7 @@
 <ul class="tsd-hierarchy">
 <li><span class="target">Position</span></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L4">Position.ts:4</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L4">Position.ts:4</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -66,7 +66,7 @@
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L55">Position.ts:55</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L55">Position.ts:55</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_x" class="tsd-anchor"></a>
@@ -75,14 +75,14 @@
 <div class="tsd-comment tsd-typography"><p>X coordinate.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L9">Position.ts:9</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L9">Position.ts:9</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_y" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>_y</span><a href="#_y" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_y<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>Y coordinate.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L15">Position.ts:15</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L15">Position.ts:15</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="x" class="tsd-anchor"></a>
@@ -94,7 +94,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L22">Position.ts:22</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L22">Position.ts:22</a></li></ul></aside></li>
 <li class="tsd-signature" id="x.x-2"><span class="tsd-signature-symbol">set</span> x<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set x.</p>
@@ -106,7 +106,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L30">Position.ts:30</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L30">Position.ts:30</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="y" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>y</span><a href="#y" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -116,7 +116,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L37">Position.ts:37</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L37">Position.ts:37</a></li></ul></aside></li>
 <li class="tsd-signature" id="y.y-2"><span class="tsd-signature-symbol">set</span> y<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set y.</p>
@@ -128,7 +128,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Position.ts#L45">Position.ts:45</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Position.ts#L45">Position.ts:45</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

docs/classes/Raspberry.Raspberry.html

@@ -26,7 +26,7 @@
 <ul class="tsd-hierarchy">
 <li><span class="target">Raspberry</span></li></ul></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L4">Raspberry.ts:4</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L4">Raspberry.ts:4</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -90,7 +90,7 @@
 <h4 class="tsd-returns-title">Returns <a href="Raspberry.Raspberry.html" class="tsd-signature-type" data-tsd-kind="Class">Raspberry</a></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#constructor">constructor</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L97">Raspberry.ts:97</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L97">Raspberry.ts:97</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_image" class="tsd-anchor"></a>
@@ -99,63 +99,63 @@
 <div class="tsd-comment tsd-typography"><p>Image for the raspberry.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L27">Raspberry.ts:27</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L27">Raspberry.ts:27</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="_velocity" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>_velocity</span><a href="#_velocity" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_velocity<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 0</span></div>
 <div class="tsd-comment tsd-typography"><p>Current speed.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L21">Raspberry.ts:21</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L21">Raspberry.ts:21</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="gravity" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>gravity</span><a href="#gravity" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">gravity<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 1.314159265358979323846264338</span></div>
 <div class="tsd-comment tsd-typography"><p>Gravity applied.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L15">Raspberry.ts:15</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L15">Raspberry.ts:15</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="lift" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>lift</span><a href="#lift" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">lift<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = -20</span></div>
 <div class="tsd-comment tsd-typography"><p>Amount of lift applied when boosting.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L9">Raspberry.ts:9</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L9">Raspberry.ts:9</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="FILL" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>FILL</span><a href="#FILL" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">FILL<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 0</span></div>
 <div class="tsd-comment tsd-typography"><p>Color.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L57">Raspberry.ts:57</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L57">Raspberry.ts:57</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="HEIGHT" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>HEIGHT</span><a href="#HEIGHT" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">HEIGHT<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 70</span></div>
 <div class="tsd-comment tsd-typography"><p>Height.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L51">Raspberry.ts:51</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L51">Raspberry.ts:51</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="WIDTH" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>WIDTH</span><a href="#WIDTH" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">WIDTH<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 180</span></div>
 <div class="tsd-comment tsd-typography"><p>Width.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L45">Raspberry.ts:45</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L45">Raspberry.ts:45</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="maxVelocity" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>max<wbr/>Velocity</span><a href="#maxVelocity" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">max<wbr/>Velocity<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 100</span></div>
 <div class="tsd-comment tsd-typography"><p>Maximum velocity, so the raspberry doesn&#39;t get to infinite speed when boosting.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L39">Raspberry.ts:39</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L39">Raspberry.ts:39</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="position" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagPrivate">Private</code> <span>position</span><a href="#position" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">position<span class="tsd-signature-symbol">:</span> <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></div>
 <div class="tsd-comment tsd-typography"><p>Position.</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L33">Raspberry.ts:33</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L33">Raspberry.ts:33</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="height-1" class="tsd-anchor"></a>
@@ -168,7 +168,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.height</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L70">Entity.ts:70</a></li></ul></aside></li>
 <li class="tsd-signature" id="height-1.height-3"><span class="tsd-signature-symbol">set</span> height<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set height.</p>
@@ -181,7 +181,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.height</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L78">Entity.ts:78</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="image" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>image</span><a href="#image" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -191,7 +191,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Image</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L79">Raspberry.ts:79</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L79">Raspberry.ts:79</a></li></ul></aside></li>
 <li class="tsd-signature" id="image.image-2"><span class="tsd-signature-symbol">set</span> image<span class="tsd-signature-symbol">(</span>path<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Sets the image by path.</p>
@@ -203,7 +203,7 @@
 <h5>path: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L87">Raspberry.ts:87</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L87">Raspberry.ts:87</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="position-1" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>position</span><a href="#position-1" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -214,7 +214,7 @@
 <h4 class="tsd-returns-title">Returns <a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a></h4><aside class="tsd-sources">
 <p>Inherited from Entity.position</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L40">Entity.ts:40</a></li></ul></aside></li>
 <li class="tsd-signature" id="position-1.position-3"><span class="tsd-signature-symbol">set</span> position<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="Position.Position.html" class="tsd-signature-type" data-tsd-kind="Class">Position</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set position.</p>
@@ -227,7 +227,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.position</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L48">Entity.ts:48</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="showHitbox" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>show<wbr/>Hitbox</span><a href="#showHitbox" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -238,7 +238,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.showHitbox</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L85">Entity.ts:85</a></li></ul></aside></li>
 <li class="tsd-signature" id="showHitbox.showHitbox-2"><span class="tsd-signature-symbol">set</span> showHitbox<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set the hitbox&#39;s visibility.</p>
@@ -251,7 +251,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.showHitbox</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L93">Entity.ts:93</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="velocity" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>velocity</span><a href="#velocity" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class">
@@ -261,7 +261,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L64">Raspberry.ts:64</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L64">Raspberry.ts:64</a></li></ul></aside></li>
 <li class="tsd-signature" id="velocity.velocity-2"><span class="tsd-signature-symbol">set</span> velocity<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Sets the velocity.</p>
@@ -273,7 +273,7 @@
 <h5>value: <span class="tsd-signature-type">number</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L72">Raspberry.ts:72</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L72">Raspberry.ts:72</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><a id="width-1" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>width</span><a href="#width-1" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">
@@ -284,7 +284,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.width</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L55">Entity.ts:55</a></li></ul></aside></li>
 <li class="tsd-signature" id="width-1.width-3"><span class="tsd-signature-symbol">set</span> width<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-comment tsd-typography"><p>Set width.</p>
@@ -297,7 +297,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Inherited from Entity.width</p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Entity.ts#L63">Entity.ts:63</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Methods</h2>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="applyGravity" class="tsd-anchor"></a>
@@ -309,7 +309,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L114">Raspberry.ts:114</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L114">Raspberry.ts:114</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="boost" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>boost</span><a href="#boost" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -319,7 +319,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L153">Raspberry.ts:153</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L153">Raspberry.ts:153</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="boundaryBottom" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>boundary<wbr/>Bottom</span><a href="#boundaryBottom" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -329,7 +329,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L143">Raspberry.ts:143</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L143">Raspberry.ts:143</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="boundaryTop" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>boundary<wbr/>Top</span><a href="#boundaryTop" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -339,7 +339,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L132">Raspberry.ts:132</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L132">Raspberry.ts:132</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="draw" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>draw</span><a href="#draw" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -350,7 +350,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#draw">draw</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L160">Raspberry.ts:160</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L160">Raspberry.ts:160</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="drawHitBox" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>draw<wbr/>Hit<wbr/>Box</span><a href="#drawHitBox" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -360,7 +360,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L188">Raspberry.ts:188</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L188">Raspberry.ts:188</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="drawObject" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>draw<wbr/>Object</span><a href="#drawObject" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -370,7 +370,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L172">Raspberry.ts:172</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L172">Raspberry.ts:172</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="drawRocket" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>draw<wbr/>Rocket</span><a href="#drawRocket" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -380,7 +380,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L180">Raspberry.ts:180</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L180">Raspberry.ts:180</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="forceBoundaries" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>force<wbr/>Boundaries</span><a href="#forceBoundaries" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -390,7 +390,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L123">Raspberry.ts:123</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L123">Raspberry.ts:123</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="setPose" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>set<wbr/>Pose</span><a href="#setPose" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
@@ -400,7 +400,7 @@
 </div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L198">Raspberry.ts:198</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L198">Raspberry.ts:198</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="update" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>update</span><a href="#update" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -411,7 +411,7 @@
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
 <p>Overrides <a href="Entity.Entity.html">Entity</a>.<a href="Entity.Entity.html#update">update</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Raspberry.ts#L106">Raspberry.ts:106</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Raspberry.ts#L106">Raspberry.ts:106</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

docs/interfaces/Collidable.Collidable.html

@@ -29,7 +29,7 @@
 <li><a href="../classes/Obstacle.Obstacle.html" class="tsd-signature-type" data-tsd-kind="Class">Obstacle</a></li>
 <li><a href="../classes/Pipe.Pipe.html" class="tsd-signature-type" data-tsd-kind="Class">Pipe</a></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Collidable.ts#L4">Collidable.ts:4</a></li></ul></aside>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Collidable.ts#L4">Collidable.ts:4</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -57,7 +57,7 @@
 </div></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/7f83b5e/frontend/model/Collidable.ts#L9">Collidable.ts:9</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://github.com/s-prechtl/RaspberryRocketeer/blob/f1318e4/frontend/model/Collidable.ts#L9">Collidable.ts:9</a></li></ul></aside></li></ul></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

frontend/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

frontend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.gitignore
+README.md

frontend/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off', 
+  }
+}

frontend/.gitignore

@@ -1,235 +1,24 @@
-# Project exclude paths
+.DS_Store
-/frontend/node_modules/
+node_modules
+/dist
 
-# Created by https://www.toptal.com/developers/gitignore/api/node,phpstorm+all
-# Edit at https://www.toptal.com/developers/gitignore?templates=node,phpstorm+all
 
-### Node ###
+# local env files
-# Logs
+.env.local
-logs
+.env.*.local
-*.log
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
+pnpm-debug.log*
-.pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
+# Editor directories and files
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+.idea
-
+.vscode
-# Runtime data
+*.suo
-pids
+*.ntvs*
-*.pid
+*.njsproj
-*.seed
+*.sln
-*.pid.lock
+*.sw?
-
+/public/game/
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
-
-# Optional stylelint cache
-
-# SvelteKit build / generate output
-.svelte-kit
-
-### PhpStorm+all ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/usage.statistics.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# AWS User-specific
-.idea/**/aws.xml
-
-# Generated files
-.idea/**/contentModel.xml
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# Gradle and Maven with auto-import
-# When using Gradle or Maven with auto-import, you should exclude module files,
-# since they will be recreated, and may cause churn.  Uncomment if using
-# auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
-
-# CMake
-cmake-build-*/
-
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
-# File-based project format
-*.iws
-
-# IntelliJ
-out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# SonarLint plugin
-.idea/sonarlint/
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-# Editor-based Rest Client
-.idea/httpRequests
-
-# Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
-
-### PhpStorm+all Patch ###
-# Ignore everything but code style settings and run configurations
-# that are supposed to be shared within teams.
-
-.idea/*
-
-!.idea/codeStyles
-!.idea/runConfigurations
-
-# End of https://www.toptal.com/developers/gitignore/api/node,phpstorm+all

frontend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18
+
+COPY . /app
+WORKDIR /app
+
+RUN npm install
+
+EXPOSE 8080
+
+ENTRYPOINT ["npm", "run", "serve"]
+

frontend/README.md

@@ -1,87 +1,24 @@
-```mermaid
+# raspberryrocketeer
-classDiagram
-direction BT
-class Collidable {
-   collides(o: Entity) boolean
-}
-class Entity {
-   constructor(position: Position, width: number, height: number, fill: number) 
-   Position _position
-   number _width
-   number _height
-   number fill
-   boolean _showHitbox
-   update() void
-   draw() void
-   Position position
-   number width
-   number height
-   boolean showHitbox
-}
-class Obstacle {
-   constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) 
-   Pipe pipeTop
-   Pipe pipeBottom
-   number padding
-   number speed
-   number _distanceBetweenPipes
-   number _startX
-   createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImagePath: string) void
-   resetPosition() void
-   randomizeHeight() void
-   randomRange(min: number, max: number) number
-   update() void
-   draw() void
-   collides(o: Entity) boolean
-   any startX
-   any distanceBetweenPipes
-}
-class Pipe {
-   constructor(positionX: number, width: number, height: number, image: string) 
-   p5.Image _image
-   update() void
-   draw() void
-   move(speed: number) void
-   collides(o: Entity) boolean
-   p5.Image image
-}
-class Position {
-   constructor(x: number, y: number) 
-   number _x
-   number _y
-   number x
-   number y
-}
-class Raspberry {
-   constructor(image: string) 
-   number lift
-   number gravity
-   number _velocity
-   p5.Image _image
-   Position position
-   number maxVelocity
-   number WIDTH
-   number HEIGHT
-   number FILL
-   update() void
-   applyGravity() void
-   forceBoundaries() void
-   boundaryTop() void
-   boundaryBottom() void
-   boost() void
-   draw() void
-   drawObject() void
-   drawRocket() void
-   drawHitBox() void
-   setPose() void
-   number velocity
-   p5.Image image
-}
-
-Obstacle  ..>  Collidable 
-Obstacle  -->  Entity 
-Pipe  ..>  Collidable 
-Pipe  -->  Entity 
-Raspberry  -->  Entity 
 
+## Project setup
 ```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/game/game.ts

@@ -1,77 +1,52 @@
-const PIPE_IMAGE_PATH: string = "resources/dell-pc-min-min-small.png";
+const PIPE_IMAGE_PATH: string = "resources/raspberry-low-res.png";
-const BACKGROUND_IMAGE_PATH: string = "resources/htl-steyr-front.jpg";
+const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png";
 const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png";
-const FLOOR_IMAGE_PATH: string = "resources/table-min-min.png";
+const OBSTACLE_WIDTH: number = 88;
-const FONT_PATH: string = "resources/PressStart2P-Regular.ttf";
 const OBSTACLE_COUNT: number = 3;
 const BOOST_KEYS = ["k", " "];
-let floorHeight: number;
-let obstacleWidth: number;
 let obstacleOffset: number;
-let backgroundImage: p5.Image;
+let backgroundImage: any;
-let pipeImage: p5.Image;
-let floorImage: p5.Image;
-let font: p5.Font;
 
 let obstacles: Obstacle[] = [];
 let raspberry: Raspberry;
-let startTime: number;
-let playTime: number;
-let score: number = 0;
 let paused: boolean;
+let score: number = 0;
 let hasAlreadyScored: boolean = false;
-let hasDied: boolean = true;
+let hasDied: boolean = false;
 let ready: boolean = true;
 
-/**
- * p5 preload function
- */
-function preload() {
-    font = loadFont(FONT_PATH);
-    backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
-    pipeImage = loadImage(PIPE_IMAGE_PATH);
-    floorImage = loadImage(FLOOR_IMAGE_PATH);
-}
-
 /**
  * p5 setup function.
  */
 function setup() {
-    createCanvas(2000, 1000);
+    backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
-    floorHeight = height / 5;
+    createCanvas(1200, 750);
     setupObstacleConsts();
     setupFont();
     setupGame();
-    let originalSetItem = localStorage.setItem;
-    localStorage.setItem = function () {
-        document.createEvent('Event').initEvent('itemInserted', true, true);
-        originalSetItem.apply(this, arguments);
-    }
 }
 
 /**
  * Sets up the constants needed for the game.
  */
-function setupObstacleConsts(): void {
+function setupObstacleConsts() {
     obstacleOffset = width / OBSTACLE_COUNT;
-    obstacleWidth = width / 22.727272727272727272;
+    Obstacle.distanceBetweenPipes = height / 2.5
-    Obstacle.distanceBetweenPipes = height / 2.5;
     Obstacle.startX = width;
 }
 
 /**
  * Set up the font.
  */
-function setupFont(): void {
+function setupFont() {
     textSize(150);
-    textAlign(CENTER);
+    textFont(loadFont("resources/PressStart2P-Regular.ttf"));
-    textFont(font);
 }
 
 /**
  * Sets up everything needed for the game.
  */
-function setupGame(): void {
+function setupGame() {
     paused = true;
     raspberry = new Raspberry(RASPBERRY_IMAGE_PATH);
     setupObstacles();
@@ -80,7 +55,7 @@ function setupGame(): void {
 /**
  * Clears the obstacles and reinitializes them.
  */
-function setupObstacles(): void {
+function setupObstacles() {
     obstacles = [];
     instantiateObstacles(OBSTACLE_COUNT);
     obstacles.forEach((obstacle) => obstacle.randomizeHeight());
@@ -90,11 +65,10 @@ function setupObstacles(): void {
  * Instantiates a certain amount of obstacles.
  * @param number
  */
-function instantiateObstacles(number: number): void {
+function instantiateObstacles(number: number) {
     for (let i = 0; i < number; i++) {
         obstacles.push(
-            new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage)
+            new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, PIPE_IMAGE_PATH));
-        );
     }
 }
 
@@ -110,54 +84,24 @@ function draw() {
 /**
  * Draws the game's elements.
  */
-function drawGame(): void {
+function drawGame() {
-    drawScenery();
+    background(backgroundImage);
     drawEntities();
     displayScore();
 }
 
 /**
- * Draws the:
+ * Draws the game's enities.
- * - background
- * - floor
  */
-function drawScenery(): void {
+function drawEntities() {
-    background(backgroundImage);
-    drawFloor();
-}
-
-/**
- * Draws the floor with the corresponding image
- */
-function drawFloor(): void {
-    push();
-    noFill();
-    image(floorImage, 0, height - floorHeight, width, floorHeight);
-    rect(0, height - floorHeight, width, floorHeight);
-    pop();
-}
-
-/**
- * Draws the game's entities.
- */
-function drawEntities(): void {
     raspberry.draw();
     drawObstacles();
 }
 
-/**
- * Draws the obstacles.
- */
-function drawObstacles(): void {
-    obstacles.forEach((obstacle) => {
-        obstacle.draw();
-    });
-}
-
 /**
  * Operations for the game's functionality.
  */
-function gameLoop(): void {
+function gameLoop() {
     if (!paused) {
         collisionCheck(obstacles[0]);
         checkRaspberryScore();
@@ -168,7 +112,7 @@ function gameLoop(): void {
  * Checks the collision between an obstacle and the raspberry.
  * @param o
  */
-function collisionCheck(o: Obstacle): void {
+function collisionCheck(o: Obstacle) {
     if (o.collides(raspberry)) {
         die();
         setupGame();
@@ -178,37 +122,26 @@ function collisionCheck(o: Obstacle): void {
 /**
  * Timeouts key events.
  */
-function die(): void {
+function die() {
     ready = false;
     hasDied = true;
-    playTime = Date.now() - startTime;
-    exportToLocalStorage();
     setTimeout(() => ready = true, 1000);
 }
 
-/**
- * Exports playTime, Score and if the game is running into localStorage
- */
-function exportToLocalStorage() {
-    localStorage.setItem("game-playTime", String(playTime));
-    localStorage.setItem("game-score", String(score));
-    localStorage.setItem("game-isRunning", String(!hasDied));
-}
-
 /**
  * Displays the game score.
  */
-function displayScore(): void {
+function displayScore() {
     push();
-    fill(195, 33, 34);
+    fill(200, 100, 60);
-    text(score, 0, height / 10, width, height);
+    text(score, width / 2, height / 10, width, height);
     pop();
 }
 
 /**
  * Updates all objects.
  */
-function update(): void {
+function update() {
     if (!paused) {
         raspberry.update();
     }
@@ -221,12 +154,22 @@ function update(): void {
     })
 }
 
+/**
+ * Draws the obstacles.
+ */
+function drawObstacles() {
+    obstacles.forEach((obstacle) => {
+        obstacle.draw();
+    });
+}
+
+
 /**
  * Check if obstacle positions should be reset and reset if so
  * @param obstacle obstacle to check
  */
-function checkObstacleReset(obstacle: Obstacle): void {
+function checkObstacleReset(obstacle: Obstacle) {
-    if (obstacle.position.x < -obstacleWidth) {
+    if (obstacle.position.x < -OBSTACLE_WIDTH) {
         obstacle.resetPosition();
         obstacles.shift();
         obstacles.push(obstacle);
@@ -237,7 +180,7 @@ function checkObstacleReset(obstacle: Obstacle): void {
 /**
  * Check if the raspberry should score and set score
  */
-function checkRaspberryScore(): void {
+function checkRaspberryScore() {
     if ((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
         && !hasAlreadyScored) {
         score += 1;
@@ -249,13 +192,11 @@ function checkRaspberryScore(): void {
  * Resets the score if game is started
  */
 function resetScore(): void {
-    if (!hasDied || localStorage.getItem("frontend-ready") == "false") return;
+    if (hasDied) {
-    
+        hasDied = false;
-    hasDied = false;
+        score = 0;
-    score = 0;
+        hasAlreadyScored = false;
-    hasAlreadyScored = false;
+    }
-    startTime = Date.now();
-    exportToLocalStorage();
 }
 
 /**
@@ -265,8 +206,7 @@ function keyPressed() {
     if (!ready) return;
     // Jump
     if (BOOST_KEYS.includes(key.toLowerCase())) {
-        resetScore();
+       playerInput();
-        raspberry.boost();
     }
 
     // Pause the Game
@@ -276,3 +216,24 @@ function keyPressed() {
         paused = false;
     }
 }
+
+/**
+ * Mouse clicked event.
+ */
+function mouseClicked() {
+    if (!ready) return;
+
+    if (paused) {
+        paused = false;
+    }
+
+    playerInput();
+}
+
+/**
+ * Handles input for the player, when a key is pressed, or the mouse is clicked.
+ */
+function playerInput() {
+    resetScore();
+    raspberry.boost();
+}

frontend/game/global.d.ts

@@ -0,0 +1,4 @@
+// This file will add both p5 instanced and global intellisense
+import module = require('p5');
+export = module;
+export as namespace p5;

frontend/game/model/Obstacle.ts

@@ -4,7 +4,7 @@
 class Obstacle extends Entity implements Collidable {
     private pipeTop: Pipe;
     private pipeBottom: Pipe;
-    private readonly padding: number;
+    private readonly padding: number = 150;
     private readonly speed: number = 3;
 
     private static _distanceBetweenPipes: number;
@@ -23,12 +23,11 @@ class Obstacle extends Entity implements Collidable {
      * @param position starting position of the obstacle
      * @param obstacleWidth width of the obstacle
      * @param obstacleHeight height of the obstacle
-     * @param image the image to be used
+     * @param pipeImagePath path to the image to be used
      */
-    constructor(position: Position, obstacleWidth: number, obstacleHeight: number, image: p5.Image) {
+    constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) {
         super(position, obstacleWidth, obstacleHeight, 0);
-        this.padding = height / 6.6666666666666666;
+        this.createPipes(position, obstacleHeight, obstacleWidth, pipeImagePath);
-        this.createPipes(position, obstacleHeight, obstacleWidth, image);
     }
 
     /**
@@ -36,12 +35,12 @@ class Obstacle extends Entity implements Collidable {
      * @param position
      * @param obstacleHeight
      * @param obstacleWidth
-     * @param pipeImage
+     * @param pipeImagePath
      * @private
      */
-    private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImage: p5.Image) {
+    private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImagePath: string) {
-        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
+        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
-        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
+        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
     }
 
     /**

frontend/game/model/Pipe.ts

@@ -0,0 +1,74 @@
+/**
+ * Rectangular obstacle.
+ */
+class Pipe extends Entity implements Collidable {
+    /**
+     * Pipe's image.
+     * @private
+     */
+    private _image: p5.Image;
+
+    //region Getter & Setter
+    /**
+     * Gets the image.
+     */
+    get image(): p5.Image {
+        return this._image;
+    }
+
+    /**
+     * Sets the image.
+     * @param path Path to image
+     */
+    set image(path: any) {
+        this._image = loadImage(path);
+    }
+    //endregion
+
+    /**
+     * Constructs the pipe.
+     * @param positionX starting x-Position
+     * @param width pipe width
+     * @param height pipe height
+     * @param image path to image.
+     */
+    constructor(positionX: number, width: number, height: number, image: string) {
+        super(new Position(positionX, 0), width, height, 0);
+        this.image = image;
+    }
+
+    /**
+     * YAGNI.
+     */
+    public update(): void {}
+
+    /**
+     * Draws the pipe.
+     */
+    public draw(): void {
+        push();
+        noFill();
+        image(this.image, this.position.x, this.position.y, this.width, this.height);
+        rect(this.position.x, this.position.y, this.width, this.height);
+        pop();
+    }
+
+    /**
+     * Moves the pipe to the lift with the given speed
+     * @param speed how fast the pipe moves
+     */
+    public move(speed: number): void {
+        this.position.x -= speed;
+    }
+
+    /**
+     * Determines when the pipe is colliding with another entity
+     * @param o other entity
+     */
+    collides(o: Entity): boolean {
+        return this.position.x < (o.position.x + o.width) && //inside left border
+            (this.position.x + this.width) > o.position.x && //but not outside right border
+            this.position.y < (o.position.y + o.height) && //inside top border
+            (this.position.y + this.height) > o.position.y; //but not outside bottom border
+    }
+}

frontend/game/model/Raspberry.ts

@@ -42,19 +42,13 @@ class Raspberry extends Entity {
      * Width.
      * @private
      */
-    private static width: number;
+    private static readonly WIDTH: number = 180;
 
     /**
      * Height.
      * @private
      */
-    private static height: number;
+    private static readonly HEIGHT: number = 70;
-
-    /**
-     * Offset off of the floor so that the raspberry looks like it's falling on the floor
-     * @private
-     */
-    private static bottomFloorOffset: number;
 
     /**
      * Color.
@@ -76,7 +70,7 @@ class Raspberry extends Entity {
      * @param value
      */
     set velocity(value: number) {
-        this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value;
+        this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? -Raspberry.maxVelocity : value;
     }
 
     /**
@@ -102,11 +96,7 @@ class Raspberry extends Entity {
      */
     constructor(image: string) {
         Raspberry.position = new Position(width / 6, height / 2);
-        Raspberry.height = height / 14.2857142857142857;
+        super(Raspberry.position, Raspberry.WIDTH, Raspberry.HEIGHT, Raspberry.FILL);
-        Raspberry.width = width / 11.1111111111111111;
-       
-        super(Raspberry.position, Raspberry.width, Raspberry.height, Raspberry.FILL);
-        Raspberry.bottomFloorOffset = (height / 5) - (height / 15 / 2);
         this.image = image;
     }
 
@@ -127,7 +117,7 @@ class Raspberry extends Entity {
     }
 
     /**
-     * Limits the Raspberry's movement to the shown canvas.
+     * Limits the raspberry's movement to the shown canvas.
      * @private
      */
     private forceBoundaries(): void {
@@ -151,8 +141,8 @@ class Raspberry extends Entity {
      * @private
      */
     private boundaryBottom(): void {
-        if (this.position.y + this.height + Raspberry.bottomFloorOffset > height) {
+        if (this.position.y + this.height > height) {
-            this.position.y = height - this.height - Raspberry.bottomFloorOffset;
+            this.position.y = height - this.height;
             this.velocity = 0;
         }
     }

frontend/game/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "outFile": "../public/game.js",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "rootDir": ".",
+    "sourceMap": true,
+    "target": "es5",
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost"
+    ]
+  }
+}

frontend/global.d.ts

@@ -1,5 +0,0 @@
-// This file will add both p5 instanced and global intellisence
-import * as p5Global from 'p5/global'
-import module = require('p5');
-export = module;
-export as namespace p5;

frontend/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Raspberyy Rocketeer</title>
-    <script src="build/build.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"
-            integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g=="
-            crossorigin="anonymous"
-            referrerpolicy="no-referrer">
-    </script>
-</head>
-<body>
-    <main></main>
-</body>
-</html>

frontend/model/Pipe.ts

@@ -1,97 +0,0 @@
-/**
- * Rectangular obstacle.
- */
-class Pipe extends Entity implements Collidable {
-    /**
-     * Pipe's image.
-     * @private
-     */
-    private readonly image: p5.Image;
-
-    /**
-     * Constructs the pipe.
-     * @param positionX starting x-Position
-     * @param width pipe width
-     * @param height pipe height
-     * @param image image object
-     */
-    constructor(positionX: number, width: number, height: number, image: p5.Image) {
-        super(new Position(positionX, 0), width, height, 0);
-        this.image = image;
-    }
-
-    /**
-     * YAGNI.
-     */
-    public update(): void {
-    }
-
-    /**
-     * Draws the pipe.
-     */
-    public draw(): void {
-        push();
-        noFill();
-
-        let imageAspectRatio = this.image.height / this.image.width;
-        let computedImageHeight = imageAspectRatio * this.width;
-        this.drawImage(computedImageHeight, imageAspectRatio); 
-
-        rect(this.position.x, this.position.y, this.width, this.height);
-        pop();
-    }
-
-    /**
-     * Draws the image of the pipe into it (tiling and not stretching)
-     * @param computedImageHeight image height on screen
-     * @param imageAspectRatio aspect ratio of the image
-     * @private
-     */
-    private drawImage(computedImageHeight: number, imageAspectRatio: number): void {
-        if (this.height > computedImageHeight) {
-            let maxImageYPos = Math.ceil(this.height / computedImageHeight) * computedImageHeight;
-            for (let imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight) {
-                if(imageYPosition + computedImageHeight >= maxImageYPos) {
-                    this.cropLastImage(imageYPosition, computedImageHeight, imageAspectRatio);
-                    break;
-                }
-                image(this.image, this.position.x, this.position.y + imageYPosition, this.width, computedImageHeight);
-            }
-        } else {
-            image(this.image, this.position.x, this.position.y, this.width, this.height);
-        }
-    }
-
-    /**
-     * Crops the last image in the pipe so that is doesn't get stretched or compressed
-     * @param imageYPosition y-Position of the image
-     * @param computedImageHeight image height on screen
-     * @param imageAspectRatio aspect ratio of the image
-     * @private
-     */
-    private cropLastImage(imageYPosition: number, computedImageHeight: number, imageAspectRatio: number): void {
-        let amountOfImages = Math.floor(imageYPosition / computedImageHeight);
-        let heightToEdge = this.height - (amountOfImages * computedImageHeight);
-        let croppedImage = this.image.get(0, 0, this.image.width, this.image.height - (heightToEdge * imageAspectRatio));
-        image(croppedImage, this.position.x, this.position.y + imageYPosition, this.width, heightToEdge);
-    }
-
-    /**
-     * Moves the pipe to the lift with the given speed
-     * @param speed how fast the pipe moves
-     */
-    public move(speed: number): void {
-        this.position.x -= speed;
-    }
-
-    /**
-     * Determines when the pipe is colliding with another entity
-     * @param o other entity
-     */
-    collides(o: Entity): boolean {
-        return this.position.x < (o.position.x + o.width) && //inside left border
-            (this.position.x + this.width) > o.position.x && //but not outside right border
-            this.position.y < (o.position.y + o.height) && //inside top border
-            (this.position.y + this.height) > o.position.y; //but not outside bottom border
-    }
-}

frontend/package.json

@@ -1,15 +1,20 @@
 {
+  "name": "raspberryrocketeer",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "vue-cli-service serve",
-    "start": "run-p start-compile start-run",
+    "build": "npm run build-game && vue-cli-service build",
-    "start-compile": "tsc --watch",
+    "build-game": "tsc -p ./game",
-    "start-run": "browser-sync start --server -w"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@types/p5": "^1.4.3",
+    "bootstrap": "^5.2.3",
-    "browser-sync": "^2.27.10",
+    "vue": "^3.2.13",
-    "npm-run-all": "^4.1.5",
+    "@vue/cli-service": "~5.0.0"
-    "p5": "^1.5.0",
+  },
-    "typedoc": "^0.23.24"
+  "devDependencies": {
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "typescript": "~4.5.5"
   }
 }

frontend/public/game.js

@@ -0,0 +1,519 @@
+var __extends = (this && this.__extends) || (function(){
+    var extendStatics = function(d, b){
+        extendStatics = Object.setPrototypeOf ||
+            ({__proto__: []} instanceof Array && function(d, b){
+                d.__proto__ = b;
+            }) ||
+            function(d, b){
+                for(var p in b) if(Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+            };
+        return extendStatics(d, b);
+    };
+    return function(d, b){
+        if(typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+
+        function __(){
+            this.constructor = d;
+        }
+
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var PIPE_IMAGE_PATH = "resources/dell-pc-min-min-small.png";
+var BACKGROUND_IMAGE_PATH = "resources/htl-steyr-front.jpg";
+var RASPBERRY_IMAGE_PATH = "resources/raspberry-rocket.png";
+var FLOOR_IMAGE_PATH = "resources/table-min-min.png";
+var FONT_PATH = "resources/PressStart2P-Regular.ttf";
+var OBSTACLE_COUNT = 3;
+var BOOST_KEYS = ["k", " "];
+var floorHeight;
+var obstacleWidth;
+var obstacleOffset;
+var backgroundImage;
+var pipeImage;
+var floorImage;
+var font;
+var obstacles = [];
+var raspberry;
+var startTime;
+var playTime;
+var score = 0;
+var paused;
+var hasAlreadyScored = false;
+var hasDied = true;
+var ready = true;
+
+function preload(){
+    font = loadFont(FONT_PATH);
+    backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
+    pipeImage = loadImage(PIPE_IMAGE_PATH);
+    floorImage = loadImage(FLOOR_IMAGE_PATH);
+}
+
+function setup(){
+    createCanvas(1085, 600);
+    floorHeight = height / 5;
+    setupObstacleConsts();
+    setupFont();
+    setupGame();
+    var originalSetItem = localStorage.setItem;
+    localStorage.setItem = function(key, value){
+        var event = new Event('itemInserted');
+
+        event.value = value; // Optional..
+        event.key = key; // Optional..
+        window.dispatchEvent(event);
+        originalSetItem.apply(this, arguments);
+    };
+}
+
+function setupObstacleConsts(){
+    obstacleOffset = width / OBSTACLE_COUNT;
+    obstacleWidth = width / 22.727272727272727272;
+    Obstacle.distanceBetweenPipes = height / 2.5;
+    Obstacle.startX = width;
+}
+
+function setupFont(){
+    textSize(75);
+    textAlign(CENTER);
+    textFont(font);
+}
+
+function setupGame(){
+    paused = true;
+    raspberry = new Raspberry(RASPBERRY_IMAGE_PATH);
+    setupObstacles();
+}
+
+function setupObstacles(){
+    obstacles = [];
+    instantiateObstacles(OBSTACLE_COUNT);
+    obstacles.forEach(function(obstacle){
+        return obstacle.randomizeHeight();
+    });
+}
+
+function instantiateObstacles(number){
+    for(var i = 0; i < number; i++){
+        obstacles.push(new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage));
+    }
+}
+
+function draw(){
+    update();
+    gameLoop();
+    drawGame();
+}
+
+function drawGame(){
+    drawScenery();
+    drawEntities();
+    displayScore();
+}
+
+function drawScenery(){
+    background(backgroundImage);
+    drawFloor();
+}
+
+function drawFloor(){
+    push();
+    noFill();
+    image(floorImage, 0, height - floorHeight, width, floorHeight);
+    rect(0, height - floorHeight, width, floorHeight);
+    pop();
+}
+
+function drawEntities(){
+    raspberry.draw();
+    drawObstacles();
+}
+
+function drawObstacles(){
+    obstacles.forEach(function(obstacle){
+        obstacle.draw();
+    });
+}
+
+function gameLoop(){
+    if(!paused){
+        collisionCheck(obstacles[0]);
+        checkRaspberryScore();
+    }
+}
+
+function collisionCheck(o){
+    if(o.collides(raspberry)){
+        die();
+        setupGame();
+    }
+}
+
+function die(){
+    if(localStorage.getItem("frontend-ready") == "false")
+        return;
+    
+    ready = false;
+    hasDied = true;
+    playTime = Date.now() - startTime;
+    exportToLocalStorage();
+    setTimeout(function(){
+        return ready = true;
+    }, 1000);
+}
+
+function exportToLocalStorage(){
+    localStorage.setItem("game-playTime", String(playTime));
+    localStorage.setItem("game-score", String(score));
+    localStorage.setItem("game-isRunning", String(!hasDied));
+}
+
+function displayScore(){
+    push();
+    fill(195, 33, 34);
+    text(score, 0, height / 8, width, height);
+    pop();
+}
+
+function update(){
+    if(!paused){
+        raspberry.update();
+    }
+    obstacles.forEach(function(obstacle){
+        if(!paused){
+            obstacle.update();
+            checkObstacleReset(obstacle);
+        }
+    });
+}
+
+function checkObstacleReset(obstacle){
+    if(obstacle.position.x < -obstacleWidth){
+        obstacle.resetPosition();
+        obstacles.shift();
+        obstacles.push(obstacle);
+        hasAlreadyScored = false;
+    }
+}
+
+function checkRaspberryScore(){
+    if((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
+        && !hasAlreadyScored){
+        score += 1;
+        hasAlreadyScored = true;
+    }
+}
+
+function resetScore(){
+    if(!hasDied || localStorage.getItem("frontend-ready") == "false") 
+        return;
+
+    hasDied = false;
+    score = 0;
+    hasAlreadyScored = false;
+    startTime = Date.now();
+    exportToLocalStorage();
+}
+
+function keyPressed(){
+    if(!ready)
+        return;
+    if(BOOST_KEYS.includes(key.toLowerCase())){
+        resetScore();
+        raspberry.boost();
+    }
+    if(key == "Escape"){
+        paused = !paused;
+    } else if(paused){
+        paused = false;
+    }
+}
+
+var Entity = (function(){
+    function Entity(position, width, height, fill){
+        this.position = position;
+        this.width = width;
+        this.height = height;
+        this.fill = fill;
+        this._showHitbox = false;
+    }
+
+    Object.defineProperty(Entity.prototype, "position", {
+        get: function(){
+            return this._position;
+        },
+        set: function(value){
+            this._position = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Entity.prototype, "width", {
+        get: function(){
+            return this._width;
+        },
+        set: function(value){
+            this._width = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Entity.prototype, "height", {
+        get: function(){
+            return this._height;
+        },
+        set: function(value){
+            this._height = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Entity.prototype, "showHitbox", {
+        get: function(){
+            return this._showHitbox;
+        },
+        set: function(value){
+            this._showHitbox = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Entity.prototype.draw = function(){
+        push();
+        fill(this.fill);
+        rect(this.position.x, this.position.y, this.width, this.height);
+        pop();
+    };
+    return Entity;
+}());
+var Obstacle = (function(_super){
+    __extends(Obstacle, _super);
+
+    function Obstacle(position, obstacleWidth, obstacleHeight, image){
+        var _this = _super.call(this, position, obstacleWidth, obstacleHeight, 0) || this;
+        _this.speed = 3;
+        _this.padding = height / 6.6666666666666666;
+        _this.createPipes(position, obstacleHeight, obstacleWidth, image);
+        return _this;
+    }
+
+    Object.defineProperty(Obstacle, "startX", {
+        set: function(value){
+            this._startX = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Obstacle, "distanceBetweenPipes", {
+        set: function(value){
+            this._distanceBetweenPipes = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Obstacle.prototype.createPipes = function(position, obstacleHeight, obstacleWidth, pipeImage){
+        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
+        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
+    };
+    Obstacle.prototype.resetPosition = function(){
+        this.randomizeHeight();
+        this.pipeBottom.position.x = Obstacle._startX;
+        this.pipeTop.position.x = Obstacle._startX;
+    };
+    Obstacle.prototype.randomizeHeight = function(){
+        this.pipeTop.height = this.randomRange(this.padding, height - this.padding - Obstacle._distanceBetweenPipes);
+        this.pipeBottom.position.y = this.pipeTop.height + Obstacle._distanceBetweenPipes;
+        this.pipeBottom.height = height - this.pipeTop.height - this.padding;
+    };
+    Obstacle.prototype.randomRange = function(min, max){
+        return Math.random() * (max - min) + min;
+    };
+    Obstacle.prototype.update = function(){
+        this.pipeTop.move(this.speed);
+        this.pipeBottom.move(this.speed);
+        this.position.x = this.pipeTop.position.x;
+    };
+    Obstacle.prototype.draw = function(){
+        this.pipeTop.draw();
+        this.pipeBottom.draw();
+    };
+    Obstacle.prototype.collides = function(o){
+        return this.pipeTop.collides(o) || this.pipeBottom.collides(o);
+    };
+    return Obstacle;
+}(Entity));
+var Pipe = (function(_super){
+    __extends(Pipe, _super);
+
+    function Pipe(positionX, width, height, image){
+        var _this = _super.call(this, new Position(positionX, 0), width, height, 0) || this;
+        _this.image = image;
+        return _this;
+    }
+
+    Pipe.prototype.update = function(){
+    };
+    Pipe.prototype.draw = function(){
+        push();
+        noFill();
+        var imageAspectRatio = this.image.height / this.image.width;
+        var computedImageHeight = imageAspectRatio * this.width;
+        this.drawImage(computedImageHeight, imageAspectRatio);
+        rect(this.position.x, this.position.y, this.width, this.height);
+        pop();
+    };
+    Pipe.prototype.drawImage = function(computedImageHeight, imageAspectRatio){
+        if(this.height > computedImageHeight){
+            var maxImageYPos = Math.ceil(this.height / computedImageHeight) * computedImageHeight;
+            for(var imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight){
+                if(imageYPosition + computedImageHeight >= maxImageYPos){
+                    this.cropLastImage(imageYPosition, computedImageHeight, imageAspectRatio);
+                    break;
+                }
+                image(this.image, this.position.x, this.position.y + imageYPosition, this.width, computedImageHeight);
+            }
+        } else{
+            image(this.image, this.position.x, this.position.y, this.width, this.height);
+        }
+    };
+    Pipe.prototype.cropLastImage = function(imageYPosition, computedImageHeight, imageAspectRatio){
+        var amountOfImages = Math.floor(imageYPosition / computedImageHeight);
+        var heightToEdge = this.height - (amountOfImages * computedImageHeight);
+        var croppedImage = this.image.get(0, 0, this.image.width, this.image.height - (heightToEdge * imageAspectRatio));
+        image(croppedImage, this.position.x, this.position.y + imageYPosition, this.width, heightToEdge);
+    };
+    Pipe.prototype.move = function(speed){
+        this.position.x -= speed;
+    };
+    Pipe.prototype.collides = function(o){
+        return this.position.x < (o.position.x + o.width) &&
+            (this.position.x + this.width) > o.position.x &&
+            this.position.y < (o.position.y + o.height) &&
+            (this.position.y + this.height) > o.position.y;
+    };
+    return Pipe;
+}(Entity));
+var Position = (function(){
+    function Position(x, y){
+        this._x = x;
+        this._y = y;
+    }
+
+    Object.defineProperty(Position.prototype, "x", {
+        get: function(){
+            return this._x;
+        },
+        set: function(value){
+            this._x = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Position.prototype, "y", {
+        get: function(){
+            return this._y;
+        },
+        set: function(value){
+            this._y = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Position;
+}());
+var Raspberry = (function(_super){
+    __extends(Raspberry, _super);
+
+    function Raspberry(image){
+        var _this = this;
+        Raspberry.position = new Position(width / 6, height / 2);
+        Raspberry.height = height / 14.2857142857142857;
+        Raspberry.width = width / 11.1111111111111111;
+        _this = _super.call(this, Raspberry.position, Raspberry.width, Raspberry.height, Raspberry.FILL) || this;
+        _this.lift = -15;
+        _this.gravity = 0.45;
+        _this._velocity = 0;
+        Raspberry.bottomFloorOffset = (height / 5) - (height / 15 / 2);
+        _this.image = image;
+        return _this;
+    }
+
+    Object.defineProperty(Raspberry.prototype, "velocity", {
+        get: function(){
+            return this._velocity;
+        },
+        set: function(value){
+            this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Raspberry.prototype, "image", {
+        get: function(){
+            return this._image;
+        },
+        set: function(path){
+            this._image = loadImage(path);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Raspberry.prototype.update = function(){
+        this.applyGravity();
+        this.forceBoundaries();
+    };
+    Raspberry.prototype.applyGravity = function(){
+        this.velocity += this.gravity;
+        this.position.y += this.velocity;
+    };
+    Raspberry.prototype.forceBoundaries = function(){
+        this.boundaryTop();
+        this.boundaryBottom();
+    };
+    Raspberry.prototype.boundaryTop = function(){
+        if(this.position.y < 0){
+            this.position.y = 0;
+            this.velocity = 0;
+        }
+    };
+    Raspberry.prototype.boundaryBottom = function(){
+        if(this.position.y + this.height + Raspberry.bottomFloorOffset > height){
+            this.position.y = height - this.height - Raspberry.bottomFloorOffset;
+            this.velocity = 0;
+        }
+    };
+    Raspberry.prototype.boost = function(){
+        this.velocity += this.lift;
+    };
+    Raspberry.prototype.draw = function(){
+        push();
+        noFill();
+        this.setPose();
+        this.drawObject();
+        pop();
+    };
+    Raspberry.prototype.drawObject = function(){
+        this.drawHitBox();
+        this.drawRocket();
+    };
+    Raspberry.prototype.drawRocket = function(){
+        image(this.image, 0, 0, this.width, this.height);
+        rect(0, 0, this.width, this.height);
+    };
+    Raspberry.prototype.drawHitBox = function(){
+        if(!this.showHitbox){
+            noStroke();
+        }
+    };
+    Raspberry.prototype.setPose = function(){
+        translate(this.position.x, this.position.y);
+        rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
+    };
+    Raspberry.maxVelocity = 75;
+    Raspberry.FILL = 0;
+    return Raspberry;
+}(Entity));
+//# sourceMappingURL=build.js.map

frontend/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
+    <title><%= htmlWebpackPlugin.options.title %></title>
+      <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
+      <script src="./game.js"></script>
+  </head>
+  <body style="background-color: beige;">
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div class="container">
+      <div class="row">
+        <div id="app" class="offset-1 col-10"></div>
+      </div>
+    </div>
+  </body>
+
+  <script>
+    window.addEventListener('keydown', function(e) {
+  if(e.keyCode === 32 && e.target === document.body) {
+    e.preventDefault();
+  }
+});
+  </script>
+</html>

frontend/src/App.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="container everything">
+    <div class="row">
+      <Header></Header>
+    </div>
+    <div class="row">
+      <UserScores :userScores="userScores"></UserScores>
+    </div>
+    <div class="row">
+      <Game :class="user ? '' : 'hidden'" :user-id="this.user?.id"
+            @gameFinished="this.updateUserScores()" ref="game">
+      </Game>
+      <Login v-if="!user" @userChange="(event) => {this.updateUser(event);}">
+      </Login>
+      <div v-if="user" class="logout-wrapper offset-10 col-2">
+        <RRButton @click="logOut()" text="Logout"></RRButton>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-4">
+        <Leaderboard type="highscore"></Leaderboard>
+      </div>
+      <div class="offset-4 col-4">
+        <Leaderboard type="totalplaytime"></Leaderboard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import Leaderboard from './components/Leaderboard.vue';
+import UserScores from './components/UserScores.vue';
+import Game from './components/Game.vue';
+import Header from './components/Header.vue';
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
+import Login from "@/components/Login.vue";
+import {Rest} from "@/model/Rest";
+import {User} from "@/model/User";
+import RRButton from "@/components/RRButton.vue";
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    RRButton,
+    Login,
+    UserScores,
+    Leaderboard,
+    Game,
+    Header,
+  },
+  data() {
+    return {
+      userScores: {},
+      userId: -1,
+      user: null as User | null,
+      leaderboardEvent: new Event('reloadLeaderboard')
+    }
+  },
+  created() {
+    localStorage.setItem("frontend-ready", "false");
+  },
+
+  methods: {
+    async fetchFromApi(path: string, method: "GET" | "POST") {
+      let res: Response = await fetch(Rest.URL + path, {method: method,});
+      return await res.json();
+    },
+    async fetchUserScores() {
+      if (this.userId == -1) return;
+      return await this.fetchFromApi(`/user/${this.userId}/scores`, "GET");
+    },
+    async updateUserScores() {
+      this.userScores = await this.fetchUserScores();
+    },
+    async updateUser(user: User) {
+      if (user) {
+        this.user = user;
+        this.userId = user.id ?? -1;
+        await this.updateUserScores();
+      }
+      window.dispatchEvent(this.leaderboardEvent);
+    },
+    logOut(){
+      this.user = null;
+      this.userId = -1;
+      this.userScores = {};
+      localStorage.setItem('frontend-ready', 'false');
+    }
+  },
+});
+</script>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+* {
+  font-family: 'Press Start 2P', serif;
+}
+
+.row {
+  margin-top: 2em;
+}
+
+.everything {
+  margin-bottom: 4em;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.logout-wrapper {
+  display: flex;
+  justify-content: right;
+}
+</style>

frontend/src/components/Game.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="wrapper">
+    <main></main>
+  </div>
+</template>
+
+<script>
+import App from "@/App.vue";
+import {Rest} from "@/model/Rest";
+
+export default {
+  name: "Game",
+  props: {
+    userId: null
+  },
+  emits: ['gameFinished'],
+  created() {
+    window.addEventListener('itemInserted', event => this.localStorageHandler(event), false);
+  },
+  methods: {
+    localStorageHandler(event) {
+      if (event.key !== 'game-isRunning') return;
+
+      if (event.value === 'false') { //means game is over
+        let playTime = this.msToHMS(Number(localStorage.getItem('game-playTime')));
+        let score = Number(localStorage.getItem('game-score'));
+        this.submitGame(score, playTime);
+      }
+    },
+
+    msToHMS(ms) {
+      // 1- Convert to seconds:
+      let seconds = ms / 1000;
+      // 2- Extract hours:
+      const hours = parseInt(String(seconds / 3600)); // 3,600 seconds in 1 hour
+      seconds = seconds % 3600; // seconds remaining after extracting hours
+      // 3- Extract minutes:
+      const minutes = parseInt(String(seconds / 60)); // 60 seconds in 1 minute
+      // 4- Keep only seconds not extracted to minutes:
+      seconds = seconds % 60;
+      return ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + Math.floor(seconds);
+    },
+
+    async submitGame(score, playTime) {
+      let body = {
+        score: score,
+        playtime: playTime,
+        date: new Date().toISOString().substring(0, 10),
+        userId: this.userId,
+      }
+      let header = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      };
+      await fetch(Rest.URL + '/game/add', {method: 'POST', body: JSON.stringify(body), headers: header});
+      this.$emit('gameFinished');
+    }
+  },
+}
+</script>
+
+<style>
+#p5_loading {
+  display: none;
+}
+</style>

frontend/src/components/Header.vue

@@ -0,0 +1,18 @@
+<template>
+    <h1>Raspberry Rocketeer</h1>
+</template>
+
+<script lang="ts">
+export default {
+    name: "Header",
+    
+}
+</script>
+
+<style scoped>
+    h1 {
+        text-align: center;
+        font-size: 5em;
+    }
+
+</style>

frontend/src/components/Leaderboard.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <h3 class="col-10"><strong>{{ this.title() }}</strong></h3>
+      <div class="col-1">
+        <RRButton @click="prevPage" text="<"></RRButton>
+      </div>
+      <div class="col-1">
+        <RRButton @click="nextPage" text=">"></RRButton>
+      </div>
+    </div>
+    <div class="row" v-if="this.page.length > 0" v-for="entry in this.page" :key="entry.rank">
+      <LeaderboardEntry :entry="entry"></LeaderboardEntry>
+    </div>
+    <div class="row" v-else>
+      Loading...
+    </div>
+  </div>
+</template>
+
+<script>
+
+import LeaderboardEntry from "@/components/LeaderboardEntry.vue";
+import RRButton from "@/components/RRButton.vue";
+import {Rest} from "@/model/Rest";
+
+export default {
+  name: "Leaderboard",
+  components: {
+    LeaderboardEntry,
+    RRButton,
+  },
+  data() {
+    return {
+      pageNumber: 0,
+      entriesPerPage: 5,
+      page: []
+    }
+  },
+  props: {
+    type: "totalplaytime" | "highscore",
+  },
+  created() {
+    this.updatePage();
+    window.addEventListener('itemInserted', event => this.onItemInserted(event), false);
+  },
+  methods: {
+    async fetchPage() {
+      let res = await fetch(`${Rest.URL}/leaderboard/${this.type}?pagination=true&entriesPerPage=${this.entriesPerPage}&page=${this.pageNumber}`, {method: "GET"});
+      return await res.json();
+    },
+    title() {
+      return this.type === "totalplaytime" ? "Total Playtime" : "Highscore";
+    },
+    async nextPage() {
+      if (this.page.length !== this.entriesPerPage) return;
+
+      this.pageNumber++;
+      await this.updatePage();
+      if (this.page.length === 0) {
+        this.prevPage();
+      }
+    },
+    prevPage() {
+      if (this.pageNumber <= 0) return;
+
+      this.pageNumber--;
+      this.updatePage();
+    },
+    async updatePage() {
+      let tempPage = await this.fetchPage();
+      for (let i = 0; i < this.entriesPerPage; i++) {
+        this.page.pop();
+      }
+      for (const entry of tempPage) {
+        this.page.push(entry);
+      }
+    },
+    onItemInserted(event) {
+      if (event.key === 'game-isRunning' && event.value === 'false') {
+        this.updatePage();
+      }
+    }
+  }
+}
+</script>

frontend/src/components/LeaderboardEntry.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="col-1 text-right">{{this.entry.rank}}</div>
+  <span class="col offset-1 text-left username">{{this.entry.username}}</span>
+  <div class="col-2 text-right">{{this.entry.score}}</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import {Leaderboard, LeaderboardEntry} from "@/model/Leaderboard";
+
+export default defineComponent({
+  name: "LeaderboardEntry",
+  props: {
+    entry: {
+      type: Object as PropType<LeaderboardEntry<string>>,
+      default: () => ({}),
+    },
+  },
+})
+</script>
+
+<style scoped>
+* {
+  font-size: 1.5em;
+}
+.username {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>

frontend/src/components/Login.vue

@@ -0,0 +1,65 @@
+<template>
+  <h2>Enter a username</h2>
+  <div class="form-floating mb-3">
+    <input class="form-control" id="floatingInput" placeholder="example name" v-model="username">
+    <label for="floatingInput">Username</label>
+    <RRButton @click="setUser()" text="Confirm"></RRButton>
+  </div>
+</template>
+
+<script>
+import {User} from "@/model/User";
+import RRButton from "@/components/RRButton.vue";
+
+export default {
+  name: "Login",
+  components: {
+    RRButton
+  },
+  data() {
+    return {
+      username: '',
+    }
+  },
+  emits: ['userChange'],
+  methods: {
+    async setUser() {
+      if (this.username === '') return;
+
+      let user;
+      user = await User.getByName(this.username);
+      if(user.errors){
+        user = await User.create(this.username);
+      }
+
+      if(user.errors){
+        console.error("Something when wrong when logging in, please contact admin!")
+        return;
+      }
+
+      if (user) {
+        this.$emit('userChange', user);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+input {
+  border: 3px solid black;
+  border-radius: 0;
+  background-color: beige;
+  margin-bottom: 5px;
+}
+
+input:focus {
+  background: beige;
+  border-color: rgba(184,134,11, 0.8);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(184,134,11, 0.6);
+}
+
+label {
+  margin-left: 10px;
+}
+</style>

frontend/src/components/RRButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <button>{{ text }}</button>
+</template>
+
+<script lang="ts">
+export default {
+  name: "RRButton",
+  props: {
+    text: {
+      type: String
+    },
+  }
+}
+</script>
+
+<style scoped>
+button {
+  border: 3px solid black;
+  background-color: beige;
+  width: auto;
+}
+</style>

frontend/src/components/UserScores.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col text-center" >Highscore</div>
+            <div class="col text-center" >Total Score</div>
+            <div class="col text-center" >Total Playtime</div>
+            <div class="col text-center" >Average Score</div>
+            <div class="col text-center" >Games Played</div>
+        </div>
+        <div class="row">
+            <div class="col text-center" >{{ this.userScores.highscore }}</div>
+            <div class="col text-center" >{{ this.userScores.totalScore }}</div>
+            <div class="col text-center" >{{ this.userScores.totalPlaytime }}</div>
+            <div class="col text-center" >{{ this.userScores.averageScore  }}</div>
+            <div class="col text-center" >{{ this.userScores.gamesPlayed }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        userScores: {
+            type: Object
+        }
+    },
+}
+</script>
+
+<style scoped>
+* {
+    font-size: 1.2em;
+}
+</style>

frontend/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

frontend/src/model/Game.ts

@@ -0,0 +1,7 @@
+export interface Game {
+    id?: number,
+    score: number,
+    playtime: string,
+    date: Date,
+    userId: number,
+}

frontend/src/model/Leaderboard.ts

@@ -0,0 +1,10 @@
+export type Leaderboard<T> = LeaderboardEntry<T>[];
+
+export type HighscoreLeaderboard = Leaderboard<number>;
+export type TimeLeaderboard = Leaderboard<string>;
+
+export interface LeaderboardEntry<T> {
+    username: number,
+    rank: number,
+    score: T,
+}

frontend/src/model/Rest.ts

@@ -0,0 +1,3 @@
+export class Rest {
+    static readonly URL = 'http://localhost:3000';
+}

frontend/src/model/Time.ts

@@ -0,0 +1,6 @@
+export interface Time {
+    seconds: number,
+    minutes?: number,
+    hours?: number,
+    days?: number,
+}

frontend/src/model/User.ts

@@ -0,0 +1,34 @@
+import {Rest} from "@/model/Rest";
+
+export class User {
+    id?: number;
+    name?: string;
+
+
+    constructor(id: number, name: string) {
+        this.name = name;
+    }
+
+    static async getByName(name: string): Promise<User> {
+        let res: Response = await fetch(Rest.URL + '/user/' + name, {method: 'GET'});
+
+        return await res.json();
+    }
+
+    static async create(name: string): Promise<User> {
+        let body = {
+            name: name
+        };
+        let header = {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        };
+
+        let res: Response = await fetch( Rest.URL + '/user/register', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: header,
+        });
+        return await res.json();
+    }
+}

frontend/src/model/UserScores.ts

@@ -0,0 +1,10 @@
+import {Time} from "./Time.js";
+
+export interface UserScores {
+    userId: number,
+    highscore: number,
+    totalScore: number,
+    totalPlaytime: Time,
+    averageScore: number,
+    gamesPlayed: number,
+}

frontend/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/tsconfig.json

@@ -1,17 +1,41 @@
 {
   "compilerOptions": {
-    "noImplicitAny": true,
-    "outFile": "./build/build.js",
-    "preserveConstEnums": true,
-    "removeComments": true,
-    "rootDir": ".",
-    "sourceMap": true,
     "target": "es5",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
     "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*",
+      ]
+    },
     "lib": [
+      "esnext",
       "dom",
-      "es5",
+      "dom.iterable",
       "scripthost"
     ]
-  }
+  },
-}
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}