<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shiritori</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
</head>
<body hx-sse="connect:/api/events">
<div id="content">
<div id="split">
<div>
<div id="shiritori"
hx-sse="swap:word"
hx-swap="beforeend"
hx-on::sse-message="this.scrollTop = this.scrollHeight">
</div>
<form
hx-post="/api/submit"
hx-swap="innerHTML"
hx-target="#feedback"
hx-on::after-request="this.querySelector('input[name=word]').value = ''">
<input id="shiritori-input" type="text" name="word">
</form>
</div>
<iframe
hx-sse="swap:navigate"
hx-on::sse-message="this.src = event.detail.data">
</iframe>
</div>
<p id="shiritori-players"
hx-sse="swap:players"
></p>
<div style="display: none">
<button onclick="changeRoom('lobby')">Back to lobby</button>
<div id="feedback"></div>
Change room: <input id="room-input" autocomplete="off">
</div>
</div>
</body>
</html>