(ml5717) Small style fixes to canvas size, tool selection + added enter-leave drawing

public/index.html

@@ -41,7 +41,9 @@
         <div class="dropdown">
           <button class="dropdown-peers"><i class="fa fa-bars"></i></button>
           <div class="peers">
-            <ul id="connected-peers"></ul>
+            <ul id="connected-peers">
+              No peers are connected
+            </ul>
           </div>
         </div>
         <input

public/styles.css

+html,
+body {
+  height: 100%;
+}
+
 body {
   background-color: black;
   margin: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 #canvas {
   width: calc(100vw - 8px);
-  height: 100%;
-  position: fixed;
   background-color: white;
-  z-index: -1;
-
   border: 4px solid red;
+  flex-grow: 1;
 }
 
 #tools-panel {
@@ -27,7 +31,7 @@ body {
 }
 
 button.selected {
-  background-color: lightgray;
+  background-color: gray !important;
 }
 
 #top-panel {
@@ -132,10 +136,11 @@ button.selected {
   border: none;
   cursor: pointer;
   border-radius: 50%;
+  margin-right: 8px;
 }
 
 #pen-tool:hover {
-  background-color: #4f4f4f;
+  background-color: #4f4f4f !important;
   transition-duration: 0.4s;
 }
 
@@ -150,6 +155,6 @@ button.selected {
 }
 
 #eraser-tool:hover {
-  background-color: #4f4f4f;
+  background-color: #4f4f4f !important;
   transition-duration: 0.4s;
 }

src/app.js

@@ -140,17 +140,25 @@ function handleRoomConnectionEstablished(room) {
   })
 
   room.addEventListener("userJoin", ({ detail: id }) => {
+    if (HTML.connectedPeers.children.length === 0) {
+      HTML.connectedPeers.innerHTML = ""
+    }
+
     const peerElem = document.createElement("li")
     peerElem.innerHTML = id
     HTML.connectedPeers.appendChild(peerElem)
   })
 
   room.addEventListener("userLeave", ({ detail: id }) => {
-    for (const peerElem of HTML.connectedPeers.children) {
+    for (let peerElem of HTML.connectedPeers.children) {
       if (peerElem.innerHTML == id) {
         HTML.connectedPeers.removeChild(peerElem)
       }
     }
+
+    if (HTML.connectedPeers.children.length === 0) {
+      HTML.connectedPeers.innerHTML = "No peers are connected"
+    }
   })
 
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
@@ -179,6 +187,30 @@ function handleRoomConnectionEstablished(room) {
     userInput = false
   })
 
+  HTML.canvas.addEventListener("mouseenter", (e) => {
+    if (e.buttons === 0) {
+      userInput = false
+
+      return
+    }
+
+    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)
+          }
+        })
+      })
+    }
+  })
+
   HTML.canvas.addEventListener("mouseup", () => {
     userInput = false
   })