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

Update foo

Browse Source
This commit is contained in:
Dominic Zimmer 2020-04-19 21:20:12 +02:00
parent 30515c4328
commit d386c771f0
5 changed files with 171 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
static/renderer.js
View File

@ -2,173 +2,31 @@ const ws_url = new URL('ws', window.location.href);
ws_url.protocol = ws_url.protocol.replace('http', 'ws'); ws_url.protocol = ws_url.protocol.replace('http', 'ws');
const ws = new WebSocket(ws_url.href); 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) { ws.onmessage = async function(event) {
const msg = JSON.parse(event.data); const msg = JSON.parse(event.data);
console.log("renderer is called");
console.log(msg); console.log(msg);
var view = "lobby";
if (msg.hasOwnProperty('view')) { if (msg.hasOwnProperty('view')) {
view = msg.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);
}
}; };

143
static/views/lobby/script.js Normal file
View File

@ -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);
})
}

0
static/lobby.html → static/views/lobby/template.html
View File

9
static/views/session/script.js Normal file
View File

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

0
static/session.html → static/views/session/template.html
View File