From 338a7e082c18d80a3b0b3a8e0ad17521730fdca4 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 27 Aug 2019 16:30:59 +1000 Subject: [PATCH 1/2] construct page selection --- client/assets/styles/controls.less | 10 ++++++++++ client/src/actions.jsx | 1 + client/src/components/team.ctrl.jsx | 25 ++++++++++++++++++++++++- client/src/components/team.jsx | 8 ++++++-- client/src/reducers.jsx | 1 + 5 files changed, 42 insertions(+), 3 deletions(-) diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 09713fc6..d036debc 100644 --- a/client/assets/styles/controls.less +++ b/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; +} diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 1fde403a..5a829cb7 100644 --- a/client/src/actions.jsx +++ b/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 }); diff --git a/client/src/components/team.ctrl.jsx b/client/src/components/team.ctrl.jsx index fb45db9e..ba13edf1 100644 --- a/client/src/components/team.ctrl.jsx +++ b/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 ( ); } diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx index af48f6ca..9fbb3cff 100644 --- a/client/src/components/team.jsx +++ b/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; diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 8c9beb5b..73c8e16c 100644 --- a/client/src/reducers.jsx +++ b/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'), From 61528f7739190b0552ff640fe3abe1445c81cdea Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 27 Aug 2019 16:35:48 +1000 Subject: [PATCH 2/2] ternary format --- client/src/components/team.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx index 9fbb3cff..cb88b526 100644 --- a/client/src/components/team.jsx +++ b/client/src/components/team.jsx @@ -57,7 +57,9 @@ function Team(args) { 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 dispConstructs = constructs.length >= ((teamPage + 1) * 6) + ? constructs.slice(teamPage * 6, (teamPage + 1) * 6) + : constructs.slice(teamPage * 6, constructs.length); const constructPanels = dispConstructs.map(construct => { const colour = teamSelect.indexOf(construct.id);