wanderer page

2 years ago · 3d08feaefb
parent 4a6ac0302f
commit 3d08feaefb
3 changed files with 99 additions and 1 deletions
--- a/server.js
+++ b/server.js
@ -27,6 +27,11 @@ const routes = (app) => {
 		res.render("destination", {
 			address: PREFIX,
 		});
+    });
+    app.get("/wander", (req, res)=>{
+        res.render("wander", {
+            address: PREFIX,
+        })
    });
 	app.get("/*", (req, res) => {
 		res.sendFile(req.url, { root: "public" });
--- a/views/.wander.html.swp
+++ b/views/.wander.html.swp
--- a/views/wander.html
+++ b/views/wander.html
@ -0,0 +1,93 @@
+<!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>