dominic/webpnp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Modularity!

Browse Source
This commit is contained in:
Dominic Zimmer
2020-04-19 20:03:59 +02:00
parent af2ef29585
commit 30515c4328
6 changed files with 119 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
static/lobby.html Normal file
View File

@@ -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>

75
static/renderer.js
View File

@@ -2,10 +2,74 @@ 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');
@@ -84,13 +148,12 @@ function draw_lobby(msg) {
tehsession.appendChild(btnjoin);
}
all_sessions.appendChild(tehsession);
sessions.appendChild(tehsession);
})
}
*/
}
ws.onmessage = function(event) {
ws.onmessage = async function(event) {
const msg = JSON.parse(event.data);
console.log(msg);
@@ -100,8 +163,12 @@ ws.onmessage = function(event) {
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") {
console.log("cant draw session yet");
response = await fetch('../static/session.html')
document.getElementById("content").innerHTML = await response.text();
draw_session(msg);
}
};

3
static/session.html Normal file
View File

@@ -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>