Browse Source

Information display can be updated via Javascript... but editing in multiple instances won't work right.

feature/js
Daniel Perelman 2 years ago
parent
commit
11f661fd8a
1 changed files with 83 additions and 5 deletions
  1. +83
    -5
      fear_tracker/templates/game.html

+ 83
- 5
fear_tracker/templates/game.html View File

@@ -56,9 +56,9 @@
id="player-{{ player.order }}-ready"
value="true"
{% if player.ready %} checked{% endif %}/>Done with
<span class="phase">{{ phase }} phase of turn #{{ turn }}</span>
<span class="phase"><span class="status-phase">{{ status.phase }}</span> phase of turn #<span class="status-turn">{{ status.turn }}</span></span>
</label>
<div class="player-effects">
<div class="player-effects" id="player-{{ player.order }}-effects">
{% for effect_num, effect in player.fear.items %}
<div class="effect effect-{{ effect_num }}">
Effect #{{ effect_num|add:1 }}
@@ -91,7 +91,7 @@
{% endfor %}
</div>
<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="advance" class="advance-button" value="Advance to next phase"{% if not status.all_ready %} disabled{% endif %}>
<input type="submit" name="revert" class="revert-button" value="Revert to previous phase">
</form>
{% block game_refresh %}
@@ -104,15 +104,92 @@
{% endblock %}
{% block header_script %}
{% if not results_only %}
<template id="effect-template">
<div class="effect">
Effect #<span class="effect-num">?</span>

<input type="hidden" class="fear-orig" value="0">
<select class="fear">
{% for val in range %}
<option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }} 😱</option>
{% endfor %}
</select>

<input type="hidden" class="towns-orig" value="0">
<select class="towns">
{% for val in range %}
<option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }} 🏠</option>
{% endfor %}
</select>

<input type="hidden" class="cities-orig" value="0">
<select class="cities">
{% for val in range %}
<option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }} 🏙️</option>
{% endfor %}
</select>
</div>
</template>
<script>
var statusObj = JSON.parse("{{ status_json|escapejs }}");
function ensureEffectRowExists(playerOrd, effectNum) {
if(document.querySelector(".player-" + playerOrd + " .effect-" + effectNum)) {
return;
}
if(effectNum > 0) {
ensureEffectRowExists(playerOrd, effectNum-1);
}

let effDiv = document.getElementById("player-" + playerOrd + "-effects");
let effectTemplate = document.querySelector("#effect-template");
let clone = effectTemplate.content.cloneNode(true);
clone.querySelector("div.effect").classList.add("effect-" + effectNum);
clone.querySelector(".effect-num").innerText = effectNum + 1;
let prefix = "player-" + playerOrd + "-effect-" + effectNum + "-";
["fear", "towns", "cities"].forEach(suffix => {
clone.querySelector("." + suffix).name = prefix + suffix;
clone.querySelector("." + suffix + "-orig").name = prefix + suffix + "-orig";
});
effDiv.appendChild(clone);
}
function addEmptyEffects(clearAll) {
for(let effDiv of document.getElementsByClassName("player-effects")) {
if(clearAll) {
while(effDiv.lastElementChild) {
effDiv.removeChild(effDiv.lastElementChild);
}
}

var newEffectNum = null;
if(effDiv.childElementCount == 0) {
newEffectNum = 0;
} else {
let lastEffectDiv = effDiv.children[effDiv.children.length-1];
var lastEffectNum = null;
lastEffectDiv.classList.forEach(cls => {
if(cls.startsWith("effect-")) {
lastEffectNum = parseInt(cls.substring(7));
}
});
lastEffectDiv.querySelectorAll("select").forEach(child => {
if(child.value != "0") {
newEffectNum = lastEffectNum + 1;
}
});
}
if(newEffectNum != null) {
let playerOrd = effDiv.id.split("-")[1];
ensureEffectRowExists(playerOrd, newEffectNum);
}
}
}
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;
addEmptyEffects(true);
}

let form = document.forms[0];
@@ -125,7 +202,6 @@
el.disabled = !all_ready;
}
} else if(key == "players") {
// TODO
let players = newStatus[key];
for(let ord in players) {
let prefix = "player-" + ord + "-";
@@ -146,6 +222,7 @@
} else if(pkey == "fear") {
let fear = player[pkey];
for(let effect_num in fear) {
ensureEffectRowExists(ord, effect_num);
let fprefix = prefix + "effect-" + effect_num + "-";
let effect = fear[effect_num];
for(let ekey in effect) {
@@ -162,6 +239,7 @@
}
}
}
addEmptyEffects(false);
} else {
var matching_elements = document.getElementsByClassName("status-"
+ key);


Loading…
Cancel
Save