From 30515c4328dddc78fa1ba3b5ab6d23de469060f5 Mon Sep 17 00:00:00 2001 From: Dominic Zimmer Date: Sun, 19 Apr 2020 20:03:59 +0200 Subject: [PATCH] Add Modularity! --- model.py | 6 +++ static/lobby.html | 21 ++++++++ static/renderer.js | 75 +++++++++++++++++++++++++++-- static/session.html | 3 ++ tehsession.json | 2 +- ui.html | 114 +++++++------------------------------------- 6 files changed, 119 insertions(+), 102 deletions(-) create mode 100644 static/lobby.html create mode 100644 static/session.html diff --git a/model.py b/model.py index a836c4e..66e1f5c 100644 --- a/model.py +++ b/model.py @@ -89,6 +89,10 @@ class Model(object): client.session = sessionid session.clients.append(client.id) + @ApiMethod + async def draw(self, clientid): + await self.send_state(clientid) + async def send_lobby_view(self, clientid): data = {} client = self.clients[clientid] @@ -108,9 +112,11 @@ class Model(object): async def send_session_view(self, clientid): data = {} client = self.clients[clientid] + session = self.sessions[client.session] data["view"] = "session" data["username"] = client.name + data["session"] = session.to_json() for socket in self.sockets[clientid]: await socket.send_json(data) diff --git a/static/lobby.html b/static/lobby.html new file mode 100644 index 0000000..c0ee059 --- /dev/null +++ b/static/lobby.html @@ -0,0 +1,21 @@ +
+
+ Hello, + _ + + + + +
+
+ + +Available sessions
+

+
+
+ +Create Session
+ + +
diff --git a/static/renderer.js b/static/renderer.js index 0b9e695..b26aecc 100644 --- a/static/renderer.js +++ b/static/renderer.js @@ -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); } }; diff --git a/static/session.html b/static/session.html new file mode 100644 index 0000000..a87d060 --- /dev/null +++ b/static/session.html @@ -0,0 +1,3 @@ +Welcome to , +

+ diff --git a/tehsession.json b/tehsession.json index 3f8f43f..9611f49 100644 --- a/tehsession.json +++ b/tehsession.json @@ -1 +1 @@ -{"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "die neue session", "clients": ["bkrqopf5j6q3tpta"], "owner": "bkrqopf5j6q3tpta"}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "dominic", "session": ""}}} \ No newline at end of file +{"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"}}} \ No newline at end of file diff --git a/ui.html b/ui.html index 6471659..f0782e8 100644 --- a/ui.html +++ b/ui.html @@ -1,109 +1,29 @@ - - leafblade Minecraft Server - - - + + - -
-
- Hello, - _ - - - - -
-
+ +
+
+ -
-Active Session:None - -
-
+ -
- -Available sessions
-

-
-
- -Create Session
- - -
- - - - - +