refactor(constants): add enum Image

remarkablegames · Dec 19, 2024 · 43b9049 · 43b9049
1 parent 1fa8469
commit 43b9049
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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<typeof this.createGridCards> = [];
@@ -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
@@ -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);
         }
       },