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     "name": form.name.value,
  21     "character": form.character.value
  22   };
  23   request.send(JSON.stringify(data));
  24
  25   form.reset();
  26 }
  27
  28 function toggle_host_tools() {
  29   const host_tools = document.getElementById("host-tools");
  30
  31   console.log("Toggling, host_tools.style.display is '" + host_tools.style.display + "'");
  32
  33   if (host_tools.style.display === "block")
  34     host_tools.style.display = "none";
  35   else
  36     host_tools.style.display = "block";
  37 }
  38
  39 function post_reveal() {
  40   const request = new XMLHttpRequest();
  41
  42   request.open("POST", "reveal");
  43   request.send();
  44 }
  45
  46 function post_start() {
  47   const request = new XMLHttpRequest();
  48
  49   request.open("POST", "start");
  50   request.send();
  51 }
  52
  53 function post_reset() {
  54   const request = new XMLHttpRequest();
  55
  56   request.open("POST", "reset");
  57   request.send();
  58 }
  59
  60 const events = new EventSource(window.location + "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 });