From 321709ca9f95c8a11fa01627b6b1ac0ae04d07fe Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Sun, 3 May 2020 10:07:15 -0700 Subject: [PATCH] Initial implementation of a web client for the Empires game This implements only the ability to register a player in the game. --- empires/empires-client.js | 33 ++++++++++++++++++++++++++++++++ empires/index.html | 40 +++++++++++++++++++++++++++++++++++++++ empires/style.css | 33 ++++++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 empires/empires-client.js create mode 100644 empires/index.html create mode 100644 empires/style.css diff --git a/empires/empires-client.js b/empires/empires-client.js new file mode 100644 index 0000000..c460bcd --- /dev/null +++ b/empires/empires-client.js @@ -0,0 +1,33 @@ +const API = "https://families.cworth.org/"; + +function undisplay(element) { + element.style.display="none"; +} + +function add_message(severity, message) { + message = `

+${message} +× +

`; + 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(); +} diff --git a/empires/index.html b/empires/index.html new file mode 100644 index 0000000..3fe9005 --- /dev/null +++ b/empires/index.html @@ -0,0 +1,40 @@ + + + + The Game of Empires + + + + + + + +

Welcome to the game of Empires!

+ +

+ 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"). +

+ +

+ Note: After you have joined the game, another player can use this + same device to join the game as well. +

+ +

+ + + + + diff --git a/empires/style.css b/empires/style.css new file mode 100644 index 0000000..1d853d9 --- /dev/null +++ b/empires/style.css @@ -0,0 +1,33 @@ +/* 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; +} -- 2.43.0