git.cworth.org Git - lmno.games/blob - empires/game.js

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