refactor: #fe background scene

frontend/src/js/background_scene.ts

@@ -33,13 +33,12 @@ const COLORS = HSL_COLORS.map((pair) =>
 );
 
 export default class BackgroundScene extends Phaser.Scene {
-  layers: Phaser.GameObjects.TileSprite[];
-  atmosphere: Phaser.Tweens.Tween;
-  curtain: Phaser.GameObjects.Rectangle;
+  layers!: Phaser.GameObjects.TileSprite[];
+  atmosphere!: Phaser.Tweens.Tween;
+  curtain!: Phaser.GameObjects.Rectangle;
 
   constructor() {
     super("background");
-    this.layers = [];
   }
 
   preload() {
@@ -58,25 +57,27 @@ export default class BackgroundScene extends Phaser.Scene {
     );
   }
 
-  createBackground() {
+  createLayers() {
     const scale = this.cameras.main.height / LAYERS_HEIGHT;
     const width = this.cameras.main.width / scale;
     const height = this.cameras.main.height / scale;
-    Object.keys(LAYERS).forEach((textureKey) => {
-      const tileSprite = this.add.tileSprite(0, 0, width, height, textureKey);
-      tileSprite.setOrigin(0).setScale(scale).setTint(
-        // NOTE: this is a bit lazy but meh.
-        this.interpColor(COLORS[0][0], COLORS[0][0], 0),
-        this.interpColor(COLORS[0][0], COLORS[0][0], 0),
-        this.interpColor(COLORS[0][1], COLORS[0][1], 0),
-        this.interpColor(COLORS[0][1], COLORS[0][1], 0),
-      );
-      this.layers.push(tileSprite);
-    });
+    return Object.keys(LAYERS).map((textureKey) =>
+      this.add
+        .tileSprite(0, 0, width, height, textureKey)
+        .setOrigin(0)
+        .setScale(scale)
+        .setTint(
+          // NOTE: this is a bit lazy but meh.
+          this.interpColor(COLORS[0][0], COLORS[0][0], 0),
+          this.interpColor(COLORS[0][0], COLORS[0][0], 0),
+          this.interpColor(COLORS[0][1], COLORS[0][1], 0),
+          this.interpColor(COLORS[0][1], COLORS[0][1], 0),
+        ),
+    );
   }
 
   createAtmosphere() {
-    this.atmosphere = this.tweens.addCounter({
+    return this.tweens.addCounter({
       paused: true,
       from: 0,
       to: 255 * (COLORS.length - 1),
@@ -95,7 +96,7 @@ export default class BackgroundScene extends Phaser.Scene {
   }
 
   createCurtain() {
-    this.curtain = this.add
+    return this.add
       .rectangle(
         0,
         0,
@@ -129,9 +130,9 @@ export default class BackgroundScene extends Phaser.Scene {
   }
 
   create() {
-    this.createBackground();
-    this.createAtmosphere();
-    this.createCurtain();
+    this.layers = this.createLayers();
+    this.atmosphere = this.createAtmosphere();
+    this.curtain = this.createCurtain();
     // this.scale.displaySize.setAspectRatio(
     //   this.cameras.main.width / this.cameras.main.height,
     // );