Removed unused images & Pipe image cropping now working

- removed unused images
- image cropping is now working (good enough)
- added htl-steyr-front.jpg as a background
- changed score font color

frontend/game.ts

@@ -1,5 +1,5 @@
-const PIPE_IMAGE_PATH: string = "resources/seesORsoos_sad_no-bg.png";
+const PIPE_IMAGE_PATH: string = "resources/dell-pc-min-min-small.png";
-const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png";
+const BACKGROUND_IMAGE_PATH: string = "resources/htl-steyr-front.jpg";
 const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png";
 const FLOOR_IMAGE_PATH: string = "resources/table-min-min.png";
 const FONT_PATH: string = "resources/PressStart2P-Regular.ttf";
@@ -85,7 +85,8 @@ function setupObstacles() {
 function instantiateObstacles(number: number) {
     for (let i = 0; i < number; i++) {
         obstacles.push(
-            new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage));
+            new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage)
+        );
     }
 }
 
@@ -180,7 +181,7 @@ function die() {
  */
 function displayScore() {
     push();
-    fill(200, 100, 60);
+    fill(195, 33, 34);
     text(score, 0, height / 10, width, height);
     pop();
 }

frontend/model/Pipe.ts

@@ -33,20 +33,47 @@ class Pipe extends Entity implements Collidable {
         push();
         noFill();
 
-        if (this.height > this.image.height) {
+        let imageAspectRatio = this.image.height / this.image.width;
-            let maxImageYPos = Math.ceil(this.height / this.image.height) * this.image.height;
+        let computedImageHeight = imageAspectRatio * this.width;
-            for (let imageYPos = 0; imageYPos < maxImageYPos; imageYPos += this.image.height) {
+        this.drawImage(computedImageHeight, imageAspectRatio); 
-                console.log("maximageypos: " + maxImageYPos);
+
-                console.log("image height: " + this.image.height);
+        rect(this.position.x, this.position.y, this.width, this.height);
-                console.log("imageypos: " + imageYPos);
+        pop();
-                image(this.image, this.position.x, this.position.y + imageYPos, this.width, this.image.height);
+    }
+
+    /**
+     * 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);
         }
+    }
 
-        rect(this.position.x, this.position.y, this.width, this.height);
+    /**
-        pop();
+     * 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);
     }
 
     /**