white + isolate the js

js/draw.js

@@ -1,106 +1,101 @@
-const canvas = document.getElementById("drawCanvas");
+(() => {
-const ctx = canvas.getContext("2d");
+  const canvas = document.getElementById("drawCanvas");
+  const ctx = canvas.getContext("2d");
 
-ctx.lineWidth = 2;
+  ctx.lineWidth = 2;
-ctx.lineCap = "round";
+  ctx.lineCap = "round";
-ctx.strokeStyle = "white";
+  ctx.strokeStyle = "white";
 
-let drawing = false;
+  let drawing = false;
-let lineId = 0;
+  let lineId = 0;
 
-const drawSocketUrl =
+  const socketUrl =
-  (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
+    (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
-  window.location.host +
+    window.location.host +
-  "/draw/ws";
+    "/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 sendMessage = (id, x, y) => {
+  // const queue = []
-  if (drawSocket.readyState !== drawSocket.OPEN) {
-    drawSocket = new WebSocket(drawSocketUrl);
-  }
 
-  drawSocket.send(id + "," + x + "," + y);
+  const sendMessage = (id, x, y) => {
-};
+    // queue.push(`${id},${x},${y}`)
 
-const drawStart = () => {
+    // console.log(queue)
-  ctx.beginPath();
-  lineId++;
-  drawing = true;
-};
 
-const drawStop = () => {
+    if (socket.readyState !== socket.OPEN) {
-  drawing = false;
+      socket = new WebSocket(socketUrl);
-  ctx.closePath();
+    }
-};
 
-const drawMove = (e) => {
+    socket.send(id + "," + x + "," + y);
-  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);
+  const drawStart = () => {
-canvas.addEventListener("mouseup", drawStop);
+    ctx.beginPath();
-canvas.addEventListener("mousemove", drawMove);
+    lineId++;
+    drawing = true;
+  };
 
-canvas.addEventListener("touchstart", touchStart, false);
+  const drawStop = () => {
-canvas.addEventListener("touchend", touchEnd, false);
+    drawing = false;
-canvas.addEventListener("touchmove", touchMove, false);
+    ctx.closePath();
+  };
 
-const receiveCanvas = document.getElementById("receiveCanvas");
+  const drawMove = (e) => {
-const recCtx = receiveCanvas.getContext("2d");
+    if (!drawing) return;
-recCtx.lineWidth = 2;
+    ctx.lineTo(e.offsetX, e.offsetY);
-recCtx.lineCap = "round";
+    sendMessage(lineId, e.offsetX, e.offsetY);
+    ctx.stroke();
+  };
 
-let receiveLineId = 0;
+  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]);
 
-drawSocket.addEventListener("message", function (event) {
+  canvas.addEventListener("mousedown", drawStart);
-  const parts = event.data.split(",");
+  canvas.addEventListener("mouseup", drawStop);
-  if (parts[0] != receiveLineId) {
+  canvas.addEventListener("mousemove", drawMove);
-    recCtx.closePath();
-    recCtx.beginPath();
-    receiveLineId = parts[0];
-    recCtx.moveTo(parts[1], parts[2]);
-  } else {
-    recCtx.lineTo(parts[1], parts[2]);
-    recCtx.stroke();
-  }
-});
 
-setInterval(() => {
+  canvas.addEventListener("touchstart", touchStart);
-  if (drawSocket.readyState !== drawSocket.OPEN) {
+  canvas.addEventListener("touchend", touchEnd);
-    drawSocket = new WebSocket(drawSocketUrl);
+  canvas.addEventListener("touchmove", touchMove);
-  }
+
-  drawSocket.send("ping");
+  const receiveCanvas = document.getElementById("receiveCanvas");
-}, 10000);
+  const recCtx = receiveCanvas.getContext("2d");
+  recCtx.lineWidth = 2;
+  recCtx.lineCap = "round";
+  recCtx.strokeStyle = "white";
+
+  let receiveLineId = 0;
+
+  socket.addEventListener("message", function (event) {
+    const parts = event.data.split(",");
+    if (parts[0] != receiveLineId) {
+      recCtx.closePath();
+      recCtx.beginPath();
+      receiveLineId = parts[0];
+      recCtx.moveTo(parts[1], parts[2]);
+    } else {
+      recCtx.lineTo(parts[1], parts[2]);
+      recCtx.stroke();
+    }
+  });
+
+  setInterval(() => {
+    if (socket.readyState !== socket.OPEN) {
+      socket = new WebSocket(socketUrl);
+    }
+    socket.send("ping");
+  }, 10000);
+})();