]> git.cworth.org Git - lmno.games/blobdiff - empires/game.html
empires: Rename all files (html, js, and css) to game.*
[lmno.games] / empires / game.html
diff --git a/empires/game.html b/empires/game.html
new file mode 100644 (file)
index 0000000..d665ce7
--- /dev/null
@@ -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>