fix team stuff

client/src/components/list.jsx

@@ -1,10 +1,12 @@
 const { connect } = require('react-redux');
 const preact = require('preact');
 
-const { NULL_UUID } = require('./../utils');
+const { stringSort, NULL_UUID, COLOURS, constructAvatar } = require('./../utils');
 const actions = require('./../actions');
 const InstanceCreateForm = require('./instance.create.form');
 
+const idSort = stringSort('id');
+
 const addState = connect(
     function receiveState(state) {
         const { ws, constructs, team, instances, account } = state;
@@ -40,6 +42,7 @@ function List(args) {
     const {
         account,
         team,
+        constructs,
         sendInstanceState,
         sendInstanceJoin,
         sendInstanceList,
@@ -93,8 +96,29 @@ 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 (
+            <div
+                key={construct.id}
+                className="menu-construct" >
+                {constructAvatar(construct.name, construct.id)}
+                <h2>{construct.name}</h2>
+            </div>
+        );
+    });
+
+
     return (
-        <main className="menu">
+        <main className="menu-instances">
+            <div className="construct-list">
+                {constructPanels}
+            </div>
             {instanceList()}
         </main>
     );

client/src/components/team.jsx

@@ -3,18 +3,12 @@ const { connect } = require('react-redux');
 const range = require('lodash/range');
 
 const actions = require('./../actions');
-const { NULL_UUID } = require('./../utils');
+const { COLOURS } = require('./../utils');
 const { stringSort, constructAvatar } = require('./../utils');
 const SpawnButton = require('./spawn.button');
 
 const idSort = stringSort('id');
 
-const COLOURS = [
-    '#a52a2a',
-    '#1FF01F',
-    '#3498db',
-];
-
 const addState = connect(
     function receiveState(state) {
         const { ws, constructs, team, account } = state;
@@ -118,7 +112,7 @@ function Team(args) {
     return (
         <main className="menu-constructs">
             {header}
-            <div className="list">
+            <div className="constructs-list">
                 {constructPanels}
                 {spawnButtons}
             </div>