<script src="empires-client.js"></script>
- <h1>Welcome to the game of Empires!</h1>
+ <div id="pre-game">
- <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>
+ <h1>Welcome to the game of Empires!</h1>
- <p>
- Note: After you have joined the game, another player can use this
- same device to join the game as well.
- </p>
+ <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>
+
+ <div id="message-area">
+ </div>
+
+ <!-- The return false prevents the page from being reloaded -->
+ <form onsubmit="register(this); return false">
+ <label for="name">Your name</label>
+ <input type="text" id="name" required>
+
+ <label for="character">Character name</label>
+ <input type="text" id="character" autocomplete="off" required>
+
+ <input type="submit" value="Join game">
+ </form>
- <div id="message-area">
</div>
- <form>
- <label for="name">Your name</label>
- <input type="text" id="name" required>
+ <div>
+ <h1>Players in the game</h1>
- <label for="character">Character name</label>
- <input type="text" id="character" required>
+ <ul id="players">
+ </ul>
- <input type="button" value="Join game" onclick="register(this.form)">
- </form>
+ </div>
</body>
</html>