da7e73060340afb69b562fc004adc25cdb6d7f7e
[lmno.games] / empires / game.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <meta charset="utf-8"/>
5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
7     <title>The Game of Empires</title>
8
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" />
12   </head>
13   <body>
14
15     <script src="/empires/game.js"></script>
16
17     <div id="page">
18
19       <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
20         ⚙
21       </span>
22
23       <div id="host-tools">
24         <button onclick="post_reveal()">
25           Reveal Characters
26         </button>
27         <button onclick="post_start()">
28           Start Game
29         </button>
30         <button onclick="post_reset()">
31           Reset Game
32         </button>
33       </div>
34
35       <div id="message-area">
36       </div>
37
38       <h1>The Game of Empires</h1>
39
40       <div id="loading" class="show-state-none">
41         <p>
42           Contacting server. Please wait...
43         </p>
44       </div>
45
46       <div id="pre-game" class="show-state-join">
47
48         <h2>Choose your character</h2>
49
50         <p>
51           This can be anyone (real or fictional), but should be
52           someone that all players of the game are familiar with.
53         </p>
54
55         <p>
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.
59         </p>
60
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>
66           </div>
67
68           <div class="form-field large">
69             <button type="submit">
70               Choose character
71             </button>
72           </div>
73         </form>
74
75       </div>
76
77       <div class="show-state-reveal">
78         <h1>Watch and memorize each character!</h1>
79
80         <span id="character-reveal"></span>
81       </div>
82
83       <div class="hide-state-reveal" id="players-div">
84         <h1>Players in the game</h1>
85
86         <ul id="players">
87         </ul>
88
89       </div>
90
91     </div>
92   </body>
93 </html>