Using namespace import for html elements

src/app.js

 import { line, curveLinear } from "d3-shape"
 
-import { HTML } from "./elements.js"
+import * as HTML from "./elements.js"
 import { connect } from "./room.js"
 
-const {
-  canvas,
-  connectedPeers,
-  peerButton,
-  peerIDElem,
-  userIDElem,
-  roomIDElem,
-  penButton,
-  eraserButton,
-} = HTML
-
 const TEST_ROOM = "imperial"
 
 // TODO: switch to curve interpolation that respects mouse points based on velocity
@@ -46,7 +35,7 @@ const addOrUpdatePathElem = (id, points) => {
     pathElem.setAttribute("marker-start", "url(#dot)")
     pathElem.setAttribute("marker-end", "url(#dot)")
 
-    canvas.appendChild(pathElem)
+    HTML.canvas.appendChild(pathElem)
     pathElems.set(id, pathElem)
   }
 
@@ -113,10 +102,6 @@ function setElemVisible(elem, visible = true) {
   elem.style.display = visible ? "block" : "none"
 }
 
-// function hideConnectedRoom() {
-//   setElemVisible(HTML.connectedRoomInfoContainer, false)
-// }
-
 function showConnectedRoom(roomID) {
   HTML.connectedRoomID.textContent = roomID
   setElemVisible(HTML.connectedRoomInfoContainer)
@@ -134,7 +119,7 @@ function setBlankUIState() {
 }
 
 function handleRoomConnectClick() {
-  const selectedRoomID = roomIDElem.value
+  const selectedRoomID = HTML.roomIDElem.value
   if (!selectedRoomID) return
 
   setBlankUIState()
@@ -149,21 +134,21 @@ function handleRoomConnectionEstablished(room) {
   let currentTool = tools.PEN
   let currentPathID = null
 
-  userIDElem.value = room.ownID || ""
+  HTML.userIDElem.value = room.ownID || ""
   room.addEventListener("allocateOwnID", ({ detail: id }) => {
-    userIDElem.value = id
+    HTML.userIDElem.value = id
   })
 
   room.addEventListener("userJoin", ({ detail: id }) => {
     const peerElem = document.createElement("li")
     peerElem.innerHTML = id
-    connectedPeers.appendChild(peerElem)
+    HTML.connectedPeers.appendChild(peerElem)
   })
 
   room.addEventListener("userLeave", ({ detail: id }) => {
-    for (const peerElem of connectedPeers.children) {
+    for (const peerElem of HTML.connectedPeers.children) {
       if (peerElem.innerHTML == id) {
-        connectedPeers.removeChild(peerElem)
+        HTML.connectedPeers.removeChild(peerElem)
       }
     }
   })
@@ -172,7 +157,7 @@ function handleRoomConnectionEstablished(room) {
     addOrUpdatePathElem(id, points)
   })
 
-  canvas.addEventListener("mousedown", (e) => {
+  HTML.canvas.addEventListener("mousedown", (e) => {
     userInput = true
 
     let mouse = [e.offsetX, e.offsetY]
@@ -190,15 +175,15 @@ function handleRoomConnectionEstablished(room) {
     }
   })
 
-  canvas.addEventListener("mouseleave", () => {
+  HTML.canvas.addEventListener("mouseleave", () => {
     userInput = false
   })
 
-  canvas.addEventListener("mouseup", () => {
+  HTML.canvas.addEventListener("mouseup", () => {
     userInput = false
   })
 
-  canvas.addEventListener("mousemove", (e) => {
+  HTML.canvas.addEventListener("mousemove", (e) => {
     if (!userInput) {
       return
     }
@@ -218,32 +203,32 @@ function handleRoomConnectionEstablished(room) {
     }
   })
 
-  peerButton.addEventListener("click", () => {
-    const peerID = peerIDElem.value
+  HTML.peerButton.addEventListener("click", () => {
+    const peerID = HTML.peerIDElem.value
     if (peerID == "") {
       return
     }
     room.inviteUser(peerID)
-    peerIDElem.value = ""
+    HTML.peerIDElem.value = ""
   })
 
-  penButton.addEventListener("click", () => {
+  HTML.penButton.addEventListener("click", () => {
     currentTool = tools.PEN
 
-    penButton.classList.add("selected")
-    eraserButton.classList.remove("selected")
+    HTML.penButton.classList.add("selected")
+    HTML.eraserButton.classList.remove("selected")
   })
 
-  eraserButton.addEventListener("click", () => {
+  HTML.eraserButton.addEventListener("click", () => {
     currentTool = tools.ERASER
 
-    penButton.classList.remove("selected")
-    eraserButton.classList.add("selected")
+    HTML.penButton.classList.remove("selected")
+    HTML.eraserButton.classList.add("selected")
   })
 
   HTML.roomConnectButton.addEventListener("click", () => {
     room = undefined
-    handleRoomConnectClick(room)
+    handleRoomConnectClick()
   })
 }
 
@@ -258,7 +243,7 @@ function connectToARoom(roomID) {
 }
 
 HTML.roomConnectButton.addEventListener("click", () => {
-  //   handleRoomConnectClick()
+  handleRoomConnectClick()
 })
 
 connectToARoom(TEST_ROOM)

src/elements.js

-export const HTML = {
-  userIDElem: document.getElementById("user-id"),
+export const userIDElem = document.getElementById("user-id")
 
-  peerIDElem: document.getElementById("peer-id"),
-  peerButton: document.getElementById("peer-connect"),
-  connectedPeers: document.getElementById("connected-peers"),
+export const peerIDElem = document.getElementById("peer-id")
+export const peerButton = document.getElementById("peer-connect")
+export const connectedPeers = document.getElementById("connected-peers")
 
-  canvas: document.getElementById("canvas"),
-  penButton: document.getElementById("pen-tool"),
-  eraserButton: document.getElementById("eraser-tool"),
+export const canvas = document.getElementById("canvas")
+export const penButton = document.getElementById("pen-tool")
+export const eraserButton = document.getElementById("eraser-tool")
 
-  roomIDElem: document.getElementById("room-id"),
-  roomConnectButton: document.getElementById("room-connect"),
-  connectedRoomID: document.getElementById("connected-room-id"),
-  connectedRoomInfoContainer: document.getElementById("connected-room-info"),
-}
+export const roomIDElem = document.getElementById("room-id")
+export const roomConnectButton = document.getElementById("room-connect")
+export const connectedRoomID = document.getElementById("connected-room-id")
+export const connectedRoomInfoContainer = document.getElementById(
+  "connected-room-info",
+)