From 43b90495c01b0241477d9eab7f15e75ef2c06595 Mon Sep 17 00:00:00 2001 From: Mark Date: Thu, 19 Dec 2024 13:49:32 -0500 Subject: [PATCH] refactor(constants): add enum Image --- src/constants/key.ts | 14 ++++++++++++++ src/scenes/Boot.ts | 26 ++++++++++++-------------- src/scenes/Main.ts | 23 +++++++++++++++-------- src/utils/createCard.ts | 8 +++----- 4 files changed, 44 insertions(+), 27 deletions(-) diff --git a/src/constants/key.ts b/src/constants/key.ts index 17ec71a..3eefeaf 100644 --- a/src/constants/key.ts +++ b/src/constants/key.ts @@ -8,6 +8,20 @@ export enum Audio { Whoosh = 'Whoosh', } +export enum Image { + Background = 'Background', + Card1 = 'Card1', + Card2 = 'Card2', + Card3 = 'Card3', + Card4 = 'Card4', + Card5 = 'Card5', + Card6 = 'Card6', + CardBack = 'CardBack', + Heart = 'Heart', + VolumeIcon = 'VolumeIcon', + VolumeIconOff = 'VolumeIconOff', +} + export enum Scene { Boot = 'Boot', Main = 'Main', diff --git a/src/scenes/Boot.ts b/src/scenes/Boot.ts index 198bd23..b2be624 100644 --- a/src/scenes/Boot.ts +++ b/src/scenes/Boot.ts @@ -1,6 +1,6 @@ import Phaser from 'phaser'; -import { Audio, Scene } from '../constants'; +import { Audio, Image, Scene } from '../constants'; export class Boot extends Phaser.Scene { constructor() { @@ -10,9 +10,6 @@ export class Boot extends Phaser.Scene { preload() { this.load.setPath('assets/'); - this.load.image('volume-icon', 'ui/volume-icon.png'); - this.load.image('volume-icon_off', 'ui/volume-icon_off.png'); - this.load.audio(Audio.CardFlip, 'audio/card-flip.mp3'); this.load.audio(Audio.CardMatch, 'audio/card-match.mp3'); this.load.audio(Audio.CardMismatch, 'audio/card-mismatch.mp3'); @@ -21,16 +18,17 @@ export class Boot extends Phaser.Scene { this.load.audio(Audio.Victory, 'audio/victory.mp3'); this.load.audio(Audio.Whoosh, 'audio/whoosh.mp3'); - this.load.image('background'); - this.load.image('card-back', 'cards/card-back.png'); - this.load.image('card-0', 'cards/card-0.png'); - this.load.image('card-1', 'cards/card-1.png'); - this.load.image('card-2', 'cards/card-2.png'); - this.load.image('card-3', 'cards/card-3.png'); - this.load.image('card-4', 'cards/card-4.png'); - this.load.image('card-5', 'cards/card-5.png'); - - this.load.image('heart', 'ui/heart.png'); + this.load.image(Image.Background, 'background.png'); + this.load.image(Image.Card1, 'cards/card-0.png'); + this.load.image(Image.Card2, 'cards/card-1.png'); + this.load.image(Image.Card3, 'cards/card-2.png'); + this.load.image(Image.Card4, 'cards/card-3.png'); + this.load.image(Image.Card5, 'cards/card-4.png'); + this.load.image(Image.Card6, 'cards/card-5.png'); + this.load.image(Image.CardBack, 'cards/card-back.png'); + this.load.image(Image.Heart, 'ui/heart.png'); + this.load.image(Image.VolumeIcon, 'ui/volume-icon.png'); + this.load.image(Image.VolumeIconOff, 'ui/volume-icon_off.png'); } create() { diff --git a/src/scenes/Main.ts b/src/scenes/Main.ts index 42d1db1..4702bf1 100644 --- a/src/scenes/Main.ts +++ b/src/scenes/Main.ts @@ -1,6 +1,6 @@ import Phaser from 'phaser'; -import { Audio, Scene } from '../constants'; +import { Audio, Image, Scene } from '../constants'; import { createCard } from '../utils/createCard'; /** @@ -17,7 +17,14 @@ import { createCard } from '../utils/createCard'; */ export class Main extends Phaser.Scene { // All cards names - cardNames = ['card-0', 'card-1', 'card-2', 'card-3', 'card-4', 'card-5']; + cardNames = [ + Image.Card1, + Image.Card2, + Image.Card3, + Image.Card4, + Image.Card5, + Image.Card6, + ]; // Cards Game Objects cards: ReturnType = []; @@ -56,7 +63,7 @@ export class Main extends Phaser.Scene { .image( this.gridConfiguration.x - 63, this.gridConfiguration.y - 77, - 'background', + Image.Background, ) .setOrigin(0); @@ -174,7 +181,7 @@ export class Main extends Phaser.Scene { createHearts() { return Array.from(new Array(this.lives)).map((el, index) => { const heart = this.add - .image(this.sys.game.scale.width + 1000, 20, 'heart') + .image(this.sys.game.scale.width + 1000, 20, Image.Heart) .setScale(2); this.add.tween({ @@ -190,8 +197,8 @@ export class Main extends Phaser.Scene { volumeButton() { const volumeIcon = this.add - .image(25, 25, 'volume-icon') - .setName('volume-icon'); + .image(25, 25, Image.VolumeIcon) + .setName(Image.VolumeIcon); volumeIcon.setInteractive(); // Mouse enter @@ -207,11 +214,11 @@ export class Main extends Phaser.Scene { volumeIcon.on(Phaser.Input.Events.POINTER_DOWN, () => { if (this.sound.volume === 0) { this.sound.setVolume(1); - volumeIcon.setTexture('volume-icon'); + volumeIcon.setTexture(Image.VolumeIcon); volumeIcon.setAlpha(1); } else { this.sound.setVolume(0); - volumeIcon.setTexture('volume-icon_off'); + volumeIcon.setTexture(Image.VolumeIconOff); volumeIcon.setAlpha(0.5); } }); diff --git a/src/utils/createCard.ts b/src/utils/createCard.ts index 31a095c..c96f17a 100644 --- a/src/utils/createCard.ts +++ b/src/utils/createCard.ts @@ -1,4 +1,4 @@ -import { Audio } from '../constants'; +import { Audio, Image } from '../constants'; /** * Create a card game object @@ -19,10 +19,8 @@ export function createCard({ let isFlipping = false; const rotation = { y: 0 }; - const backTexture = 'card-back'; - const card = scene.add - .plane(x, y, backTexture) + .plane(x, y, Image.CardBack) .setName(cardName) .setInteractive(); @@ -71,7 +69,7 @@ export function createCard({ ) { card.setTexture(frontTexture); } else { - card.setTexture(backTexture); + card.setTexture(Image.CardBack); } },