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

fear_tracker/templates/game.html

@@ -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);