git.cworth.org Git - empires-html/blob - empires-client.js

   1 const API = "https://families.cworth.org/api/";
   2
   3 function undisplay(element) {
   4   element.style.display="none";
   5 }
   6
   7 function add_message(severity, message) {
   8   message = `<div class="message ${severity}" onclick="undisplay(this)">
   9 ${message}
  10 <span class="hide-button" onclick="undisplay(this.parentElement)">&times</span>
  11 </div>`;
  12   const message_area = document.getElementById('message-area');
  13   message_area.insertAdjacentHTML('beforeend', message);
  14 }
  15
  16 function register(form) {
  17   var request = new XMLHttpRequest();
  18
  19   request.open("POST", API + "register");
  20   request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  21   var data = {
  22     "name": form.name.value,
  23     "character": form.character.value
  24   };
  25   request.send(JSON.stringify(data));
  26
  27   form.reset();
  28 }
  29
  30 function toggle_host_tools() {
  31   const host_tools = document.getElementById("host-tools");
  32
  33   console.log("Toggling, host_tools.style.display is '" + host_tools.style.display + "'");
  34
  35   if (host_tools.style.display === "block")
  36     host_tools.style.display = "none";
  37   else
  38     host_tools.style.display = "block";
  39 }
  40
  41 function post_reveal() {
  42   const request = new XMLHttpRequest();
  43
  44   request.open("POST", API + "reveal");
  45   request.send();
  46 }
  47
  48 function post_start() {
  49   const request = new XMLHttpRequest();
  50
  51   request.open("POST", API + "start");
  52   request.send();
  53 }
  54
  55 function post_reset() {
  56   const request = new XMLHttpRequest();
  57
  58   request.open("POST", API + "reset");
  59   request.send();
  60 }
  61
  62 const events = new EventSource(API + "events");
  63
  64 events.onerror = function(event) {
  65   if (event.target.readyState === EventSource.CLOSED) {
  66       add_message("danger", "Connection to server lost.");
  67   }
  68 };
  69
  70 events.addEventListener("players", function(event) {
  71   const players_div = document.getElementById("players-div");
  72   const players_element = document.getElementById("players");
  73   const players = JSON.parse(event.data);
  74
  75   players_element.innerHTML = '';
  76   for (const player of players) {
  77     var li = document.createElement('li');
  78     li.id = "player-" + player.id;
  79     li.innerText = player.name;
  80     players_element.appendChild(li);
  81   }
  82
  83   /* Force players list to be visible. */
  84   players_div.style.display = "block";
  85 });
  86
  87 events.addEventListener("player-join", function(event) {
  88   const players_div = document.getElementById("players-div");
  89   const players = document.getElementById("players");
  90   const player = JSON.parse(event.data);
  91
  92   const li = document.createElement('li');
  93   li.id = "player-" + player.id;
  94   li.innerText = player.name;
  95   players.appendChild(li);
  96
  97   /* Force players list to be visible. */
  98   players_div.style.display = "block";
  99 });
 100
 101 events.addEventListener("player-leave", function(event) {
 102   const players = document.getElementById("players");
 103   const id = JSON.parse(event.data);
 104   const player = document.getElementById("player-" + id.id);
 105
 106   add_message("info", player.innerText + " has left the game.");
 107   players.removeChild(player);
 108 });
 109
 110 events.addEventListener("game-state", function(event) {
 111   const data = JSON.parse(event.data);
 112   const old_state = data.old_state;
 113   const new_state = data.new_state;
 114
 115   const hide_selector = ".show-state-" +old_state+ ",.hide-state-" +new_state;
 116   const show_selector = ".hide-state-" +old_state+ ",.show-state-" +new_state;
 117
 118   /* Hide all elements based on the state transition. */
 119   var elts = document.querySelectorAll(hide_selector);
 120   for (const elt of elts) {
 121     elt.style.display = "none";
 122   }
 123
 124   /* And show all elements based on the same state transition. */
 125   elts = document.querySelectorAll(show_selector);
 126   for (const elt of elts) {
 127     elt.style.display = "block";
 128   }
 129 });
 130
 131 events.addEventListener("character-reveal", function(event) {
 132   const data = JSON.parse(event.data);
 133   const character_name = data.character;
 134
 135   const character = document.getElementById("character-reveal");
 136
 137   character.innerText = character_name;
 138 });
 139
 140 events.addEventListener("capture", function(event_string) {
 141   const players = document.getElementById("players");
 142   const event = JSON.parse(event_string.data);
 143   const player = document.getElementById("player-" + event.captee);
 144
 145   players.removeChild(player);
 146 });