white + isolate the js

js/draw.js

@@ -1,3 +1,4 @@
+(() => {
   const canvas = document.getElementById("drawCanvas");
   const ctx = canvas.getContext("2d");
 
@@ -8,30 +9,30 @@ ctx.strokeStyle = "white";
   let drawing = false;
   let lineId = 0;
 
-const drawSocketUrl =
+  const socketUrl =
     (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
     window.location.host +
     "/draw/ws";
 
-let drawSocket = new WebSocket(drawSocketUrl);
+  let socket = new WebSocket(socketUrl);
 
-drawSocket.onerror = (e) => {
+  socket.onerror = console.error;
-  console.log("error", e);
+  socket.onclose = console.warn;
-};
-drawSocket.onclose = (e) => {
-  console.log("closed", e);
-};
 
-setTimeout(() => {
+  setTimeout(() => socket.send("ping"), 200);
-  drawSocket.send("ping");
+
-}, 200);
+  // const queue = []
 
   const sendMessage = (id, x, y) => {
-  if (drawSocket.readyState !== drawSocket.OPEN) {
+    // queue.push(`${id},${x},${y}`)
-    drawSocket = new WebSocket(drawSocketUrl);
+
+    // console.log(queue)
+
+    if (socket.readyState !== socket.OPEN) {
+      socket = new WebSocket(socketUrl);
     }
 
-  drawSocket.send(id + "," + x + "," + y);
+    socket.send(id + "," + x + "," + y);
   };
 
   const drawStart = () => {
@@ -52,40 +53,33 @@ const drawMove = (e) => {
     ctx.stroke();
   };
 
-function touchStart(event) {
+  const touchStart = (e) => drawStart(e.touches[0]);
-  console.log("start");
+  const touchMove = (e) => {
-  drawStart(event.touches[0]);
+    drawMove({
-}
+      offsetX: e.touches[0].clientX - canvas.offsetLeft,
-function touchMove(event) {
+      offsetY: e.touches[0].clientY - canvas.offsetTop,
-  console.log("move", event.touches[0]);
+    });
-  const e = {
+    e.preventDefault();
-    offsetX: event.touches[0].clientX - canvas.offsetLeft,
-    offsetY: event.touches[0].clientY - canvas.offsetTop,
   };
-  drawMove(e);
+  const touchEnd = (e) => drawStop(e.changedTouches[0]);
-  event.preventDefault();
-}
-function touchEnd(event) {
-  console.log("end");
-  drawStop(event.changedTouches[0]);
-}
 
   canvas.addEventListener("mousedown", drawStart);
   canvas.addEventListener("mouseup", drawStop);
   canvas.addEventListener("mousemove", drawMove);
 
-canvas.addEventListener("touchstart", touchStart, false);
+  canvas.addEventListener("touchstart", touchStart);
-canvas.addEventListener("touchend", touchEnd, false);
+  canvas.addEventListener("touchend", touchEnd);
-canvas.addEventListener("touchmove", touchMove, false);
+  canvas.addEventListener("touchmove", touchMove);
 
   const receiveCanvas = document.getElementById("receiveCanvas");
   const recCtx = receiveCanvas.getContext("2d");
   recCtx.lineWidth = 2;
   recCtx.lineCap = "round";
+  recCtx.strokeStyle = "white";
 
   let receiveLineId = 0;
 
-drawSocket.addEventListener("message", function (event) {
+  socket.addEventListener("message", function (event) {
     const parts = event.data.split(",");
     if (parts[0] != receiveLineId) {
       recCtx.closePath();
@@ -99,8 +93,9 @@ drawSocket.addEventListener("message", function (event) {
   });
 
   setInterval(() => {
-  if (drawSocket.readyState !== drawSocket.OPEN) {
+    if (socket.readyState !== socket.OPEN) {
-    drawSocket = new WebSocket(drawSocketUrl);
+      socket = new WebSocket(socketUrl);
     }
-  drawSocket.send("ping");
+    socket.send("ping");
   }, 10000);
+})();