Implement custom asynchronous dialogs

www/dom.js

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

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() {}
+          }
+        });
+      }
     }
   });
 

www/index.html

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

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) {

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();
 });

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;
+}

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";
+  }
 }