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.
30 lines
1.0 KiB
JavaScript
30 lines
1.0 KiB
JavaScript
const socket = new WebSocket('wss://hub.xpub.nl/soupboat/drw/')
|
|
const svgModel = document.querySelector('#svgElement')
|
|
const container = document.querySelector('#svg-container')
|
|
|
|
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", "white");
|
|
path.setAttribute("stroke", "currentColor");
|
|
path.setAttribute("stroke-width", 16);
|
|
svg.appendChild(path);
|
|
svg.style.translate = `${Math.random()*100}vw ${Math.random()*100}vh`
|
|
svg.addEventListener('click', ()=>{svg.remove()})
|
|
container.appendChild(svg);
|
|
}
|
|
};
|