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   if (host_tools.style.display === "none")
  34     host_tools.style.display = "block";
  35   else
  36     host_tools.style.display = "none";
  37 }
  38
  39 function post_reveal() {
  40   const request = new XMLHttpRequest();
  41
  42   request.open("POST", API + "reveal");
  43   request.send();
  44 }
  45
  46 function post_start() {
  47   const request = new XMLHttpRequest();
  48
  49   request.open("POST", API + "start");
  50   request.send();
  51 }
  52
  53 function post_reset() {
  54   const request = new XMLHttpRequest();
  55
  56   request.open("POST", API + "reset");
  57   request.send();
  58 }
  59
  60 const events = new EventSource(API + "events");
  61
  62 events.onerror = function(event) {
  63   if (event.target.readyState === EventSource.CLOSED) {
  64       add_message("danger", "Connection to server lost.");
  65   }
  66 };
  67
  68 events.addEventListener("players", function(event) {
  69   const players_div = document.getElementById("players-div");
  70   const players_element = document.getElementById("players");
  71   const players = JSON.parse(event.data);
  72
  73   players_element.innerHTML = '';
  74   for (const player of players) {
  75     var li = document.createElement('li');
  76     li.id = "player-" + player.id;
  77     li.innerText = player.name;
  78     players_element.appendChild(li);
  79   }
  80
  81   /* Force players list to be visible. */
  82   players_div.style.display = "block";
  83 });
  84
  85 events.addEventListener("player-join", function(event) {
  86   const players_div = document.getElementById("players-div");
  87   const players = document.getElementById("players");
  88   const player = JSON.parse(event.data);
  89
  90   const li = document.createElement('li');
  91   li.id = "player-" + player.id;
  92   li.innerText = player.name;
  93   players.appendChild(li);
  94
  95   /* Force players list to be visible. */
  96   players_div.style.display = "block";
  97 });
  98
  99 events.addEventListener("player-leave", function(event) {
 100   const players = document.getElementById("players");
 101   const id = JSON.parse(event.data);
 102   const player = document.getElementById("player-" + id.id);
 103
 104   add_message("info", player.innerText + " has left the game.");
 105   players.removeChild(player);
 106 });
 107
 108 events.addEventListener("game-state", function(event) {
 109   const data = JSON.parse(event.data);
 110   const old_state = data.old_state;
 111   const new_state = data.new_state;
 112
 113   const hide_selector = ".show-state-" +old_state+ ",.hide-state-" +new_state;
 114   const show_selector = ".hide-state-" +old_state+ ",.show-state-" +new_state;
 115
 116   /* Hide all elements based on the state transition. */
 117   var elts = document.querySelectorAll(hide_selector);
 118   for (const elt of elts) {
 119     elt.style.display = "none";
 120   }
 121
 122   /* And show all elements based on the same state transition. */
 123   elts = document.querySelectorAll(show_selector);
 124   for (const elt of elts) {
 125     elt.style.display = "block";
 126   }
 127 });
 128
 129 events.addEventListener("character-reveal", function(event) {
 130   const data = JSON.parse(event.data);
 131   const character_name = data.character;
 132
 133   const character = document.getElementById("character-reveal");
 134
 135   character.innerText = character_name;
 136 });
 137
 138 events.addEventListener("capture", function(event_string) {
 139   const players = document.getElementById("players");
 140   const event = JSON.parse(event_string.data);
 141   const player = document.getElementById("player-" + event.captee);
 142
 143   players.removeChild(player);
 144 });