diff --git a/www/dom.js b/www/dom.js index 0a22053..997730e 100644 --- a/www/dom.js +++ b/www/dom.js @@ -27,4 +27,5 @@ function Dom() { } return e; } + } diff --git a/www/game.js b/www/game.js index 3688ea1..18c2e75 100644 --- a/www/game.js +++ b/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() {} + } + }); + } } }); diff --git a/www/index.html b/www/index.html index 64ecb11..394454c 100644 --- a/www/index.html +++ b/www/index.html @@ -61,6 +61,8 @@ +
+

diff --git a/www/login.js b/www/login.js index db86785..8682a48 100644 --- a/www/login.js +++ b/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) { diff --git a/www/main.js b/www/main.js index 1fc0b86..a6172b9 100644 --- a/www/main.js +++ b/www/main.js @@ -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(); }); diff --git a/www/screen.css b/www/screen.css index 68535fc..51f3e70 100644 --- a/www/screen.css +++ b/www/screen.css @@ -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; +} diff --git a/www/screen.js b/www/screen.js index 7be0953..8b23bba 100644 --- a/www/screen.js +++ b/www/screen.js @@ -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"; + } }