fix team stuff

client/assets/styles/styles.css

@@ -361,16 +361,16 @@ header {
 
     grid-template-areas:
         "top"
-        "list";
+        "team";
 }
 
-.menu-constructs .list {
+.constructs-list {
     margin-top: 0.5em;
-    grid-area: list;
+    grid-area: team;
 
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: 1fr;
+    /*grid-auto-rows: 1fr;*/
     grid-gap: 0.5em;
 }
 
@@ -425,7 +425,26 @@ header {
 
 /* INSTANCE LIST */
 
+.menu-instances {
+    display: grid;
+
+    grid-template-areas:
+        "team"
+        "list"
+        "create";
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+}
+
+.menu-instances .construct-list {
+    grid-area: team;
+    grid-auto-columns: 1fr;
+    grid-gap: 0.5em;
+}
+
 .menu-instance-list {
+    grid-area: list;
+
     flex: 1;
     order: 99;
     flex-flow: row wrap;
@@ -446,6 +465,7 @@ header {
 }
 
 .create-form {
+    grid-area: create;
     flex: 1;
 
     display: flex;

client/assets/styles/styles.mobile.css

@@ -28,6 +28,10 @@
         transition: all 0.5s ease-in-out;
     }
 
+    main {
+        overflow-x: hidden;
+    }
+
     #toggle-nav { display: none; }
 
     #toggle-nav-label {

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>

client/src/utils.jsx

@@ -448,6 +448,12 @@ function convertItem(v) {
     // return;
 }
 
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
 module.exports = {
     animateConstruct,
     stringSort,
@@ -464,4 +470,5 @@ module.exports = {
     resoConstructHealth,
     NULL_UUID,
     STATS,
+    COLOURS,
 };