]> git.cworth.org Git - lmno.games/commitdiff
projects / lmno.games / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 292a396)
Add simple JavaScript processing of game ID form submission
authorCarl Worth <cworth@cworth.org>
Sun, 17 May 2020 01:14:59 +0000 (18:14 -0700)
committerCarl Worth <cworth@cworth.org>
Sun, 17 May 2020 13:11:13 +0000 (06:11 -0700)
All we are currently doing so far is getting the 404 return status and
properly plumbing that through to a message area.

index.html patch | blob | history
lmno.js [new file with mode: 0644] patch | blob
style.css patch | blob | history

diff --git a/index.html b/index.html
index 0546dd703bd9636568176118c84d330bac2fed6b..c67d535506cd80d08bf34bfe34d09d4548f14eb9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,9 +10,14 @@
   </head>
   <body>
 
   </head>
   <body>
 
+    <script src="/lmno.js"></script>
+
     <div id="page">
 
     <div id="page">
 
-      <form onsubmit="join_game(this)">
+      <div id="message-area">
+      </div>
+
+      <form onsubmit="lmno_join(this); return false">
 
         <div class="form-field large">
           <label for="id">Game ID</label>
 
         <div class="form-field large">
           <label for="id">Game ID</label>
diff --git a/lmno.js b/lmno.js
new file mode 100644 (file)
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 = `<div class="message ${severity}" onclick="undisplay(this)">
+<span class="hide-button" onclick="undisplay(this.parentElement)">&times;</span>
+${message}
+</div>`;
+  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 237c0045e9cfc60367c4143bb256b3a1e62a6b18..fdc99c9dd94bee1f1bd10dfdb84f90fe5b9012da 100644 (file)
--- a/style.css
+++ b/style.css
@@ -211,3 +211,47 @@ button:hover {
 ::-moz-focus-inner {
     border: 0;
 }
 ::-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;
+}
Static HTML content for the https://lmno.games/ website.