refactor: refactor constant to enum

Author: remarkablemark

src/constants/key.ts

@@ -1,16 +1,11 @@
-const image = {
-  dude: 'dude',
-  ground: 'ground',
-  sky: 'sky',
-  star: 'star',
-} as const;
+export enum Image {
+  Dude = 'Dude',
+  Ground = 'Ground',
+  Sky = 'Sky',
+  Star = 'Star',
+}
 
-const scene = {
-  boot: 'boot',
-  main: 'main',
-} as const;
-
-export const key = {
-  image,
-  scene,
-} as const;
+export enum Scene {
+  Boot = 'Boot',
+  Main = 'Main',
+}

src/gameobjects/Player.ts

@@ -1,6 +1,6 @@
 import Phaser from 'phaser';
 
-import { key } from '../constants';
+import { Image } from '../constants';
 
 enum Animation {
   Left = 'PlayerLeft',
@@ -21,7 +21,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     scene: Phaser.Scene,
     x: number,
     y: number,
-    texture = key.image.dude,
+    texture = Image.Dude,
     frame = 0,
   ) {
     super(scene, x, y, texture, frame);
@@ -50,7 +50,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     if (!anims.exists(Animation.Left)) {
       anims.create({
         key: Animation.Left,
-        frames: anims.generateFrameNumbers(key.image.dude, {
+        frames: anims.generateFrameNumbers(Image.Dude, {
           start: 0,
           end: 3,
         }),
@@ -63,7 +63,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     if (!anims.exists(Animation.Turn)) {
       anims.create({
         key: Animation.Turn,
-        frames: [{ key: key.image.dude, frame: 4 }],
+        frames: [{ key: Image.Dude, frame: 4 }],
         frameRate: 20,
       });
     }
@@ -72,7 +72,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     if (!anims.exists(Animation.Right)) {
       anims.create({
         key: Animation.Right,
-        frames: anims.generateFrameNumbers(key.image.dude, {
+        frames: anims.generateFrameNumbers(Image.Dude, {
           start: 5,
           end: 8,
         }),

src/gameobjects/Star.ts

@@ -1,16 +1,16 @@
 import Phaser from 'phaser';
 
-import { key } from '../constants';
+import { Image } from '../constants';
 
 export class Star extends Phaser.Physics.Arcade.Sprite {
   constructor(
     scene: Phaser.Scene,
     x: number,
     y: number,
-    texture = key.image.star,
+    texture = Image.Star,
     frame: string | number,
   ) {
-    super(scene, x, y, texture || key.image.star, frame);
+    super(scene, x, y, texture || Image.Star, frame);
 
     // Reset drawing position of image to the top-left
     this.setOrigin(0);

src/scenes/Boot.ts

@@ -1,24 +1,24 @@
 import Phaser from 'phaser';
 
 import { dude, platform, sky, star } from '../assets';
-import { key } from '../constants';
+import { Image, Scene } from '../constants';
 
 export class Boot extends Phaser.Scene {
   constructor() {
-    super(key.scene.boot);
+    super({ key: Scene.Boot });
   }
 
   preload() {
-    this.load.spritesheet(key.image.dude, dude, {
+    this.load.spritesheet(Image.Dude, dude, {
       frameWidth: 32,
       frameHeight: 48,
     });
-    this.load.image(key.image.ground, platform);
-    this.load.image(key.image.sky, sky);
-    this.load.image(key.image.star, star);
+    this.load.image(Image.Ground, platform);
+    this.load.image(Image.Sky, sky);
+    this.load.image(Image.Star, star);
   }
 
   create() {
-    this.scene.start(key.scene.main);
+    this.scene.start(Scene.Main);
   }
 }

src/scenes/Main.tsx

@@ -2,26 +2,26 @@ import Phaser from 'phaser';
 import { render } from 'phaser-jsx';
 
 import { Score } from '../components';
-import { key } from '../constants';
+import { Image, Scene } from '../constants';
 import { Player, Star } from '../gameobjects';
 
 export class Main extends Phaser.Scene {
   private player!: Player;
   private text!: Phaser.GameObjects.Text;
 
   constructor() {
-    super(key.scene.main);
+    super({ key: Scene.Main });
   }
 
   create() {
     // A simple background for our game.
-    this.add.image(0, 0, key.image.sky).setOrigin(0);
+    this.add.image(0, 0, Image.Sky).setOrigin(0);
 
     // The platforms group contains the ground and the 2 ledges we can jump on.
     // It's created after the background so the order of layers (z-depth) is
     // maintained (otherwise, the platforms will be hidden by the background).
     const platforms = this.physics.add.staticGroup({
-      defaultKey: key.image.ground,
+      defaultKey: Image.Ground,
     });
 
     // Create the ground (scale it to fit the width of the game).