Implement custom asynchronous dialogs

This commit is contained in:
Sasha 2018-08-02 00:00:13 +02:00
parent b61dd53f91
commit 05484db40f
7 changed files with 84 additions and 13 deletions

View file

@ -27,4 +27,5 @@ function Dom() {
}
return e;
}
}

View file

@ -40,10 +40,23 @@ function Game(modules) {
deck.removeChild(deck.lastChild);
}
}
if(status.playing && status.step == "Scored") {
play({koiKoi: confirm(
"You scored ! Do you want to go on ? Press cancel to just get your points and end current month"
)});
if(status.step == "Scored") {
if(status.playing) {
modules.screen.dialog({
text: "You scored ! Do you want to get your points and end the round or KoiKoi ?",
answers: {
'End the round': function() {play({koiKoi: false})},
'KoiKoi !': function() {play({koiKoi: true});}
}
});
} else {
modules.screen.dialog({
text: modules.room.name(o.game.playing) + " scored",
answers: {
'Ok': function() {}
}
});
}
}
});

View file

@ -61,6 +61,8 @@
<span class="score"></span>
</div>
</div>
<div id="dialog">
</div>
<p id="debug"></p>
</body>
</html>

View file

@ -41,15 +41,18 @@ function Login(modules) {
modules.messaging.addEventListener(["Relay", "Invitation"], function(o) {
var name = modules.room.name(o.from);
var accept = false;
// invitations should come only from known players, in doubt say «no»
if(name) {
accept = confirm(name + " has invited you to a game");
if(accept) {
modules.screen.select("game");
}
modules.screen.dialog({
text: name + " has invited you to a game",
answers: {
Accept: function() {modules.messaging.send({tag: "Answer", accept: true}); modules.screen.select("game");},
Decline: function() {modules.messaging.send({tag: "Answer", accept: false});}
}
});
} else {
modules.messaging.send({tag: "Answer", accept: false});
}
modules.messaging.send({tag: "Answer", accept: accept});
});
modules.messaging.addEventListener(["Relay", "Answer"], function(o) {

View file

@ -1,13 +1,13 @@
window.addEventListener('load', function() {
var dom = Dom();
var fun = Fun();
var screen = Screen();
var screen = Screen({dom: dom});
var messaging = Messaging();
var session = Session({messaging: messaging});
var room = Room({dom: dom, messaging: messaging, session: session, fun: fun});
var login = Login({dom: dom, messaging: messaging, room: room, screen: screen, session: session});
var hanafuda = Hanafuda({fun: fun});
var game = Game({dom: dom, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, session: session});
var game = Game({dom: dom, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, screen: screen, session: session});
messaging.start();
});

View file

@ -5,3 +5,31 @@ body > div {
body > div.on {
display: block;
}
#dialog {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
}
#dialog > div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 0 1em;
border: 1px solid #aaa;
border-radius: 0.5em;
}
#dialog p.answers {
text-align: center;
}
#dialog button {
display: inline-block;
}

View file

@ -1,7 +1,8 @@
function Screen() {
function Screen(modules) {
var current = document.querySelector("body > div.on");
return {
dialog: dialog,
select: select
};
@ -10,4 +11,27 @@ function Screen() {
current = document.getElementById(name);
current.className = "on";
}
function closeAndRun(dialog, action) {
return function() {
dialog.className = '';
action();
};
}
function dialog(config) {
var layer = document.getElementById('dialog');
var dialog = modules.dom.make('div', {});
dialog.appendChild(modules.dom.make('p', {textContent: config.text}));
var answers = modules.dom.make('p', {class: 'answers'});
for(var key in config.answers) {
answers.appendChild(modules.dom.make('button', {
textContent: key,
onClick: closeAndRun(layer, config.answers[key])
}));
}
dialog.appendChild(answers);
layer.appendChild(dialog);
layer.className = "on";
}
}