Add initial map instantiation on player join (#24)

app/ArcadeUI.ts

@@ -34,13 +34,14 @@ export class ArcadeUI {
     spectatorStart.addEventListener("click", () => { this.startContest(); });
 
     qrContainer.addEventListener("click", (e) => {
-        const parent = e.target.closest(".qr-code-container")
-      console.log(123, e.target, parent)
+        const parent = e.target.closest(".qr-code-container");
+      console.log(123, e.target, parent);
       parent.classList.toggle("minimise");
     });
 
     this.contestHandler = new ArcadeContestHandler(
-        this.arcadeInstanceId, () => { this.onEndContest(); });
+        this.arcadeInstanceId, () => { this.onEndContest(); }
+    );
 
     this.eventListenerController = new AbortController();
   }

app/arcade-ui-helpers/ArcadeContestHandler.ts

@@ -113,7 +113,7 @@ export class ArcadeContestHandler {
 
     await this.messages.display("Game over!", 5000);
   }
-
+ 
   private async updateGlobalLeaderboard() {
     const history = await this.scoreChannel.history();
     const historyPage = history.items[0];

app/games/rps/AblyHandler.ts

@@ -1,4 +1,4 @@
-import { Realtime, Types } from 'ably';
+import { Realtime, Rest, Types } from 'ably';
 import { Player } from './Player';
 
 export class AblyHandler {
@@ -45,6 +45,21 @@ export class AblyHandler {
         return await this.stateChannel.presence.get();
     }
 
+    public async getMap(gameId: string) {
+        const rest = new Rest.Promise({ authUrl: '/api/ably-token-request' });
+        const stateChannel = rest.channels.get("control-messages:" + gameId);
+        const history = await stateChannel.history();
+        const historyMessage = history.items[0];
+        const previousStateData = historyMessage?.data || [];
+
+        if (!previousStateData || previousStateData === undefined) {
+        console.log("Oh no! Map lost! Not updating.", history);
+        return;
+        }
+
+        return previousStateData.seed;
+    }
+
     private toPlayerMetadata(player: Player) {
         return {
             'id': player.id,

app/games/rps/Game.ts

@@ -38,8 +38,8 @@ export class Game implements IGame {
     public constructor(gameId: string, gameRoot: HTMLElement, spectator: boolean = false, assetSource: IAssetSource = null) {
         this.gameId = gameId;
         this.spectator = spectator;
+        this.ablyHandler = new AblyHandler();
 
-        this.map = new GameMap(Level[0]);
         this.renderer = new Renderer(gameRoot, spectator, assetSource);
         this.tickRate = 10;
 
@@ -51,9 +51,14 @@ export class Game implements IGame {
         this.keybindings.set(Keyboard.UP, (d) => { d.y = -1 });
         this.keybindings.set(Keyboard.DOWN, (d) => { d.y = 1 });
 
-        this.ablyHandler = new AblyHandler();
         this.colorChangeInterval = 5_000;
     }
+
+    public async loadMap() {
+        const seed = await this.ablyHandler.getMap(this.gameId);
+        const mapSelection = Math.floor(seed % (Level.length - 1));
+        this.map = new GameMap(Level[mapSelection]);
+    }
 
     public async preStart(playerName: string = null) {
         await this.renderer.init();

app/games/rps/Player.ts

@@ -136,7 +136,7 @@ export class Player {
     }
 
     public static spectator(map: Map) {
-        return new Player(map, "Spectator", 0, 0, true);
+        return new Player(map, "Spectator", -10, -10, true);
     }
 
     public static spawnPlayerInSafeLocation(map: Map, name: string) {

app/script.ts

@@ -37,12 +37,13 @@ if (requireSignup) {
     arcadeUi.showGame();
 }
 
-function startGame(spectator: boolean = false) {
+async function startGame(spectator: boolean = false) {
     if (runner) {
         runner.stop();
     }
 
     const game = new Game(arcadeInstanceId, arcadeUi.gameRoot, spectator);
+    await game.loadMap();
     runner = new GameRunner(game);
     runner.run(arcadeUi.playerName);
     arcadeUi.bind(runner);