From: Carl Worth <cworth@cworth.org>
Date: Sun, 17 May 2020 16:35:43 +0000 (-0700)
Subject: empires: Rename all files (html, js, and css) to game.*
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=f3188cb0892ed398112b3d14f444e01b79de6f12

empires: Rename all files (html, js, and css) to game.*

These are all the files for manipulating a single instance of a
game. We're moving this away from index.html so that we can have a
separate page at index.html for giving game instructions and allowing
users to host a new game.

So, along with the new name of game.html, we also rename supporting
files to game.css and game.js to be consistent.
---

diff --git a/empires/empires-client.js b/empires/empires-client.js
deleted file mode 100644
index a0df913..0000000
--- a/empires/empires-client.js
+++ /dev/null
@@ -1,146 +0,0 @@
-const API = "https://families.cworth.org/api/";
-
-function undisplay(element) {
-  element.style.display="none";
-}
-
-function add_message(severity, message) {
-  message = `<div class="message ${severity}" onclick="undisplay(this)">
-${message}
-<span class="hide-button" onclick="undisplay(this.parentElement)">&times</span>
-</div>`;
-  const message_area = document.getElementById('message-area');
-  message_area.insertAdjacentHTML('beforeend', message);
-}
-
-function register(form) {
-  var request = new XMLHttpRequest();
-
-  request.open("POST", API + "register");
-  request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
-  var data = {
-    "name": form.name.value,
-    "character": form.character.value
-  };
-  request.send(JSON.stringify(data));
-
-  form.reset();
-}
-
-function toggle_host_tools() {
-  const host_tools = document.getElementById("host-tools");
-
-  console.log("Toggling, host_tools.style.display is '" + host_tools.style.display + "'");
-
-  if (host_tools.style.display === "block")
-    host_tools.style.display = "none";
-  else
-    host_tools.style.display = "block";
-}
-
-function post_reveal() {
-  const request = new XMLHttpRequest();
-
-  request.open("POST", API + "reveal");
-  request.send();
-}
-
-function post_start() {
-  const request = new XMLHttpRequest();
-
-  request.open("POST", API + "start");
-  request.send();
-}
-
-function post_reset() {
-  const request = new XMLHttpRequest();
-
-  request.open("POST", API + "reset");
-  request.send();
-}
-
-const events = new EventSource(API + "events");
-
-events.onerror = function(event) {
-  if (event.target.readyState === EventSource.CLOSED) {
-      add_message("danger", "Connection to server lost.");
-  }
-};
-
-events.addEventListener("players", function(event) {
-  const players_div = document.getElementById("players-div");
-  const players_element = document.getElementById("players");
-  const players = JSON.parse(event.data);
-
-  players_element.innerHTML = '';
-  for (const player of players) {
-    var li = document.createElement('li');
-    li.id = "player-" + player.id;
-    li.innerText = player.name;
-    players_element.appendChild(li);
-  }
-
-  /* Force players list to be visible. */
-  players_div.style.display = "block";
-});
-
-events.addEventListener("player-join", function(event) {
-  const players_div = document.getElementById("players-div");
-  const players = document.getElementById("players");
-  const player = JSON.parse(event.data);
-
-  const li = document.createElement('li');
-  li.id = "player-" + player.id;
-  li.innerText = player.name;
-  players.appendChild(li);
-
-  /* Force players list to be visible. */
-  players_div.style.display = "block";
-});
-
-events.addEventListener("player-leave", function(event) {
-  const players = document.getElementById("players");
-  const id = JSON.parse(event.data);
-  const player = document.getElementById("player-" + id.id);
-
-  add_message("info", player.innerText + " has left the game.");
-  players.removeChild(player);
-});
-
-events.addEventListener("game-state", function(event) {
-  const data = JSON.parse(event.data);
-  const old_state = data.old_state;
-  const new_state = data.new_state;
-
-  const hide_selector = ".show-state-" +old_state+ ",.hide-state-" +new_state;
-  const show_selector = ".hide-state-" +old_state+ ",.show-state-" +new_state;
-
-  /* Hide all elements based on the state transition. */
-  var elts = document.querySelectorAll(hide_selector);
-  for (const elt of elts) {
-    elt.style.display = "none";
-  }
-
-  /* And show all elements based on the same state transition. */
-  elts = document.querySelectorAll(show_selector);
-  for (const elt of elts) {
-    elt.style.display = "block";
-  }
-});
-
-events.addEventListener("character-reveal", function(event) {
-  const data = JSON.parse(event.data);
-  const character_name = data.character;
-
-  const character = document.getElementById("character-reveal");
-
-  character.innerText = character_name;
-});
-
-events.addEventListener("capture", function(event_string) {
-  const players = document.getElementById("players");
-  const event = JSON.parse(event_string.data);
-  const player = document.getElementById("player-" + event.captee);
-
-  players.removeChild(player);
-});
diff --git a/empires/game.css b/empires/game.css
new file mode 100644
index 0000000..1bb0e62
--- /dev/null
+++ b/empires/game.css
@@ -0,0 +1,45 @@
+/* By default, hide things that are not to be shown
+ * until a particular game state is reached. */
+.show-state-join {
+    display:none;
+}
+
+.show-state-reveal {
+    display:none;
+}
+
+.show-state-capture {
+    display:none;
+}
+
+/* And by default, show things that will be hidden
+ * when a particular game state is reached. */
+.hide-state-join {
+    display:block;
+}
+
+.hide-state-reveal {
+    display:block;
+}
+
+.hide-state-capture {
+    display:block;
+}
+
+/* Players list starts out hidden (until a player is added). */
+#players-div {
+    display:none;
+}
+
+/* Host tools start out hidden. */
+#host-tools {
+    display: none;
+}
+
+/* When a character name is being revealed, we want this to be huge,
+ * (like, filling the screen huge). */
+#character-reveal {
+    color: var(--text-fg-color);
+    font-size: 300%;
+    font-weight: bold;
+}
diff --git a/empires/game.html b/empires/game.html
new file mode 100644
index 0000000..d665ce7
--- /dev/null
+++ b/empires/game.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+
+    <title>The Game of Empires</title>
+
+    <link rel="stylesheet" href="/reset.css" type="text/css" />
+    <link rel="stylesheet" href="/style.css" type="text/css" />
+    <link rel="stylesheet" href="game.css" type="text/css" />
+  </head>
+<body>
+
+  <script src="game.js"></script>
+
+<div id="page">
+
+  <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
+    ⚙
+  </span>
+
+  <div id="host-tools">
+    <button onclick="post_reveal()">
+      Reveal Characters
+    </button>
+    <button onclick="post_start()">
+      Start Game
+    </button>
+    <button onclick="post_reset()">
+      Reset Game
+    </button>
+  </div>
+
+  <div id="message-area">
+  </div>
+
+  <div id="loading" class="show-state-none">
+    <h1>The Game of Empires</h1>
+
+    <p>
+      Contacting server. Please wait...
+    </p>
+  </div>
+
+  <div id="pre-game" class="show-state-join">
+
+    <h1>The Game of Empires</h1>
+
+    <p>
+      To join the game, type your own name below. Also, choose the name
+      of a character that you want to play as. This can be anyone (real
+      or fictional) that everyone playing the game would be likely to
+      know, (for example "Albert Einstein" or "Harry Potter").
+    </p>
+
+    <p>
+      Note: After you have joined the game, another player can use this
+      same device to join the game as well.
+    </p>
+
+    <!-- The return false prevents the page from being reloaded -->
+    <form id="register-form" onsubmit="register(this); return false">
+      <div class="form-field medium left">
+        <label for="name">Your name</label>
+        <input type="text" id="name" required>
+      </div>
+
+      <div class="form-field medium right">
+        <label for="character">Character name</label>
+        <input type="text" id="character" autocomplete="off" required>
+      </div>
+
+      <div class="form-field large">
+        <button type="submit">
+          Join game
+        </button>
+      </div>
+    </form>
+
+  </div>
+
+  <div class="show-state-reveal">
+    <h1>Watch and memorize each character!</h1>
+
+    <span id="character-reveal"></span>
+  </div>
+
+  <br>
+
+  <div class="hide-state-reveal" id="players-div">
+    <h1>Players in the game</h1>
+
+    <ul id="players">
+    </ul>
+
+  </div>
+
+</div>
+</body>
+</html>
diff --git a/empires/game.js b/empires/game.js
new file mode 100644
index 0000000..a0df913
--- /dev/null
+++ b/empires/game.js
@@ -0,0 +1,146 @@
+const API = "https://families.cworth.org/api/";
+
+function undisplay(element) {
+  element.style.display="none";
+}
+
+function add_message(severity, message) {
+  message = `<div class="message ${severity}" onclick="undisplay(this)">
+${message}
+<span class="hide-button" onclick="undisplay(this.parentElement)">&times</span>
+</div>`;
+  const message_area = document.getElementById('message-area');
+  message_area.insertAdjacentHTML('beforeend', message);
+}
+
+function register(form) {
+  var request = new XMLHttpRequest();
+
+  request.open("POST", API + "register");
+  request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+  var data = {
+    "name": form.name.value,
+    "character": form.character.value
+  };
+  request.send(JSON.stringify(data));
+
+  form.reset();
+}
+
+function toggle_host_tools() {
+  const host_tools = document.getElementById("host-tools");
+
+  console.log("Toggling, host_tools.style.display is '" + host_tools.style.display + "'");
+
+  if (host_tools.style.display === "block")
+    host_tools.style.display = "none";
+  else
+    host_tools.style.display = "block";
+}
+
+function post_reveal() {
+  const request = new XMLHttpRequest();
+
+  request.open("POST", API + "reveal");
+  request.send();
+}
+
+function post_start() {
+  const request = new XMLHttpRequest();
+
+  request.open("POST", API + "start");
+  request.send();
+}
+
+function post_reset() {
+  const request = new XMLHttpRequest();
+
+  request.open("POST", API + "reset");
+  request.send();
+}
+
+const events = new EventSource(API + "events");
+
+events.onerror = function(event) {
+  if (event.target.readyState === EventSource.CLOSED) {
+      add_message("danger", "Connection to server lost.");
+  }
+};
+
+events.addEventListener("players", function(event) {
+  const players_div = document.getElementById("players-div");
+  const players_element = document.getElementById("players");
+  const players = JSON.parse(event.data);
+
+  players_element.innerHTML = '';
+  for (const player of players) {
+    var li = document.createElement('li');
+    li.id = "player-" + player.id;
+    li.innerText = player.name;
+    players_element.appendChild(li);
+  }
+
+  /* Force players list to be visible. */
+  players_div.style.display = "block";
+});
+
+events.addEventListener("player-join", function(event) {
+  const players_div = document.getElementById("players-div");
+  const players = document.getElementById("players");
+  const player = JSON.parse(event.data);
+
+  const li = document.createElement('li');
+  li.id = "player-" + player.id;
+  li.innerText = player.name;
+  players.appendChild(li);
+
+  /* Force players list to be visible. */
+  players_div.style.display = "block";
+});
+
+events.addEventListener("player-leave", function(event) {
+  const players = document.getElementById("players");
+  const id = JSON.parse(event.data);
+  const player = document.getElementById("player-" + id.id);
+
+  add_message("info", player.innerText + " has left the game.");
+  players.removeChild(player);
+});
+
+events.addEventListener("game-state", function(event) {
+  const data = JSON.parse(event.data);
+  const old_state = data.old_state;
+  const new_state = data.new_state;
+
+  const hide_selector = ".show-state-" +old_state+ ",.hide-state-" +new_state;
+  const show_selector = ".hide-state-" +old_state+ ",.show-state-" +new_state;
+
+  /* Hide all elements based on the state transition. */
+  var elts = document.querySelectorAll(hide_selector);
+  for (const elt of elts) {
+    elt.style.display = "none";
+  }
+
+  /* And show all elements based on the same state transition. */
+  elts = document.querySelectorAll(show_selector);
+  for (const elt of elts) {
+    elt.style.display = "block";
+  }
+});
+
+events.addEventListener("character-reveal", function(event) {
+  const data = JSON.parse(event.data);
+  const character_name = data.character;
+
+  const character = document.getElementById("character-reveal");
+
+  character.innerText = character_name;
+});
+
+events.addEventListener("capture", function(event_string) {
+  const players = document.getElementById("players");
+  const event = JSON.parse(event_string.data);
+  const player = document.getElementById("player-" + event.captee);
+
+  players.removeChild(player);
+});
diff --git a/empires/index.html b/empires/index.html
deleted file mode 100644
index 4f29c65..0000000
--- a/empires/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
-
-    <title>The Game of Empires</title>
-
-    <link rel="stylesheet" href="/reset.css" type="text/css" />
-    <link rel="stylesheet" href="/style.css" type="text/css" />
-    <link rel="stylesheet" href="style.css" type="text/css" />
-  </head>
-<body>
-
-  <script src="empires-client.js"></script>
-
-<div id="page">
-
-  <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
-    ⚙
-  </span>
-
-  <div id="host-tools">
-    <button onclick="post_reveal()">
-      Reveal Characters
-    </button>
-    <button onclick="post_start()">
-      Start Game
-    </button>
-    <button onclick="post_reset()">
-      Reset Game
-    </button>
-  </div>
-
-  <div id="message-area">
-  </div>
-
-  <div id="loading" class="show-state-none">
-    <h1>The Game of Empires</h1>
-
-    <p>
-      Contacting server. Please wait...
-    </p>
-  </div>
-
-  <div id="pre-game" class="show-state-join">
-
-    <h1>The Game of Empires</h1>
-
-    <p>
-      To join the game, type your own name below. Also, choose the name
-      of a character that you want to play as. This can be anyone (real
-      or fictional) that everyone playing the game would be likely to
-      know, (for example "Albert Einstein" or "Harry Potter").
-    </p>
-
-    <p>
-      Note: After you have joined the game, another player can use this
-      same device to join the game as well.
-    </p>
-
-    <!-- The return false prevents the page from being reloaded -->
-    <form id="register-form" onsubmit="register(this); return false">
-      <div class="form-field medium left">
-        <label for="name">Your name</label>
-        <input type="text" id="name" required>
-      </div>
-
-      <div class="form-field medium right">
-        <label for="character">Character name</label>
-        <input type="text" id="character" autocomplete="off" required>
-      </div>
-
-      <div class="form-field large">
-        <button type="submit">
-          Join game
-        </button>
-      </div>
-    </form>
-
-  </div>
-
-  <div class="show-state-reveal">
-    <h1>Watch and memorize each character!</h1>
-
-    <span id="character-reveal"></span>
-  </div>
-
-  <br>
-
-  <div class="hide-state-reveal" id="players-div">
-    <h1>Players in the game</h1>
-
-    <ul id="players">
-    </ul>
-
-  </div>
-
-</div>
-</body>
-</html>
diff --git a/empires/style.css b/empires/style.css
deleted file mode 100644
index 1bb0e62..0000000
--- a/empires/style.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/* By default, hide things that are not to be shown
- * until a particular game state is reached. */
-.show-state-join {
-    display:none;
-}
-
-.show-state-reveal {
-    display:none;
-}
-
-.show-state-capture {
-    display:none;
-}
-
-/* And by default, show things that will be hidden
- * when a particular game state is reached. */
-.hide-state-join {
-    display:block;
-}
-
-.hide-state-reveal {
-    display:block;
-}
-
-.hide-state-capture {
-    display:block;
-}
-
-/* Players list starts out hidden (until a player is added). */
-#players-div {
-    display:none;
-}
-
-/* Host tools start out hidden. */
-#host-tools {
-    display: none;
-}
-
-/* When a character name is being revealed, we want this to be huge,
- * (like, filling the screen huge). */
-#character-reveal {
-    color: var(--text-fg-color);
-    font-size: 300%;
-    font-weight: bold;
-}