instance list

client/src/components/list.jsx

@@ -9,7 +9,7 @@ const idSort = stringSort('id');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, constructs, team, instances, account } = state;
+        const { ws, constructs, team, instanceList, account } = state;
 
         function sendInstanceJoin(instance) {
             if (team.length) {
@@ -33,7 +33,7 @@ const addState = connect(
             sendInstanceJoin,
             sendInstanceState,
             sendInstanceList,
-            instances,
+            instanceList,
         };
     },
 
@@ -55,14 +55,14 @@ function List(args) {
         sendInstanceState,
         sendInstanceJoin,
         sendInstanceList,
-        instances,
+        instanceList,
         navToTeam,
     } = args;
 
-    function instanceList() {
-        if (!instances) return <div>...</div>;
+    function listElements() {
+        if (!instanceList) return <div>...</div>;
 
-        const instancePanels = instances.map(instance => {
+        const instancePanels = instanceList.map(instance => {
             const player = instance.players.find(p => p.id === account.id);
             const scoreText = player
                 ? `${player.score.wins} : ${player.score.losses}`
@@ -110,11 +110,7 @@ function List(args) {
     const constructPanels = constructs
         .filter(c => team.includes(c.id))
         .sort(idSort)
-        .map(construct => {
-        const colour = team.indexOf(construct.id);
-        const selected = colour > -1;
-
-        return (
+        .map(construct =>
             <div
                 key={construct.id}
                 className="menu-construct" >
@@ -122,7 +118,6 @@ function List(args) {
                 <h2>{construct.name}</h2>
             </div>
         );
-    });
 
     const header = (
         <div className="top">
@@ -141,7 +136,7 @@ function List(args) {
             <div className="construct-list">
                 {constructPanels}
             </div>
-            {instanceList()}
+            {listElements()}
         </main>
     );
 }

client/src/components/nav.jsx

@@ -13,7 +13,7 @@ const addState = connect(
             account,
             instances,
             team,
-            constructs,
+            // constructs,
             game,
         } = state;
 
@@ -25,14 +25,18 @@ const addState = connect(
             return ws.sendAccountInstances();
         }
 
+        function sendInstanceList() {
+            return ws.sendInstanceList();
+        }
+
         return {
             account,
             instances,
             team,
-            constructs,
             game,
             sendInstanceState,
             sendAccountInstances,
+            sendInstanceList,
         };
     },
     function receiveDispatch(dispatch) {
@@ -77,9 +81,9 @@ function Nav(args) {
         account,
         sendInstanceState,
         sendAccountInstances,
+        sendInstanceList,
 
         team,
-        constructs,
         instances,
         game,
 
@@ -90,7 +94,10 @@ function Nav(args) {
     } = args;
 
     function navTo(p) {
-        if (p === 'list') sendAccountInstances();
+        if (p === 'list') {
+            sendInstanceList();
+            sendAccountInstances();
+        }
         return setNav(p);
     }
 
@@ -104,14 +111,6 @@ function Nav(args) {
         <button key={i.id} onClick={() => joinInstance(i)} >{i.name}</button>
     ));
 
-    const teamElements = team.map((c, i) => {
-        if (c) {
-            const construct = constructs.find(f => f.id === c);
-            return <button key={c} onClick={() => navTo('team')}>{construct.name}</button>;
-        }
-        return <button key={i} onClick={() => navTo('team')}>+</button>;
-    });
-
     const haxSection = process.env.NODE_ENV === 'development'
         ? (
             <Fragment>
@@ -121,13 +120,12 @@ function Nav(args) {
             </Fragment>)
         : null;
 
+    const canJoin = team.some(c => !c);
+
     return (
         <nav onClick={hideNav} >
-            <h2>Team</h2>
-            {teamElements}
-            <h2>Instances</h2>
             <button onClick={() => navTo('team')}>1. Select Team</button>
-            <button onClick={() => navTo('list')}>2. Join</button>
+            <button disabled={canJoin} onClick={() => navTo('list')}>2. Join</button>
             <hr />
             {joined}
             {haxSection}