LocalWrapper supports multiple players for testing. The other wrapper…

…s don't support it yet.

netplayjs-client/src/game.ts

@@ -6,6 +6,11 @@ export type GameClass = {
   new (canvas: HTMLCanvasElement, players: Array<NetplayPlayer>): Game;
   timestep: number;
 
+  /**
+   * NOT SUPPORTED YET.
+   */
+  numPlayers?: number | { min: number; max: number };
+
   /**
    * Canvases need to have a fixed pixel size. This allows us to normalize
    * mouse position and touches across the network.

netplayjs-client/src/ui/gamemenu.ts

@@ -218,7 +218,9 @@ export class GameMenu {
           <p>Invite players to a game via a link or QR code.</p>
           Join URL (send this to a friend):
 
-          <a target="_blank" href="${this.state.joinURL}"> ${this.state.joinURL} </a>
+          <a target="_blank" href="${this.state.joinURL}">
+            ${this.state.joinURL}
+          </a>
           <div>${this.state.qrCanvas}</div>
         </div>
       </div>`;
@@ -240,7 +242,12 @@ export class GameMenu {
       html`
         ${this.menuContent()}
         <div style="position: absolute; right: 10px; bottom: 10px;">
-          <a target="_blank" style="text-decoration: none; color: black;" href="https://github.com/rameshvarun/netplayjs">NetplayJS v${require("../../package.json").version}</a>
+          <a
+            target="_blank"
+            style="text-decoration: none; color: black;"
+            href="https://github.com/rameshvarun/netplayjs"
+            >NetplayJS v${require("../../package.json").version}</a
+          >
         </div>
       `,
       this.root

netplayjs-client/src/wrappers/localwrapper.ts

@@ -15,26 +15,34 @@ export class LocalWrapper {
 
   instances: Array<GameInstance> = [];
 
-  getPlayers(instanceID: number): Array<NetplayPlayer> {
-    if (instanceID == 0) {
-      return [
-        new NetplayPlayer(0, true, true),
-        new NetplayPlayer(1, false, false),
-      ];
-    } else {
-      return [
-        new NetplayPlayer(0, false, true),
-        new NetplayPlayer(1, true, false),
-      ];
+  getPlayers(instanceID: number, numPlayers: number): Array<NetplayPlayer> {
+    let players: NetplayPlayer[] = [];
+    for (let i = 0; i < numPlayers; ++i) {
+      players.push(new NetplayPlayer(i, i == instanceID, i == 0));
     }
+    return players;
   }
 
   constructor(gameClass: GameClass) {
     this.gameClass = gameClass;
 
+    let numPlayers = 2;
+    if (typeof gameClass.numPlayers == "number") {
+      numPlayers = gameClass.numPlayers;
+    } else if (typeof gameClass.numPlayers == "object") {
+      numPlayers = parseInt(prompt(`How many players should there be?`)!);
+      if (
+        numPlayers > gameClass.numPlayers.max ||
+        numPlayers < gameClass.numPlayers.min
+      ) {
+        alert(`Invalid number of players.`);
+        numPlayers = gameClass.numPlayers.max;
+      }
+    }
+
     document.body.style.padding = "5px";
 
-    for (let i = 0; i < 2; ++i) {
+    for (let i = 0; i < numPlayers; ++i) {
       // Create canvas for game.
       const canvas = document.createElement("canvas");
       canvas.width = gameClass.canvasSize.width;
@@ -55,7 +63,7 @@ export class LocalWrapper {
       );
 
       // Create game.
-      const players = this.getPlayers(i);
+      const players = this.getPlayers(i, numPlayers);
       const game = new this.gameClass(canvas, players);
       this.instances.push({
         canvas,

netplayjs-demo/src/example.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1, viewport-fit=cover, maximum-scale=1"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1, viewport-fit=cover, maximum-scale=1, user-scalable=no"
     />
     <title><%= title %></title>
 

netplayjs-demo/src/examples/local.ts

@@ -6,24 +6,37 @@ import {
   DefaultInput,
 } from "netplayjs/src/index";
 
+const COLORS = ["red", "blue", "green", "yellow", "orange", "purple"];
+
 export class SimpleGame extends Game {
   static timestep = 1000 / 60;
   static canvasSize = { width: 600, height: 300 };
+  static numPlayers = { min: 2, max: 6 };
+
+  playerStates: Array<{ pos: Vec2; color: string }> = [];
 
-  aPos: Vec2 = new Vec2(100, 150);
-  bPos: Vec2 = new Vec2(500, 150);
+  constructor(canvas: HTMLCanvasElement, players: Array<NetplayPlayer>) {
+    super();
+
+    const xStart = 100;
+    const xEnd = 500;
+    const range = xEnd - xStart;
+    const increments = range / (players.length - 1);
+
+    for (let player of players) {
+      this.playerStates.push({
+        pos: new Vec2(player.getID() * increments + xStart, 150),
+        color: COLORS[player.getID() % COLORS.length],
+      });
+    }
+  }
 
   tick(playerInputs: Map<NetplayPlayer, DefaultInput>): void {
     for (const [player, input] of playerInputs.entries()) {
       const vel = input.arrowKeys().multiplyScalar(5);
 
-      if (player.getID() == 0) {
-        this.aPos.x += vel.x;
-        this.aPos.y -= vel.y;
-      } else if (player.getID() == 1) {
-        this.bPos.x += vel.x;
-        this.bPos.y -= vel.y;
-      }
+      this.playerStates[player.getID()].pos.x += vel.x;
+      this.playerStates[player.getID()].pos.y -= vel.y;
     }
   }
 
@@ -34,10 +47,10 @@ export class SimpleGame extends Game {
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     // Draw squares for the characters.
-    ctx.fillStyle = "red";
-    ctx.fillRect(this.aPos.x - 5, this.aPos.y - 5, 10, 10);
-    ctx.fillStyle = "blue";
-    ctx.fillRect(this.bPos.x - 5, this.bPos.y - 5, 10, 10);
+    for (let player of this.playerStates) {
+      ctx.fillStyle = player.color;
+      ctx.fillRect(player.pos.x - 5, player.pos.y - 5, 10, 10);
+    }
   }
 }