108 lines
4.1 KiB
JavaScript
108 lines
4.1 KiB
JavaScript
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_lobby(msg) {
|
|
if (msg.hasOwnProperty('username')) {
|
|
document.getElementById('label-username').innerText = msg.username;
|
|
}
|
|
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);
|
|
}
|
|
|
|
all_sessions.appendChild(tehsession);
|
|
})
|
|
}
|
|
*/
|
|
}
|
|
|
|
ws.onmessage = function(event) {
|
|
const msg = JSON.parse(event.data);
|
|
|
|
console.log(msg);
|
|
|
|
var view = "lobby";
|
|
if (msg.hasOwnProperty('view')) {
|
|
view = msg.view;
|
|
}
|
|
if (view == "lobby") {
|
|
draw_lobby(msg);
|
|
} else if (view == "session") {
|
|
console.log("cant draw session yet");
|
|
}
|
|
};
|