64 lines
1.8 KiB
HTML
64 lines
1.8 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}Home{% endblock %}
|
|
{% block content %}
|
|
<h1>Hello, hello, hello...</h1>
|
|
<p>Yeah, it's early.</p>
|
|
<div class="room-join-box">
|
|
<input type="text" id="username-input" class="room-input" placeholder="Your name">
|
|
</div>
|
|
|
|
<div class="room-join-box">
|
|
<input type="text" id="room-code-input" class="room-input" placeholder="Enter Room Code" maxlength="10">
|
|
<button class="room-button" id="join-button">Join</button>
|
|
</div>
|
|
|
|
<div class="room-join-box">
|
|
<button class="room-button" id="create-button">Create New Room</button>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function getUsername() {
|
|
const username = document.getElementById('username-input').value.trim();
|
|
if (!username) {
|
|
alert("Please enter your name.");
|
|
throw new Error("Username required");
|
|
}
|
|
localStorage.setItem('username', username);
|
|
return username;
|
|
}
|
|
|
|
document.getElementById('join-button').addEventListener('click', () => {
|
|
try {
|
|
getUsername();
|
|
const code = document.getElementById('room-code-input').value.trim();
|
|
if (code) {
|
|
window.location.href = `/room/${code}`;
|
|
} else {
|
|
alert("Enter a room code.");
|
|
}
|
|
} catch (_) {}
|
|
});
|
|
|
|
document.getElementById('create-button').addEventListener('click', async () => {
|
|
try {
|
|
getUsername();
|
|
const res = await fetch('/api/room', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({})
|
|
});
|
|
const data = await res.json();
|
|
if (data.code) {
|
|
window.location.href = `/room/${data.code}`;
|
|
} else {
|
|
alert("Failed to create room.");
|
|
}
|
|
} catch (_) {}
|
|
});
|
|
</script>
|
|
|
|
|
|
</script>
|
|
{% endblock %}
|