Start designing the client GUI to handle games

src/Automaton.hs

@@ -50,7 +50,7 @@ edges (Session.Answering to) message@(Message.Answer {Message.accept}) = do
             game <- Server.get gameKey <$> App.server
             current <- App.current
             forM_ [(to, session), (key, current)] $ \(k, s) ->
-              Message.sendTo [(k, s)] $ Message.NewGame $ Game.export k game
+              Message.sendTo [(k, s)] $ Message.NewGame {Message.game = Game.export k game}
             return $ Session.Playing gameKey
           else do
             Message.broadcast $ Message.update {Message.alone = [key, to]}

src/Message.hs

@@ -46,7 +46,7 @@ data T =
     Relay {from :: Player.Key, message :: FromClient}
   | Welcome {room :: Server.T, key :: Player.Key}
   | Update {alone :: [Player.Key], paired :: [Player.Key]}
-  | NewGame Game.View
+  | NewGame {game :: Game.View}
   | Pong
   | Error {error :: String}
   deriving (Generic)

www/index.html

@@ -4,11 +4,12 @@
     <title>KoiKoi</title>
     <script src="dom.js"></script>
     <script src="sort.js"></script>
-    <script src="session.js"></script>
-    <script src="login.js"></script>
-    <script src="room.js"></script>
     <script src="screen.js"></script>
     <script src="messaging.js"></script>
+    <script src="session.js"></script>
+    <script src="room.js"></script>
+    <script src="login.js"></script>
+    <script src="game.js"></script>
     <script src="main.js"></script>
     <link rel="stylesheet" href="skin.css" type="text/css"/>
   </head>
@@ -32,7 +33,9 @@
       </form>
     </div>
     <div id="game">
+      <h2>River</h2>
       <ul id="river"></ul>
+      <h2>Hand</h2>
       <ul id="hand"></ul>
     </div>
     <p id="debug"></p>

www/main.js

@@ -6,6 +6,7 @@ window.addEventListener('load', function() {
   var session = Session({messaging: messaging});
   var room = Room({dom: dom, messaging: messaging, session: session, sort: sort});
   var login = Login({dom: dom, messaging: messaging, room: room, screen: screen, session: session});
+  var game = Game({dom: dom, messaging: messaging, session: session});
 
   messaging.start();
 });

www/session.js

@@ -14,6 +14,7 @@ function Session(modules) {
 
   return {
     is: is,
+    getKey: getKey,
     loggedIn: loggedIn
   };
 
@@ -21,6 +22,10 @@ function Session(modules) {
     return key == sessionKey;
   }
 
+  function getKey() {
+    return key;
+  }
+
   function loggedIn() {
     return name != undefined;
   }