family/templates/room.html

{% extends 'base.html' %}

{% block head %}
<script src="{{ url_for('static', filename='socket.js') }}"></script>
{% endblock %}

{% block content %}
<h1>Game phase: <span class="game-phase">None</span></h1>
<h2>Players:</h2>
<ul class="player-list"></ul>
    <div class="state-show state-searching">
        <button class="start-game">Start game</button>
    </div>

    <div class="state-show state-selecting">
        <p>The player is <span class="guesser-name"></span></p>
        <form id="select-url">
            <input type="text" name="url" placeholder="url"/>
            <input type="text" name="title" placeholder="title"/>
            <button type="submit">Select</button>
        </form>
    </div>

    <div class="state-show state-guessing state-resolution">
        <p>The articles title is: <span class="article-title"></span>...</p>
        <button class="show-resolution state-guessing state-show">We are done guessing</button>
    </div>
    <div class="state-show state-resolution">
        <p>The article was submitted by <span  class="selected-player"></span>!</p>
    </div>
<script>
onload(() => {
    socket.on('room_state', update_state);

    function update_state(state) {
        console.log(state);
        print_players(state);
        $('.article-title').innerText = state.article;
        $('.selected-player').innerText = state.selected_player ? state.selected_player.name : '';
        $('.game-phase').innerText = state.state.toLowerCase();
        $('.guesser-name').innerText = state.guesser ? state.guesser.name : '';

        $$('.state-show').forEach(elm => {
            elm.hidden = !elm.classList.contains('state-' + state.state.toLowerCase());
        })
    }

    function print_players(state) {
        const root = $('.player-list');
        root.innerHTML = "";

        state.players.forEach(player => {
            const elm = create_elm(`<li>${(player.online ? '&#9679;' : '&#9675;')} ${player.name}</li>`)[0]
            root.appendChild(elm)
        })
    }

    update_state({{ room | safe }});

    $('form#select-url').addEventListener('submit', e => {
        e.preventDefault();
        let url = e.target.elements.url.value;
        let title = e.target.elements.title.value;

        socket.emit('add_article', title, url)
    });

    $('button.start-game').addEventListener('click', e => {
        socket.emit('start_selecting')
    });

    $('button.show-resolution').addEventListener('click', e => {
        socket.emit('start_resolving')
    });
})

</script>
{% endblock %}