Split login and main screen («hall») and make all those screens «submodules» of the screen module

www/index.html

@@ -14,9 +14,10 @@
     <script src="session.js"></script>
     <script src="room.js"></script>
     <script src="statusHandler.js"></script>
-    <script src="login.js"></script>
     <script src="hanafuda.js"></script>
-    <script src="game.js"></script>
+    <script src="screen/game.js"></script>
+    <script src="screen/hall.js"></script>
+    <script src="screen/login.js"></script>
     <script src="main.js"></script>
     <link rel="stylesheet" href="screen.css" type="text/css"/>
     <link rel="stylesheet" href="login.css" type="text/css"/>
@@ -33,7 +34,7 @@
         </p>
 			</form>
 		</div>
-		<div id="main">
+		<div id="hall">
 			<form id="room">
         <p id="invite">
           <label for="them"></label><input type="text" name="them"/>

www/main.js

@@ -10,9 +10,10 @@ 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 = 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});
+  var hall = Screen.Hall({dom: dom, i18n: i18n, messaging: messaging, room: room, save: save, screen: screen, session: session, statusHandler: statusHandler});
   var hanafuda = Hanafuda({fun: fun});
-  var game = Game({async: async, dom: dom, i18n: i18n, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, screen: screen, session: session, statusHandler: statusHandler});
+  var game = Screen.Game({async: async, dom: dom, i18n: i18n, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, screen: screen, session: session, statusHandler: statusHandler});
 
   var domElems = {
     join: document.getElementById('login').join,

www/screen/game.js

@@ -1,4 +1,4 @@
-function Game(modules) {
+Screen.Game = function(modules) {
   var deck = document.getElementById("deck");
   var rest = document.getElementById("rest");
   var status = {

www/screen/hall.js

@@ -1,4 +1,4 @@
-function Login(modules) {
+Screen.Hall = function(modules) {
   var root = document.getElementById('login');
   var playersMessage = root.getElementsByClassName('message')[0];
   var players = document.getElementById('players').getElementsByClassName('list')[0];
@@ -68,9 +68,8 @@ function Login(modules) {
     });
 
     modules.messaging.addEventListener(["LogIn"], function(o) {
-      //playersChanged();
 			if(modules.session.is(o.from)) {
-				modules.screen.select('main');
+				modules.screen.select('hall');
 			}
     });
 

www/screen/login.js

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