Merge pull request #971 from weseek/staff-credit-brushup

:new: スタッフロール機能を完成させる

src/client/js/components/StaffCredit/Contributor.js

@@ -0,0 +1,8 @@
+const contributors = [
+  [
+    { team: 'soncho', position: '1st', name: 'Sou Mizobuchi' },
+    { team: 'soncho', position: '2nd', name: 'Yusuke Takizawa' },
+  ],
+];
+
+module.exports = contributors;

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

@@ -15,26 +15,45 @@ export default class StaffCredit extends React.Component {
     super(props);
 
     this.state = {
+      isShown: false,
       userCommand: [],
     };
     this.konamiCommand = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', '5', '7', '3'];
+    this.deleteCredit = this.deleteCredit.bind(this);
   }
 
   @keydown('enter', 'up', 'down', 'right', 'left', '5', '7', '3')
   check(event) {
+    // compare keydown and next konamiCommand
     if (this.konamiCommand[this.state.userCommand.length] === event.key) {
-      this.setState({ userCommand: this.state.userCommand.concat(event.key) });
+      const nextValue = this.state.userCommand.concat(event.key);
+      if (nextValue.length === this.konamiCommand.length) {
+        this.setState({
+          isShown: true,
+          userCommand: [],
+        });
+      }
+      else {
+        // add UserCommand
+        this.setState({ userCommand: nextValue });
+      }
     }
     else {
+      // clear UserCommand
       this.state.userCommand = [];
     }
   }
 
+  deleteCredit() {
+    if (this.state.isShown) {
+      this.setState({ isShown: false });
+    }
+  }
+
   render() {
-    const isRender = this.state.userCommand.length === this.konamiCommand.length;
-    if (isRender) {
+    if (this.state.isShown) {
       return (
-        <div className="text-center credit-curtain">
+        <div className="text-center credit-curtain" onClick={this.deleteCredit}>
           <div className="credit-body">
             <p className="title my-5">Growi Soncho</p>
             <span className="dev-position">1st</span>

src/client/styles/scss/_staff_credit.scss

@@ -4,11 +4,11 @@
   color: white;
 
   .credit-curtain {
-    position: absolute;
-    top: 0%;
+    position: fixed;
+    top: 10vh;
     left: 20vh;
     width: 80vw;
-    height: 100vh;
+    height: 80vh;
     overflow-y: hidden;
     background-color: black;
   }