keyboard shortcuts

client/package.json

@@ -15,6 +15,8 @@
     "bulma-toast": "^1.2.0",
     "docco": "^0.7.0",
     "jdenticon": "^2.1.0",
+    "key": "^0.1.11",
+    "keymaster": "^1.6.2",
     "preact": "^8.3.1",
     "preact-redux": "^2.0.3",
     "redux": "^4.0.0"

client/src/components/cryp.list.jsx

@@ -9,7 +9,7 @@ function CrypList({ cryps, activeItem, sendCombatPve, sendItemUse }) {
             className="tile is-vertical box"
             style={activeItem ? { cursor: 'pointer' } : {}}
             onClick={() => sendItemUse(cryp.id)} >
-            <div className="tile is-vertical is-child">
+            <div className="tile is-child">
                 <div className="columns" >
                     <div className="column is-10">
                         <p className="title">{cryp.name}</p>

client/src/components/login.component.jsx

@@ -43,7 +43,7 @@ function renderLogin({ account, submitLogin }) {
             <div className="field">
                 <p className="control">
                     <button
-                        className="button is-dark"
+                        className="button inverted"
                         type="submit"
                         onClick={() => submitLogin(details.name, details.password)}>
                         Login

client/src/keyboard.jsx

@@ -0,0 +1,18 @@
+const key = require('keymaster');
+const { connect } = require('preact-redux');
+const actions = require('./actions');
+
+console.log(key);
+
+function setupKeys(store) {
+    store.subscribe(function mapKeys() {
+        const state = store.getState();
+
+        key.unbind('esc');
+        if (state.activeItem) {
+            key('esc', () => store.dispatch(actions.setActiveItem(null)));
+        }
+    });
+}
+
+module.exports = setupKeys;

client/src/main.jsx

@@ -6,6 +6,7 @@ const { createStore, combineReducers } = require('redux');
 
 const reducers = require('./reducers');
 const actions = require('./actions');
+const setupKeys = require('./keyboard');
 // const fizzyText = require('../lib/fizzy-text');
 const createSocket = require('./socket');
 
@@ -25,6 +26,7 @@ const store = createStore(
 );
 
 store.subscribe(() => console.log(store.getState()));
+setupKeys(store);
 
 const ws = createSocket(store);
 store.dispatch(actions.setWs(ws));
@@ -36,7 +38,6 @@ jdenticon.config = {
     replaceMode: 'observe',
 };
 
-
 const Cryps = () => (
     <section>
         <Header />

server/WORKLOG.md

@@ -17,7 +17,8 @@
     * offensive -> choose target
     * defensive
   * Items
-    * rez
+    * rez ✔
+    * unselect item with esc + button
     * Grid reroll
     * Colour scheme
   * Missions