feat(gameover): game over text

src/Constants.js

@@ -37,7 +37,7 @@ export const SKIER_STARTING_SPEED = 10;
 export const SKIER_DIAGONAL_FACTOR = 1.1;
 
 export const RHINO_STARTING_SPEED = 10.5;
-export const RHINO_STARTING_TIMER = 500;
+export const RHINO_STARTING_TIMER = 10;
 export const RHINO_STARTING_DISTANCE = 100;
 
 export const ASSETS = {
@@ -102,4 +102,16 @@ export const GAME_STATE = {
     RUNNING: 0,
     PAUSED: 1,
     OVER: 2
-};
+};
+
+export const TEXT_POSITION = {
+    CENTER: 0,
+    CENTER_TOP: 1,
+    CENTER_BOTTOM: 2,
+    LEFT: 3,
+    LEFT_TOP: 4,
+    LEFT_BOTTOM: 5,
+    RIGHT: 6,
+    RIGHT_TOP: 7,
+    RIGHT_BOTTOM: 8
+}

src/Core/Canvas.js

@@ -1,3 +1,5 @@
+import * as Constants from "../Constants";
+
 export class Canvas {
     x = 0;
     y = 0;
@@ -46,4 +48,27 @@ export class Canvas {
 
         this.ctx.drawImage(image, x, y, width, height);
     }
+
+    drawText(text, font, color, position){
+        let align = 'center';
+        this.ctx.font = font;
+        let fontSize = parseInt(this.ctx.font);
+
+        let posX = (this.width/2);
+        let posY = (this.height/2) - fontSize;
+
+        switch (position) {
+            case Constants.TEXT_POSITION.CENTER:
+
+                break;
+
+            default:
+                break;
+        }
+
+        this.ctx.textAlign = align;
+        this.ctx.fillStyle = color;
+
+        this.ctx.fillText(text, posX, posY);
+    }
 }

src/Core/Game.js

@@ -6,6 +6,7 @@ import { ObstacleManager } from '../Entities/Obstacles/ObstacleManager';
 import { Rect } from './Utils';
 import { gameManager } from './GameManager';
 import { Rhino } from '../Entities/Rhino';
+import { UiManager } from "../Core/UiManager";
 
 export class Game {
     gameWindow = null;
@@ -17,6 +18,7 @@ export class Game {
         this.skier = new Skier(0, 0);
         this.rhino = null;
         this.obstacleManager = new ObstacleManager();
+        this.uiManager = new UiManager(this.canvas);
 
         document.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
@@ -70,6 +72,9 @@ export class Game {
             this.skier.draw(this.canvas, this.assetManager);
             this.obstacleManager.drawObstacles(this.canvas, this.assetManager);
         }
+        else{
+            this.uiManager.drawGameOver();
+        }
     }
 
     calculateGameWindow() {

src/Core/UiManager.js

@@ -0,0 +1,21 @@
+import { UiText } from "../Ui/UiText";
+import * as Constants from '../Constants';
+
+export class UiManager {
+
+    centerMessageFont = '50px Sans-Serif';
+    sideFont = '20px Sans-Serif';
+
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.gameOverText = new UiText('GAME OVER', this.centerMessageFont, '#567567', Constants.TEXT_POSITION.CENTER);
+    }
+
+    drawGameOver(){
+        this.drawText(this.gameOverText);
+    }
+
+    drawText(textObject) {
+        this.canvas.drawText(textObject.text, textObject.font, textObject.color, textObject.position);
+    }
+}

src/Test/UiManager.test.js

@@ -0,0 +1,38 @@
+import { UiManager } from "../Core/UiManager";
+import * as Constants from '../Constants';
+import { UiText } from "../Ui/UiText";
+
+let uiManager;
+
+describe('ui manager tests', () => {
+    let initializeTests = () => {
+        uiManager = new UiManager({});
+    };
+
+    beforeEach(() => {
+        initializeTests();
+    });
+
+    test('should be initialized', () => {
+        expect(uiManager).toBeDefined();
+    });
+
+    test('should draw game over', () => {
+
+        uiManager.drawText = jest.fn();
+
+        uiManager.drawGameOver();
+
+        expect(uiManager.drawText).toBeCalled();
+    });
+
+    test('should draw text', () => {
+        let testText = new UiText('testing', '50px Sans-Serif', '#567567', Constants.TEXT_POSITION.CENTER);
+
+        uiManager.canvas.drawText = jest.fn();
+
+        uiManager.drawText(testText);
+
+        expect(uiManager.canvas.drawText).toBeCalled();
+    });
+});

src/Ui/UiText.js

@@ -0,0 +1,8 @@
+export class UiText {
+    constructor(text, font, color, position) {
+        this.text = text;
+        this.font = font;
+        this.color = color;
+        this.position = position;
+    }
+}