Increase to 8 multiplayers

server.js

@@ -5,7 +5,7 @@ const crypto = require("crypto");
 const { WebSocketServer } = require("ws");
 
 const PORT = Number(process.env.PORT || 8080);
-const MAX_PLAYERS = 4;
+const MAX_PLAYERS = 8;
 const ROOT = __dirname;
 const HIGHSCORE_FILE = path.join(ROOT, "highscores.json");
 

src/game.js

@@ -45,10 +45,14 @@ const SPAWN_POINTS = [
   { x: CONFIG.cols - 2, y: 1 },
   { x: 1, y: CONFIG.rows - 2 },
   { x: CONFIG.cols - 2, y: CONFIG.rows - 2 },
+  { x: Math.floor(CONFIG.cols / 2), y: 1 },
+  { x: Math.floor(CONFIG.cols / 2), y: CONFIG.rows - 2 },
+  { x: 1, y: Math.floor(CONFIG.rows / 2) },
+  { x: CONFIG.cols - 2, y: Math.floor(CONFIG.rows / 2) },
 ];
 
 const POWERUPS = ["bomb", "flame", "speed"];
-const MAX_PLAYERS = 4;
+const MAX_PLAYERS = 8;
 const NETWORK_PATH = "/ws";
 const PLAYER_NAME_STORAGE_KEY = "gptBomberPlayerName";
 const SNAPSHOT_RATE = 24;
@@ -2116,43 +2120,61 @@ function drawLobby() {
   const lobbyHint =
     network.lobbyPhase === "game"
       ? "Match currently running. You will join next round."
-      : "Host can start with 2-4 players.";
+      : "Host can start with 2-8 players.";
   ctx.fillText(lobbyHint, canvas.width / 2, panelY + 74);
 
+  const splitX = panelX + panelWidth / 2;
+  const playerListX = panelX + 34;
+  const highscoreX = splitX + 24;
+  const listStartY = panelY + 130;
+
+  const fitLine = (text, maxWidth) => {
+    const limit = Math.max(10, maxWidth);
+    let trimmed = text;
+    while (ctx.measureText(trimmed).width > limit && trimmed.length > 4) {
+      trimmed = trimmed.slice(0, -4) + "...";
+    }
+    return trimmed;
+  };
+
   ctx.textAlign = "left";
-  ctx.font = "bold 17px Trebuchet MS";
+  ctx.font = "bold 15px Trebuchet MS";
   ctx.fillStyle = "#ffdca3";
-  ctx.fillText("Lobby Players", panelX + 34, panelY + 102);
+  ctx.fillText("Lobby Players", playerListX, panelY + 102);
+
+  const playerMaxWidth = splitX - playerListX - 18;
   for (let i = 0; i < MAX_PLAYERS; i += 1) {
     const player = network.lobbyPlayers[i];
-    const y = panelY + 136 + i * 34;
+    const y = listStartY + i * 24;
-    const line = player
+    const rawLine = player
       ? String(i + 1) + ". " + player.name + (player.id === network.hostId ? " (Host)" : "")
       : String(i + 1) + ". Waiting...";
+    const line = fitLine(rawLine, playerMaxWidth);
     ctx.fillStyle = player ? "#e9f6ff" : "#8fb6d4";
-    ctx.fillText(line, panelX + 34, y);
+    ctx.fillText(line, playerListX, y);
   }
 
   ctx.strokeStyle = "#8acfff44";
   ctx.beginPath();
-  ctx.moveTo(panelX + panelWidth / 2, panelY + 98);
+  ctx.moveTo(splitX, panelY + 98);
-  ctx.lineTo(panelX + panelWidth / 2, panelY + 306);
+  ctx.lineTo(splitX, panelY + 318);
   ctx.stroke();
 
   ctx.fillStyle = "#ffdca3";
   ctx.font = "bold 17px Trebuchet MS";
-  ctx.fillText("Server Highscores", panelX + panelWidth / 2 + 24, panelY + 102);
+  ctx.fillText("Server Highscores", highscoreX, panelY + 102);
 
+  const highscoreMaxWidth = panelX + panelWidth - highscoreX - 20;
   if (network.highscores.length === 0) {
     ctx.fillStyle = "#8fb6d4";
     ctx.font = "bold 15px Trebuchet MS";
-    ctx.fillText("No rounds recorded yet.", panelX + panelWidth / 2 + 24, panelY + 136);
+    ctx.fillText("No rounds recorded yet.", highscoreX, listStartY);
   } else {
     ctx.font = "bold 14px Trebuchet MS";
     network.highscores.forEach((entry, index) => {
-      const y = panelY + 136 + index * 22;
+      const y = listStartY + index * 20;
       const rank = String(index + 1).padStart(2, "0");
-      const line =
+      const rawLine =
         rank +
         ". " +
         entry.name +
@@ -2161,18 +2183,19 @@ function drawLobby() {
         " (" +
         formatAliveSeconds(entry.longestAlive) +
         ")";
+      const line = fitLine(rawLine, highscoreMaxWidth);
       ctx.fillStyle = "#e9f6ff";
-      ctx.fillText(line, panelX + panelWidth / 2 + 24, y);
+      ctx.fillText(line, highscoreX, y);
     });
   }
 
   const items = getLobbyMenuItems();
   items.forEach((item, index) => {
-    const y = panelY + 324 + index * 34;
+    const y = panelY + 326 + index * 30;
     const selected = index === state.lobbyMenu.selectedIndex;
     if (selected && !item.disabled) {
       ctx.fillStyle = "#ffd166";
-      ctx.fillRect(panelX + 34, y - 21, panelWidth - 68, 28);
+      ctx.fillRect(panelX + 34, y - 18, panelWidth - 68, 26);
     }
     ctx.fillStyle = item.disabled ? "#7f9bb0" : selected ? "#1a2a3f" : "#e7f4ff";
     ctx.textAlign = "center";