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