From b864482b555851b67d667d0461ad33bc6e154e0f Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Fri, 10 Nov 2023 08:33:31 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=AA=E3=82=B6=E3=83=AB?= =?UTF-8?q?=E3=83=88=E3=82=B7=E3=83=BC=E3=83=B3=E3=81=AE=E3=83=A9=E3=83=B3?= =?UTF-8?q?=E3=82=AD=E3=83=B3=E3=82=B0=E8=A1=A8=E7=A4=BA=E3=81=AB=E3=82=A2?= =?UTF-8?q?=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=20(#19)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scene/ResultScene.ts | 79 +++++++++++++++++++++++++++++++++------- 1 file changed, 65 insertions(+), 14 deletions(-) diff --git a/src/scene/ResultScene.ts b/src/scene/ResultScene.ts index f542b27..b763ae9 100644 --- a/src/scene/ResultScene.ts +++ b/src/scene/ResultScene.ts @@ -24,7 +24,10 @@ export class ResultScene extends Phaser.Scene { private rankText: Phaser.GameObjects.Text private rankLabelText: Phaser.GameObjects.Text - private ranking: any[] + private rankingFrame: Phaser.GameObjects.Rectangle + private rankingLine: Phaser.GameObjects.Rectangle + private rankingScoreLabelText: Phaser.GameObjects.Text + private rankingPlayerLabelText: Phaser.GameObjects.Text private rankingIndexTexts: Phaser.GameObjects.Text[] private rankingScoreTexts: Phaser.GameObjects.Text[] private rankingScreenNameTexts: Phaser.GameObjects.Text[] @@ -33,8 +36,6 @@ export class ResultScene extends Phaser.Scene { private detailFrame: Phaser.GameObjects.Image private subDetailFrame: Phaser.GameObjects.Image - private rankingFrame: Phaser.GameObjects.Rectangle - private musicIcon: Phaser.GameObjects.Image private artistIcon: Phaser.GameObjects.Image private noterIcon: Phaser.GameObjects.Image @@ -143,7 +144,6 @@ export class ResultScene extends Phaser.Scene { } else { this.rankText.setText("- / -") } - this.ranking = ranking const usersResponse = await retryFetch(new URL("/users/", process.env.SERVER_URL).toString(), { headers: { @@ -160,9 +160,26 @@ export class ResultScene extends Phaser.Scene { } for (const [rankingIndex, score] of ranking.slice(0, 30).entries()) { - this.rankingIndexTexts[rankingIndex].setText(`${rankingIndex + 1}`) - this.rankingScoreTexts[rankingIndex].setText(`${score.score.toFixed(2)}%`) - this.rankingScreenNameTexts[rankingIndex].setText(`${userIdToScreenName[score.player_id]}`) + this.rankingIndexTexts[rankingIndex].setText(`${rankingIndex + 1}`).setAlpha(0) + this.rankingScoreTexts[rankingIndex].setText(`${score.score.toFixed(2)}%`).setAlpha(0) + this.rankingScreenNameTexts[rankingIndex].setText(`${userIdToScreenName[score.player_id]}`).setAlpha(0) + this.tweens.add({ + targets: [ + this.rankingIndexTexts[rankingIndex], + this.rankingScoreTexts[rankingIndex], + this.rankingScreenNameTexts[rankingIndex], + ], + delay: 50 + rankingIndex * 50, + x: { + value: `-=60`, + duration: 400, + ease: Phaser.Math.Easing.Cubic.Out, + }, + alpha: { + value: 1, + duration: 100, + }, + }) } } const sendScore = async () => { @@ -384,16 +401,46 @@ export class ResultScene extends Phaser.Scene { .setOrigin(1, 0.5) .setAlpha(0) - this.rankingFrame = this.add.rectangle(1280, 0, 340, 720, 0x000000).setAlpha(0.3).setOrigin(1, 0).setDepth(-2) + this.rankingFrame = this.add + .rectangle(1280, 0, 340, 720, 0x000000) + .setAlpha(0.3) + .setOrigin(1, 0) + .setDepth(-2) + .setScale(1, 0) - this.add.rectangle(1280, 50, 340, 2, 0x444444).setAlpha(1).setDepth(-1).setOrigin(1, 0) + this.tweens.add({ + targets: [this.rankingFrame], + delay: 250, + scaleY: { + value: 1, + duration: 400, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.rankingLine = this.add + .rectangle(1110, 50, 340, 2, 0x444444) + .setAlpha(1) + .setDepth(-1) + .setOrigin(0.5, 0) + .setScale(0, 1) + + this.tweens.add({ + targets: [this.rankingLine], + delay: 450, + scaleX: { + value: 1, + duration: 300, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) this.rankingIndexTexts = [] this.rankingScoreTexts = [] this.rankingScreenNameTexts = [] const rankingFontSize = "24px" - this.add + this.rankingScoreLabelText = this.add .text(1080, 10, "SCORE", { fontFamily: "Oswald", fontSize: rankingFontSize, @@ -401,8 +448,9 @@ export class ResultScene extends Phaser.Scene { align: "right", }) .setOrigin(1, 0) + .setAlpha(0) - this.add + this.rankingPlayerLabelText = this.add .text(1100, 10, "PLAYER", { fontFamily: "Oswald", fontSize: rankingFontSize, @@ -410,12 +458,13 @@ export class ResultScene extends Phaser.Scene { align: "left", }) .setOrigin(0, 0) + .setAlpha(0) for (const rankingIndex of Array(25).keys()) { const y = 60 + 30 * rankingIndex this.rankingIndexTexts.push( this.add - .text(950, y, "", { + .text(950 + 60, y, "", { fontFamily: "Oswald", fontSize: rankingFontSize, color: "#888888", @@ -425,7 +474,7 @@ export class ResultScene extends Phaser.Scene { ) this.rankingScoreTexts.push( this.add - .text(1080, y, "", { + .text(1080 + 60, y, "", { fontFamily: "Oswald", fontSize: rankingFontSize, color: "#fafafa", @@ -436,7 +485,7 @@ export class ResultScene extends Phaser.Scene { this.rankingScreenNameTexts.push( this.add - .text(1100, y, "", { + .text(1100 + 60, y, "", { fontFamily: "Noto Sans JP", fontSize: rankingFontSize, color: "#fafafa", @@ -553,6 +602,8 @@ export class ResultScene extends Phaser.Scene { this.judgeLabelTexts[2], this.judgeLabelTexts[3], this.judgeLabelTexts[4], + this.rankingScoreLabelText, + this.rankingPlayerLabelText, ], delay: 700, alpha: {