From 0ea670d975ae85cc905594363a627f030c0c98fb Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Sat, 17 Aug 2024 12:42:18 -0700
Subject: [PATCH] better game join logic, create dev and prod configs

---
 TODO.txt                                | 11 +++++++----
 src/client/Client.ts                    | 22 ++++++++++++----------
 src/client/ClientGame.ts                | 13 +++++++++++--
 src/client/graphics/GameRenderer.ts     |  5 +----
 src/client/index.html                   |  4 ++--
 src/core/Schemas.ts                     |  9 +++++++--
 src/core/configuration/Config.ts        | 11 +++++++++++
 src/core/configuration/DefaultConfig.ts | 14 +++++++++-----
 src/core/configuration/DevConfig.ts     | 10 ++++++++++
 src/server/GameManager.ts               |  4 ++--
 src/server/GameServer.ts                | 23 +++++++++++++----------
 src/server/Server.ts                    |  7 ++++---
 webpack.config.js                       |  3 +++
 13 files changed, 92 insertions(+), 44 deletions(-)
 create mode 100644 src/core/configuration/DevConfig.ts

diff --git a/TODO.txt b/TODO.txt
index 71b3403e8..31ffdd3e4 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -19,14 +19,16 @@
 * fix server resource leak DONE 8/14/2024
 * fix bug where game stops after 10s (websocket disconnection) DONE 8/16/2024
 * balance attacks/expansions better DONE 8/16/2024
+* delete players when territories too small DONE 8/16/2024
+* double attack add troops DONE 8/16/2024
+* Have some time for spawning before game starts DONE 8/16/2024
+* only send delta turns on connect/reconnect DONE 8/17/2024
+* Create separate game config dev vs prod
+* improve front page, only one game at a time every 30s
 * fix desync
 * fix server memory leak
 * BUG: boats not going to destination, coast not being recognized
 * BUG: boats freeze game on path calculation
-* double attack add troops
-* Create separate game config dev vs prod
-* Have some time for spawning before game starts
-* delete players when territories too small
 * better algorithm for name render placement
 * make boats larger
 * have boats not get close to shore
@@ -36,3 +38,4 @@
 * fix enemy islands when attacking
 * BUG: ocean is considered TerraNullius
 * on websocket connect server only send missing turns not all turns
+* BUG: fix hotreload (priority queue breaks it)
diff --git a/src/client/Client.ts b/src/client/Client.ts
index f00137dd4..707919bbb 100644
--- a/src/client/Client.ts
+++ b/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()
         })
     }
diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts
index e5ee2bab8..47616c68e 100644
--- a/src/client/ClientGame.ts
+++ b/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
         }
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 5ff388d52..363b6907e 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/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";
 
 
diff --git a/src/client/index.html b/src/client/index.html
index c8787e00b..2dab6c4fd 100644
--- a/src/client/index.html
+++ b/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>
diff --git a/src/core/Schemas.ts b/src/core/Schemas.ts
index a6745f40c..01afded7a 100644
--- a/src/core/Schemas.ts
+++ b/src/core/Schemas.ts
@@ -21,7 +21,10 @@ export type ServerStartGameMessage = z.infer<typeof ServerStartGameMessageSchema
 export type ClientIntentMessage = z.infer<typeof ClientIntentMessageSchema>
 export type ClientJoinMessage = z.infer<typeof ClientJoinMessageSchema>
 
-
+export interface Lobby {
+    id: string;
+    startTime: number;
+}
 
 // Zod schemas
 const BaseIntentSchema = z.object({
@@ -101,7 +104,9 @@ export const ClientIntentMessageSchema = ClientBaseMessageSchema.extend({
 export const ClientJoinMessageSchema = ClientBaseMessageSchema.extend({
     type: z.literal('join'),
     clientID: z.string(),
-    gameID: z.string()
+    gameID: z.string(),
+    // The last turn the client saw.
+    lastTurn: z.number()
 })
 
 export const ClientMessageSchema = z.union([ClientIntentMessageSchema, ClientJoinMessageSchema]);
\ No newline at end of file
diff --git a/src/core/configuration/Config.ts b/src/core/configuration/Config.ts
index cdc53bebc..3b5d94270 100644
--- a/src/core/configuration/Config.ts
+++ b/src/core/configuration/Config.ts
@@ -1,6 +1,17 @@
 import {Player, PlayerID, PlayerInfo, TerrainType, TerrainTypes, TerraNullius, Tile} from "../Game";
 import {Colord, colord} from "colord";
+import {devConfig} from "./DevConfig";
+import {defaultConfig} from "./DefaultConfig";
 
+export function getConfig(): Config {
+	if (process.env.GAME_ENV == 'prod') {
+		console.log('Using prod config')
+		return defaultConfig
+	} else {
+		console.log('Using dev config')
+		return devConfig
+	}
+}
 
 export interface Config {
 	theme(): Theme;
diff --git a/src/core/configuration/DefaultConfig.ts b/src/core/configuration/DefaultConfig.ts
index 77b2994a5..82333b4dc 100644
--- a/src/core/configuration/DefaultConfig.ts
+++ b/src/core/configuration/DefaultConfig.ts
@@ -3,9 +3,11 @@ import {within} from "../Util";
 import {Config, PlayerConfig, Theme} from "./Config";
 import {pastelTheme} from "./PastelTheme";
 
-export const defaultConfig = new class implements Config {
+
+
+export class DefaultConfig implements Config {
     turnsUntilGameStart(): number {
-        return 50
+        return 25
     }
     numBots(): number {
         return 500
@@ -17,10 +19,10 @@ export const defaultConfig = new class implements Config {
         return 100
     }
     gameCreationRate(): number {
-        return 2 * 1000
+        return 31.5 * 1000
     }
     lobbyLifetime(): number {
-        return 10 * 1000
+        return 30 * 1000
     }
     theme(): Theme {return pastelTheme;}
 }
@@ -75,4 +77,6 @@ export const defaultPlayerConfig = new class implements PlayerConfig {
         return Math.min(player.troops() + toAdd, max)
     }
 
-}
\ No newline at end of file
+}
+
+export const defaultConfig = new DefaultConfig()
diff --git a/src/core/configuration/DevConfig.ts b/src/core/configuration/DevConfig.ts
new file mode 100644
index 000000000..5dda7df8c
--- /dev/null
+++ b/src/core/configuration/DevConfig.ts
@@ -0,0 +1,10 @@
+import {DefaultConfig} from "./DefaultConfig";
+
+export const devConfig = new class extends DefaultConfig {
+    gameCreationRate(): number {
+        return 2 * 1000
+    }
+    lobbyLifetime(): number {
+        return 10 * 1000
+    }
+}
\ No newline at end of file
diff --git a/src/server/GameManager.ts b/src/server/GameManager.ts
index 3cd8d5adb..bcd4155eb 100644
--- a/src/server/GameManager.ts
+++ b/src/server/GameManager.ts
@@ -20,13 +20,13 @@ export class GameManager {
         return this.games.filter(g => g.phase() == phase)
     }
 
-    addClient(client: Client, gameID: GameID) {
+    addClient(client: Client, gameID: GameID, lastTurn: number) {
         const game = this.games.find(g => g.id == gameID)
         if (!game) {
             console.log(`game id ${gameID} not found`)
             return
         }
-        game.addClient(client)
+        game.addClient(client, lastTurn)
     }
 
     tick() {
diff --git a/src/server/GameServer.ts b/src/server/GameServer.ts
index be91206ce..6bb54c9f3 100644
--- a/src/server/GameServer.ts
+++ b/src/server/GameServer.ts
@@ -25,10 +25,10 @@ export class GameServer {
     constructor(
         public readonly id: string,
         public readonly createdAt: number,
-        private settings: Config,
+        private config: Config,
     ) { }
 
-    public addClient(client: Client) {
+    public addClient(client: Client, lastTurn: number) {
         console.log(`game ${this.id} adding client ${client.id}`)
         // Remove stale client if this is a reconnect
         this.clients = this.clients.filter(c => c.id != client.id)
@@ -46,29 +46,32 @@ export class GameServer {
 
         // In case a client joined the game late and missed the start message.
         if (this._hasStarted) {
-            this.sendStartGameMsg(client.ws)
+            this.sendStartGameMsg(client.ws, lastTurn)
         }
     }
 
+    public startTime(): number {
+        return this.createdAt + this.config.lobbyLifetime()
+    }
+
     public start() {
         this._hasStarted = true
         this.clients.forEach(c => {
             console.log(`game ${this.id} sending start message to ${c.id}`)
-            this.sendStartGameMsg(c.ws)
+            this.sendStartGameMsg(c.ws, 0)
         })
-        this.endTurnIntervalID = setInterval(() => this.endTurn(), this.settings.turnIntervalMs());
+        this.endTurnIntervalID = setInterval(() => this.endTurn(), this.config.turnIntervalMs());
     }
 
     private addIntent(intent: Intent) {
         this.intents.push(intent)
     }
 
-    private sendStartGameMsg(ws: WebSocket) {
+    private sendStartGameMsg(ws: WebSocket, lastTurn: number) {
         ws.send(JSON.stringify(ServerStartGameMessageSchema.parse(
             {
                 type: "start",
-                // TODO: this could get large
-                turns: this.turns
+                turns: this.turns.slice(lastTurn)
             }
         )))
     }
@@ -106,10 +109,10 @@ export class GameServer {
     }
 
     phase(): GamePhase {
-        if (Date.now() - this.createdAt < this.settings.lobbyLifetime()) {
+        if (Date.now() - this.createdAt < this.config.lobbyLifetime()) {
             return GamePhase.Lobby
         }
-        if (Date.now() - this.createdAt < this.settings.lobbyLifetime() + this.gameDuration) {
+        if (Date.now() - this.createdAt < this.config.lobbyLifetime() + this.gameDuration) {
             return GamePhase.Active
         }
         return GamePhase.Finished
diff --git a/src/server/Server.ts b/src/server/Server.ts
index 631132e88..30a18fd4e 100644
--- a/src/server/Server.ts
+++ b/src/server/Server.ts
@@ -8,6 +8,7 @@ import {Client} from './Client';
 import {ClientMessage, ClientMessageSchema} from '../core/Schemas';
 import {defaultConfig} from '../core/configuration/DefaultConfig';
 import {GamePhase} from './GameServer';
+import {getConfig} from '../core/configuration/Config';
 
 
 
@@ -23,12 +24,12 @@ const wss = new WebSocketServer({server});
 app.use(express.static(path.join(__dirname, '../../out')));
 app.use(express.json())
 
-const gm = new GameManager(defaultConfig)
+const gm = new GameManager(getConfig())
 
 // New GET endpoint to list lobbies
 app.get('/lobbies', (req, res) => {
     res.json({
-        lobbies: gm.gamesByPhase(GamePhase.Lobby).map(g => g.id),
+        lobbies: gm.gamesByPhase(GamePhase.Lobby).map(g => ({id: g.id, startTime: g.startTime()})),
     });
 });
 
@@ -39,7 +40,7 @@ wss.on('connection', (ws) => {
         const clientMsg: ClientMessage = ClientMessageSchema.parse(JSON.parse(message))
         if (clientMsg.type == "join") {
             console.log('got join request')
-            gm.addClient(new Client(clientMsg.clientID, ws), clientMsg.gameID)
+            gm.addClient(new Client(clientMsg.clientID, ws), clientMsg.gameID, clientMsg.lastTurn)
         }
         // TODO: send error message
     })
diff --git a/webpack.config.js b/webpack.config.js
index 3231c475a..da807a51c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,6 +42,9 @@ export default (env, argv) => {
 			new webpack.DefinePlugin({
 				'process.env.WEBSOCKET_URL': JSON.stringify(isProduction ? '' : 'localhost:3000')
 			}),
+			new webpack.DefinePlugin({
+				'process.env.GAME_ENV': JSON.stringify(isProduction ? 'prod' : 'dev')
+			}),
 		],
 		devServer: isProduction ? {} : {
 			static: {