comments, comments, comments, refactor, refactor, refactor

frontend/model/Collidable.ts

@@ -1,3 +1,6 @@
+/**
+ * Collide-able objects.
+ */
 interface Collidable {
     /**
      * Determines when two entities collide

frontend/model/Entity.ts

@@ -1,46 +1,102 @@
+/**
+ * General rectangular entities.
+ */
 abstract class Entity {
+    /**
+     * Position.
+     * @private
+     */
     private _position: Position;
+
+    /**
+     * Width.
+     * @private
+     */
     private _width: number;
+
+    /**
+     * Height.
+     * @private
+     */
     private _height: number;
+
+    /**
+     * Color.
+     * @private
+     */
     private fill: number;
+
+    /**
+     * Whether the hitbox (rectangular surrounding) is shown, or not.
+     * @private
+     */
     private _showHitbox: boolean;
 
     //region Getter & Setter
+
+    /**
+     * Get position.
+     */
     get position(): Position {
         return this._position;
     }
 
+    /**
+     * Set position.
+     * @param value
+     */
     set position(value: Position) {
         this._position = value;
     }
 
+    /**
+     * Get width.
+     */
     get width(): number {
         return this._width;
     }
 
+    /**
+     * Set width.
+     * @param value
+     */
     set width(value: number) {
         this._width = value;
     }
 
+    /**
+     * Get height.
+     */
     get height(): number {
         return this._height;
     }
 
+    /**
+     * Set height.
+     * @param value
+     */
     set height(value: number) {
         this._height = value;
     }
 
+    /**
+     * Get the hitbox's visibility.
+     */
     get showHitbox(): boolean {
         return this._showHitbox;
     }
 
+    /**
+     * Set the hitbox's visibility.
+     * @param value
+     */
     set showHitbox(value: boolean) {
         this._showHitbox = value;
     }
     //endregion
 
     /**
-     * Constructs the Entity
+     * Constructs the Entity.
      * @param position starting Position
      * @param width entity width
      * @param height entity height

frontend/model/Obstacle.ts

@@ -1,3 +1,6 @@
+/**
+ * Obstacle of the game. Built from 2 pipes, one at the bottom, one at the top.
+ */
 class Obstacle extends Entity implements Collidable {
     private pipeTop: Pipe;
     private pipeBottom: Pipe;
@@ -16,8 +19,7 @@ class Obstacle extends Entity implements Collidable {
     }
 
     /**
-     * Constructs the Obstacle with the given image
+     * Constructs the Obstacle with the given image.
-     * (fill is not used here)
      * @param position starting position of the obstacle
      * @param obstacleWidth width of the obstacle
      * @param obstacleHeight height of the obstacle
@@ -25,10 +27,20 @@ class Obstacle extends Entity implements Collidable {
      */
     constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) {
         super(position, obstacleWidth, obstacleHeight, 0);
-        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight);
+        this.createPipes(position, obstacleHeight, obstacleWidth, pipeImagePath);
-        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight);
+    }
-        this.pipeTop.image = pipeImagePath;
+
-        this.pipeBottom.image = pipeImagePath;
+    /**
+     * Creates the pipes.
+     * @param position
+     * @param obstacleHeight
+     * @param obstacleWidth
+     * @param pipeImagePath
+     * @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);
     }
 
     /**

frontend/model/Pipe.ts

@@ -1,39 +1,55 @@
+/**
+ * Rectangular obstacle.
+ */
 class Pipe extends Entity implements Collidable {
-    private _image: any;
+    /**
+     * Pipe's image.
+     * @private
+     */
+    private _image: p5.Image;
 
     //region Getter & Setter
-    get image(): any {
+    /**
+     * Gets the image.
+     */
+    get image(): p5.Image {
         return this._image;
     }
 
-    set image(path: string) {
+    /**
+     * Sets the image.
+     * @param path Path to image
+     */
+    set image(path: any) {
         this._image = loadImage(path);
     }
     //endregion
 
     /**
-     * Constructs the pipe
+     * 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) {
+    constructor(positionX: number, width: number, height: number, image: string) {
         super(new Position(positionX, 0), width, height, 0);
+        this.image = image;
     }
 
-    public update(): void {
+    /**
-    }
+     * YAGNI.
+     */
+    public update(): void {}
 
+    /**
+     * Draws the pipe.
+     */
     public draw(): void {
         push();
-        image(this.image, this.position.x, this.position.y, this.width, this.height);
         noFill();
-        rect(
+        image(this.image, this.position.x, this.position.y, this.width, this.height);
-            this.position.x,
+        rect(this.position.x, this.position.y, this.width, this.height);
-            this.position.y,
-            this.width,
-            this.height
-        );
         pop();
     }
 

frontend/model/Position.ts

@@ -1,27 +1,54 @@
+/**
+ * 2D Point.
+ */
 class Position {
+    /**
+     * X coordinate.
+     * @private
+     */
     private _x: number;
+
+    /**
+     * Y coordinate.
+     * @private
+     */
     private _y: number;
 
     //region Getter & Setter
+
+    /**
+     * Get x.
+     */
     get x(): number {
         return this._x;
     }
 
+    /**
+     * Set x.
+     * @param value
+     */
     set x(value: number) {
         this._x = value;
     }
 
+    /**
+     * Get y.
+     */
     get y(): number {
         return this._y;
     }
 
+    /**
+     * Set y.
+     * @param value
+     */
     set y(value: number) {
         this._y = value;
     }
     //endregion
 
     /**
-     * Constructs the position
+     * Constructs the position.
      * @param x x-Position
      * @param y y-Position
      */

frontend/model/Raspberry.ts

@@ -92,6 +92,7 @@ class Raspberry extends Entity {
 
     /**
      * Constructs the Raspberry with fixed sizes.
+     * @param image Path to image
      */
     constructor(image: string) {
         Raspberry.position = new Position(width / 6, height / 2);
@@ -159,13 +160,43 @@ class Raspberry extends Entity {
     public draw(): void {
         push();
         noFill();
-        translate(this.position.x, this.position.y);
+        this.setPose();
-        rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
+        this.drawObject();
+        pop();
+    }
+
+    /**
+     * Draws the rocket.
+     * @private
+     */
+    private drawObject() {
+        this.drawHitBox();
+        this.drawRocket();
+    }
+
+    /**
+     * Handles the drawing of the object.
+     */
+    private drawRocket() {
         image(this.image, 0, 0, this.width, this.height);
+        rect(0, 0, this.width, this.height);
+    }
+
+    /**
+     * If enabled, draws the hitbox.
+     */
+    private drawHitBox() {
         if (!this.showHitbox) {
             noStroke();
         }
-        rect(0, 0, this.width, this.height);
+    }
-        pop();
+
+    /**
+     * Rotation and position of the rocket.
+     * @private
+     */
+    private setPose() {
+        translate(this.position.x, this.position.y);
+        rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
     }
 }