From d386c771f00ad7e87efcf75b0a2f2e73b9ebd789 Mon Sep 17 00:00:00 2001 From: Dominic Zimmer Date: Sun, 19 Apr 2020 21:20:12 +0200 Subject: [PATCH] Update foo --- static/renderer.js | 180 ++---------------- static/views/lobby/script.js | 143 ++++++++++++++ .../{lobby.html => views/lobby/template.html} | 0 static/views/session/script.js | 9 + .../session/template.html} | 0 5 files changed, 171 insertions(+), 161 deletions(-) create mode 100644 static/views/lobby/script.js rename static/{lobby.html => views/lobby/template.html} (100%) create mode 100644 static/views/session/script.js rename static/{session.html => views/session/template.html} (100%) diff --git a/static/renderer.js b/static/renderer.js index b26aecc..40bcd6b 100644 --- a/static/renderer.js +++ b/static/renderer.js @@ -2,173 +2,31 @@ 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("renderer is called"); console.log(msg); - var view = "lobby"; if (msg.hasOwnProperty('view')) { view = msg.view; + + contentdiv = document.getElementById("content") + + response = await fetch('../static/views/' + view + '/template.html') + contentdiv.innerHTML = await response.text(); + + var tehscript = document.createElement('script'); + tehscript.type = 'text/javascript'; + tehscript.src = '../static/views/' + view + '/script.js'; + + var tehmsg = document.createElement('text'); + tehmsg.style.display = "none" + tehmsg.id = "msg" + tehmsg.innerText = JSON.stringify(msg); + + contentdiv.appendChild(tehmsg); + contentdiv.appendChild(tehscript); } - 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); - } + }; diff --git a/static/views/lobby/script.js b/static/views/lobby/script.js new file mode 100644 index 0000000..6474a9b --- /dev/null +++ b/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); + }) + } + diff --git a/static/lobby.html b/static/views/lobby/template.html similarity index 100% rename from static/lobby.html rename to static/views/lobby/template.html diff --git a/static/views/session/script.js b/static/views/session/script.js new file mode 100644 index 0000000..3c6c1b4 --- /dev/null +++ b/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; diff --git a/static/session.html b/static/views/session/template.html similarity index 100% rename from static/session.html rename to static/views/session/template.html