From fc44bcd15e924f11474a4e77e6fef053b8450a91 Mon Sep 17 00:00:00 2001
From: km0 <luzzanafrancesco@gmail.com>
Date: Sun, 19 Mar 2023 17:49:58 +0100
Subject: [PATCH] style and others

---
 public/draw.js    | 109 ----------------------------------------------
 public/style.css  |   4 ++
 server.js         |   1 -
 views/wander.html |  93 ---------------------------------------
 4 files changed, 4 insertions(+), 203 deletions(-)
 delete mode 100644 public/draw.js
 delete mode 100644 views/wander.html

diff --git a/public/draw.js b/public/draw.js
deleted file mode 100644
index ad99ddb..0000000
--- a/public/draw.js
+++ /dev/null
@@ -1,109 +0,0 @@
-// Great resource from https://stackoverflow.com/a/40700068
-// Thank you ConnorFan
-
-var strokeWidth = 8;
-var bufferSize;
-
-var svgElement = document.getElementById("svgElement");
-var rect = svgElement.getBoundingClientRect();
-var path = null;
-var strPath;
-var buffer = []; // Contains the last positions of the mouse cursor
-
-const startDrawing = (e) => {
-	e.preventDefault();
-	// console.log("start");
-	bufferSize = 2;
-	path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	path.setAttribute("fill", "none");
-	path.setAttribute("stroke", "currentColor");
-	path.setAttribute("stroke-width", strokeWidth);
-	buffer = [];
-	var pt = getMousePosition(e);
-	appendToBuffer(pt);
-	strPath = "M" + pt.x + " " + pt.y;
-	path.setAttribute("d", strPath);
-	svgElement.appendChild(path);
-};
-
-const draw = (e) => {
-	e.preventDefault();
-	if (path) {
-		// console.log("draw");
-		appendToBuffer(getMousePosition(e));
-		updateSvgPath();
-	}
-};
-
-const stopDrawing = () => {
-	if (path) {
-		// console.log("stop");
-		path = null;
-	}
-};
-
-var getMousePosition = function (e) {
-	return {
-		x: (e.pageX || e?.changedTouches[0]?.pageX) - rect.left,
-		y: (e.pageY || e?.changedTouches[0]?.pageY) - rect.top,
-	};
-};
-
-var appendToBuffer = function (pt) {
-	buffer.push(pt);
-	while (buffer.length > bufferSize) {
-		buffer.shift();
-	}
-};
-
-// Calculate the average point, starting at offset in the buffer
-var getAveragePoint = function (offset) {
-	var len = buffer.length;
-	if (len % 2 === 1 || len >= bufferSize) {
-		var totalX = 0;
-		var totalY = 0;
-		var pt, i;
-		var count = 0;
-		for (i = offset; i < len; i++) {
-			count++;
-			pt = buffer[i];
-			totalX += pt.x;
-			totalY += pt.y;
-		}
-		return {
-			x: totalX / count,
-			y: totalY / count,
-		};
-	}
-	return null;
-};
-
-var updateSvgPath = function () {
-	var pt = getAveragePoint(0);
-
-	if (pt) {
-		// Get the smoothed part of the path that will not change
-		strPath += " L" + pt.x + " " + pt.y;
-
-		// Get the last part of the path (close to the current mouse position)
-		// This part will change if the mouse moves again
-		var tmpPath = "";
-		for (var offset = 2; offset < buffer.length; offset += 2) {
-			pt = getAveragePoint(offset);
-			tmpPath += " L" + pt.x + " " + pt.y;
-		}
-
-		// Set the complete current path coordinates
-		path.setAttribute("d", strPath + tmpPath);
-	}
-};
-
-svgElement.addEventListener("mousedown", (e) => startDrawing(e));
-svgElement.addEventListener("touchstart", (e) => startDrawing(e), { passive: false });
-
-svgElement.addEventListener("mousemove", (e) => draw(e));
-svgElement.addEventListener("touchmove", (e) => draw(e), { passive: false });
-
-svgElement.addEventListener("mouseup", () => stopDrawing());
-svgElement.addEventListener("mouseleave", () => stopDrawing());
-svgElement.addEventListener("touchend", () => stopDrawing());
diff --git a/public/style.css b/public/style.css
index 66c546c..1aa891f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -19,3 +19,7 @@
   display: inline-block;
   pointer-events: none;
 }
+
+#address {
+  display: none;
+}
diff --git a/server.js b/server.js
index e700c18..edc9f29 100644
--- a/server.js
+++ b/server.js
@@ -103,7 +103,6 @@ const broadcast = (msg) => {
 // Websocket events listener
 wss.on("connection", (ws) => {
 	USERS.add(ws);
-	ws.send(JSON.stringify({ type: "theme", theme: theme }));
 
 	ws.on("message", (data) => {
 		// Parse the incoming data safely
diff --git a/views/wander.html b/views/wander.html
deleted file mode 100644
index c2e1b1c..0000000
--- a/views/wander.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Draw draw draw</title>
-		<script src="wss.js"></script>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<h1>Display</h1>
-		<div id="svg-container" class="destination">
-			<svg
-				class="hidden"
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:xlink="http://www.w3.org/1999/xlink"
-				version="1.1"
-				id="svgElement"
-				x="0px"
-				y="0px"
-				width="200px"
-				height="200px"
-				viewBox="0 0 500 500"
-				enable-background="new 0 0 100 100"
-				preserveAspectRatio="none"
-				xml:space="preserve"
-			></svg>
-		</div>
-
-		<script>
-			const svgModel = document.querySelector("#svgElement");
-			const container = document.querySelector("#svg-container");
-
-			const socket = new ReconnectingWebSocket(
-				location.origin.replace(/^http/, "ws") + "{{address}}"
-			);
-			socket.onopen = (event) => {
-				socket.send(JSON.stringify({ type: "hello" }));
-				console.log("Connected as destination!");
-			};
-
-			socket.onmessage = (event) => {
-				let message;
-				try {
-					message = JSON.parse(event.data);
-				} catch (e) {}
-
-				if (message?.type == "drawings") {
-					let svg = svgModel.cloneNode();
-					svg.classList.remove("hidden");
-					let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-					path.setAttribute("d", message.paths);
-					path.setAttribute("fill", "none");
-					path.setAttribute("stroke", "currentColor");
-					path.setAttribute("stroke-width", 8);
-					svg.appendChild(path);
-
-                    svg.style.translate = '50% 50%'
-                    svg.style.transition = 'translate 0.5s'
-                    walk(svg)
-					container.appendChild(svg);
-				}
-			};
-
-
-            const randomWalk = (prev, scale = 1) => {
-                return {
-                    x: prev?.x + (Math.random() - 0.5) * scale,
-                    y: prev?.y + (Math.random() - 0.5) * scale
-                }
-            }            
-            
-            const walk = (el) => {
-                let translate = el.style.translate
-                let coords = translate.split(' ')
-                let newCoords = randomWalk(
-                     {
-                         x: Number(coords[0].replace('%', '')), 
-                         y: Number(coords[1].replace('%', ''))
-                     },
-                    10
-                )
-                el.style.translate = `${newCoords.x}% ${newCoords.y}%`
-                
-                requestAnimationFrame(()=> walk(el))
-
-            }
-
-
-		</script>
-	</body>
-</html>