Keep separating hall and login, simplifying both, generalize listSelector and add one for games

www/index.html

@@ -32,10 +32,11 @@
           <label for="you"></label><input type="text" name="you"/>
           <input type="submit" name="join" disabled/>
         </p>
-			</form>
+      </form>
-		</div>
+    </div>
-		<div id="hall">
+    <div id="hall">
-			<form id="room">
+      <form id="room">
+        <input type="submit" name="submitButton" hidden disabled/>
         <p id="invite">
           <label for="them"></label><input type="text" name="them"/>
           <input type="submit" name="invite" disabled/>
@@ -44,9 +45,10 @@
           <span class="message"></span>
           <ul class="list"></ul>
         </div>
-        <!--p id="leave">
+        <div id="games">
-          <input type="button" name="leave"/>
+          <span class="message"></span>
-        </p-->
+          <ul class="list"></ul>
+        </div>
       </form>
     </div>
     <div id="game">

www/screen/hall.js

@@ -1,8 +1,7 @@
 Screen.Hall = function(modules) {
-  var root = document.getElementById('login');
+  var root = document.getElementById('room');
-  var playersMessage = root.getElementsByClassName('message')[0];
+  var players = listSelector('players');
-  var players = document.getElementById('players').getElementsByClassName('list')[0];
+  var games = listSelector('games');
-  var join = document.getElementById("join");
   var invite = document.getElementById("invite");
   var submit = root.submitButton;
   var them = null;
@@ -23,61 +22,49 @@ Screen.Hall = function(modules) {
 
   return {};
 
+  function listSelector(id) {
+    var root = document.getElementById(id);
+    return {
+      root: root,
+      message: root.getElementsByClassName('message')[0],
+      list: root.getElementsByClassName('list')[0]
+    }
+  }
+
   function init() {
     initDOMEvents();
     initMessageHandlers();
-    var name = modules.save.get('player.name');
-    if(name != undefined && name.length > 0) {
-      root.you.value = name;
-      formDisable('join', false);
-    }
   }
 
   function initDOMEvents() {
     root.addEventListener('submit', function(e) {
       e.preventDefault();
-      if(modules.session.isLoggedIn()) {
+      modules.messaging.send({tag: "Invitation", to: them});
-        modules.messaging.send({tag: "Invitation", to: them});
-      } else {
-        modules.session.start(root.you.value);
-      }
     });
 
-		/*
+    root.them.addEventListener("input", function() {refreshPlayers();});
-    root.leave.addEventListener('click', function(e) {
-      e.preventDefault();
-      lib.send({tag: "LogOut"})
-    });
-		*/
-
-    root.you.addEventListener("input", function() {refreshPlayers();});
-    //root.them.addEventListener("input", function() {refreshPlayers();});
   }
 
   function initMessageHandlers() {
     modules.messaging.addEventListener(["Okaeri"], function() {
       refreshPlayers();
+      refreshGames();
     });
 
     modules.messaging.addEventListener(["Welcome"], function() {
       refreshPlayers();
-    });
+      refreshGames();
-
-    modules.messaging.addEventListener(["Update"], function(o) {
-      refreshPlayers();
     });
 
     modules.messaging.addEventListener(["LogIn"], function(o) {
-			if(modules.session.is(o.from)) {
+      console.log("Someone joined in, they should be added to the lists");
-				modules.screen.select('hall');
+      console.log(o);
-			}
-    });
-
-    modules.messaging.addEventListener(["Relay", "LogOut"], function() {
-      playersChanged();
     });
 
     modules.messaging.addEventListener(["Relay", "Invitation"], function(o) {
+      console.log("Received an invitation, should be added to games list");
+      console.log(o);
+      /*
       var name = modules.room.name(o.from);
       // invitations should come only from known players, in doubt say «no»
       if(name) {
@@ -89,6 +76,7 @@ Screen.Hall = function(modules) {
       } else {
         modules.messaging.send({tag: "Answer", accept: false});
       }
+      */
     });
 
     modules.messaging.addEventListener(["Relay", "Answer"], function(o) {
@@ -101,28 +89,13 @@ Screen.Hall = function(modules) {
     modules.messaging.addEventListener('close', refreshPlayers);
   }
 
-  function playersChanged() {
-    setMode();
-    refreshPlayers();
-  }
-
   function refreshPlayers() {
-    modules.dom.clear(players);
+    modules.dom.clear(players.list);
-    if(modules.session.isLoggedIn()) {
+    refreshThem();
-      refreshThem();
-    } else {
-      refreshYou();
-    }
   }
 
-  function refreshYou() {
+  function refreshGames() {
-    var nameTaken = false;
+    modules.dom.clear(games.list);
-    var name = root.you.value;
-    modules.room.filter(name).forEach(function(player) {
-      players.appendChild(player.dom);
-      nameTaken = nameTaken || name == player.name;
-    });
-    formDisable("join", name.length < 1 || nameTaken);
   }
 
   function refreshThem() {
@@ -133,21 +106,21 @@ Screen.Hall = function(modules) {
       players.appendChild(player.dom);
     });
     var exact = filtered.find(exactMatch(name));
-    playersMessage.textContent = '';
+    players.message.textContent = '';
     if(exact != undefined) {
       them = exact.key;
     } else if(filtered.length == 1) {
       them = filtered[0].key;
     } else if(filtered.length == 0) {
-      playersMessage.textContent = modules.i18n.get(
+      players.message.textContent = modules.i18n.get(
         name.length > 0 ? "notFound" : "alone"
       );
     }
-    formDisable("invite", them == undefined);
+    formDisable(them == undefined);
   }
 
-  function formDisable(name, disabled) {
+  function formDisable(disabled) {
-    [submit, root[name]].forEach(function(button) {
+    [submit, root.invite].forEach(function(button) {
       button.disabled = disabled || !modules.messaging.isOn();
     });
   }
@@ -158,18 +131,4 @@ Screen.Hall = function(modules) {
     };
   }
 
-  function setMode() {
-    var loggedIn = modules.session.isLoggedIn()
-    root.join.disabled = loggedIn;
-    root.invite.disabled = !loggedIn;
-    if(loggedIn) {
-      join.className = "";
-      invite.className = "on";
-      root.them.focus();
-    } else {
-      join.className = "on";
-      invite.className = "";
-      root.you.focus();
-    }
-  }
 }

www/screen/login.js

@@ -35,7 +35,7 @@ Screen.Login = function(modules) {
   }
 
   function formDisable(disabled) {
-    [submit, root.name].forEach(function(button) {
+    [submit, root.join].forEach(function(button) {
       button.disabled = disabled || !modules.messaging.isOn();
     });
   }