moar

client/assets/styles/instance.css

@@ -41,6 +41,7 @@
     display: flex;
     flex-flow: column;
     justify-content: center;
+    white-space: pre-wrap;
 }
 
 .instance .cryps {

client/src/components/info.component.jsx

@@ -1,7 +1,7 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { ITEMS: { SPECS: SPEC_CONSTANT } } = require('./../constants');
+const { ITEMS: { SPECS: SPEC_CONSTANT }, INFO } = require('./../constants');
 const { COLOUR_ICONS, convertItem } = require('../utils');
 
 function Info(args) {
@@ -16,7 +16,8 @@ function Info(args) {
 
     function Info() {
         if (!info) return false;
-        const fullInfo = itemInfo.items.find(i => i.item === info);
+        const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
+        console.log(INFO);
         if (!fullInfo) return false;
         const isSkill = fullInfo.skill;
         const isSpec = fullInfo.spec;
@@ -34,7 +35,7 @@ function Info(args) {
         if (isSkill) {
             return (
                 <div className="info-skill">
-                    <div>{fullInfo.item}</div>
+                    <h2>{fullInfo.item}</h2>
                     <div>{fullInfo.description}</div>
                 </div>
             );
@@ -84,7 +85,8 @@ function Info(args) {
 
         return (
             <div className="info-item">
-                {fullInfo.item} - {fullInfo.description}
+                <h2>{fullInfo.item}</h2>
+                <div>{fullInfo.description}</div>
             </div>
         );
     }

client/src/components/instance.container.jsx

@@ -1,29 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Instance = require('./instance.component');
-
-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,
-        };
-    }
-);
-
-module.exports = addState(Instance);

client/src/components/instance.equip.jsx

@@ -49,6 +49,8 @@ function Equipment(props) {
 
         itemInfo,
         sendUnequip,
+
+        setInfo,
     } = props;
 
     const { vbox } = player;
@@ -101,15 +103,20 @@ function Equipment(props) {
         } return false;
     });
 
+    function hoverInfo(e, info) {
+        e.stopPropagation();
+        return setInfo(info);
+    }
+
     return (
         <div className="equip" >
-            <div className={skillClass} onClick={e => unequipClick(e)}>
+            <div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
                 <h3>Skills</h3>
                 <div className ="items">
                     {skills}
                 </div>
             </div>
-            <div className={specClass} onClick={e => unequipClick(e)}>
+            <div className={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
                 <h3>Specs</h3>
                 <div className ="items">
                     {specs}

client/src/components/nav.jsx

@@ -63,7 +63,7 @@ function Nav(args) {
         setTestInstance,
     } = args;
 
-    const joined = instances.map((i, j) => (
+    const joined = instances.map(i => (
         <button key={i.id} onClick={() => sendInstanceState(i)} >{i.name}</button>
     ));
 

client/src/components/vbox.component.jsx

@@ -169,7 +169,7 @@ function Vbox(args) {
 
                 // onClick={freeClick}
                 onDblClick={() => sendVboxAccept(j, i) }
-                onMouseOver={(e) => vboxHover(e, c)}
+                onMouseOver={e => vboxHover(e, c)}
                 >
                 {convertItem(c)}
             </td>;
@@ -273,18 +273,24 @@ function Vbox(args) {
         return setReclaiming(!reclaiming);
     }
 
+    function hoverInfo(e, info) {
+        e.stopPropagation();
+        return setInfo(info);
+    }
+
     const classes = `vbox`;
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
         <div className={classes}>
-            <div className='vbox-box' onClick={() => setReclaiming(false)} >
+            <div className='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
                 <div className="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
                     <div className="bits" >{vbox.bits}b</div>
                 </div>
                 <button
                     className="instance-btn instance-ui-btn vbox-btn"
+                    onMouseOver={e => hoverInfo(e, 'reroll')}
                     onClick={() => sendVboxDiscard()}>
                     Reroll
                 </button>
@@ -294,10 +300,11 @@ function Vbox(args) {
                     </tbody>
                 </table>
             </div>
-            <div className='vbox-inventory' onClick={() => setReclaiming(false)} >
+            <div className='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
                 <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                 <button
                     className={reclaimClass}
+                    onMouseOver={e => hoverInfo(e, 'reclaim')}
                     onClick={reclaimClick}>
                     reclaim
                 </button>
@@ -307,10 +314,11 @@ function Vbox(args) {
                     </tbody>
                 </table>
             </div>
-            <div className="vbox-combiner">
+            <div className="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
                 <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
                 <button
                     className="instance-btn instance-ui-btn vbox-btn"
+                    onMouseOver={e => hoverInfo(e, 'refine')}
                     onClick={() => sendVboxCombine()}>
                     refine
                 </button>

client/src/constants.jsx

@@ -6,6 +6,41 @@ module.exports = {
         POST_SKILL: 500,
     },
 
+    INFO: {
+        vbox: {
+            item: 'VBOX',
+            description: 'Contains items that are available for you to buy.\nDouble-click to purchase.',
+        },
+        inventory: {
+            item: 'INVENTORY',
+            description: 'Holds purchased items.',
+        },
+        combiner: {
+            item: 'I-COMBINATOR',
+            description: 'Combines purchased items into more powerful variants. Hover over an item to see recipes.',
+        },
+        reclaim: {
+            item: 'RECLAIM',
+            description: 'Reclaim items for half the purchase cost of their combined items.\nClick to enable and click item to reclaim.',
+        },
+        refine: {
+            item: 'REFINE',
+            description: 'Refine items currently in I-COMBINATOR into more powerful variants',
+        },
+        reroll: {
+            item: 'REROLL',
+            description: 'Refill the VBOX with new items.\nCosts 5b.',
+        },
+        equipSkills: {
+            item: 'QUICK ACCESS - SKILLS',
+            description: 'Click to select \nClick target Cryp to equip',
+        },
+        equipSpecs: {
+            item: 'QUICK ACCESS - SPECS',
+            description: 'Click to select \nClick target Cryp to equip',
+        },
+    },
+
     ITEMS: {
         SKILLS: {
             Amplify: {
@@ -21,7 +56,6 @@ module.exports = {
             Banish: {
                 description: 'target cryp is prevented from casting any skills and taking any damage',
                 colours: '1 Red 1 Green',
-
             },
 
             Blast: {