refactor(constants): use enum

remarkablegames · Dec 19, 2024 · 1fa8469 · 1fa8469
1 parent 5d9a45c
commit 1fa8469
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 37 deletions.
diff --git a/src/constants/key.ts b/src/constants/key.ts
@@ -1,8 +1,14 @@
-const scene = {
-  boot: 'boot',
-  main: 'main',
-} as const;
+export enum Audio {
+  CardFlip = 'CardFlip',
+  CardMatch = 'CardMatch',
+  CardMismatch = 'CardMismatch',
+  CardSlide = 'CardSlide',
+  ThemeSong = 'ThemeSong',
+  Victory = 'Victory',
+  Whoosh = 'Whoosh',
+}
 
-export const key = {
-  scene,
-} as const;
+export enum Scene {
+  Boot = 'Boot',
+  Main = 'Main',
+}
diff --git a/src/scenes/Boot.ts b/src/scenes/Boot.ts
@@ -1,10 +1,10 @@
 import Phaser from 'phaser';
 
-import { key } from '../constants';
+import { Audio, Scene } from '../constants';
 
 export class Boot extends Phaser.Scene {
   constructor() {
-    super({ key: key.scene.boot });
+    super({ key: Scene.Boot });
   }
 
   preload() {
@@ -13,13 +13,14 @@ export class Boot extends Phaser.Scene {
     this.load.image('volume-icon', 'ui/volume-icon.png');
     this.load.image('volume-icon_off', 'ui/volume-icon_off.png');
 
-    this.load.audio('theme-song', 'audio/fat-caps-audionatix.mp3');
-    this.load.audio('whoosh', 'audio/whoosh.mp3');
-    this.load.audio('card-flip', 'audio/card-flip.mp3');
-    this.load.audio('card-match', 'audio/card-match.mp3');
-    this.load.audio('card-mismatch', 'audio/card-mismatch.mp3');
-    this.load.audio('card-slide', 'audio/card-slide.mp3');
-    this.load.audio('victory', 'audio/victory.mp3');
+    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');
+    this.load.audio(Audio.CardSlide, 'audio/card-slide.mp3');
+    this.load.audio(Audio.ThemeSong, 'audio/fat-caps-audionatix.mp3');
+    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');
@@ -33,6 +34,6 @@ export class Boot extends Phaser.Scene {
   }
 
   create() {
-    this.scene.start(key.scene.main);
+    this.scene.start(Scene.Main);
   }
 }
diff --git a/src/scenes/Main.ts b/src/scenes/Main.ts
@@ -1,6 +1,6 @@
 import Phaser from 'phaser';
 
-import { key } from '../constants';
+import { Audio, Scene } from '../constants';
 import { createCard } from '../utils/createCard';
 
 /**
@@ -40,7 +40,7 @@ export class Main extends Phaser.Scene {
   };
 
   constructor() {
-    super({ key: key.scene.main });
+    super({ key: Scene.Main });
   }
 
   init() {
@@ -98,14 +98,14 @@ export class Main extends Phaser.Scene {
     });
 
     titleText.on(Phaser.Input.Events.POINTER_DOWN, () => {
-      this.sound.play('whoosh', { volume: 1.3 });
+      this.sound.play(Audio.Whoosh, { volume: 1.3 });
       this.add.tween({
         targets: titleText,
         ease: Phaser.Math.Easing.Bounce.InOut,
         y: -1000,
         onComplete: () => {
-          if (!this.sound.get('theme-song')) {
-            this.sound.play('theme-song', { loop: true, volume: 0.5 });
+          if (!this.sound.get(Audio.ThemeSong)) {
+            this.sound.play(Audio.ThemeSong, { loop: true, volume: 0.5 });
           }
           this.startGame();
         },
@@ -134,7 +134,7 @@ export class Main extends Phaser.Scene {
         this.cards = [];
         this.canMove = false;
         this.scene.restart();
-        this.sound.play('card-slide', { volume: 1.2 });
+        this.sound.play(Audio.CardSlide, { volume: 1.2 });
       },
     });
   }
@@ -161,7 +161,7 @@ export class Main extends Phaser.Scene {
         targets: newCard.gameObject,
         duration: 800,
         delay: index * 100,
-        onStart: () => this.sound.play('card-slide', { volume: 1.2 }),
+        onStart: () => this.sound.play(Audio.CardSlide, { volume: 1.2 }),
         y:
           this.gridConfiguration.y +
           (128 + this.gridConfiguration.paddingY) * Math.floor(index / 4),
@@ -305,7 +305,7 @@ export class Main extends Phaser.Scene {
               card.flip(() => {
                 if (this.cardOpened?.cardName === card.cardName) {
                   // ------- Match -------
-                  this.sound.play('card-match');
+                  this.sound.play(Audio.CardMatch);
                   // Destroy card selected and card opened from history
                   this.cardOpened.destroy();
                   card.destroy();
@@ -319,7 +319,7 @@ export class Main extends Phaser.Scene {
                   this.canMove = true;
                 } else {
                   // ------- No match -------
-                  this.sound.play('card-mismatch');
+                  this.sound.play(Audio.CardMismatch);
                   this.cameras.main.shake(600, 0.01);
                   // remove life and heart
                   const lastHeart = hearts[hearts.length - 1];
@@ -345,7 +345,7 @@ export class Main extends Phaser.Scene {
                 // Check if the game is over
                 if (this.lives === 0) {
                   // Show Game Over text
-                  this.sound.play('whoosh', { volume: 1.3 });
+                  this.sound.play(Audio.Whoosh, { volume: 1.3 });
                   this.add.tween({
                     targets: gameOverText,
                     ease: Phaser.Math.Easing.Bounce.Out,
@@ -357,8 +357,8 @@ export class Main extends Phaser.Scene {
 
                 // Check if the game is won
                 if (this.cards.length === 0) {
-                  this.sound.play('whoosh', { volume: 1.3 });
-                  this.sound.play('victory');
+                  this.sound.play(Audio.Whoosh, { volume: 1.3 });
+                  this.sound.play(Audio.Victory);
 
                   this.add.tween({
                     targets: winnerText,
@@ -396,7 +396,7 @@ export class Main extends Phaser.Scene {
     });
 
     winnerText.on(Phaser.Input.Events.POINTER_DOWN, () => {
-      this.sound.play('whoosh', { volume: 1.3 });
+      this.sound.play(Audio.Whoosh, { volume: 1.3 });
       this.add.tween({
         targets: winnerText,
         ease: Phaser.Math.Easing.Bounce.InOut,

diff --git a/src/utils/createCard.ts b/src/utils/createCard.ts
@@ -1,3 +1,5 @@
+import { Audio } from '../constants';
+
 /**
  * Create a card game object
  */
@@ -37,9 +39,10 @@ export function createCard({
       y: rotation.y === 180 ? 0 : 180,
       ease: Phaser.Math.Easing.Expo.Out,
       duration: 500,
-      onStart: () => {
+
+      onStart() {
         isFlipping = true;
-        scene.sound.play('card-flip');
+        scene.sound.play(Audio.CardFlip);
         scene.tweens.chain({
           targets: card,
           ease: Phaser.Math.Easing.Expo.InOut,
@@ -56,7 +59,7 @@ export function createCard({
         });
       },
 
-      onUpdate: () => {
+      onUpdate() {
         // card.modelRotation.y = Phaser.Math.DegToRad(180) + Phaser.Math.DegToRad(rotation.y);
         (card as unknown as { rotateY: number }).rotateY = 180 + rotation.y;
         const cardRotation =
@@ -72,7 +75,7 @@ export function createCard({
         }
       },
 
-      onComplete: () => {
+      onComplete() {
         isFlipping = false;
 
         if (typeof callbackComplete === 'function') {
@@ -82,17 +85,17 @@ export function createCard({
     });
   }
 
-  const destroy = () => {
+  function destroy() {
     scene.add.tween({
       targets: [card],
       y: card.y - 1000,
       easing: Phaser.Math.Easing.Elastic.In,
       duration: 500,
-      onComplete: () => {
+      onComplete() {
         card.destroy();
       },
     });
-  };
+  }
 
   return {
     gameObject: card,