Integrated new frontend

public/styles.css

@@ -4,6 +4,10 @@
   position: fixed;
 }
 
+#connected-room-info {
+  display: none;
+}
+
 button.selected {
   background-color: lightgray;
 }

src/app.js

@@ -14,6 +14,8 @@ const {
   eraserButton,
 } = HTML
 
+const TEST_ROOM = "imperial"
+
 // TODO: switch to curve interpolation that respects mouse points based on velocity
 const lineFn = line()
   .x((d) => d[0])
@@ -111,129 +113,157 @@ function setElemVisible(elem, visible = true) {
   elem.style.display = visible ? "block" : "none"
 }
 
-function hideConnectedRoom() {
-  setElemVisible(HTML.connectedRoomInfoContainer, false)
-}
+// function hideConnectedRoom() {
+//   setElemVisible(HTML.connectedRoomInfoContainer, false)
+// }
 
 function showConnectedRoom(roomID) {
   HTML.connectedRoomID.textContent = roomID
   setElemVisible(HTML.connectedRoomInfoContainer)
 }
 
-function connectToARoom(roomID) {
-  connect(roomID).then((room) => {
-    showConnectedRoom(roomID)
-
-    let userInput = false
-    let currentTool = tools.PEN
-    let currentPathID = null
-
-    userIDElem.value = room.ownID || ""
-    room.addEventListener("allocateOwnID", ({ detail: id }) => {
-      userIDElem.value = id
-    })
-
-    room.addEventListener("userJoin", ({ detail: id }) => {
-      const peerElem = document.createElement("p")
-      peerElem.innerHTML = id
-      connectedPeers.appendChild(peerElem)
-    })
-
-    room.addEventListener("userLeave", ({ detail: id }) => {
-      for (const peerElem of connectedPeers.children) {
-        if (peerElem.innerHTML == id) {
-          connectedPeers.removeChild(peerElem)
-        }
+function removeAllChildrenNodes(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild)
+  }
+}
+
+function setBlankUIState() {
+  removeAllChildrenNodes(HTML.canvas)
+  removeAllChildrenNodes(HTML.connectedPeers)
+
+  // Removes all event listeners from canvas
+  //   const newCanvas = HTML.canvas.cloneNode(true)
+  //   canvas.parentNode.replaceChild(newCanvas, canvas)
+}
+
+function handleRoomConnectClick() {
+  const selectedRoomID = roomIDElem.value
+  if (!selectedRoomID) return
+
+  setBlankUIState()
+
+  connectToARoom(selectedRoomID)
+}
+
+function handleRoomConnectionEstablished(room) {
+  showConnectedRoom(room.name)
+
+  let userInput = false
+  let currentTool = tools.PEN
+  let currentPathID = null
+
+  userIDElem.value = room.ownID || ""
+  room.addEventListener("allocateOwnID", ({ detail: id }) => {
+    userIDElem.value = id
+  })
+
+  room.addEventListener("userJoin", ({ detail: id }) => {
+    const peerElem = document.createElement("li")
+    peerElem.innerHTML = id
+    connectedPeers.appendChild(peerElem)
+  })
+
+  room.addEventListener("userLeave", ({ detail: id }) => {
+    for (const peerElem of connectedPeers.children) {
+      if (peerElem.innerHTML == id) {
+        connectedPeers.removeChild(peerElem)
       }
-    })
-
-    room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
-      addOrUpdatePathElem(id, points)
-    })
-
-    canvas.addEventListener("mousedown", (e) => {
-      userInput = true
-
-      let mouse = [e.offsetX, e.offsetY]
-
-      if (currentTool === tools.PEN) {
-        currentPathID = room.addPath(mouse)
-      } else if (currentTool === tools.ERASER) {
-        room.getPaths().forEach((points, pathID) => {
-          points.forEach((point, i) => {
-            if (getDistance(mouse, point) <= ERASERRADIUS) {
-              room.erasePoint(pathID, i)
-            }
-          })
+    }
+  })
+
+  room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
+    addOrUpdatePathElem(id, points)
+  })
+
+  canvas.addEventListener("mousedown", (e) => {
+    console.log("MDDDD")
+    userInput = true
+
+    let mouse = [e.offsetX, e.offsetY]
+
+    if (currentTool === tools.PEN) {
+      currentPathID = room.addPath(mouse)
+    } else if (currentTool === tools.ERASER) {
+      room.getPaths().forEach((points, pathID) => {
+        points.forEach((point, i) => {
+          if (getDistance(mouse, point) <= ERASERRADIUS) {
+            room.erasePoint(pathID, i)
+          }
         })
-      }
-    })
+      })
+    }
+  })
+
+  canvas.addEventListener("mouseleave", () => {
+    userInput = false
+  })
 
-    canvas.addEventListener("mouseleave", () => {
-      userInput = false
-    })
+  canvas.addEventListener("mouseup", () => {
+    userInput = false
+  })
 
-    canvas.addEventListener("mouseup", () => {
-      userInput = false
-    })
+  canvas.addEventListener("mousemove", (e) => {
+    if (!userInput) {
+      return
+    }
 
-    canvas.addEventListener("mousemove", (e) => {
-      if (!userInput) {
-        return
-      }
+    let mouse = [e.offsetX, e.offsetY]
 
-      let mouse = [e.offsetX, e.offsetY]
-
-      if (currentTool === tools.PEN) {
-        room.extendPath(currentPathID, mouse)
-      } else if (currentTool === tools.ERASER) {
-        room.getPaths().forEach((points, pathID) => {
-          points.forEach((point, i) => {
-            if (getDistance(mouse, point) <= ERASERRADIUS) {
-              room.erasePoint(pathID, i)
-            }
-          })
+    if (currentTool === tools.PEN) {
+      room.extendPath(currentPathID, mouse)
+    } else if (currentTool === tools.ERASER) {
+      room.getPaths().forEach((points, pathID) => {
+        points.forEach((point, i) => {
+          if (getDistance(mouse, point) <= ERASERRADIUS) {
+            room.erasePoint(pathID, i)
+          }
         })
-      }
-    })
+      })
+    }
+  })
 
-    peerButton.addEventListener("click", () => {
-      const peerID = peerIDElem.value
-      if (peerID == "") {
-        return
-      }
-      room.inviteUser(peerID)
-      peerIDElem.value = ""
-    })
-
-    penButton.addEventListener("click", () => {
-      currentTool = tools.PEN
-
-      penButton.classList.add("selected")
-      eraserButton.classList.remove("selected")
-    })
-
-    eraserButton.addEventListener("click", () => {
-      currentTool = tools.ERASER
-
-      penButton.classList.remove("selected")
-      eraserButton.classList.add("selected")
-    })
-
-    HTML.roomConnectButton.addEventListener("click", () => {
-      room = undefined
-      const selectedRoomID = roomIDElem.value
-      if (!selectedRoomID) return
-      connectToARoom(selectedRoomID)
-    })
+  peerButton.addEventListener("click", () => {
+    const peerID = peerIDElem.value
+    if (peerID == "") {
+      return
+    }
+    room.inviteUser(peerID)
+    peerIDElem.value = ""
   })
+
+  penButton.addEventListener("click", () => {
+    currentTool = tools.PEN
+
+    penButton.classList.add("selected")
+    eraserButton.classList.remove("selected")
+  })
+
+  eraserButton.addEventListener("click", () => {
+    currentTool = tools.ERASER
+
+    penButton.classList.remove("selected")
+    eraserButton.classList.add("selected")
+  })
+
+  HTML.roomConnectButton.addEventListener("click", () => {
+    room = undefined
+    handleRoomConnectClick(room)
+  })
+}
+
+function handleRoomConnectionError(err) {
+  alert(`Error connecting to a room:\n${err}`)
+}
+
+function connectToARoom(roomID) {
+  connect(roomID)
+    .then(handleRoomConnectionEstablished)
+    .catch(handleRoomConnectionError)
 }
 
 HTML.roomConnectButton.addEventListener("click", () => {
-  const selectedRoomID = roomIDElem.value
-  if (!selectedRoomID) return
-  connectToARoom(selectedRoomID)
+  //   handleRoomConnectClick()
 })
 
-hideConnectedRoom()
-// connectToARoom("imperial")
+connectToARoom(TEST_ROOM)