construct page selection

client/assets/styles/controls.less

@@ -76,3 +76,13 @@ aside {
     transition-duration: 0.25s;
     transition-timing-function: ease;
 }
+
+.team-page-ctrl {
+    display: flex;
+    height: 3em;
+    align-items: center;
+}
+
+.team-page-ctrl h2 {
+    padding: 0 0.75em 0 0.75em;
+}

client/src/actions.jsx

@@ -33,6 +33,7 @@ export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
 
 export const setTeam = value => ({ type: 'SET_TEAM', value: Array.from(value) });
+export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });
 export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.from(value) });
 
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });

client/src/components/team.ctrl.jsx

@@ -6,6 +6,8 @@ const actions = require('./../actions');
 const addState = connect(
     function receiveState(state) {
         const {
+            constructs,
+            teamPage,
             teamSelect,
             ws,
         } = state;
@@ -15,18 +17,34 @@ const addState = connect(
         }
 
         return {
+            constructLength: constructs.length,
             sendAccountSetTeam,
+            teamPage,
             teamSelect,
         };
     },
+
+    function receiveDispatch(dispatch) {
+        function setTeamPage(value) {
+            return dispatch(actions.setTeamPage(value));
+        }
+        return {
+            setTeamPage,
+        };
+    }
 );
 
 function TeamCtrl(args) {
     const {
-        teamSelect,
+        constructLength,
         sendAccountSetTeam,
+        setTeamPage,
+        teamPage,
+        teamSelect,
     } = args;
 
+    const disableDecrement = teamPage === 0;
+    const disableIncrement = (teamPage + 1) * 6 >= constructLength;
     return (
         <aside>
             <div class="timer-container"></div>
@@ -36,6 +54,11 @@ function TeamCtrl(args) {
                 onClick={sendAccountSetTeam}>
                 Set Team
             </button>
+            <div class="team-page-ctrl">
+                <button onClick={() => setTeamPage(teamPage - 1)} disabled={disableDecrement}> &laquo; </button>
+                <h2> {teamPage} </h2>
+                <button onClick={() => setTeamPage(teamPage + 1)} disabled={disableIncrement}> &raquo; </button>
+            </div>
         </aside>
     );
 }

client/src/components/team.jsx

@@ -7,7 +7,7 @@ const { ConstructAvatar } = require('./construct');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, constructs, teamSelect } = state;
+        const { ws, constructs, teamPage, teamSelect } = state;
 
         function sendConstructSpawn(name) {
             return ws.sendMtxConstructSpawn(name);
@@ -15,6 +15,7 @@ const addState = connect(
 
         return {
             constructs,
+            teamPage,
             teamSelect,
         };
     },
@@ -32,6 +33,7 @@ const addState = connect(
 function Team(args) {
     const {
         constructs,
+        teamPage,
         teamSelect,
         setTeam,
     } = args;
@@ -54,8 +56,10 @@ function Team(args) {
         teamSelect[insert] = id;
         return setTeam(teamSelect);
     }
+    console.log(constructs.length);
+    const dispConstructs = constructs.length >= ((teamPage + 1) * 6) ? constructs.slice(teamPage * 6, (teamPage + 1) * 6) : constructs.slice(teamPage * 6, constructs.length);
 
-    const constructPanels = constructs.map(construct => {
+    const constructPanels = dispConstructs.map(construct => {
         const colour = teamSelect.indexOf(construct.id);
         const selected = colour > -1;
 

client/src/reducers.jsx

@@ -45,6 +45,7 @@ module.exports = {
     shop:               createReducer(false, 'SET_SHOP'),
 
     team:               createReducer([], 'SET_TEAM'),
+    teamPage:           createReducer(0, 'SET_TEAM_PAGE'),
     teamSelect:         createReducer([null, null, null], 'SET_TEAM_SELECT'),
 
     vboxHighlight:      createReducer([], 'SET_VBOX_HIGHLIGHT'),