From 8b86437e06485a4f53d860981574b7470802b1da Mon Sep 17 00:00:00 2001 From: s-prechtl Date: Tue, 10 Jan 2023 22:42:41 +0100 Subject: [PATCH] comments, comments, comments, refactor, refactor, refactor --- frontend/model/Collidable.ts | 3 ++ frontend/model/Entity.ts | 58 +++++++++++++++++++++++++++++++++++- frontend/model/Obstacle.ts | 24 +++++++++++---- frontend/model/Pipe.ts | 46 ++++++++++++++++++---------- frontend/model/Position.ts | 29 +++++++++++++++++- frontend/model/Raspberry.ts | 39 +++++++++++++++++++++--- 6 files changed, 172 insertions(+), 27 deletions(-) diff --git a/frontend/model/Collidable.ts b/frontend/model/Collidable.ts index 46f46d9..1811384 100644 --- a/frontend/model/Collidable.ts +++ b/frontend/model/Collidable.ts @@ -1,3 +1,6 @@ +/** + * Collide-able objects. + */ interface Collidable { /** * Determines when two entities collide diff --git a/frontend/model/Entity.ts b/frontend/model/Entity.ts index 07d8c95..5061443 100644 --- a/frontend/model/Entity.ts +++ b/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 diff --git a/frontend/model/Obstacle.ts b/frontend/model/Obstacle.ts index 9a64306..01d165d 100644 --- a/frontend/model/Obstacle.ts +++ b/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 - * (fill is not used here) + * Constructs the Obstacle with the given image. * @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.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight); - this.pipeTop.image = pipeImagePath; - this.pipeBottom.image = pipeImagePath; + this.createPipes(position, obstacleHeight, obstacleWidth, 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); } /** diff --git a/frontend/model/Pipe.ts b/frontend/model/Pipe.ts index d0c3652..016f3a8 100644 --- a/frontend/model/Pipe.ts +++ b/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 - * @param positionX starting x-Position + * 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( - this.position.x, - this.position.y, - this.width, - this.height - ); + 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(); } diff --git a/frontend/model/Position.ts b/frontend/model/Position.ts index 58b58ae..2479589 100644 --- a/frontend/model/Position.ts +++ b/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 */ diff --git a/frontend/model/Raspberry.ts b/frontend/model/Raspberry.ts index e5576db..c42840c 100644 --- a/frontend/model/Raspberry.ts +++ b/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); - rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity)); + this.setPose(); + 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)); } } \ No newline at end of file