Merge branch 'main' into main

src/client/PublicLobby.ts

@@ -3,6 +3,7 @@ import { customElement, state } from "lit/decorators.js";
 import { Lobby } from "../core/Schemas";
 import { Difficulty, GameMapType, GameType } from "../core/game/Game";
 import { consolex } from "../core/Consolex";
+import { getMapsImage } from "./utilities/Maps";
 
 @customElement("public-lobby")
 export class PublicLobby extends LitElement {
@@ -80,23 +81,33 @@ export class PublicLobby extends LitElement {
           : "bg-gradient-to-r from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90"
       >
         <div class="text-lg md:text-2xl font-semibold mb-2">Next Game</div>
-        <div class="flex items-center justify-center gap-4">
-          <div class="flex flex-col items-start">
-            <div class="text-md font-medium text-blue-100">
-              ${lobby.gameConfig.gameMap}
+        <div class="flex">
+          <img
+            src="${getMapsImage(lobby.gameConfig.gameMap)}"
+            alt="${lobby.gameConfig.gameMap}"
+            class="w-1/3 md:w-1/5 md:h-[80px]"
+            style="border: 1px solid rgba(255, 255, 255, 0.5)"
+          />
+          <div
+            class="w-full flex flex-col md:flex-row items-center justify-center gap-4"
+          >
+            <div class="flex flex-col items-start">
+              <div class="text-md font-medium text-blue-100">
+                ${lobby.gameConfig.gameMap}
+              </div>
             </div>
-          </div>
-          <div class="flex flex-col items-start">
-            <div class="text-md font-medium text-blue-100">
-              ${lobby.numClients}
-              ${lobby.numClients === 1 ? "Player" : "Players"} waiting
+            <div class="flex flex-col items-start">
+              <div class="text-md font-medium text-blue-100">
+                ${lobby.numClients}
+                ${lobby.numClients === 1 ? "Player" : "Players"} waiting
+              </div>
             </div>
-          </div>
-          <div class="flex items-center">
-            <div
-              class="min-w-20 text-sm font-medium px-2 py-1 bg-white/10 rounded-xl text-blue-100 text-center"
-            >
-              ${timeDisplay}
+            <div class="flex items-center">
+              <div
+                class="min-w-20 text-sm font-medium px-2 py-1 bg-white/10 rounded-xl text-blue-100 text-center"
+              >
+                ${timeDisplay}
+              </div>
             </div>
           </div>
         </div>

src/client/Transport.ts

@@ -26,10 +26,6 @@ import {
 } from "../core/Schemas";
 import { LobbyConfig } from "./ClientGameRunner";
 import { LocalServer } from "./LocalServer";
-import { UsernameInput } from "./UsernameInput";
-import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal";
-import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
-import { SinglePlayerModal } from "./SinglePlayerModal";
 import { PlayerView } from "../core/game/GameView";
 
 export class PauseGameEvent implements GameEvent {
@@ -175,6 +171,7 @@ export class Transport {
               ClientPingMessageSchema.parse({
                 type: "ping",
                 clientID: this.lobbyConfig.clientID,
+                persistentID: this.lobbyConfig.persistentID,
                 gameID: this.lobbyConfig.gameID,
               }),
             ),
@@ -311,7 +308,7 @@ export class Transport {
     this.sendIntent({
       type: "allianceRequest",
       clientID: this.lobbyConfig.clientID,
-      requestor: event.requestor.id(),
+      playerID: event.requestor.id(),
       recipient: event.recipient.id(),
     });
   }
@@ -321,7 +318,7 @@ export class Transport {
       type: "allianceRequestReply",
       clientID: this.lobbyConfig.clientID,
       requestor: event.requestor.id(),
-      recipient: event.recipient.id(),
+      playerID: event.recipient.id(),
       accept: event.accepted,
     });
   }
@@ -330,7 +327,7 @@ export class Transport {
     this.sendIntent({
       type: "breakAlliance",
       clientID: this.lobbyConfig.clientID,
-      requestor: event.requestor.id(),
+      playerID: event.requestor.id(),
       recipient: event.recipient.id(),
     });
   }
@@ -352,7 +349,7 @@ export class Transport {
     this.sendIntent({
       type: "attack",
       clientID: this.lobbyConfig.clientID,
-      attackerID: this.lobbyConfig.playerID,
+      playerID: this.lobbyConfig.playerID,
       targetID: event.targetID,
       troops: event.troops,
     });
@@ -362,7 +359,7 @@ export class Transport {
     this.sendIntent({
       type: "boat",
       clientID: this.lobbyConfig.clientID,
-      attackerID: this.lobbyConfig.playerID,
+      playerID: this.lobbyConfig.playerID,
       targetID: event.targetID,
       troops: event.troops,
       x: event.cell.x,
@@ -374,7 +371,7 @@ export class Transport {
     this.sendIntent({
       type: "targetPlayer",
       clientID: this.lobbyConfig.clientID,
-      requestor: this.lobbyConfig.playerID,
+      playerID: this.lobbyConfig.playerID,
       target: event.targetID,
     });
   }
@@ -383,7 +380,7 @@ export class Transport {
     this.sendIntent({
       type: "emoji",
       clientID: this.lobbyConfig.clientID,
-      sender: this.lobbyConfig.playerID,
+      playerID: this.lobbyConfig.playerID,
       recipient:
         event.recipient == AllPlayers ? AllPlayers : event.recipient.id(),
       emoji: event.emoji,
@@ -394,7 +391,7 @@ export class Transport {
     this.sendIntent({
       type: "donate",
       clientID: this.lobbyConfig.clientID,
-      sender: event.sender.id(),
+      playerID: event.sender.id(),
       recipient: event.recipient.id(),
       troops: event.troops,
     });
@@ -404,7 +401,7 @@ export class Transport {
     this.sendIntent({
       type: "troop_ratio",
       clientID: this.lobbyConfig.clientID,
-      player: this.lobbyConfig.playerID,
+      playerID: this.lobbyConfig.playerID,
       ratio: event.ratio,
     });
   }
@@ -413,7 +410,7 @@ export class Transport {
     this.sendIntent({
       type: "build_unit",
       clientID: this.lobbyConfig.clientID,
-      player: this.lobbyConfig.playerID,
+      playerID: this.lobbyConfig.playerID,
       unit: event.unit,
       x: event.cell.x,
       y: event.cell.y,
@@ -437,6 +434,7 @@ export class Transport {
       const msg = ClientSendWinnerSchema.parse({
         type: "winner",
         clientID: this.lobbyConfig.clientID,
+        persistentID: this.lobbyConfig.persistentID,
         gameID: this.lobbyConfig.gameID,
         winner: event.winner,
       });
@@ -455,6 +453,7 @@ export class Transport {
       const msg = ClientIntentMessageSchema.parse({
         type: "intent",
         clientID: this.lobbyConfig.clientID,
+        persistentID: this.lobbyConfig.persistentID,
         gameID: this.lobbyConfig.gameID,
         intent: intent,
       });

src/client/graphics/layers/ControlPanel.ts

@@ -52,6 +52,10 @@ export class ControlPanel extends LitElement implements Layer {
   @state()
   private _goldPerSecond: number;
 
+  private _lastPopulationIncreaseRate: number;
+
+  private _popRateIsIncreasing: boolean = true;
+
   init() {
     this.attackRatio = 0.2;
     this.uiState.attackRatio = this.attackRatio;
@@ -63,12 +67,19 @@ export class ControlPanel extends LitElement implements Layer {
       this.setVisibile(true);
     }
 
-    const player = this.game.playerByClientID(this.clientID);
+    const player = this.game.myPlayer();
     if (player == null || !player.isAlive()) {
       this.setVisibile(false);
       return;
     }
 
+    const popIncreaseRate = player.population() - this._population;
+    if (this.game.ticks() % 5 == 0) {
+      this._popRateIsIncreasing =
+        popIncreaseRate >= this._lastPopulationIncreaseRate;
+      this._lastPopulationIncreaseRate = popIncreaseRate;
+    }
+
     this._population = player.population();
     this._maxPopulation = this.game.config().maxPopulation(player);
     this._gold = player.gold();
@@ -78,6 +89,7 @@ export class ControlPanel extends LitElement implements Layer {
     this._goldPerSecond = this.game.config().goldAdditionRate(player) * 10;
 
     this.currentTroopRatio = player.troops() / player.population();
+    this.requestUpdate();
   }
 
   onAttackRatioChange(newRatio: number) {
@@ -163,7 +175,12 @@ export class ControlPanel extends LitElement implements Layer {
             <span
               >${renderTroops(this._population)} /
               ${renderTroops(this._maxPopulation)}
-              (+${renderTroops(this.popRate)})</span
+              <span
+                class="${this._popRateIsIncreasing
+                  ? "text-green-500"
+                  : "text-yellow-500"}"
+                >(+${renderTroops(this.popRate)})</span
+              ></span
             >
           </div>
           <div class="flex justify-between">

src/client/index.html

@@ -167,7 +167,7 @@
           </a>
         </div>
 
-        <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
+        <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4">
           <public-lobby class="w-full"></public-lobby>
         </div>
 

src/client/utilities/Maps.ts

@@ -5,6 +5,7 @@ import mena from "../../../resources/maps/Mena.png";
 import northAmerica from "../../../resources/maps/NorthAmerica.png";
 import blackSea from "../../../resources/maps/BlackSea.png";
 import africa from "../../../resources/maps/Africa.png";
+ main
 import { GameMapType } from "../../core/game/Game";
 
 export function getMapsImage(map: GameMapType): string {
@@ -23,6 +24,8 @@ export function getMapsImage(map: GameMapType): string {
       return blackSea;
     case GameMapType.Africa
       return Africa;
+
+      main
     default:
       return "";
   }