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);
    }
};