menu

client/cryps.css

@@ -209,8 +209,7 @@ header {
 .menu-cryps {
     display: flex;
     flex-flow: row wrap;
-
+    flex: 1 1 100%;
-    flex: 1;
 }
 
 .menu-cryp-ctr {
@@ -228,14 +227,12 @@ header {
     display: flex;
     flex-flow: row wrap;
     align-content: center;
-}
+    justify-content: center;
-
-.spawn-btn .menu-cryp h2 {
-    flex: 1;
 }
 
 .spawn-btn input {
     flex: 1 1 100%;
+    width: 100%;
     margin: 1em;
 }
 
@@ -267,7 +264,6 @@ header {
 
     display: flex;
     align-content: flex-start;
-    height: 100%;
 }
 
 .menu-instance-btn {
@@ -579,6 +575,7 @@ header {
 
     .cryp-box-top figure {
         flex: 1;
+        font-size: 60%;
     }
 
     .menu-instance-btn {
@@ -605,6 +602,12 @@ header {
         margin: 0.5em;
     }
 
+    .spawn-btn button {
+        margin: 1em;
+        padding: 0.2em;
+        width: 100%;
+    }
+
     .cryp-box .skills {
         display: none;
     }

client/src/components/body.component.jsx

@@ -2,9 +2,8 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const InstanceListContainer = require('./instance.list.container');
 const LoginContainer = require('./login.container');
-const CrypListContainer = require('./cryp.list.container');
+const MenuContainer = require('./menu.container');
 const GameContainer = require('./game.container');
 const InstanceContainer = require('./instance.container');
 
@@ -44,10 +43,7 @@ function renderBody(props) {
     }
 
     return (
-        <main>
+        <MenuContainer />
-            <CrypListContainer />
-            <InstanceListContainer />
-        </main>
     );
 }
 

client/src/components/cryp.list.component.jsx

@@ -18,6 +18,7 @@ function CrypList(args) {
         cryps,
         selectedCryps,
         setSelectedCryps,
+        sendPlayerMmCrypsSet,
         sendInstanceJoin,
         sendCrypSpawn
     } = args;
@@ -42,6 +43,15 @@ function CrypList(args) {
     }
 
     const instanceJoinHidden = !selectedCryps.every(c => !!c);
+
+    const mmSet = (
+        <button
+            className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
+            onClick={() => sendPlayerMmCrypsSet()}>
+            Set Matchmaking Team
+        </button>
+    );
     const instanceJoin = (
         <button
             className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
@@ -84,6 +94,7 @@ function CrypList(args) {
 
     return (
         <div className="menu-cryps">
+            {mmSet}
             {instanceJoin}
             {crypPanels}
             {spawnButtons}

client/src/components/cryp.list.container.jsx

@@ -5,7 +5,7 @@ const actions = require('./../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, cryps, selectedCryps } = state;
+        const { ws, cryps, selectedCryps, instances } = state;
 
         function sendInstanceJoin() {
             if (selectedCryps.length) {
@@ -14,19 +14,52 @@ const addState = connect(
             return false;
         }
 
+        function sendPlayerMmCrypsSet() {
+            if (selectedCryps.length) {
+                return ws.sendPlayerMmCrypsSet(selectedCryps);
+            }
+            return false;
+        }
+
         function sendCrypSpawn(name) {
             return ws.sendCrypSpawn(name);
         }
 
-        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn };
+        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn, sendPlayerMmCrypsSet };
     },
 
     function receiveDispatch(dispatch) {
         function setSelectedCryps(crypIds) {
             dispatch(actions.setSelectedCryps(crypIds));
         }
-        return { setSelectedCryps };
+
+        function setActiveInstance(instance) {
+            dispatch(actions.setInstance(instance));
+        }
+
+        return {
+            setSelectedCryps,
+            setActiveInstance,
+        };
     }
 );
 
 module.exports = addState(CrypList);
+
+
+        function sendCrypsSet() {
+            console.log('set crypos');
+            // return ws.sendGamePvp(crypIds);
+        }
+
+        function sendInstanceJoin() {
+            if (selectedCryps.length) {
+                return ws.sendInstanceJoin(selectedCryps);
+            }
+            return false;
+        }
+
+
+        return { instances, sendCrypsSet, sendInstanceJoin };
+    },
+

client/src/components/instance.list.component.jsx

@@ -1,19 +1,110 @@
-// eslint-disable-next-line
 const preact = require('preact');
+const range = require('lodash/range');
 
-const { NULL_UUID } = require('./../utils');
+const { stringSort, NULL_UUID } = require('./../utils');
+const molecule = require('./molecule');
+const SpawnButton = require('./spawn.button');
 
-function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
+const idSort = stringSort('id');
+
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+function CrypList(args) {
+    const {
+        cryps,
+        selectedCryps,
+        setSelectedCryps,
+        sendPlayerMmCrypsSet,
+        sendInstanceJoin,
+        sendCrypSpawn
+    } = args;
+
+    if (!cryps) return <div></div>;
+
+    // redux limitation + suggested workaround
+    // so much for dumb components
+    function selectCryp(id) {
+        // remove
+        const i = selectedCryps.findIndex(sid => sid === id);
+        if (i > -1) {
+            selectedCryps[i] = null;
+            return setSelectedCryps(selectedCryps);
+        }
+
+        // window insert
+        const insert = selectedCryps.findIndex(j => j === null);
+        if (insert === -1) return setSelectedCryps([id, null, null]);
+        selectedCryps[insert] = id;
+        return setSelectedCryps(selectedCryps);
+    }
+
+    const instanceJoinHidden = !selectedCryps.every(c => !!c);
+
+    const mmSet = (
+        <button
+            className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
+            onClick={() => sendPlayerMmCrypsSet()}>
+            Set Matchmaking Team
+        </button>
+    );
+    const instanceJoin = (
+        <button
+            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
+            onClick={() => sendInstanceJoin()}>
+            Join New Instance
+        </button>
+    );
+
+
+    const crypPanels = cryps.sort(idSort).map(cryp => {
+        const colour = selectedCryps.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)} >
+                    <figure className="img">
+                        {molecule}
+                    </figure>
+                    <h2>{cryp.name}</h2>
+                </div>
+            </div>
+        );
+    });
+
+    const spawnButtonsNum = cryps.length < 3
+        ? (3 - cryps.length)
+        : 1;
+
+    const spawnButtons = range(spawnButtonsNum)
+        .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
+
+    return (
+        <div className="menu-cryps">
+            {mmSet}
+            {instanceJoin}
+            {crypPanels}
+            {spawnButtons}
+        </div>
+    );
+}
+
+function instanceList({ instances, setActiveInstance }) {
     if (!instances) return <div>...</div>;
 
-    // const instanceJoin = (
-    //     <button
-    //         className="menu-instance-btn full right"
-    //         onClick={() => sendInstanceJoin()}>
-    //         Join New Instance
-    //     </button>
-    // );
-
     const instancePanels = instances.map(instance => {
         const globalInstance = instance.instance === NULL_UUID;
         const name = globalInstance

client/src/components/menu.component.jsx

@@ -0,0 +1,143 @@
+const preact = require('preact');
+const range = require('lodash/range');
+
+const { NULL_UUID } = require('./../utils');
+
+const { stringSort } = require('./../utils');
+const molecule = require('./molecule');
+const SpawnButton = require('./spawn.button');
+
+const idSort = stringSort('id');
+
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+function Menu(args) {
+    const {
+        cryps,
+        selectedCryps,
+        setSelectedCryps,
+        setActiveInstance,
+        sendPlayerMmCrypsSet,
+        sendInstanceJoin,
+        sendCrypSpawn,
+        instances,
+    } = args;
+
+    function instanceList() {
+        if (!instances) return <div>...</div>;
+
+        const instancePanels = instances.map(instance => {
+            const globalInstance = instance.instance === NULL_UUID;
+            const name = globalInstance
+                ? 'Global Matchmaking'
+                : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
+
+            return (
+                <button
+                    className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
+                    key={instance.id}
+                    onClick={() => setActiveInstance(instance)}>
+                    {name}
+                </button>
+            );
+        });
+
+        const instanceJoinHidden = !selectedCryps.every(c => !!c);
+
+        const mmSet = (
+            <button
+                className={`menu-instance-btn left ${instanceJoinHidden ? 'hidden' : ''}`}
+                disabled={instanceJoinHidden}
+                onClick={() => sendPlayerMmCrypsSet()}>
+                Set Matchmaking Team
+            </button>
+        );
+        const instanceJoin = (
+            <button
+                className={`menu-instance-btn right ${instanceJoinHidden ? 'hidden' : ''}`}
+                disabled={instanceJoinHidden}
+                onClick={() => sendInstanceJoin()}>
+                Join New Instance
+            </button>
+        );
+
+        return (
+            <section className="menu-instance-list" >
+                {instancePanels}
+                {mmSet}
+                {instanceJoin}
+            </section>
+        );
+    }
+
+    function crypList() {
+        if (!cryps) return <div></div>;
+
+        // redux limitation + suggested workaround
+        // so much for dumb components
+        function selectCryp(id) {
+            // remove
+            const i = selectedCryps.findIndex(sid => sid === id);
+            if (i > -1) {
+                selectedCryps[i] = null;
+                return setSelectedCryps(selectedCryps);
+            }
+
+            // window insert
+            const insert = selectedCryps.findIndex(j => j === null);
+            if (insert === -1) return setSelectedCryps([id, null, null]);
+            selectedCryps[insert] = id;
+            return setSelectedCryps(selectedCryps);
+        }
+
+        const crypPanels = cryps.sort(idSort).map(cryp => {
+            const colour = selectedCryps.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)} >
+                        <figure className="img">
+                            {molecule}
+                        </figure>
+                        <h2>{cryp.name}</h2>
+                    </div>
+                </div>
+            );
+        });
+
+        const spawnButtonsNum = cryps.length < 3
+            ? (3 - cryps.length)
+            : 1;
+
+        const spawnButtons = range(spawnButtonsNum)
+            .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
+
+        return (
+            <div className="menu-cryps">
+                {crypPanels}
+                {spawnButtons}
+            </div>
+        );
+    }
+
+    return (
+        <main>
+            {instanceList()}
+            {crypList()}
+        </main>
+    );
+}
+
+module.exports = Menu;

client/src/components/menu.container.jsx

@@ -0,0 +1,54 @@
+const { connect } = require('preact-redux');
+
+const Menu = require('./menu.component');
+const actions = require('./../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, cryps, selectedCryps, instances } = state;
+
+        function sendInstanceJoin() {
+            if (selectedCryps.length) {
+                return ws.sendInstanceJoin(selectedCryps);
+            }
+            return false;
+        }
+
+        function sendPlayerMmCrypsSet() {
+            if (selectedCryps.length) {
+                return ws.sendPlayerMmCrypsSet(selectedCryps);
+            }
+            return false;
+        }
+
+        function sendCrypSpawn(name) {
+            return ws.sendCrypSpawn(name);
+        }
+
+        return {
+            cryps,
+            selectedCryps,
+            sendInstanceJoin,
+            sendCrypSpawn,
+            sendPlayerMmCrypsSet,
+            instances,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setSelectedCryps(crypIds) {
+            dispatch(actions.setSelectedCryps(crypIds));
+        }
+
+        function setActiveInstance(instance) {
+            dispatch(actions.setInstance(instance));
+        }
+
+        return {
+            setSelectedCryps,
+            setActiveInstance,
+        };
+    }
+);
+
+module.exports = addState(Menu);

client/src/socket.jsx

@@ -77,8 +77,8 @@ function createSocket(events) {
         send({ method: 'cryp_unspec', params: { id, spec } });
     }
 
-    function sendPlayerCrypsSet(instanceId, crypIds) {
+    function sendPlayerMmCrypsSet(crypIds) {
-        send({ method: 'player_cryps_set', params: { instance_id: instanceId, cryp_ids: crypIds } });
+        send({ method: 'player_mm_cryps_set', params: { cryp_ids: crypIds } });
     }
 
     function sendPlayerState(instanceId) {
@@ -309,7 +309,7 @@ function createSocket(events) {
         sendInstanceJoin,
         sendInstanceReady,
         sendInstanceScores,
-        sendPlayerCrypsSet,
+        sendPlayerMmCrypsSet,
         sendPlayerState,
         sendVboxAccept,
         sendVboxApply,

server/src/player.rs

@@ -170,7 +170,7 @@ pub fn player_state(params: PlayerStateParams, tx: &mut Transaction, account: &A
     player_get(tx, account.id, params.instance_id)
 }
 
-pub fn player_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, account: &Account) -> Result<Player, Error> {
+pub fn player_mm_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, account: &Account) -> Result<Player, Error> {
     if params.cryp_ids.len() != 3 {
         return Err(err_msg("team size is 3"));
     }
@@ -183,6 +183,7 @@ pub fn player_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, acco
     match player_get(tx, account.id, Uuid::nil()) {
         Ok(mut p) => {
             p.cryps = cryps;
+            p.vbox = Vbox::new(account.id, Uuid::nil());
             player_update(tx, p, false)
         },
         Err(_) => {

server/src/rpc.rs

@@ -21,7 +21,7 @@ use account::{Account, account_create, account_login, account_from_token, accoun
 use skill::{Skill};
 // use zone::{Zone, zone_create, zone_join, zone_close};
 use spec::{Spec};
-use player::{Score, player_state, player_cryps_set, Player};
+use player::{Score, player_state, player_mm_cryps_set, Player};
 use instance::{instance_join, instance_ready, instance_scores};
 use vbox::{Var, vbox_accept, vbox_apply, vbox_discard, vbox_combine, vbox_reclaim, vbox_unequip};
 
@@ -82,7 +82,7 @@ impl Rpc {
                     "instance_scores" => Rpc::instance_scores(data, &mut tx, account.unwrap(), client),
 
                     "player_state" => Rpc::player_state(data, &mut tx, account.unwrap(), client),
-                    "player_cryps_set" => Rpc::player_cryps_set(data, &mut tx, account.unwrap(), client),
+                    "player_mm_cryps_set" => Rpc::player_mm_cryps_set(data, &mut tx, account.unwrap(), client),
                     "player_vbox_accept" => Rpc::player_vbox_accept(data, &mut tx, account.unwrap(), client),
                     "player_vbox_apply" => Rpc::player_vbox_apply(data, &mut tx, account.unwrap(), client),
                     "player_vbox_combine" => Rpc::player_vbox_combine(data, &mut tx, account.unwrap(), client),
@@ -307,12 +307,12 @@ impl Rpc {
         return Ok(response);
     }
 
-    fn player_cryps_set(data: Vec<u8>, tx: &mut Transaction, account: Account, _client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
+    fn player_mm_cryps_set(data: Vec<u8>, tx: &mut Transaction, account: Account, _client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
         let msg = from_slice::<PlayerCrypsSetMsg>(&data).or(Err(err_msg("invalid params")))?;
 
         let response = RpcResponse {
             method: "player_state".to_string(),
-            params: RpcResult::PlayerState(player_cryps_set(msg.params, tx, &account)?)
+            params: RpcResult::PlayerState(player_mm_cryps_set(msg.params, tx, &account)?)
         };
 
         return Ok(response);