let socket = new WebSocket("ws://localhost:8080/ws");

socket.onmessage = function(event) {

    console.log(event.data);
    let json_data = JSON.parse(event.data);
    let method = json_data.method;
    console.log(method);
    switch(method){
        case "updateHtml":
            put_htmls(json_data.elements);
            break;
    }


}


function put_htmls(elements){
    let container = document.getElementById("container");
    for(const elem of elements){
        let id = elem.id;
        let type = elem.type;
        let styles = elem.styles;
        let text = elem.text;
        let style = "";
        for(const prop in styles){
            let value = styles[prop];
            style += `${prop}: ${value};`
        }
        switch(type){
            case "button":
                container.insertAdjacentHTML("beforeend", `<button id="${id}" style="${style}">${text}</button>`)
                break;
        }
    }
}

socket.onopen = function(event) {
    console.log("open socket");
}

socket.onclose = function(event) { 
    console.log("close socket");
}

socket.onerror = function(event) {
    console.log("error");
}