147 lines
5.3 KiB
Handlebars
147 lines
5.3 KiB
Handlebars
<html>
|
|
<head>
|
|
<title>Charcuterie</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
|
|
</head>
|
|
<script type="text/javascript">
|
|
<!--
|
|
let username = "Unknown Ape";
|
|
|
|
function playSound(sound) {
|
|
const http = new XMLHttpRequest();
|
|
http.open("POST", `${window.location.origin}/play/${sound}`);
|
|
http.send();
|
|
socket.send(JSON.stringify({
|
|
action: `${sound}'ed`,
|
|
show: true,
|
|
actor: username,
|
|
}));
|
|
return false;
|
|
}
|
|
|
|
var timeoutHandle;
|
|
function countdown(minutes) {
|
|
document.getElementById("timer").className = "text-success";
|
|
var seconds = 60;
|
|
var mins = minutes
|
|
function tick() {
|
|
var counter = document.getElementById("timer");
|
|
var current_minutes = mins-1
|
|
|
|
if (current_minutes == 0) {
|
|
counter.className = "text-danger";
|
|
}
|
|
seconds--;
|
|
counter.innerHTML =
|
|
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
|
|
if( seconds > 0 ) {
|
|
timeoutHandle=setTimeout(tick, 1000);
|
|
} else {
|
|
|
|
if(mins > 1){
|
|
|
|
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
|
|
setTimeout(function () { countdown(mins - 1); }, 1000);
|
|
|
|
}
|
|
}
|
|
}
|
|
tick();
|
|
}
|
|
|
|
function gainEntry() {
|
|
wsConnect();
|
|
username = document.getElementById("username").value;
|
|
document.getElementById("entry").style = "display: none;"
|
|
document.getElementById("board").style = "display: block;"
|
|
}
|
|
|
|
function wsConnect() {
|
|
const socket = new WebSocket(`ws://${window.location.hostname}:9078`);
|
|
window.socket = socket;
|
|
|
|
socket.onopen = (event) => {
|
|
console.log('Websocket connected! 😺')
|
|
socket.send(JSON.stringify({
|
|
action: "connected",
|
|
show: true,
|
|
actor: username,
|
|
}));
|
|
}
|
|
socket.onerror = (err) => {
|
|
console.error('😿 Websocket encountered an error:', err)
|
|
socket.close()
|
|
wsConnect(socket.app)
|
|
}
|
|
socket.onclose = (event) => {
|
|
console.log('Websocketconnection lost, retrying..')
|
|
wsConnect(socket.app)
|
|
}
|
|
|
|
socket.onmessage = (event) => {
|
|
const data = JSON.parse(event.data)
|
|
|
|
if (data.show) {
|
|
const messages = document.getElementById("messages");
|
|
let m = document.createElement('div');
|
|
m.innerHTML = `${data.actor} ${data.action}`;
|
|
messages.insertBefore(m, messages.firstChild);
|
|
}
|
|
};
|
|
}
|
|
|
|
-->
|
|
</script>
|
|
<body>
|
|
<div class="container">
|
|
<center>
|
|
<img src="/assets/board.png" />
|
|
<br/>
|
|
A sound board for Meet, get it?
|
|
</center>
|
|
|
|
<br clear="all"/>
|
|
|
|
<div id="entry" class="container">
|
|
<div class="container">
|
|
<form action="/" method="GET" onsubmit="gainEntry(); return false;">
|
|
<input class="w-25" id="username" placeholder="Enter your name"/>
|
|
<input type="submit" value="Join"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="board" style="display: none;" class="container">
|
|
<div class="row">
|
|
<div class="col-8">
|
|
{{#each sounds}}
|
|
<input class="w-25 m-2 btn btn-primary" type="button" onclick="return playSound('{{this}}');" value="{{this}}"/>
|
|
{{/each}}
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="row">
|
|
Time remaining:
|
|
<div id="timer" style="font-weight: bold;" class="text-success"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="messages"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if admin}}
|
|
<div class="mt-5 container">
|
|
<input class="btn btn-danger" type="button" onclick="return playSound('factorywhistle');" value="Time is up"/>
|
|
</div>
|
|
{{else}}
|
|
{{/if}}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<!--
|
|
vim: ft=html
|
|
-->
|