@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)

<main class="lobby-background vh-100" id="lobbybackground">
    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
        <div class="row">
            <div class="col">
                <div class="p-3 text-center fs-4">Winner: @gamelobby.getLogic.getWinner</div>
            </div>
        </div>
        <div class="row justify-content-center align-items-center flex-grow-1">
        @if((gamelobby.getUserSession(user.get.id).host)) {
            <div class="col-12 text-center mb-5">
                <div class="btn btn-success" onclick="backToLobby('@gamelobby.id')">Return to lobby</div>
            </div>
        } else {
            <div class="col-12 text-center mt-3">
                <div class="spinner-border mt-1" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        }
        </div>
    </div>
</main>
<script>
        function waitForFunction(name, checkInterval = 100) {
            return new Promise(resolve => {
                const timer = setInterval(() => {
                    if (typeof window[name] === "function") {
                        clearInterval(timer);
                        resolve(window[name]);
                    }
                }, checkInterval);
            });
        }
        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
    connectWebSocket()
</script>