Browse Source

[WIP] Updating some info via Javascript works.

feature/js
Daniel Perelman 2 years ago
parent
commit
b5c689915f
3 changed files with 114 additions and 23 deletions
  1. +1
    -0
      fear_tracker/templates/base.html
  2. +104
    -19
      fear_tracker/templates/game.html
  3. +9
    -4
      fear_tracker/views.py

+ 1
- 0
fear_tracker/templates/base.html View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'css/styles.css' %}" type="text/css">
<title>Spirit Island Fear Tracker</title>
{% block header_script %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}


+ 104
- 19
fear_tracker/templates/game.html View File

@@ -2,7 +2,7 @@

{% block content %}
<header>
<div class="phase">{{ status.phase }} phase of turn #{{ status.turn }}</div>
<div class="phase"><span class="status-phase">{{ status.phase }}</span> phase of turn #<span class="status-turn">{{ status.turn }}</span></div>
<div class="fear_summary">
<span class="available_fear_cards">{{ status.available_fear_cards }}</span>
😱🎴;
@@ -32,7 +32,7 @@
<div class="player player-{{ player.order }}">
<label for="player-{{ player.order }}-visible">
<div class="player-summary">
{% if player.ready %}🏁{% else %}⏳{% endif %}
<span class="player-{{ player.order }}-ready">{% if player.ready %}🏁{% else %}⏳{% endif %}</span>
(<span class="player-total-fear player-{{ player.order }}-total-fear">{{ player.total_fear }}</span> 😱)
{{ player.name }} ({{ player.get_spirit_name }})
</div>
@@ -90,32 +90,117 @@
</div>
{% endfor %}
</div>
<input type="submit" name="update" value="Update fear">
<input type="submit" name="advance" value="Advance to next phase"{% if not all_ready %} disabled{% endif %}>
<input type="submit" name="revert" value="Revert to previous phase">
<input type="submit" name="update" class="update-button" value="Update fear">
<input type="submit" name="advance" class="advance-button" value="Advance to next phase"{% if not all_ready %} disabled{% endif %}>
<input type="submit" name="revert" class="revert-button" value="Revert to previous phase">
</form>
{% block game_refresh %}
{% if not results_only %}
<div class="button-container">
<a href="{% url 'game' access_code=access_code %}" class="button" id="button-refresh">Refresh</a>
</div>
<script>
var statusObj = JSON.parse("{{ status_json|escapejs }}");
function handleNewStatus(oldStatus, newStatus) {
{% block game_handle_new_status %}
{% endif %}
{% endblock %}
{% endblock %}
{% block header_script %}
{% if not results_only %}
<script>
var statusObj = JSON.parse("{{ status_json|escapejs }}");
function handleNewStatus(oldStatus, newStatus) {
{% block game_handle_new_status %}
if(oldStatus.hash == newStatus.hash) return true;
if(oldStatus.phase_id != newStatus.phase_id
|| oldStatus.turn != newStatus.turn) {
// Reload for new phase.
return false;
{% endblock %}
}
setInterval(function() {
$.get("{% url 'status' access_code=access_code hash=status.hash %}", function(data, textStatus, jqXHR) {
if(JSON.stringify(data) != JSON.stringify(statusObj)) {
if(!handleNewStatus(statusObj, data)) {
document.getElementById("button-refresh").click();

let form = document.forms[0];
for(let key in newStatus) {
if(key == "hash" || key == "phase_id" || key == "total_fear") {
// ignored
} else if(key == "all_ready") {
let all_ready = newStatus[key]
for(let el of document.getElementsByClassName("advance-button")) {
el.disabled = !all_ready;
}
} else if(key == "players") {
// TODO
let players = newStatus[key];
for(let ord in players) {
let prefix = "player-" + ord + "-";
let player = players[ord];
for(let pkey in player) {
if(pkey == "ready") {
let ready = player[pkey];
for(let el of document.getElementsByClassName(prefix + "ready")) {
el.innerText = ready ? "🏁" : "⏳";
}
document.getElementById(prefix + "ready-orig").value = ready;
document.getElementById(prefix + "ready").checked = ready;
} else if(pkey == "total_fear") {
let total_fear = player[pkey];
for(let el of document.getElementsByClassName(prefix + "total-fear")) {
el.innerText = total_fear;
}
} else if(pkey == "fear") {
let fear = player[pkey];
for(let effect_num in fear) {
let fprefix = prefix + "effect-" + effect_num + "-";
let effect = fear[effect_num];
for(let ekey in effect) {
let value = effect[ekey];
let eclass = ekey == "pure_fear" ? "fear" : ekey;
let eprefix = fprefix + eclass;
form.elements[eprefix].value = value;
form.elements[eprefix + "-orig"].value = value;
}
}
} else {
alert("Unknown player status key: " + pkey + "=" + player[pkey]);
return false;
}
}
}
}, "json");
}, 5000);
</script>
} else {
var matching_elements = document.getElementsByClassName("status-"
+ key);
if(matching_elements.length == 0) {
matching_elements = document.getElementsByClassName(key);
}
if(matching_elements.length == 0) {
alert("Unknown status key: " + key + "=" + newStatus[key]);
return false;
}

let value = newStatus[key];
for(let el of matching_elements) {
el.innerText = value;
}
}
}
return true;
{% endblock %}
}
setInterval(function() {
fetch(new Request("{% url 'status' access_code=access_code %}"
+ statusObj.hash + "/"))
.then(response => {
if(response.status === 304) {
// TODO Just skip the next step?
return statusObj;
} else {
return response.json();
}
})
.then(data => {
if(!handleNewStatus(statusObj, data)) {
document.getElementById("button-refresh").click();
} else {
statusObj = data;
}
});
}, 5000);
</script>
{% endif %}
{% endblock %}
{% endblock %}

+ 9
- 4
fear_tracker/views.py View File

@@ -1,4 +1,5 @@
from collections import OrderedDict
from http import HTTPStatus
from io import BytesIO
import hashlib
import json
@@ -126,7 +127,7 @@ def game_status_object(game, current_phase=None, players_with_fear=None):
players_with_fear = get_players_with_fear(game, current_phase)

players = OrderedDict()
for order, player in players.items():
for order, player in players_with_fear.items():
players[order] = {
'ready': player.ready,
'fear': player.fear,
@@ -142,7 +143,7 @@ def game_status_object(game, current_phase=None, players_with_fear=None):
'fear_this_phase': current_phase.fear_this_phase(),
'total_fear': game.get_current_total_fear(),
'players': players,
'all_ready': all(player.ready for player in players.values()),
'all_ready': all(player['ready'] for player in players.values()),
}
h = hashlib.sha256()
h.update(json.dumps(status_obj).encode('utf-8'))
@@ -289,5 +290,9 @@ def game(request, game):
@lookup_access_code
@require_safe
def status(request, game, hashcode=None):
# TODO status json
pass
status_obj = game_status_object(game)
if hashcode == status_obj['hash']:
return HttpResponse(status=HTTPStatus.NOT_MODIFIED)
else:
status_string = json.dumps(status_obj)
return HttpResponse(status_string)

Loading…
Cancel
Save