draw-wip

2025-02-16 14:44:29 +01:00
parent 67381386ac
commit eaa0b02e89
6 changed files with 244 additions and 51 deletions
--- a/views/draw.html
+++ b/views/draw.html
@@ -0,0 +1,93 @@
+{{block "draw" .}}
+<canvas
+  id="drawCanvas"
+  width="500"
+  height="500"
+  style="border: 1px solid black"
+></canvas>
+<canvas
+  id="receiveCanvas"
+  width="500"
+  height="500"
+  style="border: 1px solid black"
+></canvas>
+
+<script>
+  const canvas = document.getElementById("drawCanvas");
+  const ctx = canvas.getContext("2d");
+  ctx.lineWidth = 2;
+  ctx.lineCap = "round";
+
+  let drawing = false;
+  let lineId = 0;
+
+  const drawSocketUrl =
+    (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
+    window.location.host +
+    "/draw/ws";
+
+  let drawSocket = new WebSocket(drawSocketUrl);
+
+  drawSocket.onerror = (e) => {
+    console.log("error", e);
+  };
+  drawSocket.onclose = (e) => {
+    console.log("closed", e);
+  };
+
+  setTimeout(() => {
+    drawSocket.send("ping");
+  }, 200);
+
+  const sendMessage = (id, x, y) => {
+    if (drawSocket.readyState !== drawSocket.OPEN) {
+      drawSocket = new WebSocket(drawSocketUrl);
+    }
+
+    drawSocket.send(id + "," + x + "," + y);
+  };
+
+  canvas.addEventListener("mousedown", () => {
+    ctx.beginPath();
+    lineId++;
+    drawing = true;
+  });
+  canvas.addEventListener("mouseup", () => {
+    drawing = false;
+    ctx.closePath();
+  });
+  canvas.addEventListener("mousemove", (e) => {
+    if (!drawing) return;
+    ctx.lineTo(e.offsetX, e.offsetY);
+    sendMessage(lineId, e.offsetX, e.offsetY);
+    ctx.stroke();
+  });
+
+  const receiveCanvas = document.getElementById("receiveCanvas");
+  const recCtx = receiveCanvas.getContext("2d");
+  recCtx.lineWidth = 2;
+  recCtx.lineCap = "round";
+
+  let receiveLineId = 0;
+
+  drawSocket.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 (drawSocket.readyState !== drawSocket.OPEN) {
+      drawSocket = new WebSocket(drawSocketUrl);
+    }
+    drawSocket.send("ping");
+  }, 10000);
+</script>
+{{end}}
--- a/views/drawIndex.html
+++ b/views/drawIndex.html
@@ -0,0 +1,43 @@
+{{block "index2" .}}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home</title>
+    <link rel="stylesheet" href="/css/main.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <h1><a href="/">K</a></h1>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <section>
+        {{template "draw" }}
+      </section>
+    </main>
+
+    <footer>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://github.com/JurajKubrican">Github</a>
+          </li>
+          <li>
+            <a href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/"
+              >LinkedIn</a
+            >
+          </li>
+        </ul>
+      </nav>
+    </footer>
+  </body>
+</html>
+{{end}}