implement vote resets and also move chatMessage to a function for scripting purposes

This commit is contained in:
elijahr2411 2023-01-25 21:18:05 -05:00
parent e7e43b9399
commit f38eee8a15
3 changed files with 66 additions and 8 deletions

6
dist/index.html vendored
View file

@ -35,9 +35,15 @@
<div class="container-fluid" id="vmview">
<canvas id="display" height="0" width="0" tabindex="-1"></canvas>
<p id="turnstatus" class="text-light"></p>
<div id="voteResetPanel" class="bg-dark text-light" style="display:none;">
Do you want to reset the vm?<br/>
<button class="btn btn-success" id="voteYesBtn">Yes<span class="badge bg-secondary" id="voteYesLabel"></span></button> <button class="btn btn-danger" id="voteNoBtn">No<span class="badge bg-secondary" id="voteNoLabel"></span></button><br/>
Vote ends in <span id="votetime"></span> seconds
</div>
<div id="btns">
<button class="btn btn-secondary" id="takeTurnBtn">Take Turn</button>
<button class="btn btn-secondary" id="changeUsernameBtn">Change Username</button>
<button class="btn btn-secondary" id="voteResetButton">Vote for Reset</button>
</div>
<div class="row">
<div class="col-md-4">

3
dist/style.css vendored
View file

@ -45,4 +45,7 @@
}
#turnstatus {
text-align: center;
}
#voteResetPanel {
text-align: center;
}

View file

@ -10,11 +10,13 @@ const vms = [];
const users = [];
const buttons = {
takeTurn: window.document.getElementById("takeTurnBtn"),
changeUsername: window.document.getElementById("changeUsernameBtn")
changeUsername: window.document.getElementById("changeUsernameBtn"),
voteReset: window.document.getElementById("voteResetButton")
}
var hasTurn = false;
var vm;
var connected = false;
var voteinterval;
const chatsound = new Audio(config.chatSound);
// Elements
const turnstatus = window.document.getElementById("turnstatus");
@ -27,6 +29,12 @@ const userlist = window.document.getElementById("userlist");
const usernameSpan = window.document.getElementById("username");
const onlineusercount = window.document.getElementById("onlineusercount");
const chatinput = window.document.getElementById("chat-input");
const voteresetpanel = document.getElementById("voteResetPanel");
const voteyesbtn = document.getElementById("voteYesBtn");
const votenobtn = document.getElementById("voteNoBtn");
const voteyeslabel = document.getElementById("voteYesLabel");
const votenolabel = document.getElementById("voteNoLabel");
const votetime = document.getElementById("votetime");
// needed to scroll to bottom
const chatListDiv = document.querySelector(".chat-table");
@ -84,13 +92,7 @@ class CollabVMClient {
case "chat":
if (!connected) return;
for (var i = 1; i < msgArr.length; i += 2) {
var tr = document.createElement("tr");
var td = document.createElement("td");
if (msgArr[i] == "")
td.innerHTML = msgArr[i+1];
else td.innerHTML = `<b>${msgArr[i]}&gt;</b> ${msgArr[i+1]}`;
tr.appendChild(td);
chatList.appendChild(tr);
chatMessage(msgArr[i], msgArr[i+1])
}
chatsound.play();
chatListDiv.scrollTop = chatListDiv.scrollHeight;
@ -198,6 +200,38 @@ class CollabVMClient {
}
this.reloadUsers();
break;
case "vote":
console.log(msgArr);
switch (msgArr[1]) {
case "0":
// Vote started
case "1":
// Vote updated
voteresetpanel.style.display = "block";
voteyeslabel.innerText = msgArr[3];
votenolabel.innerText = msgArr[4];
if (voteinterval)
clearInterval(voteinterval);
var timeToEnd = Math.floor(parseInt(msgArr[2]) / 1000);
var updateVote = () => {
timeToEnd--;
if (timeToEnd === 0)
clearInterval(voteinterval);
votetime.innerText = timeToEnd;
}
voteinterval = setInterval(updateVote, 1000);
updateVote();
break;
case "2":
// Vote ended
voteresetpanel.style.display = "none";
break;
case "3":
// too soon dumbass
window.alert(`Please wait ${msgArr[2]} seconds before starting another vote.`);
break;
}
break;
}
}
reloadUsers() {
@ -270,6 +304,9 @@ class CollabVMClient {
if (keysym === undefined) return;
this.key(keysym, down);
}
voteReset(reset) {
this.socket.send(guacutils.encode(["vote", reset ? "1" : "0"]));
}
}
function multicollab(url) {
return new Promise(async (res, rej) => {
@ -300,6 +337,15 @@ function multicollab(url) {
res();
});
}
function chatMessage(username, msg) {
var tr = document.createElement("tr");
var td = document.createElement("td");
if (username == "" || username === undefined)
td.innerHTML = msg;
else td.innerHTML = `<b>${username}&gt;</b> ${msg}`;
tr.appendChild(td);
chatList.appendChild(tr);
}
async function openVM(url, node) {
vm = new CollabVMClient(url);
await vm.connect();
@ -329,4 +375,7 @@ buttons.changeUsername.addEventListener('click', () => {
vm.rename(newuser);
});
buttons.takeTurn.addEventListener('click', () => vm.turn());
buttons.voteReset.addEventListener('click', () => vm.voteReset(true));
voteyesbtn.addEventListener('click', () => vm.voteReset(true));
votenobtn.addEventListener('click', () => vm.voteReset(false));
config.serverAddresses.forEach(multicollab);