Floor & Positioning & small Obstacle rework

- added images for pipes and floor
- floor is now working
- raspberry is falling on floor correctly
- images are now getting preloaded
- font ia getting preloaded
- obstacle and pipe constructor now take p5.Image instead of a string with the path
- removed everything to do with drawing background posters

- started working on pipe tiling instead of streching

frontend/model/Obstacle.ts

@@ -23,11 +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 pipeImagePath path to the image to be used
+     * @param image the image to be used
      */
-    constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) {
+    constructor(position: Position, obstacleWidth: number, obstacleHeight: number, image: p5.Image) {
         super(position, obstacleWidth, obstacleHeight, 0);
-        this.createPipes(position, obstacleHeight, obstacleWidth, pipeImagePath);
+        this.createPipes(position, obstacleHeight, obstacleWidth, image);
     }
 
     /**
@@ -35,12 +35,12 @@ class Obstacle extends Entity implements Collidable {
      * @param position
      * @param obstacleHeight
      * @param obstacleWidth
-     * @param pipeImagePath
+     * @param pipeImage
      * @private
      */
-    private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImagePath: string) {
-        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
-        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
+    private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImage: p5.Image) {
+        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
+        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
     }
 
     /**

frontend/model/Pipe.ts

@@ -6,33 +6,16 @@ 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
+    private readonly image: p5.Image;
 
     /**
      * Constructs the pipe.
      * @param positionX starting x-Position
      * @param width pipe width
      * @param height pipe height
-     * @param image path to image.
+     * @param image image object
      */
-    constructor(positionX: number, width: number, height: number, image: string) {
+    constructor(positionX: number, width: number, height: number, image: p5.Image) {
         super(new Position(positionX, 0), width, height, 0);
         this.image = image;
     }
@@ -40,7 +23,8 @@ class Pipe extends Entity implements Collidable {
     /**
      * YAGNI.
      */
-    public update(): void {}
+    public update(): void {
+    }
 
     /**
      * Draws the pipe.
@@ -48,7 +32,19 @@ class Pipe extends Entity implements Collidable {
     public draw(): void {
         push();
         noFill();
-        image(this.image, this.position.x, this.position.y, this.width, this.height);
+
+        if (this.height > this.image.height) {
+            let maxImageYPos = Math.ceil(this.height / this.image.height) * this.image.height;
+            for (let imageYPos = 0; imageYPos < maxImageYPos; imageYPos += this.image.height) {
+                console.log("maximageypos: " + maxImageYPos);
+                console.log("image height: " + this.image.height);
+                console.log("imageypos: " + imageYPos);
+                image(this.image, this.position.x, this.position.y + imageYPos, this.width, this.image.height);
+            }
+        } else {
+            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();
     }

frontend/model/Raspberry.ts

@@ -56,6 +56,12 @@ class Raspberry extends Entity {
      */
     private static readonly FILL: number = 0;
 
+    /**
+     * Offset off of the floor so that the raspberry looks like it's falling on the floor
+     * @private
+     */
+    private static BOTTOM_FLOOR_OFFSET: number;
+
     //region Getter & Setter
 
     /**
@@ -97,6 +103,7 @@ class Raspberry extends Entity {
     constructor(image: string) {
         Raspberry.position = new Position(width / 6, height / 2);
         super(Raspberry.position, Raspberry.WIDTH, Raspberry.HEIGHT, Raspberry.FILL);
+        Raspberry.BOTTOM_FLOOR_OFFSET = (height / 5) - (height / 15 / 2);
         this.image = image;
     }
 
@@ -117,7 +124,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 {
@@ -141,8 +148,8 @@ class Raspberry extends Entity {
      * @private
      */
     private boundaryBottom(): void {
-        if (this.position.y + this.height > height) {
-            this.position.y = height - this.height;
+        if (this.position.y + this.height + Raspberry.BOTTOM_FLOOR_OFFSET > height) {
+            this.position.y = height - this.height - Raspberry.BOTTOM_FLOOR_OFFSET;
             this.velocity = 0;
         }
     }