<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>
+ <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 class="form-field medium right">
- <label for="character">Character name</label>
- <input type="text" id="character" autocomplete="off" required>
+ <div id="message-area">
</div>
- <div class="form-field large">
- <button type="submit">
- Join game
- </button>
+ <div id="loading" class="show-state-none">
+ <h1>The Game of Empires</h1>
+
+ <p>
+ Contacting server. Please wait...
+ </p>
</div>
- </form>
- </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>
+
<div class="show-state-reveal">
+ <h1>Watch and memorize each character!</h1>
- <span id="character-reveal"></span>
- </div>
+ <span id="character-reveal"></span>
+ </div>
- <br>
+ <br>
- <div class="hide-state-reveal" id="players-div">
- <h1>Players in the game</h1>
+
<div class="hide-state-reveal" id="players-div">
+ <h1>Players in the game</h1>
- <ul id="players">
- </ul>
+ </ul>
- </div>
+ </div>
-</div>
-</body>
+ </div>
+ </body>
</html>
projects / lmno.games / commitdiff