<!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>