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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
model.py
View File

@ -89,6 +89,10 @@ class Model(object):
client.session = sessionid client.session = sessionid
session.clients.append(client.id) session.clients.append(client.id)
@ApiMethod
async def draw(self, clientid):
await self.send_state(clientid)
async def send_lobby_view(self, clientid): async def send_lobby_view(self, clientid):
data = {} data = {}
client = self.clients[clientid] client = self.clients[clientid]
@ -108,9 +112,11 @@ class Model(object):
async def send_session_view(self, clientid): async def send_session_view(self, clientid):
data = {} data = {}
client = self.clients[clientid] client = self.clients[clientid]
session = self.sessions[client.session]
data["view"] = "session" data["view"] = "session"
data["username"] = client.name data["username"] = client.name
data["session"] = session.to_json()
for socket in self.sockets[clientid]: for socket in self.sockets[clientid]:
await socket.send_json(data) await socket.send_json(data)

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'); 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) { function draw_lobby(msg) {
if (msg.hasOwnProperty('username')) { if (msg.hasOwnProperty('username')) {
document.getElementById('label-username').innerText = msg.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')) { if (msg.hasOwnProperty('sessions')) {
const sessions = document.getElementById('sessions'); const sessions = document.getElementById('sessions');
@ -84,13 +148,12 @@ function draw_lobby(msg) {
tehsession.appendChild(btnjoin); 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); const msg = JSON.parse(event.data);
console.log(msg); console.log(msg);
@ -100,8 +163,12 @@ ws.onmessage = function(event) {
view = msg.view; view = msg.view;
} }
if (view == "lobby") { if (view == "lobby") {
response = await fetch('../static/lobby.html')
document.getElementById("content").innerHTML = await response.text();
draw_lobby(msg); draw_lobby(msg);
} else if (view == "session") { } 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>

2
tehsession.json
View File

@ -1 +1 @@
{"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "die neue session", "clients": ["bkrqopf5j6q3tpta"], "owner": "bkrqopf5j6q3tpta"}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "dominic", "session": ""}}} {"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "die neue session", "clients": ["fjvkc3whtpbi7oo2", "bkrqopf5j6q3tpta"], "owner": "bkrqopf5j6q3tpta"}, "omg2h5imnh5nk42i": {"id": "omg2h5imnh5nk42i", "name": "meine sess", "clients": [], "owner": "bkrqopf5j6q3tpta"}, "vc7bn2t76hmjexjz": {"id": "vc7bn2t76hmjexjz", "name": "meine", "clients": [], "owner": "bkrqopf5j6q3tpta"}, "csbbc4gb4lc3jxby": {"id": "csbbc4gb4lc3jxby", "name": "meine", "clients": [], "owner": "bkrqopf5j6q3tpta"}, "jjfqw3itbsh3ylna": {"id": "jjfqw3itbsh3ylna", "name": "uiae", "clients": [], "owner": "fjvkc3whtpbi7oo2"}, "bjgdd4qfpzmnhfka": {"id": "bjgdd4qfpzmnhfka", "name": "eueue", "clients": [], "owner": "bkrqopf5j6q3tpta"}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "dominic", "session": ""}, "cho2o2ntflm4mq3u": {"id": "cho2o2ntflm4mq3u", "name": "uiae", "session": ""}, "fjvkc3whtpbi7oo2": {"id": "fjvkc3whtpbi7oo2", "name": "Me", "session": "2b7jrklcn6eulwbw"}}}

114
ui.html
View File

@ -1,109 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>leafblade Minecraft Server</title> <title>leafblade Minecraft Server</title>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<style> <style>
div { div {
border: 1px solid; border: 1px solid;
margin: 5px; margin: 5px;
} }
</style> </style>
</head> </head>
<body> <body>
<span id="greeting"></span><br> <div id="content">
<div id="username-area"> </div>
<span id="greeting">Hello, </span> </body>
<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>
<div> <script src="../static/renderer.js"></script>
<span>Active Session:</span><span id="active-session">None</span>
<button id="btn-leave-session">Leave Session</button>
<br>
</div>
<br> <script>
fetch('api/draw', {
<span>Available sessions</span><br> method: 'POST',
<div id="sessions"></div><br> body: JSON.stringify({}),
<br> });
<br> </script>
<span>Create Session</span><br>
<input id="input-create-session">
<button id="btn-create-session">+</button>
<br>
<!--<button id="btn_create_session">Create session</button>
<br><br><br>
-->
<script src="../static/renderer.js"></script>
<script>
// 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-leave-session").onclick = async (e) => await fetch('api/leave_session', {
method: 'POST', body: JSON.stringify({})
});
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),
})
}
};
</script>
</body>
</html> </html>