Use the new Ui module in hall and login

www/main.js

@@ -11,8 +11,8 @@ window.addEventListener('load', function() {
   var session = Session({messaging: messaging, save: save});
   var room = Room({dom: dom, messaging: messaging, session: session, fun: fun});
   var statusHandler = StatusHandler();
-  var login = Screen.Login({dom: dom, i18n: i18n, messaging: messaging, room: room, save: save, screen: screen, session: session, statusHandler: statusHandler});
+  var login = Screen.Login({dom: dom, i18n: i18n, messaging: messaging, room: room, save: save, screen: screen, session: session, statusHandler: statusHandler, ui: ui});
-  var hall = Screen.Hall({dom: dom, i18n: i18n, messaging: messaging, room: room, save: save, screen: screen, session: session, statusHandler: statusHandler});
+  var hall = Screen.Hall({dom: dom, i18n: i18n, messaging: messaging, room: room, save: save, screen: screen, session: session, statusHandler: statusHandler, ui: ui});
   var hanafuda = Hanafuda({fun: fun});
   var game = Screen.Game({async: async, dom: dom, i18n: i18n, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, screen: screen, session: session, statusHandler: statusHandler});
 

www/screen/hall.js

@@ -1,9 +1,7 @@
 Screen.Hall = function(modules) {
-  var root = document.getElementById('room');
+  var form = modules.ui.connectedForm('room');
   var players = listSelector('players');
   var games = listSelector('games');
-  var invite = document.getElementById("invite");
-  var submit = root.submitButton;
   var them = null;
   var invitationAnswers = [{
     label: 'accept',
@@ -37,12 +35,12 @@ Screen.Hall = function(modules) {
   }
 
   function initDOMEvents() {
-    root.addEventListener('submit', function(e) {
+    form.addEventListener('submit', function(e) {
       e.preventDefault();
       modules.messaging.send({tag: "Invitation", to: them});
     });
 
-    root.them.addEventListener("input", function() {refreshPlayers();});
+    form.them.addEventListener("input", function() {refreshPlayers();});
   }
 
   function initMessageHandlers() {
@@ -84,29 +82,17 @@ Screen.Hall = function(modules) {
         modules.screen.select("game");
       }
     });
-
-    modules.messaging.addEventListener('open', refreshPlayers);
-    modules.messaging.addEventListener('close', refreshPlayers);
   }
 
   function refreshPlayers() {
     modules.dom.clear(players.list);
-    refreshThem();
+    var name = form.them.value;
-  }
-
-  function refreshGames() {
-    modules.dom.clear(games.list);
-  }
-
-  function refreshThem() {
     them = null;
-    var name = root.them.value;
     var filtered = modules.room.filter(name);
     filtered.forEach(function(player) {
-      players.appendChild(player.dom);
+      players.list.appendChild(player.dom);
     });
     var exact = filtered.find(exactMatch(name));
-    players.message.textContent = '';
     if(exact != undefined) {
       them = exact.key;
     } else if(filtered.length == 1) {
@@ -116,13 +102,15 @@ Screen.Hall = function(modules) {
         name.length > 0 ? "notFound" : "alone"
       );
     }
-    formDisable(them == undefined);
   }
 
-  function formDisable(disabled) {
+  function refreshGames() {
-    [submit, root.invite].forEach(function(button) {
+    modules.dom.clear(games.list);
-      button.disabled = disabled || !modules.messaging.isOn();
+  }
-    });
+
+  function refreshThem() {
+    players.message.textContent = '';
+    formDisable(them == undefined);
   }
 
   function exactMatch(name) {

www/screen/login.js

@@ -1,7 +1,5 @@
 Screen.Login = function(modules) {
-  var root = document.getElementById('login');
+  var form = modules.ui.connectedForm('login');
-  var submit = root.submitButton;
-
   init();
 
   return {};
@@ -11,32 +9,29 @@ Screen.Login = function(modules) {
     initMessageHandlers();
     var name = modules.save.get('player.name');
     if(name != undefined && name.length > 0) {
-      root.you.value = name;
+      form.you.value = name;
-      formDisable(false);
+      modules.ui.enableForm('login', true);
     }
   }
 
   function initDOMEvents() {
-    root.addEventListener('submit', function(e) {
+    form.addEventListener('submit', function(e) {
       e.preventDefault();
-			modules.session.start(root.you.value);
+      modules.session.start(form.you.value);
     });
+
+    form.you.addEventListener("input", validate);
   }
 
   function initMessageHandlers() {
     modules.messaging.addEventListener(["LogIn"], function(o) {
-			if(modules.session.is(o.from)) {
+      if(modules.session.is(o.from)) {
-				modules.screen.select('hall');
+        modules.screen.select('hall');
-			}
+      }
     });
-
-    modules.messaging.addEventListener('open', function() {formDisable(false);});
-    modules.messaging.addEventListener('close', function() {formDisable(true);});
   }
 
-  function formDisable(disabled) {
+  function validate(e) {
-    [submit, root.join].forEach(function(button) {
+    modules.ui.enableForm('login', e.target.value != "")
-      button.disabled = disabled || !modules.messaging.isOn();
-    });
   }
 }