From 038365836089ca24c6d943d6d6aff0ef13d40f24 Mon Sep 17 00:00:00 2001 From: ntr Date: Sat, 18 May 2019 20:50:42 +1000 Subject: [PATCH] team nav --- client/src/actions.jsx | 2 +- .../src/components/instance.create.form.jsx | 8 +- client/src/components/list.jsx | 103 +++++++++++++++++ client/src/components/main.jsx | 8 +- client/src/components/menu.component.jsx | 22 ++-- client/src/components/menu.container.jsx | 18 +-- client/src/components/nav.jsx | 21 +++- client/src/components/team.jsx | 108 ++++++++++++++++++ client/src/reducers.jsx | 2 +- 9 files changed, 258 insertions(+), 34 deletions(-) create mode 100644 client/src/components/list.jsx create mode 100644 client/src/components/team.jsx diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 7acde2a4..994e2f65 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -41,7 +41,7 @@ export const SET_COMBINER = 'SET_COMBINER'; export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) }); export const SET_SELECTED_CRYPS = 'SET_SELECTED_CRYPS'; -export const setSelectedCryps = value => ({ type: SET_SELECTED_CRYPS, value: Array.from(value) }); +export const setTeam = value => ({ type: SET_SELECTED_CRYPS, value: Array.from(value) }); export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL'; export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null }); diff --git a/client/src/components/instance.create.form.jsx b/client/src/components/instance.create.form.jsx index b3230714..a86e9c42 100644 --- a/client/src/components/instance.create.form.jsx +++ b/client/src/components/instance.create.form.jsx @@ -4,7 +4,7 @@ const { Component } = require('preact'); const addState = connect( function receiveState(state) { - const { ws, selectedCryps } = state; + const { ws, team } = state; function sendInstanceNew(sCryps, name, players) { if (sCryps.length) { @@ -15,7 +15,7 @@ const addState = connect( return { sendInstanceNew, - selectedCryps, + team, }; } ); @@ -45,12 +45,12 @@ class InstanceCreateForm extends Component { handleSubmit(event) { event.preventDefault(); - this.sendInstanceNew(this.props.selectedCryps, this.state.name, this.state.players); + this.sendInstanceNew(this.props.team, this.state.name, this.state.players); this.setState({ name: '', players: 2 }); } render() { - const disabled = !this.props.selectedCryps.every(c => c); + const disabled = !this.props.team.every(c => c); const classes = `create-form ${disabled ? 'disabled' : ''}`; return ( diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx new file mode 100644 index 00000000..05bd1561 --- /dev/null +++ b/client/src/components/list.jsx @@ -0,0 +1,103 @@ +const { connect } = require('preact-redux'); +const preact = require('preact'); + +const { NULL_UUID } = require('./../utils'); +const actions = require('./../actions'); +const InstanceCreateForm = require('./instance.create.form'); + +const addState = connect( + function receiveState(state) { + const { ws, cryps, team, instances, account } = state; + + function sendInstanceJoin(instance) { + if (team.length) { + return ws.sendInstanceJoin(instance.id, team); + } + return false; + } + + function sendInstanceState(instance) { + return ws.sendInstanceState(instance.id); + } + + function sendInstanceList() { + return ws.sendAccountInstances(); + } + + return { + account, + cryps, + team, + sendInstanceJoin, + sendInstanceState, + sendInstanceList, + instances, + }; + }, +); + +function List(args) { + const { + account, + team, + sendInstanceState, + sendInstanceJoin, + sendInstanceList, + instances, + } = args; + + function instanceList() { + if (!instances) return
...
; + + const instancePanels = instances.map(instance => { + const player = instance.players.find(p => p.id === account.id); + const scoreText = player + ? `${player.score.wins} : ${player.score.losses}` + : ''; + + function instanceClick() { + if (!player) return sendInstanceJoin(instance); + return sendInstanceState(instance); + } + + return ( + + {instance.name} + {instance.players.length} / {instance.max_players} + {scoreText} + + ); + }); + + return ( +
+ + + + + + + + + + {instancePanels} + sendInstanceList()}> + + + +
instance nameplayersstatus
↺
+ +
+ ); + } + + return ( +
+ {instanceList()} +
+ ); +} + +module.exports = addState(List); diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx index a659001b..d595b004 100644 --- a/client/src/components/main.jsx +++ b/client/src/components/main.jsx @@ -3,9 +3,10 @@ const preact = require('preact'); const { connect } = require('preact-redux'); const LoginContainer = require('./login.container'); -const MenuContainer = require('./menu.container'); const GameContainer = require('./game.container'); const InstanceContainer = require('./instance.container'); +const Team = require('./team'); +const List = require('./list'); const addState = connect( state => { @@ -42,10 +43,11 @@ function renderBody(props) { ); } - // if (nav === 'list') + if (nav === 'team') return ; + if (nav === 'list') return ; return ( - + ); } diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx index bd1b1f48..0356ffd3 100644 --- a/client/src/components/menu.component.jsx +++ b/client/src/components/menu.component.jsx @@ -20,8 +20,8 @@ function Menu(args) { const { account, cryps, - selectedCryps, - setSelectedCryps, + team, + setTeam, sendInstanceState, sendPlayerMmCrypsSet, sendInstanceJoin, @@ -55,7 +55,7 @@ function Menu(args) { ); }); - const instanceJoinHidden = !selectedCryps.every(c => !!c); + const instanceJoinHidden = !team.every(c => !!c); // const mmSet = ( // + )); + const teamElements = team.map((c, i) => { + if (c) { + const cryp = cryps.find(f => f.id === c); + return ; + } + return ; + }); + return (