multiplayer fixes

README.md

@@ -93,7 +93,6 @@ location /ws {
 - [ ] Many different tanks to pick from
 - [ ] Many AIs to battle against (only Moron and Chooser implemented)
 - [ ] Configuration
-- [X] Local Multiplayer
 - [X] Internet Multiplayer (host-authoritative, via `server/` relay)
 
 ## What's new

index.html

@@ -17,6 +17,6 @@
   </style>
 </head>
 <body>
-  <script type="module" src="src/main.js?v=24"></script>
+  <script type="module" src="src/main.js?v=25"></script>
 </body>
 </html>

src/ai.js

@@ -1,5 +1,5 @@
-import {PLAYER_MAX_ENERGY, PLAYER_INITIAL_POWER, PLAYER_ENERGY_POWER_MULTIPLIER} from './constants.js?v=24';
-import {randomInt} from './math.js?v=24';
+import {PLAYER_MAX_ENERGY, PLAYER_INITIAL_POWER, PLAYER_ENERGY_POWER_MULTIPLIER} from './constants.js?v=25';
+import {randomInt} from './math.js?v=25';
 
 export const AI_TYPES = {
 

src/gfx.js

@@ -1,6 +1,6 @@
-import {splitWords} from './utils.js?v=24';
-import {parable} from './math.js?v=24';
-import {FONT_HEIGHT, FONT_WIDTH} from './constants.js?v=24';
+import {splitWords} from './utils.js?v=25';
+import {parable} from './math.js?v=25';
+import {FONT_HEIGHT, FONT_WIDTH} from './constants.js?v=25';
 
 export function createCanvas(width, height, readable) {
   const canvas = document.createElement('canvas');

src/input.js

@@ -1,4 +1,4 @@
-import {DEFAULT_KEYPRESS_DELAY, Z} from './constants.js?v=24';
+import {DEFAULT_KEYPRESS_DELAY, Z} from './constants.js?v=25';
 
 const input = {};
 let lastKeypressTime = 0;

src/main.js

@@ -1,17 +1,17 @@
-import {AI_TYPES} from './ai.js?v=24';
-import {DEATH_SPECS, EXPLOSION_SHAKE_REDUCTION_FACTOR, H, MAX_EXPLOSION_SHAKE_FACTOR, MAX_WIND, PARTICLE_AMOUNT, PARTICLE_FADE_AMOUNT, PARTICLE_MAX_POWER_FACTOR, PARTICLE_MIN_LIFETIME, PARTICLE_MIN_POWER_FACTOR, PARTICLE_POWER_REDUCTION_FACTOR, PARTICLE_TIME_FACTOR, PARTICLE_WIND_REDUCTION_FACTOR, PLAYER_ANGLE_FAST_INCREMENT, PLAYER_ANGLE_INCREMENT, PLAYER_ANGLE_TICK_SOUND_INTERVAL, PLAYER_COLORS, PLAYER_ENERGY_POWER_MULTIPLIER, PLAYER_EXPLOSION_PARTICLE_POWER, PLAYER_FALL_DAMAGE_FACTOR, PLAYER_FALL_DAMAGE_HEIGHT, PLAYER_INITIAL_POWER, PLAYER_MAX_ENERGY, PLAYER_POWER_FAST_INCREMENT, PLAYER_POWER_INCREMENT, PLAYER_POWER_TICK_SOUND_INTERVAL, PLAYER_STARTING_TOOLS, PLAYER_STARTING_WEAPONS, PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES, TRAJECTORY_FADE_SPEED, TRAJECTORY_FLOAT_SPEED, W, WEAPON_TYPES, Z, STARTING_SCORE, SCORE_PER_KILL, SCORE_FOR_WIN, MARKET_ITEMS, NAPALM_SPAWN_RATE, FIRE_DURATION, FIRE_DAMAGE, MAX_PLAYERS} from './constants.js?v=24';
-import {createCanvas, drawLine, drawRect, drawSemiCircle, drawText, loop, plot, strokeCircle} from './gfx.js?v=24';
-import {afterKeyDelay, key, initClickCanvas, popClick, getPointer, clearKeys} from './input.js?v=24';
-import {clamp, deg2rad, distance, parable, random, randomInt, vec, wrap} from './math.js?v=24';
-import {PROJECTILE_TYPES} from './projectiles.js?v=24';
-import {generateSky} from './sky.js?v=24';
-import {playTickSound} from './sound.js?v=24';
-import {clipTerrain, closestLand, collapseTerrain, generateTerrain, isTerrain, landHeight, startCollapseTerrain, collapseTerrainStep} from './terrain.js?v=24';
-import {sample, shuffle, newPlayerId} from './utils.js?v=24';
-import {EXPLOSION_TYPES} from './weapons.js?v=24';
-import {drawPanelBg, drawPanelTitle, drawPanelTitleFancy, drawPanelText, drawPanelDivider, drawPanelMenu, getPanelBounds, drawButton, checkHit, PANEL_X, PANEL_WIDTH} from './panel.js?v=24';
-import {MSG, CMD, HOST_MSG} from './net/protocol.js?v=24';
-import {netBroadcast, netConnect, netDisconnect, netIsConnected, netIsHost, netListRooms, netMakeRoomCode, netMyId, netOnMessage, netOnStatus, netRoom, netSendCommand} from './net.js?v=24';
+import {AI_TYPES} from './ai.js?v=25';
+import {DEATH_SPECS, EXPLOSION_SHAKE_REDUCTION_FACTOR, H, MAX_EXPLOSION_SHAKE_FACTOR, MAX_WIND, PARTICLE_AMOUNT, PARTICLE_FADE_AMOUNT, PARTICLE_MAX_POWER_FACTOR, PARTICLE_MIN_LIFETIME, PARTICLE_MIN_POWER_FACTOR, PARTICLE_POWER_REDUCTION_FACTOR, PARTICLE_TIME_FACTOR, PARTICLE_WIND_REDUCTION_FACTOR, PLAYER_ANGLE_FAST_INCREMENT, PLAYER_ANGLE_INCREMENT, PLAYER_ANGLE_TICK_SOUND_INTERVAL, PLAYER_COLORS, PLAYER_ENERGY_POWER_MULTIPLIER, PLAYER_EXPLOSION_PARTICLE_POWER, PLAYER_FALL_DAMAGE_FACTOR, PLAYER_FALL_DAMAGE_HEIGHT, PLAYER_INITIAL_POWER, PLAYER_MAX_ENERGY, PLAYER_POWER_FAST_INCREMENT, PLAYER_POWER_INCREMENT, PLAYER_POWER_TICK_SOUND_INTERVAL, PLAYER_STARTING_TOOLS, PLAYER_STARTING_WEAPONS, PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES, TRAJECTORY_FADE_SPEED, TRAJECTORY_FLOAT_SPEED, W, WEAPON_TYPES, Z, STARTING_SCORE, SCORE_PER_KILL, SCORE_FOR_WIN, MARKET_ITEMS, NAPALM_SPAWN_RATE, FIRE_DURATION, FIRE_DAMAGE, MAX_PLAYERS} from './constants.js?v=25';
+import {createCanvas, drawLine, drawRect, drawSemiCircle, drawText, loop, plot, strokeCircle} from './gfx.js?v=25';
+import {afterKeyDelay, key, initClickCanvas, popClick, getPointer, clearKeys} from './input.js?v=25';
+import {clamp, deg2rad, distance, parable, random, randomInt, vec, wrap} from './math.js?v=25';
+import {PROJECTILE_TYPES} from './projectiles.js?v=25';
+import {generateSky} from './sky.js?v=25';
+import {playTickSound} from './sound.js?v=25';
+import {clipTerrain, closestLand, collapseTerrain, generateTerrain, isTerrain, landHeight, startCollapseTerrain, collapseTerrainStep} from './terrain.js?v=25';
+import {sample, shuffle, newPlayerId} from './utils.js?v=25';
+import {EXPLOSION_TYPES} from './weapons.js?v=25';
+import {drawPanelBg, drawPanelTitle, drawPanelTitleFancy, drawPanelText, drawPanelDivider, drawPanelMenu, getPanelBounds, drawButton, checkHit, PANEL_X, PANEL_WIDTH} from './panel.js?v=25';
+import {MSG, CMD, HOST_MSG} from './net/protocol.js?v=25';
+import {netBroadcast, netConnect, netDisconnect, netIsConnected, netIsHost, netListRooms, netMakeRoomCode, netMyId, netOnMessage, netOnStatus, netRoom, netSendCommand} from './net.js?v=25';
 
 
 let state = 'start-game';
@@ -390,6 +390,8 @@ function updateMarket() {
     menuState = {
       selected: 0,
       scrollOffset: 0,
+      round,
+      waitingForHost: false,
     };
     if (!isClient) {
       players.forEach(p => {
@@ -397,6 +399,25 @@ function updateMarket() {
       });
     }
   }
+  if (menuState.round !== round) {
+    menuState.round = round;
+    menuState.waitingForHost = false;
+  }
+
+  if (isClient && menuState.waitingForHost) {
+    if (key('Enter')) {
+      if (afterKeyDelay()) {
+        menuState.waitingForHost = false;
+        playTickSound();
+      }
+    }
+    const click = popClick();
+    if (click && checkHit(click.x, click.y, PANEL_X+100, 318, 200, 22)) {
+      menuState.waitingForHost = false;
+      playTickSound();
+    }
+    return;
+  }
 
   if (key('ArrowUp')) {
     if (afterKeyDelay()) {
@@ -429,6 +450,10 @@ function updateMarket() {
   else if (key('Enter')) {
     if (afterKeyDelay()) {
       if (!isClient) startRound();
+      else {
+        menuState.waitingForHost = true;
+        playTickSound();
+      }
     }
   }
   else {
@@ -496,6 +521,10 @@ function updateMarket() {
 
     if (checkHit(click.x, click.y, PANEL_X+100, 318, 200, 22)) {
       if (!isClient) startRound();
+      else {
+        menuState.waitingForHost = true;
+        playTickSound();
+      }
     }
   }
 }
@@ -764,8 +793,6 @@ function broadcastTerrain(force) {
 }
 
 function applyCommand(playerId, cmd) {
-  const player = players.find(p => p.id === playerId);
-  if (!player || player.ai) return;
   if (state === 'net-lobby') {
     if (cmd.type === CMD.READY || cmd.type === CMD.UNREADY) {
       const entry = netLobby.players.find(p => p.id === playerId);
@@ -774,6 +801,8 @@ function applyCommand(playerId, cmd) {
     }
     return;
   }
+  const player = players.find(p => p.id === playerId);
+  if (!player || player.ai) return;
   if (state === 'market') {
     if (cmd.type === CMD.BUY) buyItem(player, cmd.item);
     if (cmd.type === CMD.SELL) sellItem(player, cmd.item);
@@ -1056,6 +1085,37 @@ function updateNetLobby() {
       broadcastLobby();
     };
 
+    const clearStartHint = () => {
+      if (menuState.hint || menuState.startWarn) {
+        menuState.hint = '';
+        menuState.startWarn = false;
+      }
+    };
+
+    const tryStart = () => {
+      const roster = netLobby.players;
+      if (roster.length < 2) {
+        menuState.hint = 'Need at least 2 players';
+        menuState.startWarn = false;
+        playTickSound();
+        return;
+      }
+      const unready = roster.filter(p => p.id !== netPlayerId && !p.ready);
+      if (unready.length === 0) {
+        clearStartHint();
+        startNetworkGame();
+        return;
+      }
+      if (menuState.startWarn) {
+        clearStartHint();
+        startNetworkGame();
+        return;
+      }
+      menuState.startWarn = true;
+      menuState.hint = `${unready.length} not ready - START again to force`;
+      playTickSound();
+    };
+
     if (key('ArrowUp')) {
       if (afterKeyDelay()) {
         menuState.selected = (menuState.selected - 1 + 3) % 3;
@@ -1070,17 +1130,19 @@ function updateNetLobby() {
       if (afterKeyDelay()) {
         cycle(menuState.selected, -1);
         applyConfig();
+        clearStartHint();
         playTickSound();
       }
     } else if (key('ArrowRight')) {
       if (afterKeyDelay()) {
         cycle(menuState.selected, 1);
         applyConfig();
+        clearStartHint();
         playTickSound();
       }
     } else if (key('Enter')) {
       if (afterKeyDelay()) {
-        startNetworkGame();
+        tryStart();
       }
     }
 
@@ -1096,17 +1158,19 @@ function updateNetLobby() {
           menuState.selected = i;
           cycle(i, -1);
           applyConfig();
+          clearStartHint();
           playTickSound();
         }
         if (checkHit(click.x, click.y, PANEL_X+355, rowY, 24, 18)) {
           menuState.selected = i;
           cycle(i, 1);
           applyConfig();
+          clearStartHint();
           playTickSound();
         }
       }
       if (checkHit(click.x, click.y, PANEL_X+100, 318, 200, 22)) {
-        startNetworkGame();
+        tryStart();
       }
     }
   } else {
@@ -2314,10 +2378,16 @@ function drawNetLobbyPanel() {
       drawButton(framebuffer, PANEL_X+355, cy, 24, 18, '\u25B6', isSelected);
       cy += 26;
     }
-    drawButton(framebuffer, PANEL_X+100, 318, 200, 22, 'START GAME', false);
+    if (menuState && menuState.hint) {
+      drawPanelText(framebuffer, menuState.hint, PANEL_X+40, 296, '#f66');
+    }
+    const startWarn = menuState && menuState.startWarn;
+    drawButton(framebuffer, PANEL_X+100, 318, 200, 22, startWarn ? 'START ANYWAY?' : 'START GAME', !!startWarn);
   } else {
     const myReady = menuState && menuState.myReady;
     drawButton(framebuffer, PANEL_X+100, 318, 200, 22, myReady ? 'NOT READY' : 'READY', myReady);
+    const readyCount = netLobby.players.filter(p => p.ready || p.id === netPlayerId).length;
+    drawPanelText(framebuffer, `Ready ${readyCount}/${netLobby.players.length}`, PANEL_X+40, 296, '#aaa');
   }
 }
 
@@ -2351,6 +2421,15 @@ function drawMarketPanel() {
   drawPanelBg(framebuffer);
   drawPanelTitle(framebuffer, 'MARKET', '#0c8');
 
+  const isClient = networkMode && !netIsHost();
+  if (isClient && menuState && menuState.waitingForHost) {
+    const cx = PANEL_X + PANEL_WIDTH / 2;
+    drawPanelText(framebuffer, 'WAITING FOR HOST', cx, 150, 'yellow', 'center');
+    drawPanelText(framebuffer, 'TO START ROUND...', cx, 170, 'yellow', 'center');
+    drawButton(framebuffer, PANEL_X+100, 318, 200, 22, 'BACK TO SHOP', false);
+    return;
+  }
+
   const humanPlayer = myPlayer();
 
   const marketItems = Object.keys(MARKET_ITEMS).filter(item => !(tracerMode && item === 'smokeTracer'));

src/net.js

@@ -1,4 +1,4 @@
-import {MSG, HOST_MSG} from './net/protocol.js?v=24';
+import {MSG, HOST_MSG} from './net/protocol.js?v=25';
 
 let socket = null;
 let myId = null;

src/panel.js

@@ -1,5 +1,5 @@
-import {PANEL_WIDTH, PANEL_HEIGHT, PANEL_FONT_SIZE, PANEL_TITLE_FONT_SIZE, PANEL_BG_COLOR, PANEL_BORDER_COLOR, W, H, FONT_WIDTH} from './constants.js?v=24';
-import {drawRect, drawLine} from './gfx.js?v=24';
+import {PANEL_WIDTH, PANEL_HEIGHT, PANEL_FONT_SIZE, PANEL_TITLE_FONT_SIZE, PANEL_BG_COLOR, PANEL_BORDER_COLOR, W, H, FONT_WIDTH} from './constants.js?v=25';
+import {drawRect, drawLine} from './gfx.js?v=25';
 
 export const PANEL_X = (W - PANEL_WIDTH) / 2;
 export {PANEL_WIDTH};

src/projectiles.js

@@ -1,10 +1,10 @@
-import {H, PROJECTILE_ITERATIONS_PER_FRAME, PROJECTILE_ITERATION_PROGRESS, PROJECTILE_MAX_SOUND_FREQUENCY, PROJECTILE_MIN_SOUND_FREQUENCY, PROJECTILE_POWER_REDUCTION_FACTOR, PROJECTILE_WIND_REDUCTION_FACTOR, WEAPON_TYPES, PLAYER_TANK_Y_FOOTPRINT} from './constants.js?v=24';
-import {checkLineWith, drawLineVirtual} from './gfx.js?v=24';
-import {createParticles, isTank, isTankShield, spawnNapalm, tracerMode} from './main.js?v=24';
-import {deg2rad, parable, rad2deg, wrap} from './math.js?v=24';
-import {audio, createOsc} from './sound.js?v=24';
-import {isTerrain, landHeight} from './terrain.js?v=24';
-import {EXPLOSION_TYPES} from './weapons.js?v=24';
+import {H, PROJECTILE_ITERATIONS_PER_FRAME, PROJECTILE_ITERATION_PROGRESS, PROJECTILE_MAX_SOUND_FREQUENCY, PROJECTILE_MIN_SOUND_FREQUENCY, PROJECTILE_POWER_REDUCTION_FACTOR, PROJECTILE_WIND_REDUCTION_FACTOR, WEAPON_TYPES, PLAYER_TANK_Y_FOOTPRINT} from './constants.js?v=25';
+import {checkLineWith, drawLineVirtual} from './gfx.js?v=25';
+import {createParticles, isTank, isTankShield, spawnNapalm, tracerMode} from './main.js?v=25';
+import {deg2rad, parable, rad2deg, wrap} from './math.js?v=25';
+import {audio, createOsc} from './sound.js?v=25';
+import {isTerrain, landHeight} from './terrain.js?v=25';
+import {EXPLOSION_TYPES} from './weapons.js?v=25';
 
 
 export const PROJECTILE_TYPES = {

src/sky.js

@@ -1,7 +1,7 @@
-import {SKY_COLORS} from './constants.js?v=24';
-import {drawRect} from './gfx.js?v=24';
-import {gradient} from './math.js?v=24';
-import {sample} from './utils.js?v=24';
+import {SKY_COLORS} from './constants.js?v=25';
+import {drawRect} from './gfx.js?v=25';
+import {gradient} from './math.js?v=25';
+import {sample} from './utils.js?v=25';
 
 export function generateSky(ctx) {
   const {width, height} = ctx.canvas;

src/sound.js

@@ -1,4 +1,4 @@
-import {SOUND_MUSIC_VOLUME, SOUND_SFX_VOLUME} from './constants.js?v=24';
+import {SOUND_MUSIC_VOLUME, SOUND_SFX_VOLUME} from './constants.js?v=25';
 
 // @ts-ignore
 export const audio = new (window.AudioContext || window.webkitAudioContext)();

src/terrain.js

@@ -1,6 +1,6 @@
-import {clipCanvas, drawCircle, drawRect} from './gfx.js?v=24';
-import {clamp, coords2index, random, randomInt} from './math.js?v=24';
-import {sample} from './utils.js?v=24';
+import {clipCanvas, drawCircle, drawRect} from './gfx.js?v=25';
+import {clamp, coords2index, random, randomInt} from './math.js?v=25';
+import {sample} from './utils.js?v=25';
 
 let cachedImageData;
 

src/utils.js

@@ -1,4 +1,4 @@
-import {randomInt} from './math.js?v=24';
+import {randomInt} from './math.js?v=25';
 
 export function sample(arr) {
   return arr[randomInt(0, arr.length-1)];

src/weapons.js

@@ -1,8 +1,8 @@
-import {PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES} from './constants.js?v=24';
-import {drawCircle, plot} from './gfx.js?v=24';
-import {clamp, cycle, distance, randomInt} from './math.js?v=24';
-import {audio, createOsc} from './sound.js?v=24';
-import {clipTerrain} from './terrain.js?v=24';
+import {PLAYER_TANK_BOUNDING_RADIUS, PLAYER_TANK_Y_FOOTPRINT, SHIELD_TYPES} from './constants.js?v=25';
+import {drawCircle, plot} from './gfx.js?v=25';
+import {clamp, cycle, distance, randomInt} from './math.js?v=25';
+import {audio, createOsc} from './sound.js?v=25';
+import {clipTerrain} from './terrain.js?v=25';
 
 export function drawExplosion(ctx, x, y, r) {
   const step = Math.max(2, Math.floor(r / 6));