You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.6 KiB
HTML
94 lines
2.6 KiB
HTML
2 years ago
|
<!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>
|