white + isolate the js

js/draw.js

@@ -1,91 +1,85 @@
-const canvas = document.getElementById("drawCanvas");
-const ctx = canvas.getContext("2d");
+(() => {
+  const canvas = document.getElementById("drawCanvas");
+  const ctx = canvas.getContext("2d");
 
-ctx.lineWidth = 2;
-ctx.lineCap = "round";
-ctx.strokeStyle = "white";
+  ctx.lineWidth = 2;
+  ctx.lineCap = "round";
+  ctx.strokeStyle = "white";
 
-let drawing = false;
-let lineId = 0;
+  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) => {
-  console.log("error", e);
-};
-drawSocket.onclose = (e) => {
-  console.log("closed", e);
-};
+  socket.onerror = console.error;
+  socket.onclose = console.warn;
 
-setTimeout(() => {
-  drawSocket.send("ping");
-}, 200);
+  setTimeout(() => socket.send("ping"), 200);
 
-const sendMessage = (id, x, y) => {
-  if (drawSocket.readyState !== drawSocket.OPEN) {
-    drawSocket = new WebSocket(drawSocketUrl);
+  // const queue = []
+
+  const sendMessage = (id, x, y) => {
+    // queue.push(`${id},${x},${y}`)
+
+    // console.log(queue)
+
+    if (socket.readyState !== socket.OPEN) {
+      socket = new WebSocket(socketUrl);
     }
 
-  drawSocket.send(id + "," + x + "," + y);
-};
+    socket.send(id + "," + x + "," + y);
+  };
 
-const drawStart = () => {
+  const drawStart = () => {
     ctx.beginPath();
     lineId++;
     drawing = true;
-};
+  };
 
-const drawStop = () => {
+  const drawStop = () => {
     drawing = false;
     ctx.closePath();
-};
+  };
 
-const drawMove = (e) => {
+  const drawMove = (e) => {
     if (!drawing) return;
     ctx.lineTo(e.offsetX, e.offsetY);
     sendMessage(lineId, e.offsetX, e.offsetY);
     ctx.stroke();
-};
-
-function touchStart(event) {
-  console.log("start");
-  drawStart(event.touches[0]);
-}
-function touchMove(event) {
-  console.log("move", event.touches[0]);
-  const e = {
-    offsetX: event.touches[0].clientX - canvas.offsetLeft,
-    offsetY: event.touches[0].clientY - canvas.offsetTop,
   };
-  drawMove(e);
-  event.preventDefault();
-}
-function touchEnd(event) {
-  console.log("end");
-  drawStop(event.changedTouches[0]);
-}
 
-canvas.addEventListener("mousedown", drawStart);
-canvas.addEventListener("mouseup", drawStop);
-canvas.addEventListener("mousemove", drawMove);
+  const touchStart = (e) => drawStart(e.touches[0]);
+  const touchMove = (e) => {
+    drawMove({
+      offsetX: e.touches[0].clientX - canvas.offsetLeft,
+      offsetY: e.touches[0].clientY - canvas.offsetTop,
+    });
+    e.preventDefault();
+  };
+  const touchEnd = (e) => drawStop(e.changedTouches[0]);
 
-canvas.addEventListener("touchstart", touchStart, false);
-canvas.addEventListener("touchend", touchEnd, false);
-canvas.addEventListener("touchmove", touchMove, false);
+  canvas.addEventListener("mousedown", drawStart);
+  canvas.addEventListener("mouseup", drawStop);
+  canvas.addEventListener("mousemove", drawMove);
 
-const receiveCanvas = document.getElementById("receiveCanvas");
-const recCtx = receiveCanvas.getContext("2d");
-recCtx.lineWidth = 2;
-recCtx.lineCap = "round";
+  canvas.addEventListener("touchstart", touchStart);
+  canvas.addEventListener("touchend", touchEnd);
+  canvas.addEventListener("touchmove", touchMove);
 
-let receiveLineId = 0;
+  const receiveCanvas = document.getElementById("receiveCanvas");
+  const recCtx = receiveCanvas.getContext("2d");
+  recCtx.lineWidth = 2;
+  recCtx.lineCap = "round";
+  recCtx.strokeStyle = "white";
 
-drawSocket.addEventListener("message", function (event) {
+  let receiveLineId = 0;
+
+  socket.addEventListener("message", function (event) {
     const parts = event.data.split(",");
     if (parts[0] != receiveLineId) {
       recCtx.closePath();
@@ -96,11 +90,12 @@ drawSocket.addEventListener("message", function (event) {
       recCtx.lineTo(parts[1], parts[2]);
       recCtx.stroke();
     }
-});
+  });
 
-setInterval(() => {
-  if (drawSocket.readyState !== drawSocket.OPEN) {
-    drawSocket = new WebSocket(drawSocketUrl);
+  setInterval(() => {
+    if (socket.readyState !== socket.OPEN) {
+      socket = new WebSocket(socketUrl);
     }
-  drawSocket.send("ping");
-}, 10000);
+    socket.send("ping");
+  }, 10000);
+})();