team nav

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 });

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 (

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 <div>...</div>;
+
+        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 (
+                <tr key={instance.id}
+                    className="right"
+                    onClick={instanceClick} >
+                    <td>{instance.name}</td>
+                    <td>{instance.players.length} / {instance.max_players}</td>
+                    <td>{scoreText}</td>
+                </tr>
+            );
+        });
+
+        return (
+            <div className="menu-instance-list" >
+                <table>
+                    <thead>
+                        <tr>
+                            <th>instance name</th>
+                            <th>players</th>
+                            <th>status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {instancePanels}
+                        <tr className="right" onClick={() => sendInstanceList()}>
+                            <td colSpan={3} >↺</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <InstanceCreateForm />
+            </div>
+        );
+    }
+
+    return (
+        <main className="menu">
+            {instanceList()}
+        </main>
+    );
+}
+
+module.exports = addState(List);

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 <Team />;
+    if (nav === 'list') return <List />;
 
     return (
-        <MenuContainer />
+        <Team />
     );
 }
 

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 = (
         //     <button
@@ -95,21 +95,21 @@ function Menu(args) {
         // so much for dumb components
         function selectCryp(id) {
             // remove
-            const i = selectedCryps.findIndex(sid => sid === id);
+            const i = team.findIndex(sid => sid === id);
             if (i > -1) {
-                selectedCryps[i] = null;
-                return setSelectedCryps(selectedCryps);
+                team[i] = null;
+                return setTeam(team);
             }
 
             // window insert
-            const insert = selectedCryps.findIndex(j => j === null);
-            if (insert === -1) return setSelectedCryps([id, null, null]);
-            selectedCryps[insert] = id;
-            return setSelectedCryps(selectedCryps);
+            const insert = team.findIndex(j => j === null);
+            if (insert === -1) return setTeam([id, null, null]);
+            team[insert] = id;
+            return setTeam(team);
         }
 
         const crypPanels = cryps.sort(idSort).map(cryp => {
-            const colour = selectedCryps.indexOf(cryp.id);
+            const colour = team.indexOf(cryp.id);
             const selected = colour > -1;
 
             const borderColour = selected ? COLOURS[colour] : '#000000';

client/src/components/menu.container.jsx

@@ -5,18 +5,18 @@ const actions = require('./../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, cryps, selectedCryps, instances, account } = state;
+        const { ws, cryps, team, instances, account } = state;
 
         function sendInstanceJoin(instance) {
-            if (selectedCryps.length) {
-                return ws.sendInstanceJoin(instance.id, selectedCryps);
+            if (team.length) {
+                return ws.sendInstanceJoin(instance.id, team);
             }
             return false;
         }
 
         function sendPlayerMmCrypsSet() {
-            if (selectedCryps.length) {
-                return ws.sendPlayerMmCrypsSet(selectedCryps);
+            if (team.length) {
+                return ws.sendPlayerMmCrypsSet(team);
             }
             return false;
         }
@@ -36,7 +36,7 @@ const addState = connect(
         return {
             account,
             cryps,
-            selectedCryps,
+            team,
             sendInstanceJoin,
             sendInstanceState,
             sendInstanceList,
@@ -47,12 +47,12 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setSelectedCryps(crypIds) {
-            dispatch(actions.setSelectedCryps(crypIds));
+        function setTeam(crypIds) {
+            dispatch(actions.setTeam(crypIds));
         }
 
         return {
-            setSelectedCryps,
+            setTeam,
         };
     }
 );

client/src/components/nav.jsx

@@ -11,6 +11,7 @@ const addState = connect(
             ws,
             account,
             instances,
+            team,
             cryps,
         } = state;
 
@@ -21,6 +22,8 @@ const addState = connect(
         return {
             account,
             instances,
+            team,
+            cryps,
             sendInstanceState,
         };
     },
@@ -49,6 +52,8 @@ function Nav(args) {
     const {
         account,
         sendInstanceState,
+        team,
+        cryps,
         instances,
 
         navTo,
@@ -57,17 +62,23 @@ function Nav(args) {
     } = args;
 
     const joined = instances.map((i, j) => (
-        <button key={j} onClick={() => sendInstanceState(i)} >{i.name}</button>
+        <button key={i.id} onClick={() => sendInstanceState(i)} >{i.name}</button>
     ));
 
+    const teamElements = team.map((c, i) => {
+        if (c) {
+            const cryp = cryps.find(f => f.id === c);
+            return <button key={c} onClick={() => navTo('team')}>{cryp.name}</button>;
+        }
+        return <button key={i} onClick={() => navTo('team')}>+</button>;
+    });
+
     return (
         <nav>
             <h2>Team</h2>
-            <button onClick={() => navTo('team')}>spawn</button>
-            <button onClick={() => navTo('team')}>select</button>
+            {teamElements}
             <h2>Instances</h2>
-            <button onClick={() => navTo('instances')}>list</button>
-            <button onClick={() => navTo('instances')}>new</button>
+            <button onClick={() => navTo('list')}>list</button>
             <hr />
             {joined}
             <h2>Hax</h2>

client/src/components/team.jsx

@@ -0,0 +1,108 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+const range = require('lodash/range');
+
+const actions = require('./../actions');
+const { NULL_UUID } = require('./../utils');
+const { stringSort, crypAvatar } = require('./../utils');
+const SpawnButton = require('./spawn.button');
+
+const idSort = stringSort('id');
+
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, cryps, team, account } = state;
+
+        function sendCrypSpawn(name) {
+            return ws.sendCrypSpawn(name);
+        }
+
+        return {
+            account,
+            cryps,
+            team,
+            sendCrypSpawn,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setTeam(crypIds) {
+            dispatch(actions.setTeam(crypIds));
+        }
+
+        return {
+            setTeam,
+        };
+    }
+);
+
+function Team(args) {
+    const {
+        account,
+        cryps,
+        team,
+
+        setTeam,
+        sendCrypSpawn,
+    } = args;
+
+    if (!cryps) return <div></div>;
+
+    // redux limitation + suggested workaround
+    // so much for dumb components
+    function selectCryp(id) {
+        // remove
+        const i = team.findIndex(sid => sid === id);
+        if (i > -1) {
+            team[i] = null;
+            return setTeam(team);
+        }
+
+        // window insert
+        const insert = team.findIndex(j => j === null);
+        if (insert === -1) return setTeam([id, null, null]);
+        team[insert] = id;
+        return setTeam(team);
+    }
+
+    const crypPanels = cryps.sort(idSort).map(cryp => {
+        const colour = team.indexOf(cryp.id);
+        const selected = colour > -1;
+
+        const borderColour = selected ? COLOURS[colour] : '#000000';
+
+        return (
+            <div
+                key={cryp.id}
+                className="menu-cryp-ctr">
+                <div
+                    className="menu-cryp"
+                    style={ { 'border-color': borderColour || 'whitesmoke' } }
+                    onClick={() => selectCryp(cryp.id)} >
+                    {crypAvatar(cryp.name)}
+                    <h2>{cryp.name}</h2>
+                </div>
+            </div>
+        );
+    });
+
+    const spawnButtonsNum = (3 - cryps.length % 3);
+
+    const spawnButtons = range(spawnButtonsNum)
+        .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
+
+    return (
+        <main className="menu-cryps">
+            {crypPanels}
+            {spawnButtons}
+        </main>
+    );
+}
+
+module.exports = addState(Team);

client/src/reducers.jsx

@@ -28,7 +28,7 @@ module.exports = {
     player:         createReducer(null, actions.SET_PLAYER),
     reclaiming:     createReducer(false, actions.SET_RECLAIMING),
     resolution:     createReducer(null, actions.SET_RESOLUTION),
-    selectedCryps:  createReducer([null, null, null], actions.SET_SELECTED_CRYPS),
+    team:           createReducer([null, null, null], actions.SET_SELECTED_CRYPS),
     showLog:        createReducer(false, actions.SET_SHOW_LOG),
     vboxHidden:     createReducer(false, actions.SET_VBOX_HIDDEN),
     vboxHighlight:  createReducer([], actions.SET_VBOX_HIGHLIGHT),