diff --git a/public/index.html b/public/index.html index a9dda6b..dc8015e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,26 +1,34 @@ - - + - + Space commit - Game - - + + - + -
- Github logo - Visit the repo -
-
-

Move backward with A

-

Move forward with D

-

Jump with Space

-
+
+ Github logo + Visit the repo +
+
+

Move backward with A

+

Move forward with D

+

Move Downward with S

+

Jump with Space

+

Resume with Backspace

+
- - + diff --git a/src/Main.ts b/src/Main.ts index 54beede..ce51b92 100644 --- a/src/Main.ts +++ b/src/Main.ts @@ -4,6 +4,7 @@ import MainMenuScene from './scenes/MainMenuScene'; import PreloaderScene from './scenes/PreloaderScene'; import GameScene from './scenes/GameScene'; import GameUIScene from './scenes/GameUIScene'; +import PauseMenuScene from './scenes/PauseMenuScene'; const height = window.outerHeight * 0.6; const zoom = ((height * 100) / 1080) / 100; @@ -19,7 +20,7 @@ const config: Phaser.Types.Core.GameConfig = { debug: false } }, - scene: [PreloaderScene, MainMenuScene, GameScene, GameUIScene], + scene: [PreloaderScene, MainMenuScene, GameScene, GameUIScene, PauseMenuScene], backgroundColor: '#222034', zoom }; diff --git a/src/scenes/GameUIScene.ts b/src/scenes/GameUIScene.ts index e5b5717..2b51222 100644 --- a/src/scenes/GameUIScene.ts +++ b/src/scenes/GameUIScene.ts @@ -44,6 +44,15 @@ export default class GameUIScene extends Phaser.Scene { this.scene.stop('game'); this.scene.start('main-menu'); } + if (event.keyCode === Phaser.Input.Keyboard.KeyCodes.CAPS_LOCK) { + this.scene.pause('game'); + this.scene.launch('pause-menu'); + } + if(event.keyCode === Phaser.Input.Keyboard.KeyCodes.BACKSPACE) { + this.scene.stop('pause-menu'); + this.scene.run('game'); + } + } private addGameOverMenuComponents(fontFamily: string, titleSize: string, smallLabelSize: string): void { diff --git a/src/scenes/PauseMenuScene.ts b/src/scenes/PauseMenuScene.ts new file mode 100644 index 0000000..1746740 --- /dev/null +++ b/src/scenes/PauseMenuScene.ts @@ -0,0 +1,93 @@ +import Phaser from 'phaser'; +import WebFont from 'webfontloader'; +import { Contributor } from '../Contributor'; +import TypeWriterEffectHelper from '../utils/TypeWriterEffectHelper'; + +export default class PauseScene extends Phaser.Scene { + + constructor() { + super('pause-menu'); + } + + create(): void { + /* eslint-disable @typescript-eslint/no-this-alias */ + const scene = this; + + const fontFamily = 'Oxanium'; + WebFont.load({ + google: { + families: [fontFamily] + }, + active: function () { + scene.addComponents(fontFamily, '42px', '38px', '22px'); + }, + inactive: function () { + scene.addComponents('Verdana', '40px', '32px', '20px'); + } + }); + + + this.input.keyboard.on('keyup', this.anyKey, this); + } + + private anyKey(event: { keyCode: number }): void { + if (event.keyCode === Phaser.Input.Keyboard.KeyCodes.ENTER) { + this.scene.start('game'); + } + } + + private addComponents(fontFamily: string, titleSize: string, labelSize: string, smallLabelSize: string): void { + const fontColor = '#ffffff'; + + const title = this.add.image(0, 0, 'logo'); + title.setAlpha(0); + title?.setPosition(this.cameras.main.width / 2, title.height + 50); + + this.tweens.add({ + targets: title, + alpha: 1, + duration: 500, + ease: 'Power2' + }); + + const startText = this.add.text(16, 0, 'Press Backspace to resume', { fontFamily: fontFamily, fontSize: titleSize, color: fontColor }); + startText?.setPosition(this.cameras.main.width / 2 - (startText.width / 2), 200); + + const explorerLabel = this.add.text(16, 0, '', { fontFamily: fontFamily, fontSize: smallLabelSize, color: fontColor }); + explorerLabel.setPosition(400, 400); + + const username = this.add.text(16, 0, '', { fontFamily: fontFamily, fontSize: labelSize, color: fontColor }); + username.setPosition(explorerLabel.x, explorerLabel.y + explorerLabel.height); + + const experimentLabel = this.add.text(16, 0, '', { fontFamily: fontFamily, fontSize: smallLabelSize, color: fontColor }); + experimentLabel.setPosition(username.x, username.y + username.height * 2); + + const simplifiedCommit = Contributor.commit.toUpperCase().substr(Contributor.commit.length - 8, Contributor.commit.length); + const experiment = this.add.text(16, 0, '', { fontFamily: fontFamily, fontSize: labelSize, color: fontColor }); + experiment.setPosition(experimentLabel.x, experimentLabel.y + experimentLabel.height); + + const messageLabel = this.add.text(16, 0, '', { fontFamily: fontFamily, fontSize: smallLabelSize, color: fontColor }); + messageLabel.setPosition(experiment.x, experiment.y + experiment.height * 2); + + const message = this.add.text(16, 0, '', { fontFamily: fontFamily, fontSize: labelSize, color: fontColor, wordWrap: { width: 700, useAdvancedWrap: true } }); + message.setPosition(messageLabel.x, messageLabel.y + messageLabel.height); + message.setMaxLines(4); + + + TypeWriterEffectHelper.startTypewriter(this, [ + { text: 'EXPLORER:', label: explorerLabel }, + { text: Contributor.username.toUpperCase().trim(), label: username }, + { text: 'EXPERIMENT N°:', label: experimentLabel }, + { text: `...${simplifiedCommit}`, label: experiment }, + { text: 'LOG ENTRY:', label: messageLabel }, + { text: Contributor.message, label: message } + ], 50); + + const avatar = this.add.image(200, 550, 'avatar'); + avatar.setScale(0.45, 0.45); + + const avatarMask = this.make.image({ x: 0, y: 0, key: 'menu-avatar-mask', add: false }); + avatar.mask = new Phaser.Display.Masks.BitmapMask(this, avatarMask); + avatarMask.copyPosition(avatar); + } +} \ No newline at end of file