4 <meta charset="utf-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>The Game of Empires</title>
9 <link rel="stylesheet" href="/reset.css" type="text/css" />
10 <link rel="stylesheet" href="/style.css" type="text/css" />
11 <link rel="stylesheet" href="/empires/game.css" type="text/css" />
15 <script src="/empires/game.js"></script>
19 <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
24 <button onclick="post_reveal()">
27 <button onclick="post_start()">
30 <button onclick="post_reset()">
35 <div id="message-area">
38 <h1>The Game of Empires</h1>
40 <div id="loading" class="show-state-none">
42 Contacting server. Please wait...
46 <div id="pre-game" class="show-state-join">
48 <h2>Choose your character</h2>
51 This can be anyone (real or fictional), but should be
52 someone that all players of the game are familiar with.
56 Hint: Choosing an ideal character name is the key to doing
57 well in Empires. You definitely don't want a character that
58 everyone will know that only you would have chosen.
61 <!-- The return false prevents the page from being reloaded -->
62 <form id="register-form" onsubmit="register(this); return false">
63 <div class="form-field large">
64 <label for="character">Character name</label>
65 <input type="text" id="character" autocomplete="off" required>
68 <div class="form-field large">
69 <button type="submit">
77 <div class="show-state-reveal">
78 <h1>Watch and memorize each character!</h1>
80 <span id="character-reveal"></span>
83 <div class="hide-state-reveal" id="players-div">
84 <h1>Players in the game</h1>