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';

export class Welcome extends Component {
    handleKeydown(e) {
        if (e.keyCode === 32) {
            this.props.dispatch(creators.nextMode());
            //this.setState({ screen: 'board' });
        }
    };

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

    componentWillUnmount() {
        console.log('need to remove listener')
        // remove keydown listener
    };

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

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