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

114
ui.html
View File

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