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)

This commit is contained in:
Tissevert 2019-10-18 17:55:50 +02:00
parent 0abc020d13
commit 6dfaaee385
5 changed files with 34 additions and 4 deletions

View file

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

View file

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

View file

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

View file

@ -33,3 +33,22 @@ body > div.on {
#dialog button { #dialog button {
display: inline-block; 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;
}

View file

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