81 lines
2.9 KiB
HTML
81 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Exchange</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
|
<script src="{{ url_for('static', filename='socket.io.min.js') }}" integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Santa exchange</h1>
|
|
<label for="own_name">Your name: </label><br /><input type="text" id="own_name" /><br />
|
|
<br />
|
|
<label for="info_for_santa">Info for your santa (e.g. shipping address or similar):</label><br />
|
|
<textarea id="info_for_santa"></textarea><br />
|
|
<button id="submit_info_button" onclick="submitInfo();">Submit your info</button>
|
|
<br /><br /><br />
|
|
<pre id="statusParagraph"></pre>
|
|
<button id="start_exchange_button" onclick="submitStart();">Start with current participants</button>
|
|
<p>Current participants:</p>
|
|
<ul id='participantList'>
|
|
|
|
</ul>
|
|
<script type="text/javascript">
|
|
const socket = io();
|
|
const client_id = Math.floor(Math.random() * 2**64)
|
|
|
|
const other_users = []
|
|
|
|
let submitButton = document.getElementById('submit_info_button');
|
|
let startButton = document.getElementById('start_exchange_button');
|
|
|
|
submitButton.disabled = true;
|
|
startButton.disabled = true;
|
|
|
|
const exchangeWorker = new Worker("{{ url_for('static', filename='exchange_worker.js') }}", { type: 'module' });
|
|
|
|
exchangeWorker.onmessage = (e) => {
|
|
if (e.data.type == 'status') {
|
|
document.getElementById('statusParagraph').innerHTML = e.data.text;
|
|
if (e.data.stage == 'wait_for_user') {
|
|
submitButton.disabled = false;
|
|
startButton.disabled = true;
|
|
} else if (e.data.stage == 'wait_for_start') {
|
|
submitButton.disabled = true;
|
|
startButton.disabled = false;
|
|
} else {
|
|
submitButton.disabled = true;
|
|
startButton.disabled = true;
|
|
}
|
|
} else if (e.data.type == 'message') {
|
|
socket.emit('message', {client_id: client_id, room: window.location.pathname, message: e.data.message});
|
|
} else if (e.data.type == 'new_user') {
|
|
let list = document.getElementById('participantList');
|
|
const childNode = document.createElement("li");
|
|
childNode.innerHTML = e.data.username;
|
|
other_users.push(e.data.username);
|
|
list.appendChild(childNode);
|
|
}
|
|
};
|
|
|
|
socket.on('message', data => {
|
|
// All messages are broadcast to everyone, so discard messages that were actually sent from ourselves
|
|
if (data['client_id'] != client_id) {
|
|
exchangeWorker.postMessage({type: 'message', message: data['message']})
|
|
}
|
|
});
|
|
|
|
function submitInfo() {
|
|
let name = document.getElementById('own_name').value;
|
|
let info = document.getElementById('info_for_santa').value;
|
|
exchangeWorker.postMessage({type: 'set_user', username: name, userinfo: info});
|
|
}
|
|
|
|
function submitStart() {
|
|
exchangeWorker.postMessage({type: 'start', users: other_users});
|
|
}
|
|
|
|
socket.emit('join', {room: window.location.pathname, client_id: client_id})
|
|
</script>
|
|
</body>
|
|
</html> |