refactor: #fe bubble device id handling up to Game

frontend/src/js/fight_scene.ts

 import MainScene, { InputStatus } from "./main_scene";
 
 import Foe from "./foe";
+import Game from "./game";
 import Spear from "./spear";
 import backend from "./backend";
 import BackgroundScene from "./background_scene";
@@ -13,13 +14,11 @@ import {
   sawtoothRamp,
 } from "./utils";
 
-const DEVICE_KEY = "OETZIT/DEVICE_ID";
-
 export default class FightScene extends MainScene {
+  game!: Game;
   tapoutEnabled = true;
   typewriterEnabled = true;
 
-  beDevice: Types.Device;
   beGame: Types.Game;
   spawner: Phaser.Time.TimerEvent;
 
@@ -32,7 +31,6 @@ export default class FightScene extends MainScene {
     this.planMusicChanges();
     this.planWaveAnnouncements();
 
-    await this.initBeDevice();
     await this.initBeGame();
 
     this.spawnFoes();
@@ -105,19 +103,10 @@ export default class FightScene extends MainScene {
 
   //=[ BE initialization ]======================================================
 
-  async initBeDevice() {
-    const deviceId = sessionStorage.getItem(DEVICE_KEY);
-    if (deviceId === null) {
-      this.beDevice = (await backend.createDevice()).data;
-    } else {
-      this.beDevice = (await backend.getDevice(deviceId)).data;
-    }
-    sessionStorage.setItem(DEVICE_KEY, this.beDevice.id);
-  }
-
   async initBeGame() {
+    const deviceId = this.game.getDeviceId();
     this.beGame = (
-      await backend.createGame(this.beDevice.id, {
+      await backend.createGame(deviceId, {
         began_at: new Date().toISOString(),
         began_at_gmtm: this.getGameTime(),
       })

frontend/src/js/game.ts

@@ -9,6 +9,11 @@ import PauseScene from "./pause_scene";
 import TutorialScene from "./tutorial_scene";
 import LeaderboardScene from "./leaderboard_scene";
 
+import * as Types from "../../../backend/src/types";
+import backend from "./backend";
+
+const DEVICE_ID_KEY = "OETZIT/DEVICE_ID";
+
 export const GRAVITY_Y = 200;
 
 const CONFIG = {
@@ -37,9 +42,32 @@ const CONFIG = {
 };
 
 export default class Game extends Phaser.Game {
+  beDevice!: Types.Device;
+
   constructor() {
     super(CONFIG);
     this.bindFocusEvents();
+    this.events.on(Phaser.Core.Events.READY, this.initBeDevice.bind(this));
+  }
+
+  async initBeDevice() {
+    const deviceId = this.getDeviceId();
+    if (deviceId === null) {
+      this.beDevice = (await backend.createDevice()).data;
+    } else {
+      this.beDevice = (await backend.getDevice(deviceId)).data;
+    }
+    this.setDeviceId(this.beDevice.id);
+  }
+
+  setDeviceId(deviceId: string) {
+    sessionStorage.setItem(DEVICE_ID_KEY, deviceId);
+  }
+
+  getDeviceId(): string {
+    const deviceId = sessionStorage.getItem(DEVICE_ID_KEY);
+    if (deviceId !== null) return deviceId;
+    throw new Error("getDeviceId was called before initBeDevice");
   }
 
   bindFocusEvents() {

frontend/src/js/leaderboard_scene.ts

@@ -4,9 +4,9 @@ import { FONTS } from "./assets";
 import { uniqueNamesGenerator, names } from "unique-names-generator";
 import backend from "./backend";
 import { LeaderboardItem, LeaderboardView } from "../../../backend/src/types";
+import Game from "./game";
 
 const MEDALS = ["🥇", "🥈", "🥉"];
-const DEVICE_KEY = "OETZIT/DEVICE_ID";
 
 const BUTTON_HIGHLIGHT_COLOR = "darkorange";
 
@@ -42,6 +42,7 @@ const TEXT_STYLE: {
 };
 
 export default class LeaderboardScene extends Phaser.Scene {
+  game!: Game;
   music!: Phaser.Sound.BaseSound;
   rankings!: Phaser.GameObjects.Text;
   message!: Phaser.GameObjects.Text;
@@ -68,20 +69,16 @@ export default class LeaderboardScene extends Phaser.Scene {
   async fetchLeaderboardView() {
     return (
       await backend.createLeaderboardView({
-        device_id: this.getDeviceUUID() ?? undefined,
+        device_id: this.game.getDeviceId() ?? undefined,
       })
     ).data;
   }
 
   calculateCurrentDeviceIndex() {
-    const uuid = this.getDeviceUUID();
+    const uuid = this.game.getDeviceId();
     return this.leaderboardView.findIndex(({ device_id }) => device_id == uuid);
   }
 
-  getDeviceUUID() {
-    return sessionStorage.getItem(DEVICE_KEY);
-  }
-
   async createRankings() {
     const renderedRankings = this.renderRankings(this.leaderboardView);
 
@@ -109,7 +106,7 @@ export default class LeaderboardScene extends Phaser.Scene {
 
     // Find and mark current device
     const myIndex = leaderboardItems.findIndex(
-      ({ device_id }) => device_id == this.getDeviceUUID(),
+      ({ device_id }) => device_id == this.game.getDeviceId(),
     );
     if (myIndex > -1) output[myIndex][1] = "> YOU <";