npm - touch-coop - Versions diffs - 1.0.0 → 2.0.0 - Mend

touch-coop 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md CHANGED Viewed

@@ -1,4 +1,4 @@
-# TouchCoop
+# Touch-Coop
 A TypeScript library that enables couch co-op gaming on the web, using mobile devices as controllers.
@@ -12,7 +12,26 @@ TouchCoop is intended for playing games on a TV or monitor, while players use th
 TouchCoop is ideal for casual multiplayer games, such as platformers, puzzle games, or party games. TouchCoop is not intended for games that require low-latency input, such as first-person shooters.
-TouchCoop does not require servers or user accounts. All communication is done using WebRTC, which allows for peer-to-peer connections between the players' devices.
+TouchCoop does not require servers or user accounts for gameplay. However, it requires the PeerJS server (or your own signaling server) for initial connection setup. All communication is done using WebRTC, which allows for peer-to-peer connections between the players' devices.
+## Powered by PeerJS
+TouchCoop is powered by [PeerJS](https://peerjs.com/), which provides a simple API for WebRTC peer-to-peer connections. By default, TouchCoop uses the public PeerJS servers for signaling and STUN/TURN services.
+- **Status Page**: Check the status of PeerJS public servers at [https://status.peerjs.com/](https://status.peerjs.com/).
+- **Custom Servers**: If you need more control or reliability, you can deploy your own PeerJS server. See the [PeerJS documentation](https://peerjs.com/docs/#start) for instructions on setting up your own server. You can pass custom PeerJS options to the `Match` and `Player` constructors to connect to your own server.
+```ts
+// Example: Using a custom PeerJS server
+const customPeerConfig = {
+  host: 'your-peerjs-server.com',
+  port: 9000,
+  path: '/peerjs'
+};
+const match = new Match(gamePadURL, handlePlayerEvent, customPeerConfig);
+const player = new Player(customPeerConfig);
+```
 ## Installation

package/demos/gamepad/index.html CHANGED Viewed

@@ -13,6 +13,8 @@
 </head>
 <body>
 	<h1>Gamepad Controller</h1>
+	<button id="joinBtn">Join Game</button>
+	<div id="gamepad" style="display: none;">
 	<div style="display: flex; flex-direction: row; gap: 80px; margin-top: 32px;">
 		<div class="gamepad" style="grid-template-columns: 60px 60px 60px;">
 			<div></div>
@@ -31,13 +33,16 @@
 			<button id="a">A</button>
 			<button id="b">B</button>
 		</div>
+	</div>
 	</div>
 		<script src="../../dist/index.global.js"></script>
 		<script>
 		const player = new TouchCoop.Player();
 		window.player = player;
-		(async () => {
+		document.getElementById("joinBtn").onclick = async () => {
+			document.getElementById("joinBtn").style.display = "none";
+			document.getElementById("gamepad").style.display = "block";
 			await player.joinMatch();
 			function sendButtonEvent(btn) {
 				player.sendMove(btn);
@@ -51,7 +56,7 @@
 			document.getElementById("b").onclick = () => sendButtonEvent("B");
 			document.getElementById("x").onclick = () => sendButtonEvent("X");
 			document.getElementById("y").onclick = () => sendButtonEvent("Y");
-		})();
+		};
 		</script>
 </body>
 </html>

package/demos/match.html CHANGED Viewed

@@ -4,7 +4,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Touch Coop Game Demo</title>
+    <title>Touch Coop Demo</title>
     <style>
       body { background-color: black; color: white; }
       table { border-collapse: collapse; width: 100%; }
@@ -15,8 +15,8 @@
     </style>
   </head>
   <body>
-    <image src="../media/logo.png" alt="Touch Coop Logo" style="width:200px; display:block; margin:auto;" />
-    <h1>Touch Coop Game Demo</h1>
+    <image src="https://github.com/SlaneyEE/touch-coop/raw/main/media/logo.png" alt="Touch Coop Logo" style="width:200px; display:block; margin:auto; margin-top: 2rem;" />
+    <h1>TouchCoop Demo</h1>
     <table id="players-table">
       <tr>
         <th>Player 1</th>
@@ -64,7 +64,7 @@
       function updatePlayerIdDisplay(idx, playerId) {
         const playerIdDiv = document.getElementById(`player-id-${idx}`);
-        if (playerId) {
+        if (playerId !== undefined) {
           playerIdDiv.textContent = `Player ID: ${playerId}`;
         } else {
           playerIdDiv.textContent = '';
@@ -72,7 +72,6 @@
       }
       function handlePlayerEvent(event) {
-        // Find the player slot idx
         let idx = -1;
         for (let i = 0; i < 4; i++) {
           const div = document.getElementById(`qr-${i}`);
@@ -81,7 +80,6 @@
             break;
           }
         }
-        // If not found and this is a JOIN, assign to first available
         if (idx === -1 && event.action === "JOIN") {
           for (let i = 0; i < 4; i++) {
             const div = document.getElementById(`qr-${i}`);
@@ -104,7 +102,7 @@
             const qrImg = qrDiv.querySelector('img.qr');
             if (qrImg) qrImg.remove();
             areaDiv.style.display = '';
-            area.value += 'Player joined!\n';
+            area.value = 'Player joined!\n';
             updatePlayerIdDisplay(idx, event.playerId);
             break;
           }
@@ -113,7 +111,7 @@
             if (joinBtn2) joinBtn2.style.display = '';
             areaDiv.style.display = 'none';
             area.value += 'Player left!\n';
-            updatePlayerIdDisplay(idx, '');
+            updatePlayerIdDisplay(idx, undefined);
             delete qrDiv.dataset.playerId;
             qrDiv.innerHTML = '<button onclick="joinPlayer(' + idx + ')">Join</button>';
             break;
@@ -139,13 +137,11 @@
         qrDiv.innerHTML = 'Loading...';
         playerIdDiv.textContent = '';
         try {
-          const { dataUrl, playerId, shareURL } = await match.requestNewPlayerToJoin();
-          qrDiv.dataset.playerId = playerId || '';
+          const { dataUrl, shareURL } = await match.requestNewPlayerToJoin();
           qrDiv.innerHTML = `
             <img class='qr' src='${dataUrl}' alt='QR Code' /></br>
             <a href='${shareURL}' target='_blank'>Connect</a>
           `;
-          updatePlayerIdDisplay(idx, playerId);
         } catch (err) {
           qrDiv.innerHTML = `<span style='color:red;'>Error</span>`;
         }

package/media/demo.png CHANGED Viewed

Binary file

package/media/logo.png CHANGED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,7 +1,17 @@
 {
   "name": "touch-coop",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Allow players to play couch co-op in your game using their mobile devices as controllers.",
+  "keywords": [
+    "couch-coop",
+    "mobile-controller",
+    "gaming",
+    "multiplayer",
+    "peerjs",
+    "webrtc",
+    "typescript",
+    "qrcode"
+  ],
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",
   "exports": {
@@ -12,7 +22,7 @@
     }
   },
   "scripts": {
-    "start": "vite",
+    "start": "http-server",
     "lint": "npx @biomejs/biome check",
     "lint-and-format": "npx @biomejs/biome check --write --unsafe",
     "build": "vite build && tsc --emitDeclarationOnly"
@@ -24,6 +34,7 @@
     "vite": "^7.3.1"
   },
   "dependencies": {
+    "peerjs": "^1.5.5",
     "qrcode": "^1.5.4"
   }
 }

package/src/match.ts CHANGED Viewed

@@ -1,5 +1,5 @@
+import Peer, { type DataConnection, type PeerOptions } from "peerjs";
 import QRCode from "qrcode";
-import { compressOfferData } from "./encoding";
 export interface BasePlayerEvent {
   playerId: string;
@@ -20,99 +20,164 @@ export type PlayerEvent = (JoinLeaveEvent | MoveEvent) & BasePlayerEvent;
 type OnPlayerEventHandler = (data: PlayerEvent) => void;
 export class Match {
-  private _playerConnections: Map<string, RTCPeerConnection> = new Map();
-  private _playerChannels: Map<string, RTCDataChannel> = new Map();
+  private _peer: Peer;
+  private _playerConnections: Map<string, DataConnection> = new Map();
   private _invitationAccepted: Map<string, boolean> = new Map();
+  private _connectionToPlayerId: Map<DataConnection, string> = new Map();
   private _onPlayerEvent: OnPlayerEventHandler | null = null;
   private _gamepadUiUrl: string;
-  constructor(gamepadUiUrl: string, onPlayerEvent: OnPlayerEventHandler) {
+  constructor(
+    gamepadUiUrl: string,
+    onPlayerEvent: OnPlayerEventHandler,
+    peerConfig?: PeerOptions,
+  ) {
     this._onPlayerEvent = onPlayerEvent;
     this._gamepadUiUrl = gamepadUiUrl;
-    const channel = new BroadcastChannel("touch-coop-signaling");
-    channel.onmessage = async (event) => {
-      const data = event.data;
-      if (
-        data &&
-        data.type === "answer" &&
-        data.playerId &&
-        data.base64Answer
-      ) {
-        try {
-          const pc = this._playerConnections.get(data.playerId);
-          if (!pc) {
-            throw new Error(`No peer connection for player: ${data.playerId}`);
+    this._peer = peerConfig ? new Peer(peerConfig) : new Peer();
+    this._peer.on("open", (hostId) => {
+      console.log(`Host PeerJS ID: ${hostId}`);
+    });
+    this._peer.on("connection", (conn: DataConnection) => {
+      conn.on("open", () => {
+        console.log(`Connection open for PeerJS ID: ${conn.peer}`);
+      });
+      conn.on("data", (rawData: unknown) => {
+        if (this._onPlayerEvent) {
+          let eventData: PlayerEvent;
+          if (typeof rawData === "string") {
+            try {
+              eventData = JSON.parse(rawData);
+            } catch {
+              console.warn("Invalid JSON from player", conn.peer, rawData);
+              return;
+            }
+          } else if (typeof rawData === "object" && rawData !== null) {
+            eventData = rawData as PlayerEvent;
+          } else {
+            console.warn(
+              "Unexpected data type from player",
+              conn.peer,
+              rawData,
+            );
+            return;
           }
-          const answerObject = JSON.parse(atob(data.base64Answer));
-          await pc.setRemoteDescription(answerObject.sdp);
-          // Mark invitation as accepted
-          this._invitationAccepted.set(data.playerId, true);
-        } catch (err) {}
-      }
-    };
-  }
-  private _UUIID() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0;
-      const v = c === "x" ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
+          let playerId: string | undefined;
+          if (
+            "playerId" in eventData &&
+            typeof eventData.playerId === "string"
+          ) {
+            playerId = eventData.playerId;
+          }
+          if (playerId === undefined) {
+            console.warn("Malformed event from player", conn.peer, eventData);
+            return;
+          }
+          eventData.playerId = playerId;
+          if ("action" in eventData && "timestamp" in eventData) {
+            if (eventData.action === "JOIN") {
+              this._playerConnections.set(eventData.playerId, conn);
+              this._invitationAccepted.set(eventData.playerId, true);
+              this._connectionToPlayerId.set(conn, eventData.playerId);
+              console.log(`Player ${eventData.playerId} joined`);
+            }
+            this._onPlayerEvent(eventData);
+          } else {
+            console.warn("Malformed event from player", conn.peer, eventData);
+          }
+        }
+      });
+      conn.on("close", () => {
+        const playerId = this._connectionToPlayerId.get(conn);
+        if (playerId !== undefined) {
+          this._playerConnections.delete(playerId);
+          this._invitationAccepted.delete(playerId);
+          this._connectionToPlayerId.delete(conn);
+          if (this._onPlayerEvent) {
+            this._onPlayerEvent({
+              playerId,
+              action: "LEAVE",
+              timestamp: Date.now(),
+            });
+          }
+          console.log(`Player ${playerId} disconnected`);
+        } else {
+          console.log(
+            `Connection closed for unknown player (PeerJS ID: ${conn.peer})`,
+          );
+        }
+      });
+      conn.on("error", (err) => {
+        const playerId = this._connectionToPlayerId.get(conn);
+        if (playerId !== undefined) {
+          console.error(`Connection error for player ${playerId}:`, err);
+          this._playerConnections.delete(playerId);
+          this._invitationAccepted.delete(playerId);
+          this._connectionToPlayerId.delete(conn);
+        } else {
+          console.error(
+            `Connection error for unknown player (PeerJS ID: ${conn.peer}):`,
+            err,
+          );
+        }
+      });
+    });
+    this._peer.on("error", (err) => {
+      console.error("PeerJS error:", err);
     });
   }
-  async requestNewPlayerToJoin() {
-    return new Promise<{ dataUrl: string; playerId: string; shareURL: string }>(
-      (resolve, reject) => {
-        (async () => {
-          const newPlayer = this._UUIID();
-          const pc = new RTCPeerConnection();
-          const dataChannel = pc.createDataChannel("player");
-          this._playerConnections.set(newPlayer, pc);
-          this._playerChannels.set(newPlayer, dataChannel);
-          this._invitationAccepted.set(newPlayer, false);
-          dataChannel.onmessage = (msg) => {
-            if (this._onPlayerEvent) {
-              let eventData = msg.data;
-              eventData = JSON.parse(msg.data);
-              this._onPlayerEvent(eventData);
-            }
-          };
-          const offer = await pc.createOffer();
-          await pc.setLocalDescription(offer);
-          await new Promise((resolveIce) => {
-            pc.onicecandidate = (event) => {
-              if (!event.candidate) {
-                resolveIce(void 0);
-              }
-            };
-          });
-          const offerObject = {
-            playerId: newPlayer,
-            sdp: pc.localDescription,
-          };
-          const offerJSON = JSON.stringify(offerObject);
-          const compressedBase64OfferObject =
-            await compressOfferData(offerJSON);
-          const shareURL = `${this._gamepadUiUrl}?remoteSDP=${compressedBase64OfferObject}`;
-          QRCode.toDataURL(
+  async requestNewPlayerToJoin(): Promise<{
+    dataUrl: string;
+    shareURL: string;
+  }> {
+    return new Promise((resolve, reject) => {
+      if (this._peer.destroyed || !this._peer.open) {
+        return reject(new Error("Host Peer is not open or has been destroyed"));
+      }
+      const hostId = this._peer.id;
+      if (!hostId) {
+        return reject(new Error("Host Peer ID not yet assigned"));
+      }
+      const shareURL = `${this._gamepadUiUrl}?hostPeerId=${encodeURIComponent(hostId)}`;
+      QRCode.toDataURL(
+        shareURL,
+        { errorCorrectionLevel: "M" },
+        (err, dataUrl) => {
+          if (err) return reject(err);
+          resolve({
+            dataUrl,
             shareURL,
-            { errorCorrectionLevel: "M" },
-            (err, dataUrl) => {
-              if (err) {
-                return reject(err);
-              }
-              resolve({
-                dataUrl: dataUrl,
-                shareURL: shareURL,
-                playerId: newPlayer,
-              });
-            },
-          );
-        })();
-      },
-    );
+          });
+        },
+      );
+    });
   }
-  // Returns true if invitation was accepted, false if still pending, undefined if not found
   getInvitationStatus(playerId: string): boolean | undefined {
     return this._invitationAccepted.get(playerId);
   }
-  async acceptPlayerAnswer(playerId: string, base64Answer: string) {}
+  destroy() {
+    for (const playerId of this._playerConnections.keys()) {
+      this._invitationAccepted.delete(playerId);
+    }
+    this._playerConnections.clear();
+    this._invitationAccepted.clear();
+    this._connectionToPlayerId.clear();
+    this._peer.destroy();
+  }
 }

package/src/player.ts CHANGED Viewed

@@ -1,83 +1,118 @@
-import { decompressOfferData } from "./encoding";
+import Peer, { type DataConnection, type PeerOptions } from "peerjs";
 import type { PlayerEvent } from "./match";
 export class Player {
-  private _pc: RTCPeerConnection;
+  private _peer: Peer;
   private _playerId: string | null = null;
-  private _dataChannel: RTCDataChannel | null = null;
-  constructor() {
-    this._pc = new RTCPeerConnection();
-    this._pc.ondatachannel = (event) => {
-      this._dataChannel = event.channel;
-      this._dataChannel.onopen = () => {
-        if (this._playerId && this._dataChannel) {
-          const joinEvent = {
-            playerId: this._playerId,
-            action: "JOIN",
-            timestamp: Date.now(),
-          };
-          this._dataChannel.send(JSON.stringify(joinEvent));
-        }
-      };
-    };
+  private _dataConnection: DataConnection | null = null;
+  private _ownIdPromise: Promise<string>;
+  constructor(peerConfig?: PeerOptions) {
+    this._peer = peerConfig ? new Peer(peerConfig) : new Peer();
+    this._ownIdPromise = new Promise<string>((resolve, reject) => {
+      const timeout = setTimeout(
+        () => reject(new Error("Peer ID not assigned in time")),
+        10000,
+      );
+      this._peer.on("open", (id) => {
+        clearTimeout(timeout);
+        this._playerId = id;
+        resolve(id);
+      });
+      this._peer.on("error", (err) => {
+        clearTimeout(timeout);
+        reject(err);
+      });
+    });
+    this._peer.on("error", (err) => {
+      console.error("PeerJS error:", err.type, err.message);
+    });
     window.addEventListener("beforeunload", () => {
-      if (
-        this._dataChannel &&
-        this._dataChannel.readyState === "open" &&
-        this._playerId
-      ) {
-        const leaveEvent = {
+      if (this._dataConnection?.open && this._playerId !== null) {
+        const leaveEvent: PlayerEvent = {
           playerId: this._playerId,
           action: "LEAVE",
-          button: "",
           timestamp: Date.now(),
         };
         try {
-          this._dataChannel.send(JSON.stringify(leaveEvent));
-        } catch {}
+          this._dataConnection.send(leaveEvent);
+        } catch (err) {
+          console.warn("Failed to send LEAVE:", err);
+        }
       }
+      this._dataConnection?.close();
+      this._peer.destroy();
     });
   }
   async joinMatch() {
     const params = new URLSearchParams(window.location.search);
-    const remoteBase64 = params.get("remoteSDP");
-    if (!remoteBase64) {
-      throw new Error("No remoteSDP found in URL parameters.");
+    const hostPeerId = params.get("hostPeerId");
+    if (!hostPeerId) {
+      throw new Error("No hostPeerId found in URL parameters.");
     }
-    const decodedURL = await decompressOfferData(remoteBase64);
-    const remoteObject = JSON.parse(decodedURL);
-    this._playerId = remoteObject.playerId;
-    const remoteSDP = remoteObject.sdp;
-    await this._pc.setRemoteDescription(remoteSDP);
-    if (remoteSDP.type === "offer") {
-      const answer = await this._pc.createAnswer();
-      await this._pc.setLocalDescription(answer);
-      await new Promise((resolve) => {
-        this._pc.onicecandidate = (event) => {
-          if (!event.candidate) {
-            resolve(void 0);
-          }
-        };
+    const conn = this._peer.connect(hostPeerId, {
+      reliable: false,
+    });
+    this._dataConnection = conn;
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        conn.close();
+        reject(new Error("Connection timeout"));
+      }, 15000);
+      conn.on("open", () => {
+        clearTimeout(timeout);
+        if (this._playerId) {
+          const joinEvent: PlayerEvent = {
+            playerId: this._playerId,
+            action: "JOIN",
+            timestamp: Date.now(),
+          };
+          conn.send(joinEvent);
+          console.log("JOIN sent, data connection open");
+          resolve();
+        } else {
+          this._ownIdPromise
+            .then((playerId) => {
+              const joinEvent: PlayerEvent = {
+                playerId,
+                action: "JOIN",
+                timestamp: Date.now(),
+              };
+              conn.send(joinEvent);
+              console.log("JOIN sent, data connection open");
+              resolve();
+            })
+            .catch(reject);
+        }
       });
-      const answerObject = {
-        playerId: this._playerId,
-        sdp: this._pc.localDescription,
-      };
-      const answerJSON = JSON.stringify(answerObject);
-      const base64AnswerObject = btoa(answerJSON);
-      const channel = new BroadcastChannel("touch-coop-signaling");
-      const msg = {
-        type: "answer",
-        playerId: this._playerId,
-        base64Answer: base64AnswerObject,
-      };
-      channel.postMessage(msg);
-      channel.close();
-    }
+      conn.on("error", (err) => {
+        clearTimeout(timeout);
+        reject(err);
+      });
+    });
+    conn.on("data", (data: unknown) => {
+      console.log("Received from host:", data);
+    });
+    conn.on("close", () => {
+      console.log("Data connection closed by host");
+      this._dataConnection = null;
+    });
   }
   async sendMove(button: string) {
-    if (this._dataChannel && this._dataChannel.readyState === "open") {
-      if (!this._playerId) {
+    if (this._dataConnection?.open) {
+      if (this._playerId === null) {
         throw new Error("Player ID is not set. Cannot send data.");
       }
       const playerEvent: PlayerEvent = {
@@ -86,10 +121,18 @@ export class Player {
         button: button,
         timestamp: Date.now(),
       };
-      const playerEventJSON = JSON.stringify(playerEvent);
-      this._dataChannel.send(playerEventJSON);
+      this._dataConnection.send(playerEvent);
     } else {
-      console.warn("Data channel is not open. Cannot send data.");
+      console.warn("Data connection is not open. Cannot send move.");
     }
   }
+  get isConnected(): boolean {
+    return !!this._dataConnection?.open;
+  }
+  destroy() {
+    this._dataConnection?.close();
+    this._peer.destroy();
+  }
 }

package/vite.config.ts CHANGED Viewed

@@ -18,18 +18,14 @@ export default defineConfig({
     emptyOutDir: true,
     rollupOptions: {
       external: (id) => {
-        // For IIFE (browser), bundle all dependencies (including qrcode)
         if (/qrcode/.test(id)) {
-          // Only externalize for es/cjs
           const format = process.env.BUILD_FORMAT;
           return format === "es" || format === "cjs";
         }
         return false;
       },
       output: {
-        globals: {
-          // No external globals needed for IIFE
-        },
+        globals: {},
       },
     },
   },

package/dist/encoding.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export declare function compressOfferData(originalText: string): Promise<string>;
-export declare function decompressOfferData(base64Input: string): Promise<string>;
-//# sourceMappingURL=encoding.d.ts.map

package/dist/encoding.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"encoding.d.ts","sourceRoot":"","sources":["../src/encoding.ts"],"names":[],"mappings":"AAAA,wBAAsB,iBAAiB,CAAC,YAAY,EAAE,MAAM,mBA0B3D;AAED,wBAAsB,mBAAmB,CACvC,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,MAAM,CAAC,CAiBjB"}