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>