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

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

import Scorebar from './scorebar.component';
import Titlebar from './titlebar.component';
import Grid from './grid.component';
import Message from './message.component';
import Muncher from './muncher.component';
import Troggles from './troggles.component';

import BoardCtrl from '../../controllers/board/board.controller';

let listener;

export class Board extends Component {
    componentDidMount() {
        BoardCtrl.setDispatch(this.props.dispatch);
        BoardCtrl.nextLevel();

        listener = BoardCtrl.keyListener.bind(BoardCtrl);
        window.addEventListener('keydown', listener);
    };

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

    render() {
        return (<div className='board'>
            <Scorebar />
            <Muncher />
            <Message />
            <Titlebar />
            <Grid />
            <Troggles />
        </div>);
    };
};

export default connect()(Board)