From 721a9e360a686d4fedbd41e9e2b771d663298148 Mon Sep 17 00:00:00 2001 From: Liam Westby Date: Sun, 3 Jun 2018 17:26:08 -0500 Subject: [PATCH] Display "Get ready" portion of countdown --- .../prebuild/src/app/game/game.component.ts | 20 ++++++++++++++-- frontend/prebuild/src/app/overlay/card.ts | 24 +++++++++---------- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/frontend/prebuild/src/app/game/game.component.ts b/frontend/prebuild/src/app/game/game.component.ts index 170c4a3..d32b20e 100644 --- a/frontend/prebuild/src/app/game/game.component.ts +++ b/frontend/prebuild/src/app/game/game.component.ts @@ -393,8 +393,24 @@ export class GameComponent implements OnInit, OnDestroy { } startingCountdown(seconds) { - this.waitCard.hide(); this.waitingSub.unsubscribe(); + + this.waitCard.headerString = 'Get Ready'; + this.waitCard.bodyString = ''; + + this.waitingTimer = timer(0, 1000); + this.waitingSub = this.waitingTimer.subscribe((t) => { + if (t < seconds - 1) { + this.waitCard.bodyString = `${seconds - (t + 1)}`; + } else if (t === seconds - 1) { + this.waitCard.bodyString = 'GO!'; + this.waitCard.hide(500); + } else if (t >= seconds) { + this.ngZone.run((t) => { + this.waitingSub.unsubscribe(); + }); + } + }); } waitForPlayers(seconds) { @@ -413,7 +429,7 @@ export class GameComponent implements OnInit, OnDestroy { const margin = 50; this.waitCard = new Card(width, "waiting for players", `${seconds}`, true); const card = this.waitCard.displayObject; - card.x = (Constants.BOARD_SIZE / 2) - (width / 2); + card.x = (Constants.BOARD_SIZE / 2) - (this.waitCard.width / 2); card.y = (Constants.BOARD_SIZE / 2) - (this.waitCard.height / 2); this.overlayStage.addChild(card); diff --git a/frontend/prebuild/src/app/overlay/card.ts b/frontend/prebuild/src/app/overlay/card.ts index f10fdbf..94b96cc 100644 --- a/frontend/prebuild/src/app/overlay/card.ts +++ b/frontend/prebuild/src/app/overlay/card.ts @@ -46,7 +46,7 @@ export class Card { } set headerString(newString: string) { - this.headerText.text = newString; + this.headerText.text = newString.toLocaleLowerCase(); } bodyText = new Text(); @@ -134,20 +134,20 @@ export class Card { Tween.get(this.bodyText).to({x: bodyX}, Card.DURATION, Ease.quadOut); } - public hide() { - Tween.get(this.backgroundCommand).to({w: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.background).to({alpha: 0}, Card.DURATION, Ease.quadOut); + public hide(delay = 0) { + Tween.get(this.backgroundCommand).wait(delay).to({w: 0}, Card.DURATION, Ease.quadOut); + Tween.get(this.background).wait(delay).to({alpha: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.colorLayerCommand).to({w: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.colorLayer).to({alpha: 0}, Card.DURATION, Ease.quadOut); + Tween.get(this.colorLayerCommand).wait(delay).to({w: 0}, Card.DURATION, Ease.quadOut); + Tween.get(this.colorLayer).wait(delay).to({alpha: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.accentCommand).to({h: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.accent).to({y: this.height}, Card.DURATION, Ease.quadOut); + Tween.get(this.accentCommand).wait(delay).to({h: 0}, Card.DURATION, Ease.quadOut); + Tween.get(this.accent).wait(delay).to({y: this.height}, Card.DURATION, Ease.quadOut); - Tween.get(this.headerText).to({alpha: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.headerText).to({x: -this.width}, Card.DURATION, Ease.quadOut); + Tween.get(this.headerText).wait(delay).to({alpha: 0}, Card.DURATION, Ease.quadOut); + Tween.get(this.headerText).wait(delay).to({x: -this.width}, Card.DURATION, Ease.quadOut); - Tween.get(this.bodyText).to({alpha: 0}, Card.DURATION, Ease.quadOut); - Tween.get(this.bodyText).to({x: -this.width}, Card.DURATION, Ease.quadOut); + Tween.get(this.bodyText).wait(delay).to({alpha: 0}, Card.DURATION, Ease.quadOut); + Tween.get(this.bodyText).wait(delay).to({x: -this.width}, Card.DURATION, Ease.quadOut); } }