diff --git a/frontend/src/js/fight_scene.ts b/frontend/src/js/fight_scene.ts index 86b9409b079b1ca57a2d92b568264a6cf3526f0a..c65c7837e9ba80ce76bffc2828e41eb556156a2d 100644 --- a/frontend/src/js/fight_scene.ts +++ b/frontend/src/js/fight_scene.ts @@ -43,6 +43,7 @@ export default class FightScene extends Phaser.Scene { beDevice: Types.Device; beGame: Types.Game; typewriter: Typewriter; + acceptedWords: number; score: number; health: number; hud: HUD; @@ -111,6 +112,7 @@ export default class FightScene extends Phaser.Scene { init() { this.score = 0; this.health = 100; + this.acceptedWords = 0; this.uiDimensions = this.initUiDimensions(); this.hud = new HUD(this, { @@ -360,7 +362,12 @@ export default class FightScene extends Phaser.Scene { this.sound.play("sfx_game_over"); this.typewriter.setActive(false); this.typewriter.resetInputStatus(); - this.scene.start("game_over", { music: this.music }); + this.scene.start("game_over", { + music: this.music, + words: this.acceptedWords, + score: this.beGame.score, + time: this.beGame.ended_at_gmtm, + }); } initCluesGroup() { @@ -442,6 +449,7 @@ export default class FightScene extends Phaser.Scene { this.hud.showSubmitFeedback("red", inputStatus.final); new Spear(this, this.player, undefined); } else { + this.acceptedWords += 1; this.sound.play("sfx_hi_beep"); backend.updateClue(match.beClue.id, { ended_at: new Date().toISOString(), diff --git a/frontend/src/js/game_over_scene.ts b/frontend/src/js/game_over_scene.ts index 3af677987fcb96466a5e36994114cff3de39190a..45620715c9caf8c4753ccf8bb248350c21858fb5 100644 --- a/frontend/src/js/game_over_scene.ts +++ b/frontend/src/js/game_over_scene.ts @@ -1,5 +1,6 @@ import "phaser"; import BackgroundScene from "./background_scene"; +import { formatTime, ICONS } from "./hud"; export default class GameOverScene extends Phaser.Scene { music!: Phaser.Sound.BaseSound; @@ -23,7 +24,12 @@ export default class GameOverScene extends Phaser.Scene { this.music.play(); } - create(data: { music?: Phaser.Sound.BaseSound }) { + create(data: { + music?: Phaser.Sound.BaseSound; + words: number; + score: number; + time: number; + }) { (this.scene.get("background") as BackgroundScene).dropCurtain(); (this.scene.get("background") as BackgroundScene).atmosphere .stop() @@ -34,20 +40,53 @@ export default class GameOverScene extends Phaser.Scene { ); this.drawTitle(); + this.drawSubtitle(data.words); + this.drawResult(data.score, data.time); this.drawCTA(); this.bindEvents(); } drawTitle() { - const text = "ÖTZI\nDIED"; + const text = "ÖTZI LOST"; const title = this.add.text(0, 0, text, { font: "bold 64px Courier", color: "#ff0000", }); - title.setOrigin(0.5, 0.5); + title.setOrigin(0.5, 1); title.setPosition( this.cameras.main.width * 0.5, - this.cameras.main.height * 0.4, + this.cameras.main.height * 0.3, + ); + } + + drawSubtitle(wordCount = 1234) { + const text = `but you donated\n${wordCount} WORDS\n${ICONS.HEALTH}ï¸ Thank you! ${ICONS.HEALTH}`; + const subtitle = this.add.text(0, 0, text, { + font: "bold 32px Courier", + color: "#aaff00", + align: "center", + testString: text, + }); + subtitle.setOrigin(0.5, 0); + subtitle.setPosition( + this.cameras.main.width * 0.5, + this.cameras.main.height * 0.3, + ); + } + + drawResult(score = 12345678, time = 12 * 60 * 1000 + 34 * 1000 + 56 * 10) { + const timer = formatTime(time); + const text = `${score}\u2009${ICONS.SCORE}\n${timer}\u2009${ICONS.CLOCK}`; + const title = this.add.text(0, 0, text, { + font: "bold 32px Courier", + color: "#ffffff", + align: "right", + testString: text, + }); + title.setOrigin(0.5, 1); + title.setPosition( + this.cameras.main.width * 0.5, + this.cameras.main.height * 0.7, ); } @@ -57,10 +96,10 @@ export default class GameOverScene extends Phaser.Scene { font: "bold 32px Courier", color: "#ffffff", }); - cta.setOrigin(0.5, 0.5); + cta.setOrigin(0.5, 0); cta.setPosition( this.cameras.main.width * 0.5, - this.cameras.main.height * 0.7, + this.cameras.main.height * 0.75, ); }