Update foo

static/views/lobby/script.js

@@ -0,0 +1,143 @@
+    var text = document.getElementById("msg").innerText
+msg = JSON.parse(text)
+
+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);
+        })
+        }
+

static/views/lobby/template.html

@@ -0,0 +1,21 @@
+<span id="greeting"></span><br>
+<div id="username-area">
+    <span id="greeting">Hello, </span>
+    <span id="label-username">_</span>
+    <input id="input-set-username" style="display: none;">
+    <button id="btn-edit-username">🖉</button>
+    <button id="btn-discard-username" style="display: none;">✘</button>
+    <button id="btn-confirm-username" style="display: none;">✔</button>
+</div>
+<br>
+
+
+<span>Available sessions</span><br>
+<div id="sessions"></div><br>
+<br>
+<br>
+
+<span>Create Session</span><br>
+<input id="input-create-session">
+<button id="btn-create-session">+</button>
+<br>

static/views/session/script.js

@@ -0,0 +1,9 @@
+var text = document.getElementById("msg").innerText
+msg = JSON.parse(text)
+
+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;

static/views/session/template.html

@@ -0,0 +1,3 @@
+Welcome to <b id="session"></b>, <span id="label-username"></span>
+<br><br>
+<button id="btn-leave-session">Leave Session</button>