diff --git a/server.js b/server.js index d75c4e4..fa8d04a 100644 --- a/server.js +++ b/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"); diff --git a/src/game.js b/src/game.js index 346063d..b07ef94 100644 --- a/src/game.js +++ b/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 line = player + const y = listStartY + i * 24; + 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.lineTo(panelX + panelWidth / 2, panelY + 306); + ctx.moveTo(splitX, panelY + 98); + 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";