From 3f42fd24feadf555cf8f9511127325c0b147001f Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 16 Oct 2018 13:32:37 +1100
Subject: [PATCH] keyboard shortcuts

---
 client/package.json                       |  2 ++
 client/src/components/cryp.list.jsx       |  2 +-
 client/src/components/login.component.jsx |  2 +-
 client/src/keyboard.jsx                   | 18 ++++++++++++++++++
 client/src/main.jsx                       |  3 ++-
 server/WORKLOG.md                         |  3 ++-
 6 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 client/src/keyboard.jsx

diff --git a/client/package.json b/client/package.json
index 86eec3b0..eea90bd9 100755
--- a/client/package.json
+++ b/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"
diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx
index 843bfdeb..2dceedae 100644
--- a/client/src/components/cryp.list.jsx
+++ b/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>
diff --git a/client/src/components/login.component.jsx b/client/src/components/login.component.jsx
index 4a17ecde..85733c04 100644
--- a/client/src/components/login.component.jsx
+++ b/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
diff --git a/client/src/keyboard.jsx b/client/src/keyboard.jsx
new file mode 100644
index 00000000..ecc15f97
--- /dev/null
+++ b/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;
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 08c2fff1..dff59424 100755
--- a/client/src/main.jsx
+++ b/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 />
diff --git a/server/WORKLOG.md b/server/WORKLOG.md
index e190e8de..e53a0a72 100755
--- a/server/WORKLOG.md
+++ b/server/WORKLOG.md
@@ -17,7 +17,8 @@
     * offensive -> choose target
     * defensive
   * Items
-    * rez
+    * rez ✔
+    * unselect item with esc + button
     * Grid reroll
     * Colour scheme
   * Missions