info hover init

2019-05-20 17:00:26 +10:00 · 2019-05-20 17:00:26 +10:00 · 7dc350159b
commit 7dc350159b
parent 911d2829bf
11 changed files with 154 additions and 185 deletions
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@ -3,7 +3,6 @@ export const setCryps = value => ({ type: 'SET_CRYPS', value });
 export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
-export const setVboxHidden = value => ({ type: 'SET_VBOX_HIDDEN', value });
 export const setInstances = value => ({ type: 'SET_INSTANCES', value });
 export const setNav = value => ({ type: 'SET_NAV', value });
 export const setInstance = value => ({ type: 'SET_INSTANCE', value });
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@ -1,26 +1,20 @@
 const preact = require('preact');
 const range = require('lodash/range');

-const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
-const { COLOUR_ICONS, STATS, SPECS, convertItem, crypAvatar } = require('../utils');
-const shapes = require('./shapes');
+const { ITEMS: { SPECS: SPEC_CONSTANT } } = require('./../constants');
+const { COLOUR_ICONS, convertItem } = require('../utils');

 function Info(args) {
    const {
-        activeCryp,
-
        info,
-        infoCryp,
        itemInfo,

        combiner,
-        sendUnequip,
        instance,
        player,
-        vboxHidden,
    } = args;

-    function CrypItem() {
+    function Info() {
        if (!info) return false;
        const fullInfo = itemInfo.items.find(i => i.item === info);
        if (!fullInfo) return false;
@ -37,16 +31,11 @@ function Info(args) {
        });
        const teamColours = { red, blue, green };

-        const unequipBtn = activeCryp
-            ? <button onClick={() => sendUnequip(activeCryp.id, info)}>unequip</button>
-            : null;
-
        if (isSkill) {
            return (
                <div className="info-skill">
                    <div>{fullInfo.item}</div>
                    <div>{fullInfo.description}</div>
-                    {unequipBtn}
                </div>
            );
        }
@ -89,7 +78,6 @@ function Info(args) {
                    <div className="thresholds">
                        {thresholdEl}
                    </div>
-                    {unequipBtn}
                </div>
            );
        }
@ -123,7 +111,7 @@ function Info(args) {
    }

    function ScoreBoard() {
-        if (activeCryp || info[0]) return null;
+        if (info[0]) return null;

        const players = instance.players.map((p, i) => {
            const pText = playerText(p);
@ -148,7 +136,6 @@ function Info(args) {

    function Combos() {
        if (info) return false;
-        if (activeCryp) return false;
        if (!player) return false;

        if (!(combiner.every(u => u === null))) {
@ -189,11 +176,9 @@ function Info(args) {
    //     ? <h2>game beginning...</h2>
    //     : null;

-    const classes = `info ${vboxHidden ? '' : 'hidden'}`;
-
    return (
-        <div className={classes} >
-            <CrypItem />
+        <div className='info' >
+            <Info />
            <Combos />
        </div>
    );
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@ -6,29 +6,21 @@ const Info = require('./info.component');
 const addState = connect(
    function receiveState(state) {
        const {
-            activeCryp,
+            ws,
            combiner,
            info,
-            ws,
-            instance,
            itemInfo,
-            vboxHidden,
+            instance,
            player,
        } = state;

-        function sendUnequip(crypId, item) {
-            return ws.sendVboxUnequip(instance.id, crypId, item);
-        }
-
        return {
-            activeCryp,
-            info,
+            ws,
            combiner,
-            sendUnequip,
+            info,
+            itemInfo,
            instance,
            player,
-            itemInfo,
-            vboxHidden,
        };
    },
 );
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@ -1,15 +1,41 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');

-const VboxContainer = require('./vbox.container');
+const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
 const InstanceCrypsContainer = require('./instance.cryps');
 const EquipmentContainer = require('./instance.equip');

-function InstanceComponent(args) {
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, instance, player } = state;
+
+        function sendInstanceReady() {
+            return ws.sendInstanceReady(instance.id);
+        }
+
+        return { instance, player, sendInstanceReady };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(c) {
+            return dispatch(actions.setInfo(c));
+        }
+
+        return {
+            setInfo,
+        };
+    }
+);
+
+function Instance(args) {
    const {
        instance,
        player,
        sendInstanceReady,
+        setInfo,
    } = args;

    if (!instance) return false;
@ -44,7 +70,7 @@ function InstanceComponent(args) {
    );

    return (
-        <main className="instance" >
+        <main className="instance" onMouseOver={() => setInfo(null)} >
            <div className="top">
                {actionBtn}
                {timer}
@ -52,7 +78,7 @@ function InstanceComponent(args) {

            <input type="checkbox" id="toggle-vbox"/>
            <label id="toggle-vbox-label" htmlFor="toggle-vbox">&nbsp;</label>
-            <VboxContainer />
+            <Vbox />
            <InfoContainer />
            <EquipmentContainer />
            <InstanceCrypsContainer />
@ -60,4 +86,4 @@ function InstanceComponent(args) {
    );
 }

-module.exports = InstanceComponent;
+module.exports = addState(Instance);
--- a/client/src/components/instance.container.jsx
+++ b/client/src/components/instance.container.jsx
@ -14,6 +14,16 @@ const addState = connect(

        return { instance, player, sendInstanceReady };
    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(c) {
+            return dispatch(actions.setInfo(c));
+        }
+
+        return {
+            setInfo,
+        };
+    }
 );

 module.exports = addState(Instance);
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@ -8,7 +8,7 @@ const actions = require('../actions');

 const addState = connect(
    function receiveState(state) {
-        const { ws, instance, player, account, vboxHidden, itemInfo, itemEquip, activeCryp } = state;
+        const { ws, instance, player, account, itemInfo, itemEquip, activeCryp } = state;

        function sendInstanceReady() {
            return ws.sendInstanceReady(instance.id);
@ -18,7 +18,7 @@ const addState = connect(
            return ws.sendVboxApply(instance.id, crypId, i);
        }

-        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, itemInfo, itemEquip, activeCryp };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, itemInfo, itemEquip, activeCryp };
    },

    function receiveDispatch(dispatch) {
@ -196,7 +196,6 @@ function InstanceCryps(props) {
        setActiveCryp,

        sendVboxApply,
-        vboxHidden,
        itemInfo,
        setVboxHighlight,
        setItemUnequip,
@ -220,7 +219,7 @@ function InstanceCryps(props) {
        setVboxHighlight,
    }));

-    const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
+    const classes = `cryp-list`;
    return (
        <div className={classes} onClick={() => setActiveCryp(null)}>
            {cryps}
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@ -4,7 +4,7 @@ const { connect } = require('preact-redux');

 const LoginContainer = require('./login.container');
 const GameContainer = require('./game.container');
-const InstanceContainer = require('./instance.container');
+const Instance = require('./instance.component');
 const Team = require('./team');
 const List = require('./list');

@ -32,7 +32,6 @@ function Main(props) {
    }

    if (game) {
-        console.log('game time');
        return (
            <GameContainer />
        );
@ -40,7 +39,7 @@ function Main(props) {

    if (instance) {
        return (
-            <InstanceContainer />
+            <Instance />
        );
    }

--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@ -1,32 +1,98 @@
 const preact = require('preact');
 const range = require('lodash/range');
+const { connect } = require('preact-redux');

 const shapes = require('./shapes');
-
 const { convertItem } = require('./../utils');
+const actions = require('../actions');

-function Vbox(args) {
+const addState = connect(
+    function receiveState(state) {
        const {
-        activeCryp,
-        setActiveCryp,
+            ws,
+            instance,
+            player,
+            combiner,
+            reclaiming,
+            vboxHighlight,
+            itemInfo,
+        } = state;
+
+        function sendVboxDiscard() {
+            return ws.sendVboxDiscard(instance.id);
+        }
+
+        function sendVboxAccept(group, index) {
+            return ws.sendVboxAccept(instance.id, group, index);
+        }
+
+        function sendVboxCombine() {
+            return ws.sendVboxCombine(instance.id, combiner);
+        }
+
+        function sendVboxReclaim(i) {
+            return ws.sendVboxReclaim(instance.id, i);
+        }
+
+
+        return {
            combiner,
-        info,
            instance,
            player,
            reclaiming,
            sendVboxAccept,
-        sendVboxApply,
            sendVboxCombine,
            sendVboxDiscard,
            sendVboxReclaim,
+            vboxHighlight,
+            itemInfo,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setCombiner(c) {
+            return dispatch(actions.setCombiner(c));
+        }
+
+        function setReclaiming(v) {
+            return dispatch(actions.setReclaiming(v));
+        }
+
+        function setInfo(item) {
+            return dispatch(actions.setInfo(item));
+        }
+
+        function setVboxHighlight(v) {
+            return dispatch(actions.setVboxHighlight(v));
+        }
+
+        return {
+            setCombiner,
+            setReclaiming,
+            setInfo,
+            setVboxHighlight,
+        };
+    }
+
+);
+
+function Vbox(args) {
+    const {
+        combiner,
+        instance,
+        itemInfo,
+        player,
+        reclaiming,
+        sendVboxAccept,
+        sendVboxCombine,
+        sendVboxDiscard,
+        sendVboxReclaim,
+        vboxHighlight,
+
        setCombiner,
        setInfo,
        setReclaiming,
-        showTeam,
-        vboxHidden,
-        vboxHighlight,
        setVboxHighlight,
-        itemInfo,
    } = args;

    if (!player) return false;
@ -82,18 +148,18 @@ function Vbox(args) {
        return true;
    }

+    function vboxHover(e, v) {
+        if (v) {
+            setInfo(v);
+            e.stopPropagation();
+        }
+        return true;
+    }
+
    const freeRows = free.map((row, i) => {
        const cells = row.map((c, j) => {
            const highlighted = c && vboxHighlight.includes(c);

-            function freeClick() {
-                if (c) {
-                    setActiveCryp(null);
-                    return setInfo(c);
-                }
-                return false;
-            }
-
            return <td
                key={j}
                className={`${highlighted ? 'highlight' : ''}`}
@ -101,8 +167,9 @@ function Vbox(args) {
                onTouchEnd={e => vboxTouchEnd(e, i, j)}
                onTouchMove={e => vboxTouchMove(e)}

-                onClick={freeClick}
+                // onClick={freeClick}
                onDblClick={() => sendVboxAccept(j, i) }
+                onMouseOver={(e) => vboxHover(e, c)}
                >
                {convertItem(c)}
            </td>;
@ -118,19 +185,13 @@ function Vbox(args) {
    //
    //  INVENTORY
    //
-    function boundClick(e, i, highlight) {
+    function boundClick(e, i) {
        const value = vbox.bound[i];
-        if (reclaiming && value) sendVboxReclaim(i);
-        else if (highlight && activeCryp) {
-            sendVboxApply(i);
-            setVboxHighlight([]);
-            showTeam();
-        } else if (value) {
+        if (reclaiming && value) return sendVboxReclaim(i);
+        if (value) {
            const insert = combiner.findIndex(j => j === null);
            if (insert === -1) return combinerChange([i, null, null]);
            combiner[insert] = i;
-            setInfo(value);
-            setActiveCryp(null);
            return combinerChange(combiner);
        }
        return false;
@ -153,6 +214,7 @@ function Vbox(args) {
            <td
                key={i}
                className={`${highlighted ? 'highlight' : ''}`}
+                onMouseOver={(e) => vboxHover(e, value)}
                onClick={e => boundClick(e, i, highlighted) }>
                {convertItem(value)}
            </td>
@ -211,7 +273,7 @@ function Vbox(args) {
        return setReclaiming(!reclaiming);
    }

-    const classes = `vbox ${vboxHidden ? 'hidden' : ''}`;
+    const classes = `vbox`;
    const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;

    return (
@ -258,4 +320,4 @@ function Vbox(args) {
    );
 }

-module.exports = Vbox;
+module.exports = addState(Vbox);
--- a/client/src/components/vbox.container.jsx
+++ b/client/src/components/vbox.container.jsx
@ -1,101 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Vbox = require('./vbox.component');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            ws,
-            instance,
-            player,
-            combiner,
-            reclaiming,
-            activeItem,
-            activeCryp,
-            info,
-            vboxHidden,
-            vboxHighlight,
-            itemInfo,
-        } = state;
-
-        function sendVboxApply(i) {
-            return ws.sendVboxApply(instance.id, activeCryp.id, i);
-        }
-
-        function sendVboxDiscard() {
-            return ws.sendVboxDiscard(instance.id);
-        }
-
-        function sendVboxAccept(group, index) {
-            return ws.sendVboxAccept(instance.id, group, index);
-        }
-
-        function sendVboxCombine() {
-            return ws.sendVboxCombine(instance.id, combiner);
-        }
-
-        function sendVboxReclaim(i) {
-            return ws.sendVboxReclaim(instance.id, i);
-        }
-
-        return {
-            instance,
-            player,
-            combiner,
-            reclaiming,
-            activeItem,
-            activeCryp,
-            info,
-            itemInfo,
-            vboxHidden,
-            vboxHighlight,
-            sendVboxAccept,
-            sendVboxDiscard,
-            sendVboxReclaim,
-            sendVboxCombine,
-            sendVboxApply,
-        };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setCombiner(c) {
-            return dispatch(actions.setCombiner(c));
-        }
-
-        function setReclaiming(v) {
-            return dispatch(actions.setReclaiming(v));
-        }
-
-        function setInfo(item) {
-            return dispatch(actions.setInfo(item));
-        }
-
-        function setActiveCryp(v) {
-            return dispatch(actions.setActiveCryp(v));
-        }
-
-        function setVboxHighlight(v) {
-            return dispatch(actions.setVboxHighlight(v));
-        }
-
-        function showTeam() {
-            dispatch(actions.setInfo(null));
-            dispatch(actions.setVboxHidden(true));
-            return true;
-        }
-
-        return {
-            setCombiner,
-            setActiveCryp,
-            setReclaiming,
-            setInfo,
-            setVboxHighlight,
-            showTeam,
-        };
-    }
-
-);
-
-module.exports = addState(Vbox);
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@ -143,7 +143,6 @@ function registerEvents(store) {
        const player = v.players.find(p => p.id === account.id);
        if (player) store.dispatch(actions.setPlayer(player));
        if (v) ws.startInstanceStateTimeout(v.id);
-        if (v.phase === 'Lobby') store.dispatch(actions.setVboxHidden(true));
        return store.dispatch(actions.setInstance(v));
    }

--- a/client/src/reducers.jsx
+++ b/client/src/reducers.jsx
@ -13,26 +13,25 @@ function createReducer(defaultState, actionType) {
 module.exports = {
    account:            createReducer(null, 'SET_ACCOUNT'),
    activeCryp:         createReducer(null, 'SET_ACTIVE_CRYP'),
-    activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
    activeItem:         createReducer(null, 'SET_ACTIVE_VAR'),
+    activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
    combiner:           createReducer([null, null, null], 'SET_COMBINER'),
    cryps:              createReducer([], 'SET_CRYPS'),
    game:               createReducer(null, 'SET_GAME'),
    info:               createReducer(null, 'SET_INFO'),
-    itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
-    itemUnequip:       createReducer(null, 'SET_ITEM_UNEQUIP'),
    instance:           createReducer(null, 'SET_INSTANCE'),
    instances:          createReducer([], 'SET_INSTANCES'),
-    skip:               createReducer(false, 'SET_SKIP'),
+    itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
+    itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
+    itemUnequip:        createReducer(null, 'SET_ITEM_UNEQUIP'),
    nav:                createReducer(null, 'SET_NAV'),
    ping:               createReducer(null, 'SET_PING'),
    player:             createReducer(null, 'SET_PLAYER'),
    reclaiming:         createReducer(false, 'SET_RECLAIMING'),
    resolution:         createReducer(null, 'SET_RESOLUTION'),
-    team:               createReducer([null, null, null], 'SET_SELECTED_CRYPS'),
    showLog:            createReducer(false, 'SET_SHOW_LOG'),
-    vboxHidden:         createReducer(false, 'SET_VBOX_HIDDEN'),
+    skip:               createReducer(false, 'SET_SKIP'),
+    team:               createReducer([null, null, null], 'SET_SELECTED_CRYPS'),
    vboxHighlight:      createReducer([], 'SET_VBOX_HIGHLIGHT'),
-    itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
    ws:                 createReducer(null, 'SET_WS'),
 };