You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.5 KiB
HTML
78 lines
2.5 KiB
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 ? '●' : '○')} ${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 %} |