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?a=commitdiff_plain;h=f3188cb0892ed398112b3d14f444e01b79de6f12;p=lmno.games
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)">×</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)">×</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;
-}