Implement custom asynchronous dialogs
This commit is contained in:
parent
b61dd53f91
commit
05484db40f
7 changed files with 84 additions and 13 deletions
|
@ -27,4 +27,5 @@ function Dom() {
|
|||
}
|
||||
return e;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
21
www/game.js
21
www/game.js
|
@ -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() {}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -61,6 +61,8 @@
|
|||
<span class="score"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialog">
|
||||
</div>
|
||||
<p id="debug"></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
15
www/login.js
15
www/login.js
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue