Add Modularity!
This commit is contained in:
Dominic Zimmer
parent
af2ef29585
commit
30515c4328
6
model.py
6
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)
|
||||
|
||||
21
static/lobby.html
Normal file
21
static/lobby.html
Normal 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>
|
||||
@ -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
3
static/session.html
Normal 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>
|
||||
@ -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"}}}
|
||||
100
ui.html
100
ui.html
@ -13,97 +13,17 @@ div {
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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 id="content">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<span>Active Session:</span><span id="active-session">None</span>
|
||||
<button id="btn-leave-session">Leave Session</button>
|
||||
<br>
|
||||
</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>
|
||||
<!--<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>
|
||||
|
||||
<script src="../static/renderer.js"></script>
|
||||
|
||||
<script>
|
||||
fetch('api/draw', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user