This implements only the ability to register a player in the game.
--- /dev/null
+const API = "https://families.cworth.org/";
+
+function undisplay(element) {
+ element.style.display="none";
+}
+
+function add_message(severity, message) {
+ message = `<div class="message ${severity}" onclick="undisplay(this)">
+${message}
+<span class="hide-button" onclick="undisplay(this.parentElement)">×</span>
+</div>`;
+ message_area = document.getElementById('message-area');
+ message_area.insertAdjacentHTML('beforeend', message);
+}
+
+function register_loaded(name) {
+ add_message("success", name + " is now in the game!");
+}
+
+function register(form) {
+ var request = new XMLHttpRequest();
+ request.addEventListener("load", register_loaded(form.name.value));
+
+ request.open("POST", API + "register");
+ request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+ var data = {
+ "name": form.name.value,
+ "character": form.character.value
+ };
+ request.send(JSON.stringify(data));
+
+ form.reset();
+}
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>The Game of Empires</title>
+
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ </head>
+<body>
+
+ <script src="empires-client.js"></script>
+
+ <h1>Welcome to the game of Empires!</h1>
+
+ <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>
+
+ <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>
+
+ <form>
+ <label for="name">Your name</label>
+ <input type="text" id="name" required>
+
+ <label for="character">Character name</label>
+ <input type="text" id="character" required>
+
+ <input type="button" value="Join game" onclick="register(this.form)">
+ </form>
+
+</body>
+</html>
--- /dev/null
+/* Default message severity is "info" but can be overriden. */
+.message {
+ padding: 1em;
+ background-color: #46a7f5;
+ color: white;
+ transition: 0.3s;
+ margin-bottom: 0.5em;
+ font-weight: bold;
+}
+
+.success {
+ background-color: #6abc6d;
+}
+
+.warning {
+ background-color: #ffa92a;
+}
+
+.danger {
+ background-color: #f56257
+}
+
+.hide-button {
+ color: white;
+ font-weight: bold;
+ float: right;
+ font-size: 150%;
+ cursor: pointer;
+}
+
+.hide-button:hover {
+ color: black;
+}
projects / empires-html / commitdiff