team setting and postgres constraint

client/assets/styles/styles.less

@@ -102,7 +102,7 @@ nav h2 {
 
 nav hr {
     margin: 1em 0;
-    border-color: whitesmoke;
+    border-color: #444;
 }
 
 nav button {
@@ -120,12 +120,12 @@ nav button.active {
 }
 
 nav button[disabled], nav button[disabled]:hover {
-    color: #333333;
+    color: #333;
     text-decoration: none;
 }
 
 nav button:hover {
-    color: #888;
+    color: whitesmoke;
     text-decoration: underline;
 }
 

client/src/actions.jsx

@@ -31,9 +31,11 @@ export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
 export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
-export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
-export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 
+export const setTeam = value => ({ type: 'SET_TEAM', value: Array.from(value) });
+export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.from(value) });
+
+export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });
 
 export const setWs = value => ({ type: 'SET_WS', value });

client/src/components/team.footer.jsx

@@ -5,26 +5,29 @@ const actions = require('./../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { team, showNav } = state;
+        const {
+            teamSelect,
+            showNav,
+            ws,
+        } = state;
+
+        function sendAccountSetTeam() {
+            return ws.sendAccountSetTeam(teamSelect);
+        }
 
         return {
-            team,
+            sendAccountSetTeam,
+            teamSelect,
             showNav,
         };
     },
     function receiveDispatch(dispatch) {
-        function navToList() {
-            dispatch(actions.setGame(null));
-            dispatch(actions.setInstance(null));
-            return dispatch(actions.setNav('list'));
-        }
 
         function setShowNav(v) {
             return dispatch(actions.setShowNav(v));
         }
 
         return {
-            navToList,
             setShowNav,
         };
     }
@@ -33,20 +36,18 @@ const addState = connect(
 function TeamFooter(args) {
     const {
         showNav,
-        team,
-        navToList,
+        teamSelect,
+        sendAccountSetTeam,
         setShowNav,
     } = args;
 
-    if (!team) return false;
-
     return (
         <footer>
             <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
             <button
-                disabled={team.some(c => !c)}
-                onClick={() => navToList()}>
-                Confirm
+                disabled={teamSelect.some(c => !c)}
+                onClick={sendAccountSetTeam}>
+                Set Team
             </button>
         </footer>
     );

client/src/components/team.jsx

@@ -8,11 +8,9 @@ const { stringSort } = require('./../utils');
 const SpawnButton = require('./spawn.button');
 const { ConstructAvatar } = require('./construct');
 
-const idSort = stringSort('id');
-
 const addState = connect(
     function receiveState(state) {
-        const { ws, constructs, team } = state;
+        const { ws, constructs, teamSelect } = state;
 
         function sendConstructSpawn(name) {
             return ws.sendMtxConstructSpawn(name);
@@ -20,27 +18,26 @@ const addState = connect(
 
         return {
             constructs,
-            team,
+            teamSelect,
             sendConstructSpawn,
         };
     },
-
     function receiveDispatch(dispatch) {
         function setTeam(constructIds) {
-            localStorage.setItem('team', JSON.stringify(constructIds));
-            dispatch(actions.setTeam(constructIds));
+            dispatch(actions.setTeamSelect(constructIds));
         }
 
         return {
             setTeam,
         };
     }
+
 );
 
 function Team(args) {
     const {
         constructs,
-        team,
+        teamSelect,
         setTeam,
         sendConstructSpawn,
     } = args;
@@ -51,27 +48,25 @@ function Team(args) {
     // so much for dumb components
     function selectConstruct(id) {
         // remove
-        const i = team.findIndex(sid => sid === id);
+        const i = teamSelect.findIndex(sid => sid === id);
         if (i > -1) {
-            team[i] = null;
-            return setTeam(team);
+            teamSelect[i] = null;
+            return setTeam(teamSelect);
         }
 
         // window insert
-        const insert = team.findIndex(j => j === null);
+        const insert = teamSelect.findIndex(j => j === null);
         if (insert === -1) return setTeam([id, null, null]);
-        team[insert] = id;
-        return setTeam(team);
+        teamSelect[insert] = id;
+        return setTeam(teamSelect);
     }
 
     const constructPanels = constructs.map(construct => {
-        const colour = team.indexOf(construct.id);
+        const colour = teamSelect.indexOf(construct.id);
         const selected = colour > -1;
 
         const borderColour = selected ? COLOURS[colour] : '#000000';
 
-
-        // <button disabled={true} >↻</button>
         return (
             <div
                 key={construct.id}

client/src/reducers.jsx

@@ -43,7 +43,9 @@ module.exports = {
     resolution:         createReducer(null, 'SET_RESOLUTION'),
     skip:               createReducer(false, 'SET_SKIP'),
     shop:               createReducer(false, 'SET_SHOP'),
-    team:               createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'),
+
+    team:               createReducer([], 'SET_TEAM'),
+    teamSelect:         createReducer([null, null, null], 'SET_TEAM_SELECT'),
 
     vboxHighlight:      createReducer([], 'SET_VBOX_HIGHLIGHT'),
     vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),

client/src/socket.jsx

@@ -28,7 +28,7 @@ function createSocket(events) {
     //   Outgoing
     // -------------
     function send(msg) {
-        // if (msg[0] !== 'Ping') console.log('outgoing msg', msg);
+        if (msg[0] !== 'Ping') console.log('outgoing msg', msg);
         ws.send(cbor.encode(msg));
     }
 
@@ -46,6 +46,10 @@ function createSocket(events) {
         send(['AccountInstances', {}]);
     }
 
+    function sendAccountSetTeam(ids) {
+        send(['AccountSetTeam', { ids }]);
+    }
+
     function sendGameState(id) {
         send(['GameState', { id }]);
     }
@@ -108,6 +112,11 @@ function createSocket(events) {
         send(['InstancePractice', {}]);
     }
 
+    function sendInstanceQueue() {
+        send(['InstancePractice', {}]);
+    }
+
+
     function sendInstanceReady(instanceId) {
         send(['InstanceReady', { instance_id: instanceId }]);
     }
@@ -184,6 +193,7 @@ function createSocket(events) {
         InstanceState: onInstanceState,
         ItemInfo: onItemInfo,
         Pong: onPong,
+        Error: errHandler,
     };
 
     function logout() {
@@ -208,7 +218,6 @@ function createSocket(events) {
         // decode binary msg from server
         const blob = new Uint8Array(event.data);
         const res = cbor.decode(blob);
-        if (res.err) return errHandler(res.err);
 
         const [msgType, params] = res;
         if (msgType !== 'Pong') console.log(res);
@@ -268,6 +277,7 @@ function createSocket(events) {
     return {
         sendAccountConstructs,
         sendAccountInstances,
+        sendAccountSetTeam,
 
         sendGameState,
         sendGameReady,
@@ -276,6 +286,7 @@ function createSocket(events) {
 
         sendInstanceReady,
         sendInstancePractice,
+        sendInstanceQueue,
         sendInstanceState,
 
         sendVboxAccept,