webpnp/static/renderer.js

const ws_url = new URL('ws', window.location.href);
ws_url.protocol = ws_url.protocol.replace('http', 'ws');
const ws = new WebSocket(ws_url.href);

function draw_session(msg) {
    document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
                        method: 'POST', body: JSON.stringify({})
                    });
    var session = msg.session;
    document.getElementById("session").innerText = session["name"];
    document.getElementById('label-username').innerText = msg.username;
}

function draw_lobby(msg) {
    if (msg.hasOwnProperty('username')) {
        document.getElementById('label-username').innerText = msg.username;
    }

    // username management
    document.getElementById("btn-edit-username").onclick = async function (e) {
        document.getElementById("btn-confirm-username").style.display = "inline-block";
        document.getElementById("btn-discard-username").style.display = "inline-block";
        document.getElementById("btn-edit-username").style.display = "none";
        document.getElementById("label-username").style.display = "none";
        document.getElementById("input-set-username").style.display = "inline-block";
        document.getElementById("input-set-username").value = document.getElementById("label-username").innerText;
    }
    document.getElementById("btn-discard-username").onclick = async function (e) {
        document.getElementById("btn-confirm-username").style.display = "none";
        document.getElementById("btn-discard-username").style.display = "none";
        document.getElementById("btn-edit-username").style.display = "inline-block";
        document.getElementById("label-username").style.display = "inline-block";
        document.getElementById("input-set-username").style.display = "none";
    }
    document.getElementById("btn-confirm-username").onclick = async function (e) {
        var text = document.getElementById("input-set-username").value;
        if (Boolean(text)) {
            let data = {"username": text};

            await fetch('api/change_username', {
                method: 'POST',
                body: JSON.stringify(data),
            })
            document.getElementById("btn-confirm-username").style.display = "none";
            document.getElementById("btn-discard-username").style.display = "none";
            document.getElementById("btn-edit-username").style.display = "inline-block";
            document.getElementById("label-username").style.display = "inline-block";
            document.getElementById("input-set-username").style.display = "none";
        } else {
            console.log("cant be empty");
            document.getElementById("btn-confirm-username").style.display = "none";
            document.getElementById("btn-discard-username").style.display = "none";
            document.getElementById("btn-edit-username").style.display = "inline-block";
            document.getElementById("label-username").style.display = "inline-block";
            document.getElementById("input-set-username").style.display = "none";
        }
    }



    document.getElementById("btn-create-session").onclick = async function (e) {
        var text = document.getElementById("input-create-session").value;
        if (Boolean(text)) {
            let data = {"sessionname": text};

            await fetch('api/create_session', {
                method: 'POST',
                body: JSON.stringify(data),
            })
        }
    };

    if (msg.hasOwnProperty('sessions')) {
        const sessions = document.getElementById('sessions');

        while (sessions.children.length) sessions.lastChild.remove();

        Object.keys(msg.sessions).forEach( session => {
            session = msg.sessions[session];
            var sessionid = session["id"];
            var sessionname = session["name"];
            var owned = session["owned"];

            const tehsession = document.createElement('div');
            const labelname = document.createElement('span');
            labelname.innerText = sessionname;
            
            tehsession.appendChild(labelname);

            if (owned) {
                const inputname = document.createElement('input');
                inputname.style.display = "none";
                const btnedit = document.createElement('button');
                btnedit.innerText = '🖉'
                const btnconfirm = document.createElement('button');
                btnconfirm.innerText = '✔'
                btnconfirm.style.display = "none"
                const btndiscard = document.createElement('button');
                btndiscard.innerText = '✘'
                btndiscard.style.display = "none"

                btnedit.onclick = async function (e) {
                    inputname.style.display = "inline-block";
                    inputname.value = sessionname;
                    btnedit.style.display = "none";
                    btnconfirm.style.display = "inline-block";
                    btndiscard.style.display = "inline-block";
                    labelname.style.display = "none";
                }
                btndiscard.onclick = async function (e) {
                    inputname.style.display = "none";
                    btnedit.style.display = "inline-block";
                    btnconfirm.style.display = "none";
                    btndiscard.style.display = "none";
                    labelname.style.display = "inline-block";
                }
                btnconfirm.onclick = async function (e) {
                    text = inputname.value;
                    if (Boolean(text)) {
                        let data = {"sessionid": sessionid, "sessionname": text};
                        await fetch('api/change_sessionname', {
                            method: 'POST',
                            body: JSON.stringify(data),
                        });
                        inputname.style.display = "none";
                        btnedit.style.display = "inline-block";
                        btnconfirm.style.display = "none";
                        btndiscard.style.display = "none";
                        labelname.style.display = "inline-block";
                    } else {
                        console.log("cant be empty");
                    }
                }

                tehsession.appendChild(inputname);
                tehsession.appendChild(btnedit);
                tehsession.appendChild(btnconfirm);
                tehsession.appendChild(btndiscard);
            }

            if ((! msg.hasOwnProperty('session')) || msg.session["id"] != sessionid) {
                const btnjoin = document.createElement('button');
                btnjoin.innerText = "Join";
                btnjoin.onclick = async (e) => await fetch('api/join_session', {
                    method: 'POST', body: JSON.stringify({"sessionid": sessionid})
                });

                tehsession.appendChild(btnjoin);
            }
            
            sessions.appendChild(tehsession);
        })
        }
}

ws.onmessage = async function(event) {
    const msg = JSON.parse(event.data);

    console.log(msg);

    var view = "lobby";
    if (msg.hasOwnProperty('view')) {
        view = msg.view;
    }
    if (view == "lobby") {
        response = await fetch('../static/lobby.html')
        document.getElementById("content").innerHTML = await response.text();
        draw_lobby(msg);
    } else if (view == "session") {
        response = await fetch('../static/session.html')
        document.getElementById("content").innerHTML = await response.text();
        draw_session(msg);
    }
};