require('../../sass/board/message.scss');

import { Component } from 'react';
import { connect } from 'react-redux';

export class Message extends Component {
    keydown(e) {
        if (e.keyCode === 32) {
            this.props.next();
        }
    };

    render() {
        var classname = ['message'];

        if (this.props.hidden === true) {
             classname.push('hidden');
        }

        return (
            <div className={classname.join(' ')} tabIndex='1' onKeyDown={this.keydown.bind(this)}>
                {this.props.message}
                <br />
                Press Spacebar to continue.
            </div>
        );
    };
};

const select = (state) => {
    return state.message;
}

export default connect(select)(Message);