Merge pull request #955 from weseek/feat/add-keydown-event-listener

コナミコマンドが入力されたことを検知できる

.babelrc

@@ -3,7 +3,8 @@
     "lodash",
     ["transform-runtime", {
       "regenerator": true
-    }]
+    }],
+    ["transform-decorators-legacy"]
   ],
   "presets": [
     ["env", {

package.json

@@ -63,6 +63,7 @@
     "async": "^2.3.0",
     "aws-sdk": "^2.88.0",
     "axios": "^0.18.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "basic-auth-connect": "~1.0.0",
     "body-parser": "^1.18.2",
     "bunyan": "^1.8.12",
@@ -116,6 +117,7 @@
     "passport-saml": "^1.0.0",
     "passport-twitter": "^1.0.4",
     "react-dropzone": "^10.1.3",
+    "react-keydown": "^1.9.8",
     "rimraf": "^2.6.1",
     "slack-node": "^0.1.8",
     "socket.io": "^2.0.3",

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import keydown from 'react-keydown';
 
 /**
  * Page staff credit component
@@ -7,12 +8,35 @@ import React from 'react';
  * @class StaffCredit
  * @extends {React.Component}
  */
+
 export default class StaffCredit extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userCommand: [],
+    };
+    this.konamiCommand = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', '5', '7', '3'];
+  }
+
+  @keydown('enter', 'up', 'down', 'right', 'left', '5', '7', '3')
+  check(event) {
+    if (this.konamiCommand[this.state.userCommand.length] === event.key) {
+      this.setState({ userCommand: this.state.userCommand.concat(event.key) });
+    }
+    else {
+      this.state.userCommand = [];
+    }
+  }
+
   render() {
-    return (
-      <div>スタッフロール</div>
-    );
+
+    const isRender = this.state.userCommand.length === this.konamiCommand.length;
+    if (isRender) {
+      return <div>スタッフロール</div>;
+    }
+    return null;
   }
 
 }

yarn.lock

@@ -1056,6 +1056,11 @@ babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
 
+babel-plugin-syntax-decorators@^6.1.18:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+  integrity sha1-MSVjtNvePMgGzuPkFszurd0RrAs=
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -1080,6 +1085,15 @@ babel-plugin-transform-async-to-generator@^6.22.0:
     babel-plugin-syntax-async-functions "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-decorators-legacy@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.5.tgz#0e492dffa0edd70529072887f8aa86d4dd8b40a1"
+  integrity sha512-jYHwjzRXRelYQ1uGm353zNzf3QmtdCfvJbuYTZ4gKveK7M9H1fs3a5AKdY1JUDl0z97E30ukORW1dzhWvsabtA==
+  dependencies:
+    babel-plugin-syntax-decorators "^6.1.18"
+    babel-runtime "^6.2.0"
+    babel-template "^6.3.0"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -1382,14 +1396,14 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.24.1, babel-template@^6.26.0:
+babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.3.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies:
@@ -8631,6 +8645,13 @@ react-is@^16.8.1:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
 
+react-keydown@^1.9.8:
+  version "1.9.8"
+  resolved "https://registry.yarnpkg.com/react-keydown/-/react-keydown-1.9.8.tgz#2c11cf82b43aa57aec48539419c8f5f1d4008809"
+  integrity sha512-l/dg9ggAtY1lpBJ7+/YUuAzQJjfpwk/um3Eq+OjiS5i7MEXj0Q2dIT6FaNoPY7Fn3OYpwFwhyr5bnu1EoUHckg==
+  dependencies:
+    core-js "^2.5.0"
+
 react-overlays@^0.8.0, react-overlays@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.8.3.tgz#fad65eea5b24301cca192a169f5dddb0b20d3ac5"