update multiplayer and packages

Author: ygongdev

README.md

@@ -8,3 +8,19 @@ This library is still unstable.
 
 # Demo
 [Demo](https://ygongdev.github.io/jigsaw-canvas/demo)
+
+# Multiplayer Demo (Local Build)
+
+## Install
+1. `yarn install`
+
+## Start client server
+1. Make sure you're at the `jigsaw-canvas` root directory
+2. `npx live-server --host=localhost`
+3. Navigate to `localhost:<port>/multiplayer-demo/client` in the browser. `<port>` is whatever the `live-server` is running on, e.g `8080`
+
+## Start backend server
+1. `cd multiplayer-demo/server`
+2. `npx nodemon server.js`
+
+Open another browser with the same url and you should see real time sync when moving pieces.

multiplayer-demo/client/index.js

@@ -35,6 +35,8 @@ class ServerPuzzleState {
 
 const canvas = document.getElementById('original');
 const container = document.getElementById("result");
+const playground = document.querySelector('#playground');
+
 let clientPuzzle;
 let isDown;
 let metadata;
@@ -50,7 +52,6 @@ init().then(puzzle => {
     })
   );
   const serverGameState = new GameState(serverPuzzle);
-  console.log(serverGameState);
   socket.emit('start', serverGameState);
 });
 
@@ -62,7 +63,7 @@ async function init() {
   canvas.width = img.width;
   canvas.height = img.height;
   const context = canvas.getContext('2d');
-  context.drawImage(img, 0, 0, canvas.width, canvas.height);
+  // context.drawImage(img, 0, 0, canvas.width, canvas.height);
 
   // Creating the puzzle pieces
   const puzzle = await generatePuzzle(img, 25, 25);
@@ -75,7 +76,6 @@ async function init() {
     return img;
   });
 
-  // shuffle(puzzlePieces);
   const fragment = document.createDocumentFragment();
   puzzlePieces.forEach(piece => {
     piece.classList.add("puzzle-piece")
@@ -97,13 +97,13 @@ async function init() {
     });
 
     ['mousedown', 'touchstart'].forEach(listener => piece.addEventListener(listener, (event) => {
-      const x = event.clientX || event.touches[0].pageX;
-      const y = event.clientY || event.touches[0].pageY;
-      console.log('touchstart');
       if (isDown) {
         return;
       }
 
+      let x = event.clientX || event.touches[0].pageX;
+      let y = event.clientY || event.touches[0].pageY;
+
       isDown = true;
       metadata = {
         idx,
@@ -115,21 +115,39 @@ async function init() {
     }, { passive: false}));
   });
 
-  ['mouseup', 'touchend'].forEach(listener => container.addEventListener(listener, function() {
-    console.log('touchend');
+  ['mouseup', 'touchend'].forEach(listener => playground.addEventListener(listener, function() {
     isDown = false;
     metadata = undefined;
   }, { passive: false }));
 
-  ['mousemove', 'touchmove'].forEach(listener => container.addEventListener(listener, (event) => {
+  ['mousemove', 'touchmove'].forEach(listener => playground.addEventListener(listener, (event) => {
     event.preventDefault();
-    console.log(isDown);
     if (isDown) {
       const piece = puzzlePieces[metadata.idx];
       const x = event.clientX || event.touches[0].pageX;
       const y = event.clientY || event.touches[0].pageY;
-      const newX = x + metadata.offset[0];
-      const newY = y + metadata.offset[1];
+      let newX = x + metadata.offset[0];
+      let newY = y + metadata.offset[1];
+
+      // Prevent dragging outside of playground boundary.
+      const playgroundBoundaries = {
+        minX: playground.offsetLeft,
+        maxX: playground.offsetLeft + playground.offsetWidth - piece.offsetWidth,
+        minY: playground.offsetTop,
+        maxY: playground.offsetTop + playground.offsetHeight - piece.offsetHeight,
+      }
+
+      if (newX < playgroundBoundaries.minX) {
+        newX = playgroundBoundaries.minX;
+      } else if (newX > playgroundBoundaries.maxX) {
+        newX = playgroundBoundaries.maxX;
+      }
+
+      if (newY < playgroundBoundaries.minY) {
+        newY = playgroundBoundaries.minY;
+      } else if (newY > playgroundBoundaries.maxY) {
+        newY = playgroundBoundaries.maxY;
+      }
 
       piece.style.left = `${newX}px`;
       piece.style.top = `${newY}px`;
@@ -148,6 +166,7 @@ function render(gameState) {
     const sp = serverPuzzle[i];
     const cp = clientPuzzle[i];
 
+    // If the client state already matches, don't need to
     if (metadata?.idx === i) {
       return;
     }

multiplayer-demo/server/server.js

@@ -5,26 +5,23 @@ const io = require('socket.io')(3000, {
 });
 
 let state = {};
-let payload = {};
 
 io.on('connection', client => {
-  console.log('connected')
   client.on('start', handleStart);
   client.on('move', handleMove);
 
-
   function handleStart(gameState) {
     state = gameState;
     startGameInterval(client);
   }
 
   function handleMove({ idx, x, y}) {
-    console.log(...arguments);
-      state.puzzle[idx].x = x;
-      state.puzzle[idx].y = y;
+    state.puzzle[idx].x = x;
+    state.puzzle[idx].y = y;
   }
 });
 
+
 function startGameInterval(client) {
   const intervalId = setInterval(() => {
     client.emit('gameState', JSON.stringify(state));

package.json

@@ -10,12 +10,10 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "release-it": "^14.10.0"
-  },
-  "dependencies": {
     "express": "^4.17.1",
     "http": "^0.0.1-security",
-    "socket.io": "^4.1.3",
-    "socket.io-client": "^4.1.3"
-  }
+    "release-it": "^14.10.0",
+    "socket.io": "^4.1.3"
+  },
+  "dependencies": {}
 }

yarn.lock

@@ -301,11 +301,6 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-backo2@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
-  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -762,22 +757,7 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-engine.io-client@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-5.1.2.tgz#27108da9b39ae03262443d945caf2caa3655c4cb"
-  integrity sha512-blRrgXIE0A/eurWXRzvfCLG7uUFJqfTGFsyJzXSK71srMMGJ2VraBLg8Mdw28uUxSpVicepBN9X7asqpD1mZcQ==
-  dependencies:
-    base64-arraybuffer "0.1.4"
-    component-emitter "~1.3.0"
-    debug "~4.3.1"
-    engine.io-parser "~4.0.1"
-    has-cors "1.1.0"
-    parseqs "0.0.6"
-    parseuri "0.0.6"
-    ws "~7.4.2"
-    yeast "0.1.2"
-
-engine.io-parser@~4.0.0, engine.io-parser@~4.0.1:
+engine.io-parser@~4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-4.0.2.tgz#e41d0b3fb66f7bf4a3671d2038a154024edb501e"
   integrity sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==
@@ -1111,11 +1091,6 @@ graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-has-cors@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
-  integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -1779,16 +1754,6 @@ parse-url@^6.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parseqs@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.6.tgz#8e4bb5a19d1cdc844a08ac974d34e273afa670d5"
-  integrity sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==
-
-parseuri@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.6.tgz#e1496e829e3ac2ff47f39a4dd044b32823c4a25a"
-  integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==
-
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -2170,19 +2135,6 @@ socket.io-adapter@~2.3.1:
   resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.3.1.tgz#a442720cb09a4823cfb81287dda1f9b52d4ccdb2"
   integrity sha512-8cVkRxI8Nt2wadkY6u60Y4rpW3ejA1rxgcK2JuyIhmF+RMNpTy1QRtkHIDUOf3B4HlQwakMsWbKftMv/71VMmw==
 
-socket.io-client@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.1.3.tgz#236daa642a9f229932e00b7221e843bf74232a62"
-  integrity sha512-hISFn6PDpgDifVUiNklLHVPTMv1LAk8poHArfIUdXa+gKgbr0MZbAlquDFqCqsF30yBqa+jg42wgos2FK50BHA==
-  dependencies:
-    "@types/component-emitter" "^1.2.10"
-    backo2 "~1.0.2"
-    component-emitter "~1.3.0"
-    debug "~4.3.1"
-    engine.io-client "~5.1.2"
-    parseuri "0.0.6"
-    socket.io-parser "~4.0.4"
-
 socket.io-parser@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.0.4.tgz#9ea21b0d61508d18196ef04a2c6b9ab630f4c2b0"
@@ -2490,11 +2442,6 @@ yargs-parser@20.2.7:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
   integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
 
-yeast@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
-  integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"