1 files changed, 80 insertions, 38 deletions
diff --git a/assets/index.html b/assets/index.html
index f86287e..cce9248 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -11,44 +11,6 @@
       <div id="rlist"></div>
       <span id="rspace"></span>
     </div>
-    <script>
-      let rlist = document.getElementById('rlist');
-      fetch('rlist').then(r => r.json()).then(info => {
-        let rooms = info[0];
-        let pcounts = info[1];
-        Object.keys(rooms).forEach(x => {
-          let roominfo = JSON.parse(rooms[x]);
-          let pc = Number(pcounts[x][0]);
-          let pcap = Number(pcounts[x][1]);
-          let bc = roominfo.board_conf;
-          let h1 = document.createElement('h1');
-          let full = pc == pcap;
-          let ptxt = `${pc}/${pcap} players` + ((full)? " (full)" : "");
-          h1.appendChild(document.createTextNode(`> ${roominfo.name} — ${ptxt}`));
-          let h4 = document.createElement('h4');
-          h4.appendChild(document.createTextNode(`${bc.w} by ${bc.h} with ${bc.mine_ratio[0]} in every ${bc.mine_ratio[1]} tiles mined`));
-          let entry = (full)? document.createElement('span') : document.createElement('a');
-          entry.append(h1);
-          entry.append(h4);
-          entry.href = 'room/' + x;
-          rlist.append(entry);
-          rlist.append(document.createElement('br'));
-        });
-      });
-      fetch("rspace").then(resp => resp.text()).then(roomspace => {
-          let roomspacenum = Number(roomspace);
-          let e = document.getElementById('rspace');
-          if (roomspacenum == 0) {
-            e.appendChild(document.createTextNode("all room slots filled, when a room empties it can be replaced by a new one"));
-            document.getElementById("createbtn").disabled = "disabled";
-          }
-          if (roomspacenum == 1) {
-            e.appendChild(document.createTextNode(`there is 1 available room slot`));
-          } else if (roomspacenum > 1) {
-                  e.appendChild(document.createTextNode(`there are ${roomspacenum} available room slots`));
-          }
-      })
-    </script>
     <form method="post" action="r" class="cent">
       <fieldset>
         <legend>-={ Create a new room }=-</legend>
@@ -73,6 +35,86 @@
       <a id="ident-clr" href="javascript:clear_ident();">clear identity</a>
     </div>
     <script>
+      let rlist = {
+              elem: document.getElementById('rlist'),
+              map: new Map(),
+      };
+      let rspace = {
+              elem: document.getElementById('rspace'),
+              num: NaN,
+              txt: undefined,
+      };
+
+      function fetch_info(callback) {
+        fetch('rlist').then(r => r.json()).then(info => {
+          let rooms = info[0];
+          let pcounts = info[1];
+          Object.keys(rooms).forEach(id => {
+            let room = rlist.map.get(id);
+            if (!room) { room = { init: false }; }
+            let rinfo = JSON.parse(rooms[id]);
+            room.name = rinfo.name;
+            room.pcount = Number(pcounts[id][0]);
+            room.pcapacity = Number(pcounts[id][1]);
+            room.board_conf = rinfo.board_conf;
+            rlist.map.set(id, room);
+          });
+          callback();
+        });
+        fetch("rspace").then(resp => resp.text()).then(roomspace => {
+          rspace.num = Number(roomspace);
+          callback();
+        })
+      }
+
+      function render_info() {
+        rlist.map.forEach((room, id) => {
+          let full = room.pcount == room.pcapacity;
+          if (!room.init) {
+            let entry = (full)? document.createElement('span') : document.createElement('a');
+            room.h1 = document.createElement("h1");
+            room.h1_txt = document.createTextNode("");
+            room.h1.appendChild(room.h1_txt);
+            room.h4 = document.createElement("h4");
+            room.h4.appendChild(document.createTextNode(
+                    `${room.board_conf.w} by ${room.board_conf.h} with
+                    ${room.board_conf.mine_ratio[0]} in every ${room.board_conf.mine_ratio[1]} tiles mined`
+              ));
+            entry.append(room.h1);
+            entry.append(room.h4);
+            entry.href = 'room/' + id;
+            rlist.elem.append(entry);
+            rlist.elem.append(document.createElement('br'));
+            room.init = true;
+          }
+          let ptxt = `${room.pcount}/${room.pcapacity} players` + ((full)? " (full)" : "");
+          room.h1_txt.textContent = `> ${room.name} — ${ptxt}`;
+
+        });
+        if (!rspace.txt) {
+          rspace.txt = document.createTextNode("");
+          rspace.elem.appendChild(rspace.txt);
+        }
+        if (rspace.num == 0) {
+          rspace.txt.textContent = "all room slots filled, when a room empties it can be replaced by a new one";
+          document.getElementById("createbtn").disabled = "disabled";
+        } else {
+          document.getElementById("createbtn").disabled = "";
+          if (rspace.num == 1) {
+            rspace.txt.textContent = "there is 1 available room slot";
+          } else if (rspace.num > 1) {
+            rspace.txt.textContent = `there are ${rspace.num} available room slots`;
+          }
+        }
+      }
+
+      (function refresh_info() {
+        fetch_info(render_info);
+        setTimeout(function() {
+          refresh_info();
+        }, 2000);
+      })();
+
       function clear_ident() {
         localStorage.removeItem("identity");
         document.location.reload();