Added map image preview for public lobby

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">
-          <div class="flex flex-col items-start">
+          <img
-            <div class="text-md font-medium text-blue-100">
+            src="${getMapsImage(lobby.gameConfig.gameMap)}"
-              ${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="flex flex-col items-start">
+              <div class="text-md font-medium text-blue-100">
-            <div class="text-md font-medium text-blue-100">
+                ${lobby.numClients}
-              ${lobby.numClients}
+                ${lobby.numClients === 1 ? "Player" : "Players"} waiting
-              ${lobby.numClients === 1 ? "Player" : "Players"} waiting
+              </div>
             </div>
-          </div>
+            <div class="flex items-center">
-          <div class="flex items-center">
+              <div
-            <div
+                class="min-w-20 text-sm font-medium px-2 py-1 bg-white/10 rounded-xl text-blue-100 text-center"
-              class="min-w-20 text-sm font-medium px-2 py-1 bg-white/10 rounded-xl text-blue-100 text-center"
+              >
-            >
+                ${timeDisplay}
-              ${timeDisplay}
+              </div>
             </div>
           </div>
         </div>

src/client/components/Maps.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { GameMapType } from "../../core/game/Game";
+import { getMapsImage } from "../utilities/Maps";
 
 // Add map descriptions
 export const MapDescription: Record<keyof typeof GameMapType, string> = {
@@ -12,13 +13,6 @@ export const MapDescription: Record<keyof typeof GameMapType, string> = {
   BlackSea: "Black Sea",
 };
 
-import world from "../../../resources/maps/WorldMap.png";
-import oceania from "../../../resources/maps/Oceania.png";
-import europe from "../../../resources/maps/Europe.png";
-import mena from "../../../resources/maps/Mena.png";
-import northAmerica from "../../../resources/maps/NorthAmerica.png";
-import blackSea from "../../../resources/maps/BlackSea.png";
-
 @customElement("map-display")
 export class MapDisplay extends LitElement {
   @property({ type: String }) mapKey = "";
@@ -73,33 +67,14 @@ export class MapDisplay extends LitElement {
     }
   `;
 
-  private getMapsImage(map: GameMapType): string {
-    switch (map) {
-      case GameMapType.World:
-        return world;
-      case GameMapType.Oceania:
-        return oceania;
-      case GameMapType.Europe:
-        return europe;
-      case GameMapType.Mena:
-        return mena;
-      case GameMapType.NorthAmerica:
-        return northAmerica;
-      case GameMapType.BlackSea:
-        return blackSea;
-      default:
-        return "";
-    }
-  }
-
   render() {
     const mapValue = GameMapType[this.mapKey as keyof typeof GameMapType];
 
     return html`
       <div class="option-card ${this.selected ? "selected" : ""}">
-        ${this.getMapsImage(mapValue)
+        ${getMapsImage(mapValue)
           ? html`<img
-              src="${this.getMapsImage(mapValue)}"
+              src="${getMapsImage(mapValue)}"
               alt="${this.mapKey}"
               class="option-image"
             />`

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

@@ -0,0 +1,26 @@
+import world from "../../../resources/maps/WorldMap.png";
+import oceania from "../../../resources/maps/Oceania.png";
+import europe from "../../../resources/maps/Europe.png";
+import mena from "../../../resources/maps/Mena.png";
+import northAmerica from "../../../resources/maps/NorthAmerica.png";
+import blackSea from "../../../resources/maps/BlackSea.png";
+import { GameMapType } from "../../core/game/Game";
+
+export function getMapsImage(map: GameMapType): string {
+  switch (map) {
+    case GameMapType.World:
+      return world;
+    case GameMapType.Oceania:
+      return oceania;
+    case GameMapType.Europe:
+      return europe;
+    case GameMapType.Mena:
+      return mena;
+    case GameMapType.NorthAmerica:
+      return northAmerica;
+    case GameMapType.BlackSea:
+      return blackSea;
+    default:
+      return "";
+  }
+}