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