require('../../sass/welcome/welcome.scss');

import { Component } from 'react';
import { connect } from 'react-redux';
import * as creators from '../app/Creators.js';

import NewGame from './NewGame';
import HighScores from './HighScores';

let listener = null;

export class Welcome extends Component {
    handleKeydown(e) {
        if (e.keyCode === 32) {
            this.props.dispatch(creators.nextMode());
        }
    };

    componentDidMount() {
        listener = this.handleKeydown.bind(this);
        window.addEventListener('keydown', listener);
    };

    componentWillUnmount() {
        window.removeEventListener('keydown', listener);
    };

    render() {
        return (
            <div className='welcome'>
                <img src="res/title.png" />
                <NewGame />
                <HighScores />
            </div>
        );
    }
};

export default connect(() => ({}))(Welcome);