Display "Get ready" portion of countdown

This commit is contained in:
Liam Westby 2018-06-03 17:26:08 -05:00
parent b19b60cd8d
commit 721a9e360a
2 changed files with 30 additions and 14 deletions

View File

@ -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);

View File

@ -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);
}
}