styles and vbox sort

html-client/src/components/game.container.jsx

@@ -0,0 +1,51 @@
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const Game = require('./game.component');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, game, account, activeSkill, activeIncoming } = state;
+
+        function selectSkillTarget(targetCrypId) {
+            if (activeSkill) {
+                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
+            }
+            return false;
+        }
+
+        // intercept self casting skills
+        if (activeSkill && activeSkill.skill.self_targeting) {
+            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
+        }
+
+        function selectIncomingTarget(crypId) {
+            if (activeIncoming) {
+                return ws.sendGameTarget(game.id, crypId, activeIncoming);
+            }
+            return false;
+        }
+
+        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setActiveSkill(crypId, skill) {
+            dispatch(actions.setActiveSkill(crypId, skill));
+        }
+
+        function setActiveIncoming(skillId) {
+            dispatch(actions.setActiveIncoming(skillId));
+        }
+
+        function quit() {
+            dispatch(actions.setGame(null));
+        }
+
+        return { setActiveSkill, setActiveIncoming, quit };
+    }
+
+);
+
+module.exports = addState(Game);

html-client/src/components/instance.component.jsx

@@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
 
-        return <button key={i} className="cryp-skill-btn" onClick={() => setInfo('item', s)}>{s}</button>;
+        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('item', s)}>{s}</button>;
     });
 
     // needed for ondrop to fire

html-client/src/components/vbox.component.jsx

@@ -151,7 +151,7 @@ function Vbox(args) {
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxCombine()}>
-                repurpose
+                refine
             </button>
             {combinerElement}
         </div>