|
@@ -15,30 +15,23 @@ export default class StaffCredit extends React.Component {
|
|
|
super(props);
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
this.state = {
|
|
|
- isShow: false,
|
|
|
|
|
|
|
+ isShown: false,
|
|
|
userCommand: [],
|
|
userCommand: [],
|
|
|
};
|
|
};
|
|
|
this.konamiCommand = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', '5', '7', '3'];
|
|
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')
|
|
@keydown('enter', 'up', 'down', 'right', 'left', '5', '7', '3')
|
|
|
check(event) {
|
|
check(event) {
|
|
|
if (this.konamiCommand[this.state.userCommand.length] === event.key) {
|
|
if (this.konamiCommand[this.state.userCommand.length] === event.key) {
|
|
|
const nextValue = this.state.userCommand.concat(event.key);
|
|
const nextValue = this.state.userCommand.concat(event.key);
|
|
|
- // 最後のコナミコマンドならuserCommandをカラにしてコンポーネントを表示
|
|
|
|
|
if (nextValue.length === this.konamiCommand.length) {
|
|
if (nextValue.length === this.konamiCommand.length) {
|
|
|
this.setState({
|
|
this.setState({
|
|
|
- isShow: true,
|
|
|
|
|
|
|
+ isShown: true,
|
|
|
userCommand: [],
|
|
userCommand: [],
|
|
|
});
|
|
});
|
|
|
- // クレジットが流れ終わるタイミングでコンポーネントを削除
|
|
|
|
|
- (async() => {
|
|
|
|
|
- const delay = (time) => { return new Promise((res) => { return setTimeout(() => { return res() }, time) }) };
|
|
|
|
|
- await delay(15 * 1000);
|
|
|
|
|
- this.deleteCredit();
|
|
|
|
|
- })();
|
|
|
|
|
}
|
|
}
|
|
|
- // 入力されたコマンドがコナミコマンドの次のコマンドならuserCommandに追加
|
|
|
|
|
else {
|
|
else {
|
|
|
this.setState({ userCommand: nextValue });
|
|
this.setState({ userCommand: nextValue });
|
|
|
}
|
|
}
|
|
@@ -49,15 +42,15 @@ export default class StaffCredit extends React.Component {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
deleteCredit() {
|
|
deleteCredit() {
|
|
|
- if (this.state.isShow) {
|
|
|
|
|
- this.setState({ isShow: false });
|
|
|
|
|
|
|
+ if (this.state.isShown) {
|
|
|
|
|
+ this.setState({ isShown: false });
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
render() {
|
|
|
- if (this.state.isShow) {
|
|
|
|
|
|
|
+ if (this.state.isShown) {
|
|
|
return (
|
|
return (
|
|
|
- <div className="text-center credit-curtain">
|
|
|
|
|
|
|
+ <div className="text-center credit-curtain" onClick={this.deleteCredit}>
|
|
|
<div className="credit-body">
|
|
<div className="credit-body">
|
|
|
<p className="title my-5">Growi Soncho</p>
|
|
<p className="title my-5">Growi Soncho</p>
|
|
|
<span className="dev-position">1st</span>
|
|
<span className="dev-position">1st</span>
|