Send all grid positions on second user join

package.json

@@ -5,7 +5,8 @@
   "main": "webpack.config.js",
   "scripts": {
     "build": "webpack --config webpack.config.js",
-    "build-dev": "webpack --watch"
+    "build-dev": "webpack --watch",
+    "start": "node foo.js"
   },
   "repository": {
     "type": "git",
@@ -16,6 +17,9 @@
   "bugs": {
     "url": "https://github.com/sonoalex/audio-sample-sequencer/issues"
   },
+  "engines": {
+    "node": "14.x"
+  },
   "homepage": "https://github.com/sonoalex/audio-sample-sequencer#readme",
   "devDependencies": {
     "@babel/core": "^7.9.0",

public/js/Daw.js

@@ -15,8 +15,15 @@ import Sequencer from "./sequencer";
         },
         loadEvents() {
             this.main.addEventListener("click", () => {
-                AudioLoader.init();
-                Sequencer.init();
+                //AudioLoader.init();
+                Sequencer.loadSamples().then(data => {
+                    console.log('HEYYYY')
+                    Sequencer.init();
+                    Pd.start();
+                    Sequencer.start();
+                    Sequencer.socket.emit('new user', {'username':Sequencer.socketId, 'grid':Sequencer.gridPositions});
+
+                }).catch(e => console.log);
             });
 
             this.metronome.addEventListener("click", e => {

public/js/Sequencer.js

@@ -28,6 +28,25 @@ const Sequencer = {
     socket: io(),
     socketId: new Date().getTime(),
 
+    loadSamples() {
+        return new Promise((myResolve, myReject) => {
+            // "Producing Code" (May take some time)
+
+            PatchLoader.patchBatchLoader({
+                kick: "patches/kick.pd",
+                snare: "patches/snare.pd",
+                hat: "patches/hat.pd",
+                shaker: "patches/shaker.pd",
+            }).then(patches => {
+                console.log(patches);
+                this.samples = patches;
+                myResolve();
+            }).catch(e => {
+                myReject();  // when error
+            });     
+        });
+
+    },
     init() {
 
         if (!this.audioContext) {
@@ -39,19 +58,7 @@ const Sequencer = {
         this.constructGrid();
 
         //PatchLoader.getPatch('patches/kick_3.pd');
-        PatchLoader.patchBatchLoader({
-            kick: "patches/kick.pd",
-            snare: "patches/snare.pd",
-            hat: "patches/hat.pd",
-            shaker: "patches/shaker.pd",
-        }).then(patches => {
-            console.log(patches);
-            this.samples = patches;
-            //Pd.stop();
-            Pd.start();
-            this.start();
-            this.socket.emit('new user', this.socketId);
-        });
+
 
     },
 
@@ -119,9 +126,24 @@ const Sequencer = {
             //this.init();
         });
 
+        /*this.socket.on('new user', data => {
+            console.log('new user connected');
+            this.gridPositions = data.message;
+            this.constructGrid();
+            this.loadEvents();
+        }); */
+        this.socket.on('room full', data => {
+            console.log('full!');
+            this.play();
+            alert('Room is full');
+        }); 
+
+
         this.socket.on('tempo changed', data => {
             this.options.TEMPO = data.message;
             const tempoElement = document.getElementById("showTempo")
+            const slider = document.getElementById("tempo");
+            slider.value  = data.message;
             tempoElement.innerHTML = data.message;
         });
     },

src/index.js

@@ -25,25 +25,31 @@ app.get('/test', function(req, res) {
 
 
 const users = {};
+let gridPositions = {}
 
 io.on('connection', (socket) => {
 
 	console.log('New Connection!');
 
-	socket.on('new user', (username) => {
-		console.log(username);
-		if (users.length >2) {
-			console.log(`✋ Not allowed ✋`);
-			return;
-		}
+	socket.on('new user', ({username, grid}) => {
+
+		console.log('new user grid:', gridPositions);
+
 
 		users[username] = socket.id;
 		console.log(users);
 		//Save the username to socket as well. This is important for later.
 		socket["username"] = username;
 		console.log(socket["username"]);
 		console.log(`✋ ${username} has joined the colabo!! ✋`);
-		io.emit("new user", username);
+
+		if (Object.entries(users).length > 1 ) {
+			console.log('Emitting config...', gridPositions);
+			io.to(socket.id).emit('grid-changed', {
+				grid: true,
+				message: gridPositions
+			});
+		}
 	  })
 
 	socket.on('isPlaying', data => {
@@ -59,10 +65,10 @@ io.on('connection', (socket) => {
 		});
 	});
 
-
 	socket.on('grid-changed', (data) => {
-		console.log(users);
-		if (users.length === 1) {
+		console.log('grid-changed: ' , data);
+		gridPositions = data;
+		if (Object.entries(users).length === 1) {
 			console.log('just one user connected! Do not broadcast');
 			return;
 		}
@@ -75,7 +81,9 @@ io.on('connection', (socket) => {
 
 	socket.on('disconnect', () => {
 		//This deletes the user by using the username we saved to the socket
+		console.log(users[socket.username]);
 		delete users[socket.username]
+		console.log(users);
 		io.emit('user has left', users);
 	  });
 });