Handle errors in a mor aesthetical way and allow to hide them (+fixes a bug caused by an implicit access to a DOM element by its id)

www/index.html

@@ -70,6 +70,6 @@
     </div>
     <div id="dialog">
     </div>
-    <p id="debug"></p>
+    <p id="error"></p>
   </body>
 </html>

www/main.js

@@ -5,7 +5,7 @@ window.addEventListener('load', function() {
   var i18n = I18n({translations: translations});
   var fun = Fun();
   var screen = Screen({dom: dom, i18n: i18n});
-  var messaging = Messaging();
+  var messaging = Messaging({screen: screen});
   var session = Session({messaging: messaging});
   var room = Room({dom: dom, messaging: messaging, session: session, fun: fun});
   var statusHandler = StatusHandler();

www/messaging.js

@@ -1,4 +1,4 @@
-function Messaging(screen) {
+function Messaging(modules) {
   var ws = new WebSocket(window.location.origin.replace(/^http/, 'ws') + '/play/');
   var debug = getParameters().debug;
   var doLog = debug != undefined && debug.match(/^(?:1|t(?:rue)?|v(?:rai)?)$/i);
@@ -53,7 +53,7 @@ function Messaging(screen) {
     if(route != undefined && route.callbacks != undefined) {
       route.callbacks.forEach(function(f) {f(o);});
     } else {
-      debug.textContent = event.data;
+      console.log("No route found for " + event.data);
     }
     o.direction = 'client < server';
     log(o);
@@ -69,6 +69,7 @@ function Messaging(screen) {
     ws.addEventListener('message', messageListener);
     ws.addEventListener('open', ping);
     addEventListener(["Pong"], ping);
+    addEventListener(["Error"], function(o) {modules.screen.error(o.error);});
   }
 
   function send(o) {

www/screen.css

@@ -33,3 +33,22 @@ body > div.on {
 #dialog button {
   display: inline-block;
 }
+
+#error {
+  position: absolute;
+  z-index: 1;
+  top: 1em;
+  right: 1em;
+  max-width: 20em;
+  border: 1px solid #e0afac;
+  padding: 1em;
+  border-radius: 0.5em;
+  background: bisque;
+  cursor: pointer;
+  margin: 0;
+  display: none;
+}
+
+#error.on {
+  display: block;
+}

www/screen.js

@@ -1,7 +1,12 @@
 function Screen(modules) {
   var current = document.querySelector("body > div.on");
+  var errorBox = document.getElementById('error');
+  errorBox.addEventListener('click', function() {
+    errorBox.className = "";
+  });
 
   return {
+    error: error,
     dialog: dialog,
     select: select
   };
@@ -35,4 +40,9 @@ function Screen(modules) {
     layer.appendChild(dialog);
     layer.className = "on";
   }
+
+  function error(message) {
+    errorBox.textContent = message;
+    errorBox.className = "on";
+  }
 }