From: Carl Worth Date: Sun, 3 May 2020 17:07:15 +0000 (-0700) Subject: Initial implementation of a web client for the Empires game X-Git-Url: https://git.cworth.org/git?p=empires-html;a=commitdiff_plain;h=4e97bfa79f3b332de1ead30d0eb633534f9ea91a Initial implementation of a web client for the Empires game This implements only the ability to register a player in the game. --- 4e97bfa79f3b332de1ead30d0eb633534f9ea91a diff --git a/empires-client.js b/empires-client.js new file mode 100644 index 0000000..c460bcd --- /dev/null +++ b/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/index.html b/index.html new file mode 100644 index 0000000..3fe9005 --- /dev/null +++ b/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/style.css b/style.css new file mode 100644 index 0000000..1d853d9 --- /dev/null +++ b/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; +}