From eca2d3b07461385192c12c68b83e658ce366d09f Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Sat, 16 May 2020 18:14:59 -0700 Subject: [PATCH] Add simple JavaScript processing of game ID form submission All we are currently doing so far is getting the 404 return status and properly plumbing that through to a message area. --- index.html | 7 ++++++- lmno.js | 32 ++++++++++++++++++++++++++++++++ style.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 lmno.js diff --git a/index.html b/index.html index 0546dd7..c67d535 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,14 @@ + +
-
+
+
+ +
diff --git a/lmno.js b/lmno.js new file mode 100644 index 0000000..f1f9cd7 --- /dev/null +++ b/lmno.js @@ -0,0 +1,32 @@ +function undisplay(element) { + element.style.display="none"; +} + +function add_message(severity, message) { + message = `
+× +${message} +
`; + const message_area = document.getElementById('message-area'); + message_area.insertAdjacentHTML('beforeend', message); +} + +function join_loadend(request, game_id) { + if (request.status === 404) { + add_message("danger", game_id + " is not a valid game ID. Try again."); + return; + } +} + +function lmno_join(form) { + const game_id = form.id.value; + + var request = new XMLHttpRequest(); + request.addEventListener("loadend", () => join_loadend(request, game_id)); + + request.open("GET", "/" + game_id); + request.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); + request.send(); + + form.reset(); +} diff --git a/style.css b/style.css index 237c004..fdc99c9 100644 --- a/style.css +++ b/style.css @@ -211,3 +211,47 @@ button:hover { ::-moz-focus-inner { border: 0; } + +/*\ +|*| +|*| Styling for a message area +|*| +\*/ + +/* Default message severity is "info" but can be overriden. */ +.message { + padding: 1em; + background-color: #44c7ef; + color: white; + transition: 0.3s; + margin-bottom: 0.5em; + font-weight: bold; + border-radius: 4px; + position: relative; +} + +.success { + background-color: #44c7ef; +} + +.warning { + background-color: #ffa92a; +} + +.danger { + background-color: #f56257 +} + +.hide-button { + color: white; + font-size: 125%; + font-weight: bold; + cursor: pointer; + position: absolute; + right: 0.5em; + top: 0; +} + +.hide-button:hover { + color: #bc2822; +} -- 2.43.0