get rid of unneccessary keycode package

package-lock.json

@@ -5472,11 +5472,6 @@
         "object.assign": "^4.1.1"
       }
     },
-    "keycode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
-      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
-    },
     "kuler": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",

package.json

@@ -45,7 +45,6 @@
     "ip-address": "^7.1.0",
     "isomorphic-fetch": "^3.0.0",
     "js-file-download": "^0.4.12",
-    "keycode": "^2.1.9",
     "localforage": "^1.9.0",
     "morgan": "^1.10.0",
     "multer": "^1.4.1",

src/controls/PixelPainterControls.js

@@ -1,11 +1,12 @@
 /*
- * Creates Viewport for 2D Canvas
+ * Controls for 2D canvases
+ *
+ * keycodes:
+ * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
  *
  * @flow
  */
 
-import keycode from 'keycode';
-
 import {
   setHover,
   unsetHover,
@@ -444,9 +445,9 @@ class PixelPlainterControls {
   }
 
   onKeyUp(event: KeyboardEvent) {
-    switch (keycode(event)) {
+    switch (event.key) {
-      case 'shift':
+      case 'Shift':
-      case 'caps lock':
+      case 'CapsLock':
         this.holdPainting = false;
         break;
       default:
@@ -461,22 +462,21 @@ class PixelPlainterControls {
       return;
     }
     const { store } = this;
-    const key = keycode(event);
 
-    switch (key) {
+    switch (event.key) {
-      case 'up':
+      case 'ArrowUp':
       case 'w':
         store.dispatch(moveNorth());
         break;
-      case 'left':
+      case 'ArrowLeft':
       case 'a':
         store.dispatch(moveWest());
         break;
-      case 'down':
+      case 'ArrowDown':
       case 's':
         store.dispatch(moveSouth());
         break;
-      case 'right':
+      case 'ArrowRight':
       case 'd':
         store.dispatch(moveEast());
         break;
@@ -488,19 +488,27 @@ class PixelPlainterControls {
       case 'q':
         store.dispatch(zoomOut());
         break;
-      case 'ctrl':
+      case 'Control':
-      case 'shift': {
+      case 'Shift': {
         const state = store.getState();
         const { hover } = state.gui;
         if (hover) {
-          if (key === 'ctrl') {
+          if (event.key === 'Control') {
+            // ctrl
             const clrIndex = this.renderer.getColorIndexOfPixel(...hover);
             if (clrIndex !== null) {
               store.dispatch(selectColor(clrIndex));
             }
-          } else {
+            return;
+          }
+          if (event.location === KeyboardEvent.DOM_KEY_LOCATION_LEFT) {
+            // left shift
             this.holdPainting = true;
             PixelPlainterControls.placePixel(store, this.renderer, hover);
+            return;
+          }
+          if (event.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT) {
+            // right shift
           }
         }
         break;

src/controls/keypress.js

@@ -2,8 +2,6 @@
  * keypress actions
  * @flow
  */
-import keycode from 'keycode';
-
 import store from '../ui/store';
 import copy from '../utils/clipboard';
 import {
@@ -24,7 +22,7 @@ function onKeyPress(event: KeyboardEvent) {
     return;
   }
 
-  switch (keycode(event)) {
+  switch (event.key) {
     case 'g':
       store.dispatch(toggleGrid());
       break;