added images

pipes and background now have images

frontend/models/Obstacle.ts

@@ -1,32 +1,38 @@
 class Obstacle extends Entity {
-    private pipeTop: Entity;
-    private pipeBottom: Entity;
+    private pipeTop: Pipe;
+    private pipeBottom: Pipe;
     private distanceBetweenPipes: number;
     private padding: number = 300;
     private speed: number = 8;
+
     private static startX: number;
 
     /**
      * Constructs the Obstacle using the top and bottom Pipe
      * (fill is not used here)
-     * @param pipeTop
-     * @param pipeBottom
      */
-    constructor(pipeTop: Entity, pipeBottom: Entity) {
+    constructor(pipeTop: Pipe, pipeBottom: Pipe, pipeImagePath: string) {
         super(pipeTop.position, pipeTop.width, pipeBottom.height, 0);
         this.pipeTop = pipeTop;
         this.pipeBottom = pipeBottom;
+        this.pipeTop.image = pipeImagePath;
+        this.pipeBottom.image = pipeImagePath;
 
         this.distanceBetweenPipes = height / 4;
         Obstacle.startX = width;
     }
 
-    public resetPosition(): void {
-        this.pipeBottom.position.y = this.distanceBetweenPipes + this.randomRange(0, height - this.padding - 1.2 * this.distanceBetweenPipes);
-        this.pipeBottom.position.x = Obstacle.startX;
+    public resetPosition(resetX: boolean): void {
+        this.pipeBottom.position.y =
+            this.distanceBetweenPipes + this.randomRange(0, height - this.padding - 1.2 * this.distanceBetweenPipes);
 
-        this.pipeTop.position.y = this.pipeBottom.position.y - this.distanceBetweenPipes - this.pipeTop.height;
-        this.pipeTop.position.x = Obstacle.startX;
+        this.pipeTop.position.y =
+            this.pipeBottom.position.y - this.distanceBetweenPipes - this.pipeTop.height;
+
+        if(resetX){
+            this.pipeBottom.position.x = Obstacle.startX;
+            this.pipeTop.position.x = Obstacle.startX;
+        }
     }
 
     private randomRange(min: number, max: number): number {
@@ -39,18 +45,8 @@ class Obstacle extends Entity {
     }
 
     public draw(): void {
-        fill(10, 200, 100); //TODO do not make static
-        rect(
-            this.pipeTop.position.x,
-            this.pipeTop.position.y,
-            this.pipeTop.width,
-            this.pipeTop.height
-        );
-        rect(
-            this.pipeBottom.position.x,
-            this.pipeBottom.position.y,
-            this.pipeBottom.width,
-            this.pipeBottom.height
-        )
+        noFill();
+        this.pipeTop.draw();
+        this.pipeBottom.draw();
     }
 }

frontend/models/Pipe.ts

@@ -1,8 +1,31 @@
 class Pipe extends Entity {
-    constructor(position: Position, width: number, height: number) {
-        super(position, width, height, 0);
+    private _image: any;
+
+    //region Getter & Setter
+    get image() {
+        return this._image;
     }
 
-    public update(): void {
+    set image(path: string) {
+        this._image = loadImage(path);
+    }
+    //endregion
+
+    constructor(positionX: number, width: number, height: number) {
+        super(new Position(positionX, 0), width, height, 0);
+    }
+
+    public update(): void {}
+
+    public draw(): void {
+        // @ts-ignore
+        image(this.image, this.position.x, this.position.y, this.width, this.height);
+        noFill();
+        rect(
+            this.position.x,
+            this.position.y,
+            this.width,
+            this.height
+        );
     }
 }