better game join logic, create dev and prod configs

src/client/Client.ts

@@ -1,7 +1,9 @@
+import {getConfig} from "../core/configuration/Config";
 import {defaultConfig} from "../core/configuration/DefaultConfig";
+import {devConfig} from "../core/configuration/DevConfig";
 import {TerrainMap} from "../core/Game";
 import {PseudoRandom} from "../core/PseudoRandom";
-import {GameID, ServerMessage, ServerMessageSchema} from "../core/Schemas";
+import {GameID, Lobby, ServerMessage, ServerMessageSchema} from "../core/Schemas";
 import {loadTerrainMap} from "../core/TerrainMapLoader";
 import {ClientGame, createClientGame} from "./ClientGame";
 import {v4 as uuidv4} from 'uuid';
@@ -36,21 +38,21 @@ class Client {
 
     private async fetchAndUpdateLobbies(): Promise<void> {
         try {
-            const data = await this.fetchLobbies();
-            this.updateLobbiesDisplay(data.lobbies);
+            const lobbies = await this.fetchLobbies();
+            this.updateLobbiesDisplay(lobbies);
         } catch (error) {
             console.error('Error fetching and updating lobbies:', error);
         }
     }
 
-    private updateLobbiesDisplay(lobbies: GameID[]): void {
+    private updateLobbiesDisplay(lobbies: Lobby[]): void {
         if (!this.lobbiesContainer) return;
 
         this.lobbiesContainer.innerHTML = ''; // Clear existing lobbies
 
         lobbies.forEach(lobby => {
             const button = document.createElement('button');
-            button.textContent = `Join Lobby ${lobby}`;
+            button.textContent = `Join Lobby ${lobby.id} (${Math.floor((lobby.startTime - Date.now()) / 1000)}s)`;
             button.onclick = () => this.joinLobby(lobby);
             this.lobbiesContainer.appendChild(button);
         });
@@ -63,7 +65,7 @@ class Client {
         // }
     }
 
-    async fetchLobbies() {
+    async fetchLobbies(): Promise<Lobby[]> {
         const url = '/lobbies';
         try {
             const response = await fetch(url);
@@ -71,22 +73,22 @@ class Client {
                 throw new Error(`HTTP error! status: ${response.status}, statusText: ${response.statusText}`);
             }
             const data = await response.json();
-            return data;
+            return data.lobbies;
         } catch (error) {
             console.error('Error fetching lobbies:', error);
             throw error;
         }
     }
 
-    private async joinLobby(lobbyID: string) {
+    private async joinLobby(lobby: Lobby) {
         clearInterval(this.lobbiesInterval)
-        this.lobbiesContainer.innerHTML = 'Joining'; // Clear existing lobbies
+        this.lobbiesContainer.innerHTML = `Joining: ${lobby.id}`; // Clear existing lobbies
         this.terrainMap.then((map) => {
             if (this.game != null) {
                 return
             }
             // TODO make id more random, if two player join same millisecond get same id.
-            this.game = createClientGame(getUsername(), new PseudoRandom(Date.now()).nextID(), lobbyID, defaultConfig, map)
+            this.game = createClientGame(getUsername(), new PseudoRandom(Date.now()).nextID(), lobby.id, getConfig(), map)
             this.game.join()
         })
     }

src/client/ClientGame.ts

@@ -65,7 +65,8 @@ export class ClientGame {
                     ClientJoinMessageSchema.parse({
                         type: "join",
                         gameID: this.gameID,
-                        clientID: this.id
+                        clientID: this.id,
+                        lastTurn: this.turns.length
                     })
                 )
             )
@@ -74,7 +75,12 @@ export class ClientGame {
             const message: ServerMessage = ServerMessageSchema.parse(JSON.parse(event.data))
             if (message.type == "start") {
                 console.log("starting game!")
-                this.turns = message.turns
+                for (const turn of message.turns) {
+                    if (turn.turnNumber < this.turns.length) {
+                        continue
+                    }
+                    this.turns.push(turn)
+                }
                 if (!this.isActive) {
                     this.start()
                 }
@@ -148,6 +154,9 @@ export class ClientGame {
     }
 
     private inputEvent(event: MouseDownEvent) {
+        if (this.turns.length < this.config.turnsUntilGameStart()) {
+            return
+        }
         if (!this.isActive) {
             return
         }

src/client/graphics/GameRenderer.ts

@@ -1,10 +1,7 @@
 import {Colord} from "colord";
-import {Cell, MutableGame, Game, PlayerEvent, Tile, TileEvent, Player, Execution, BoatEvent} from "../../core/Game";
+import {Cell, Game, PlayerEvent, Tile, TileEvent, Player, Execution, BoatEvent} from "../../core/Game";
 import {Theme} from "../../core/configuration/Config";
 import {DragEvent, ZoomEvent} from "../InputHandler";
-import {calculateBoundingBox, placeName} from "../NameBoxCalculator";
-import {PseudoRandom} from "../../core/PseudoRandom";
-import {BoatAttackExecution} from "../../core/execution/BoatAttackExecution";
 import {NameRenderer} from "./NameRenderer";
 
 

src/client/index.html

@@ -4,7 +4,7 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Warfront</title>
+	<title>OpenFront</title>
 	<style>
 		body {
 			font-family: Arial, sans-serif;
@@ -67,7 +67,7 @@
 </head>
 
 <body>
-	<h1>Warfront</h1>
+	<h1>OpenFront (ALPHA)</h1>
 	<div id="username-container">
 		<input type="text" id="username" placeholder="Enter your username">
 	</div>