Загрузка данных

<!DOCTYPE html>

<html>
<head>

```
<title>SkyFall Room</title>

<link rel="stylesheet"
      href="/static/style.css">
```

</head>

<body>

<div class="container">

```
<h1>SKYFALL</h1>

<h2>
    Player:
    <span id="playerName">
        {{ nickname }}
    </span>
</h2>

<button id="startButton"
        onclick="startGame()">

    Start Game

</button>

<div id="roleBox"></div>

<h3 id="turnInfo"></h3>

<div id="chat"></div>

<input type="text"
       id="messageInput"
       placeholder="Question or guess">

<button onclick="sendMessage()">
    Send
</button>
```

</div>

<script>

const nickname = "{{ nickname }}";

const socket =
    new WebSocket(
        `ws://${location.host}/ws/${nickname}`
    );

socket.onmessage = function(event) {

    const chat =
        document.getElementById("chat");

    const roleBox =
        document.getElementById("roleBox");

    const turnInfo =
        document.getElementById("turnInfo");

    const data = event.data;

    // РОЛЬ
    if (data.startsWith("ROLE:")) {

        roleBox.innerHTML =
            `<h2>${data}</h2>`;

        return;
    }

    // ЧЕЙ ХОД
    if (data.includes("Current turn")) {

        turnInfo.innerHTML = data;

        return;
    }

    // ПОБЕДА ШПИОНА
    if (data.includes("SPY WON")) {

        alert("SPY WON");

    }

    // ЧАТ
    const div =
        document.createElement("div");

    div.innerText = data;

    chat.appendChild(div);

    chat.scrollTop = chat.scrollHeight;
};


function sendMessage() {

    const input =
        document.getElementById("messageInput");

    socket.send(input.value);

    input.value = "";
}


async function startGame() {

    const response =
        await fetch("/start");

    const data =
        await response.json();

    if (data.status === "started") {

        document.getElementById(
            "startButton"
        ).style.display = "none";
    }
}

</script>

</body>
</html>