rooms lol

src/static/js/main.js

@@ -1,5 +1,5 @@
 import * as render from "./render.js";
-import { tpl, msgBox } from "./tpl.js";
+import { msgBox } from "./tpl.js";
 //let socket = io();
 
 function card({ type = "normal", val = "" }) {

src/static/js/socket.js

@@ -1,45 +1,33 @@
+import { msgBox, removeAllmsgBox } from "./tpl.js";
+
 let socket = false;
 let _playername;
-let _roomname;
+let _gameroom;
 
-export const connect = ({ playername, roomname = "default" }) => {
+export const connect = ({ playername, gameroom = "default" }) => {
   // checks
-  if(playername < 3 || roomname < 3)
+  if(playername < 3 || gameroom < 3)
     return false;
 
-  [_playername, _roomname] = [playername, roomname];
+  [_playername, _gameroom] = [playername, gameroom];
+  if(socket) {
+    socket.disconnect();
+    socket = false;
+  }
   socket = io();
   socketevents();
 };
 
 const socketevents = () => {
-  socket.on("auth", () => {
-
-  });
-};
-
-/*const socketevents = () => {
   socket.on("auth", () => {
     socket.emit("player", {
-      roomname: _roomname,
-      playername: _playername
+      playername: _playername,
+      gameroom: _gameroom
     });
   });
-  socket.on("done", () => {
-    socket.emit("test", "lul");
+  removeAllmsgBox();
+  msgBox("waitforPlayer");
+  socket.on("playerlist", player => {
+    document.querySelector("span#wfp_players").innerHTML = player.join("<br />");
   });
-  socket.on("test", blah => {
-    console.log(blah);
-  });
-};
-
-export const connect = ({ playername, roomname = "default" }) => {
-  [_playername, _roomname] = [playername, roomname];
-  if(!socket)
-    socket = io();
-  else {
-    socket.disconnect(true);
-    socket = io();
-  }
-  socketevents();
-};*/
+};

src/static/js/tpl.js

@@ -101,6 +101,18 @@ export const tpl = {
           removemsgBox(e.target.parentNode.parentNode.parentNode);
         }
       }]
+    },
+    waitforPlayer: {
+      title: "waiting for players",
+      content: `
+        actually connected: <span id="wfp_players">1</span>
+      `,
+      buttons: [{
+        tpl: `<input class="msgButton" type="button" value="Cancel" />`,
+        event: e => {
+          removemsgBox(e.target.parentNode.parentNode.parentNode);
+        }
+      }]
     }
   }
 };
@@ -110,6 +122,11 @@ const removemsgBox = node => {
   if(document.querySelectorAll(".msgBox").length === 0 && document.querySelector("div#menu").style.display === "none")
     document.querySelector("#black").style.display = "none";
 };
+export const removeAllmsgBox = () => {
+  document.querySelectorAll(".msgbox").forEach(msgbox => {
+    removemsgBox(msgbox);
+  });
+};
 
 export const msgBox = type => {
   if(document.querySelector("#black").style.display === "none")