From: xangelo <git@xangelo.ca>
Date: Thu, 2 Jun 2022 17:51:37 +0000 (-0400)
Subject: add auto-fading error notifications to the UI
X-Git-Url: https://git.xangelo.ca/?a=commitdiff_plain;h=bea35849286a56e373657ac893bb203ce6d51e23;p=browser-rts.git

add auto-fading error notifications to the UI

Any thrown errors get reported back to the UI and can be hoisted to the
notifications section. The `autofade` class can be applied to allow the
message to disappear on its own.
---

diff --git a/public/scifi.css b/public/scifi.css
index d2cf688..450fddf 100644
--- a/public/scifi.css
+++ b/public/scifi.css
@@ -144,6 +144,24 @@ footer {
     padding-top: 1rem;
     margin-top: 2rem;
 }
+.autofade {
+  opacity: 1;
+  animation-name: autofade;
+  animation-duration: 5000ms;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1
+}
+@keyframes autofade {
+  0% {
+    opacity: 1;
+  }
+  99% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 
 #nav, #nav ul {
     padding: 0;
@@ -374,6 +392,11 @@ form > div {
   max-width: 150px;
 }
 
+#notifications {
+  min-height: 42px;
+  margin-bottom: 5px;
+}
+
 #stats {
   margin-top: 1rem;
 }
diff --git a/src/lib/server.ts b/src/lib/server.ts
index e279812..6615487 100644
--- a/src/lib/server.ts
+++ b/src/lib/server.ts
@@ -6,6 +6,7 @@ import bodyParser from 'body-parser';
 import { ExpressAdapter } from '@bull-board/express';
 import http from 'http';
 import { Server } from 'socket.io';
+import {HttpError} from '../errors';
 
 type AuthInfo = {
 	authInfo: { 
@@ -83,9 +84,8 @@ export class HttpServer {
 			}
 			catch(e) {
 				console.log(e);
-				//res.statusCode = (e as HttpError).statusCode || 500;
 				res.send(`
-				<div class="alert danger">${e.message}</div>
+				<div class="alert danger autofade">${e.message}</div>
 				`);
 			}
 			finally {