feat: #fe separate parallax background and welcome screen

frontend/src/js/background_scene.ts

+import "phaser";
+
+const LAYERS_HEIGHT = 793;
+const LAYERS = {
+  b00: "assets/background_layers/Layer_0011_0.png",
+  b01: "assets/background_layers/Layer_0010_1.png",
+  b02: "assets/background_layers/Layer_0009_2.png",
+  b03: "assets/background_layers/Layer_0008_3.png",
+  b04: "assets/background_layers/Layer_0007_Lights.png",
+  b05: "assets/background_layers/Layer_0006_4.png",
+  b06: "assets/background_layers/Layer_0005_5.png",
+  b07: "assets/background_layers/Layer_0004_Lights.png",
+  b08: "assets/background_layers/Layer_0003_6.png",
+  b09: "assets/background_layers/Layer_0002_7.png",
+  b10: "assets/background_layers/Layer_0001_8.png",
+  b11: "assets/background_layers/Layer_0000_9.png",
+};
+
+export default class BackgroundScene extends Phaser.Scene {
+  layers: Phaser.GameObjects.TileSprite[];
+
+  constructor() {
+    super("head");
+    this.layers = [];
+  }
+
+  preload() {
+    Object.entries(LAYERS).forEach(([key, path]) => this.load.image(key, path));
+  }
+
+  createBackground() {
+    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);
+      this.layers.push(tileSprite);
+    });
+  }
+
+  create() {
+    this.createBackground();
+    // this.scale.displaySize.setAspectRatio(
+    //   this.cameras.main.width / this.cameras.main.height,
+    // );
+    // this.scale.refresh();
+    this.scene.launch("welcome");
+  }
+
+  update() {
+    this.layers.forEach((layer, index) => {
+      layer.tilePositionX -= 0.02 * index;
+    });
+  }
+}

frontend/src/js/fight_scene.ts

@@ -32,8 +32,7 @@ export default class FightScene extends Phaser.Scene {
   }
 
   preload() {
-    this.preloadBackground();
-
+    this.load.image("ground", "assets/background_layers/ground.png");
     this.load.spritesheet("oezi", "assets/sprites/player/oezi.png", {
       frameWidth: 27,
       frameHeight: 35,
@@ -78,7 +77,6 @@ export default class FightScene extends Phaser.Scene {
       final: "",
     };
     this.initCluesGroup();
-    this.createBackground();
 
     createAnim(this, "player_idle", "oezi", 1, 5);
     createAnim(this, "player_run", "oezi", 6, 13);
@@ -131,10 +129,10 @@ export default class FightScene extends Phaser.Scene {
       },
     });
 
-    this.scale.displaySize.setAspectRatio(
-      this.cameras.main.width / this.cameras.main.height,
-    );
-    this.scale.refresh();
+    // this.scale.displaySize.setAspectRatio(
+    //   this.cameras.main.width / this.cameras.main.height,
+    // );
+    // this.scale.refresh();
     this.initAndBindGuessPreview();
 
     this.beGame = (await backend.createGame()).data;
@@ -257,43 +255,6 @@ export default class FightScene extends Phaser.Scene {
       textEntry.text = inputStatus.final;
     };
   }
-
-  preloadBackground() {
-    this.load.image("b0", "assets/background_layers/Layer_0011_0.png");
-    this.load.image("b1", "assets/background_layers/Layer_0010_1.png");
-    this.load.image("b2", "assets/background_layers/Layer_0009_2.png");
-    this.load.image("b3", "assets/background_layers/Layer_0008_3.png");
-    this.load.image("b4", "assets/background_layers/Layer_0007_Lights.png");
-    this.load.image("b5", "assets/background_layers/Layer_0006_4.png");
-    this.load.image("b6", "assets/background_layers/Layer_0005_5.png");
-    this.load.image("b7", "assets/background_layers/Layer_0004_Lights.png");
-    this.load.image("b8", "assets/background_layers/Layer_0003_6.png");
-    this.load.image("b9", "assets/background_layers/Layer_0002_7.png");
-    this.load.image("b10", "assets/background_layers/Layer_0001_8.png");
-    this.load.image("b11", "assets/background_layers/Layer_0000_9.png");
-    this.load.image("logo", "assets/background_layers/Logo.png");
-    this.load.image("ground", "assets/background_layers/ground.png");
-  }
-
-  createBackground() {
-    ["b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "b10"].forEach(
-      (textureKey) => {
-        const scale =
-          this.cameras.main.height /
-          this.textures.get(textureKey).getSourceImage().height;
-        this.add
-          .tileSprite(
-            0,
-            0,
-            this.cameras.main.width / scale,
-            this.cameras.main.height / scale,
-            textureKey,
-          )
-          .setOrigin(0)
-          .setScale(scale);
-      },
-    );
-  }
 }
 
 // TODO: remove any

frontend/src/js/main.ts

 import * as Phaser from "phaser";
 
+import BackgroundScene from "./background_scene";
+import WelcomeScene from "./welcome_scene";
 import FightScene from "./fight_scene";
 
 export const GRAVITY_Y = 200;
 
 const config = {
   type: Phaser.AUTO,
-  width: window.innerWidth, // 1200,
-  height: window.innerHeight, // 800,
+  // TODO: bound height, with responsive aspect ratio
   pixelArt: true,
   autoCenter: Phaser.Scale.CENTER_BOTH,
-  scaleMode: Phaser.Scale.FIT,
+  scaleMode: Phaser.Scale.RESIZE,
   physics: {
     default: "arcade",
     arcade: {
@@ -18,7 +19,7 @@ const config = {
       // debug: true,
     },
   },
-  scene: FightScene,
+  scene: [BackgroundScene, WelcomeScene, FightScene],
 };
 
 new Phaser.Game(config);

frontend/src/js/welcome_scene.ts

+import "phaser";
+
+export default class WelcomeScene extends Phaser.Scene {
+  constructor() {
+    super("welcome");
+  }
+
+  create() {
+    this.drawTitle();
+    this.drawCTA();
+    this.bindEvents();
+  }
+
+  drawTitle() {
+    const text = "ÖTZI\nGAME";
+    const title = this.add.text(0, 0, text, {
+      font: "bold 64px Courier",
+      color: "#ffffff",
+    });
+    title.setPosition(
+      (this.cameras.main.width - title.width) * 0.5,
+      (this.cameras.main.height - title.height) * 0.4,
+    );
+  }
+
+  drawCTA() {
+    const text = "press to start";
+    const cta = this.add.text(0, 0, text, {
+      font: "bold 32px Courier",
+      color: "#ffffff",
+    });
+    cta.setPosition(
+      (this.cameras.main.width - cta.width) * 0.5,
+      (this.cameras.main.height - cta.height) * 0.7,
+    );
+  }
+
+  bindEvents() {
+    this.input.keyboard.once("keydown", this.startFight.bind(this));
+    this.input.once("pointerdown", this.startFight.bind(this));
+  }
+
+  startFight() {
+    this.scene.start("fight");
+  }
+}