Add some kewl icons and a send chat button

This commit is contained in:
elijahr2411 2023-01-27 22:03:19 -05:00
parent 08ca372cf9
commit ab464a5283
2 changed files with 27 additions and 21 deletions

37
dist/index.html vendored
View file

@ -36,22 +36,22 @@
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">Home</a> <a href="#" class="nav-link active" aria-current="page"><i class="fa-solid fa-house"></i> Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="https://computernewb.com/collab-vm/faq/" class="nav-link">FAQ</a> <a href="https://computernewb.com/collab-vm/faq/" class="nav-link"><i class="fa-solid fa-circle-question"></i> FAQ</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="https://computernewb.com/collab-vm/rules" class="nav-link">Rules</a> <a href="https://computernewb.com/collab-vm/rules" class="nav-link"><i class="fa-solid fa-clipboard-check"></i> Rules</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="https://discord.gg/a4kqb4mGyX" class="nav-link">Discord</a> <a href="https://discord.gg/a4kqb4mGyX" class="nav-link"><i class="fa-brands fa-discord"></i> Discord</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="https://reddit.com/r/collabvm" class="nav-link">Subreddit</a> <a href="https://reddit.com/r/collabvm" class="nav-link"><i class="fa-brands fa-reddit"></i> Subreddit</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="https://computernewb.com/collab-vm/user-vm" class="nav-link">UserVM</a> <a href="https://computernewb.com/collab-vm/user-vm" class="nav-link"><i class="fa-solid fa-user"></i> UserVM</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -65,21 +65,21 @@
<p id="turnstatus" class="text-light"></p> <p id="turnstatus" class="text-light"></p>
<div id="voteResetPanel" class="bg-dark text-light" style="display:none;"> <div id="voteResetPanel" class="bg-dark text-light" style="display:none;">
Do you want to reset the vm?<br/> 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/> <button class="btn btn-success" id="voteYesBtn"><i class="fa-solid fa-check"></i> Yes<span class="badge bg-secondary" id="voteYesLabel"></span></button> <button class="btn btn-danger" id="voteNoBtn"><i class="fa-solid fa-ban"></i> No<span class="badge bg-secondary" id="voteNoLabel"></span></button><br/>
Vote ends in <span id="votetime"></span> seconds Vote ends in <span id="votetime"></span> seconds
</div> </div>
<div id="btns"> <div id="btns">
<button class="btn btn-secondary" id="takeTurnBtn">Take Turn</button> <button class="btn btn-secondary" id="takeTurnBtn"><i class="fa-solid fa-computer-mouse"></i> Take Turn</button>
<button class="btn btn-secondary" id="changeUsernameBtn">Change Username</button> <button class="btn btn-secondary" id="changeUsernameBtn"><i class="fa-solid fa-signature"></i> Change Username</button>
<button class="btn btn-secondary" id="voteResetButton">Vote for Reset</button> <button class="btn btn-secondary" id="voteResetButton"><i class="fa-solid fa-rotate-left"></i> Vote for Reset</button>
<button class="btn btn-secondary" id="screenshotButton">Screenshot</button> <button class="btn btn-secondary" id="screenshotButton"><i class="fa-solid fa-camera"></i> Screenshot</button>
<div id="staffbtns"> <div id="staffbtns">
<button class="btn btn-secondary" id="restoreBtn">Restore</button> <button class="btn btn-secondary" id="restoreBtn"><i class="fa-solid fa-rotate-left"></i> Restore</button>
<button class="btn btn-secondary" id="rebootBtn">Reboot</button> <button class="btn btn-secondary" id="rebootBtn"><i class="fa-solid fa-power-off"></i> Reboot</button>
<button class="btn btn-secondary" id="clearQueueBtn">Clear Turn Queue</button> <button class="btn btn-secondary" id="clearQueueBtn"><i class="fa-solid fa-eraser"></i> Clear Turn Queue</button>
<button class="btn btn-secondary" id="bypassTurnBtn">Bypass Turn</button> <button class="btn btn-secondary" id="bypassTurnBtn"><i class="fa-solid fa-forward"></i> Bypass Turn</button>
<button class="btn btn-secondary" id="endTurnBtn">End Turn</button> <button class="btn btn-secondary" id="endTurnBtn"><i class="fa-solid fa-ban"></i> End Turn</button>
<button class="btn btn-secondary" id="qemuMonitorBtn" data-bs-toggle="modal" data-bs-target="#qemuMonitorModal">QEMU Monitor</button> <button class="btn btn-secondary" id="qemuMonitorBtn" data-bs-toggle="modal" data-bs-target="#qemuMonitorModal"><i class="fa-solid fa-terminal"></i> QEMU Monitor</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -87,7 +87,7 @@
<div class="table-responsive username-table"> <div class="table-responsive username-table">
<table class="table table-hover table-dark table-borderless"> <table class="table table-hover table-dark table-borderless">
<thead> <thead>
<th>Users Online (<span id="onlineusercount"></span>)</th> <th><i class="fa-solid fa-user"></i> Users Online (<span id="onlineusercount"></span>)</th>
</thead> </thead>
<tbody id="userlist"></tbody> <tbody id="userlist"></tbody>
</table> </table>
@ -104,6 +104,7 @@
<div class="input-group"> <div class="input-group">
<span class="input-group-text bg-dark text-light" id="username">Username</span> <span class="input-group-text bg-dark text-light" id="username">Username</span>
<input type="text" class="form-control bg-dark text-light" id="chat-input"/> <input type="text" class="form-control bg-dark text-light" id="chat-input"/>
<button class="btn btn-primary text-light" type="button" id="sendChatBtn"><i class="fa-solid fa-paper-plane"></i></button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -25,6 +25,7 @@ const buttons = {
endTurn: window.document.getElementById("endTurnBtn"), endTurn: window.document.getElementById("endTurnBtn"),
qemuMonitor: window.document.getElementById("qemuMonitorBtn"), qemuMonitor: window.document.getElementById("qemuMonitorBtn"),
qemuMonitorSend: window.document.getElementById("qemuMonitorSendBtn"), qemuMonitorSend: window.document.getElementById("qemuMonitorSendBtn"),
sendChat: window.document.getElementById("sendChatBtn"),
} }
var hasTurn = false; var hasTurn = false;
var vm; var vm;
@ -205,7 +206,7 @@ class CollabVMClient {
curr.turn = -1; curr.turn = -1;
curr.element.classList = ""; curr.element.classList = "";
}); });
buttons.takeTurn.innerText = "Take Turn"; buttons.takeTurn.innerHTML = "<i class=\"fa-solid fa-computer-mouse\"></i> Take Turn";
turn = -1; turn = -1;
if (!msgArr.includes(username)) if (!msgArr.includes(username))
turnstatus.innerText = ""; turnstatus.innerText = "";
@ -254,9 +255,9 @@ class CollabVMClient {
} }
} }
if (turn === -1) { if (turn === -1) {
buttons.takeTurn.innerText = "Take Turn"; buttons.takeTurn.innerHTML = "<i class=\"fa-solid fa-computer-mouse\"></i> Take Turn";
} else { } else {
buttons.takeTurn.innerText = "End Turn"; buttons.takeTurn.innerHTML = "<i class=\"fa-solid fa-computer-mouse\"></i> End Turn";
} }
this.reloadUsers(); this.reloadUsers();
break; break;
@ -596,6 +597,10 @@ chatinput.addEventListener("keypress", (e) => {
chatinput.value = ""; chatinput.value = "";
} }
}); });
buttons.sendChat.addEventListener('click', () => {
vm.chat(chatinput.value);
chatinput.value = "";
});
buttons.changeUsername.addEventListener('click', () => { buttons.changeUsername.addEventListener('click', () => {
var newuser = window.prompt("Enter new username", window.username); var newuser = window.prompt("Enter new username", window.username);
if (newuser == null) return; if (newuser == null) return;