diff --git a/src/Constants.js b/src/Constants.js index 92f1a04..aa1c6c9 100644 --- a/src/Constants.js +++ b/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 -}; \ No newline at end of file +}; + +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 +} \ No newline at end of file diff --git a/src/Core/Canvas.js b/src/Core/Canvas.js index 18906fe..1b52c6a 100644 --- a/src/Core/Canvas.js +++ b/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); + } } \ No newline at end of file diff --git a/src/Core/Game.js b/src/Core/Game.js index 081ff2a..902570d 100644 --- a/src/Core/Game.js +++ b/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() { diff --git a/src/Core/UiManager.js b/src/Core/UiManager.js new file mode 100644 index 0000000..1f314ab --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/Test/UiManager.test.js b/src/Test/UiManager.test.js new file mode 100644 index 0000000..d4f73f8 --- /dev/null +++ b/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(); + }); +}); \ No newline at end of file diff --git a/src/Ui/UiText.js b/src/Ui/UiText.js new file mode 100644 index 0000000..0d5a586 --- /dev/null +++ b/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; + } +} \ No newline at end of file