]> git.cworth.org Git - lmno.games/blobdiff - empires/index.html
Add some autofocus attributes
[lmno.games] / empires / index.html
index 3fe90057ebfdac20a5ff2a0e2ff04083b2a38621..b873e9e27f8ed84ba2af7ad8dd5b9c6d818b4d78 100644 (file)
@@ -1,40 +1,98 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <title>The Game of Empires</title>
 
-    <link rel="stylesheet" href="style.css" type="text/css" />
+    <link rel="stylesheet" href="/reset.css" type="text/css" />
+    <link rel="stylesheet" href="/style.css" type="text/css" />
   </head>
-<body>
+  <body>
+
+    <script src="/lmno.js"></script>
+
+    <div id="page">
+
+      <h1>The Game of Empires</h1>
+
+      <p>
+        Can you remember all the characters in the game? Can you guess
+        who is who?
+      </p>
 
-  <script src="empires-client.js"></script>
+      <div id="message-area">
+      </div>
 
-  <h1>Welcome to the game of Empires!</h1>
+      <form onsubmit="lmno_new('empires'); return false;">
+        <button type="submit">
+          Host a new game
+        </button>
+      </form>
 
-  <p>
-    To join the game, type your own name below. Also, choose the name
-    of a charater 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 Einsten" or "Harry Potter").
-  </p>
+      <h2>What is Empires?</h2>
 
-  <p>
-    Note: After you have joined the game, another player can use this
-    same device to join the game as well.
-  </p>
+      <p>
+        Empires is a simple yet surprisingly entertaining party game
+        that will test your memory. Each player in the game secretly
+        chooses a "character" that they will play as. Once all players
+        have chosen their characters, each character name will be
+        revealed to all players who will have to try to memorize every
+        character. Gameplay consists of guessing the character name
+        that other plays chose. Successful guesses bring the guessed
+        player (and their entire "empire") into your own "empire". The
+        game will end with everyone in a single empire under the one
+        player whose character was never correctly guessed.
+      </p>
 
-  <div id="message-area">
-  </div>
+      <h2>What do we need to play?</h2>
 
-  <form>
-    <label for="name">Your name</label>
-    <input type="text" id="name" required>
+      <p>
+        This website will assist you in hosting a game of empires by
+        doing the following:
 
-    <label for="character">Character name</label>
-    <input type="text" id="character" required>
+        <ul>
+          <li>
+            Allowing players to secretly select a character name
+          </li>
+          <li>
+            Revealing the character names to all players
+          </li>
+          <li>
+            Keeping track of which players have still not had their
+            characters identified, (the empires remaining to be
+            captured)
+          </li>
+        </ul>
+      </p>
 
-    <input type="button" value="Join game" onclick="register(this.form)">
-  </form>
+      <p>
+        Meanwhile, you are responsible for providing the following:
 
-</body>
+        <ul>
+          <li>
+            An internet-capable device for each player. This is only
+            needed to select a character at the beginning of the game
+            so multiple people in the same room can pass a device around
+            for this part.
+          </li>
+          <li>
+            At least one view of the game that every player can
+            see. This can be on individual devices, or by the game
+            host sharing their screen in some fashion, (such as
+            through a video call).
+          </li>
+          <li>
+            Some means for all players to communicate. This could be a
+            video call or some chat room or something else. Of course,
+            it's also possible to play with people in the same room
+            together. If you have the luxury to do that, it's also
+            convenient to have captured players move to sit with their
+            new empires to make it clear which empires remain.
+          </li>
+        </ul>
+      </p>
+    </div>
+  </body>
 </html>