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:
parent
0abc020d13
commit
6dfaaee385
5 changed files with 34 additions and 4 deletions
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue