number-munchers/components/board/board.component.js

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

import { Component } from 'react';
import { connect } from 'react-redux';
import { getState } 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 Troggle from './troggle.component';

import Values from '../../reducers/Values';
import TroggleAI from '../../reducers/TroggleAI';
import { SETTINGS } from '../../App';

import * as BoardActions from '../../actions/board/board.actions';
import * as ScorebarActions from '../../actions/board/scorebar.actions';
import * as MessageActions from '../../actions/board/message.actions';
import * as MuncherActions from '../../actions/board/muncher.actions';
import * as TroggleActions from '../../actions/board/troggle.actions';

const troggleMoveTimers = [];
const troggleCreateTimers = [];

let listener = null;

export default class Board extends Component {
    componentDidMount() {
        listener = this.keydown.bind(this);
        window.addEventListener('keydown', listener);
        this.nextLevel();
    };

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

    nextLevel() {
        this.props.dispatch(BoardActions.nextLevel());
        this.props.dispatch(TroggleActions.clearAll());
        this.clearTroggleTimers();
        this.createTroggles();
    };

    clearTroggleTimers() {
        troggleMoveTimers.forEach((timer) => {
            clearTimeout(timer);
        });

        troggleCreateTimers.forEach((timer) => {
            clearTimeout(timer);
        });
    };

    createTroggle(index) {
        const newCoords = TroggleAI.create();
        this.props.dispatch(TroggleActions.create(newCoords.x, newCoords.y));
        troggleMoveTimers.push(setTimeout(this.moveTroggle.bind(this, index), 1000));
    };

    createTroggles() {
        const troggleCount = 3; //Math.min(Math.ceil(this.props.board.level / 2), 5);
        for (let i = 0; i < troggleCount; i++) {
            setTimeout(this.createTroggle.bind(this, i), (i + 1) * 5000);
        }
    };

    moveTroggle(index) {
        const newCoords = TroggleAI.move(
            this.props.troggles[index].x,
            this.props.troggles[index].y,
            this.props.muncher.x,
            this.props.muncher.y
        );

        if (newCoords.x === this.props.muncher.x && newCoords.y === this.props.muncher.y) {
            this.props.dispatch(MessageActions.show('Eaten by a troggle!'));
            this.props.dispatch(TroggleActions.clearAll());
        }
        else {
            this.props.dispatch(TroggleActions.move(index, newCoords.x, newCoords.y));
            clearTimeout(troggleMoveTimers[index]);
            troggleMoveTimers[index] = setTimeout(this.moveTroggle.bind(this, index), 1000);
        }
    };

    // Keydown listener for spacebar, since it is bound to munch event and
    // message hide event. Couldn't find a more modular way to do this.
    keydown(e) {
        if (e.keyCode !== 32) {
            return;
        }

        if (this.props.message.hidden === false) {
            this.props.dispatch(MessageActions.hide());
            this.props.dispatch(MuncherActions.unfreeze());

            if (Values.checkComplete(this.props.board.values, this.props.board.level)) {
                console.warn("NEXT LEVEL")
            }
        }
        else {
            const index = this.props.muncher.y * SETTINGS.GRID_HEIGHT + this.props.muncher.x
            const { board, dispatch } = this.props;

            if (board.values[index].valid) {
                dispatch(BoardActions.hideValue(index));
                dispatch(ScorebarActions.munchSucceeded());
            }
            else {
                const msg = Values.getError(board.values[index].value, board.level);
                dispatch(MessageActions.show(msg));
                dispatch(ScorebarActions.munchFailed());
                dispatch(MuncherActions.freeze());
            }

            if (Values.checkComplete(this.props.board.values, board.level)) {
                dispatch(MessageActions.exclaim());
            }
        }
    };

    render() {
        const { board, message, troggles } = this.props;
        const troggleElements = [];
        for (let i = 0; i < troggles.length; i++) {
            troggleElements.push(<Troggle x={troggles[i].x} y={troggles[i].y} key={i} />);
        }

        return (<div className='board'>
            <Scorebar />
            <Titlebar title={board.title} />
            <Message hidden={message.hidden} message={message.message} />
            <Muncher />
            {troggleElements}
            <Grid values={board.values} />
        </div>);
    };
};

const select = (state) => {
    return {
        board: state.board,
        muncher: state.muncher,
        message: state.message,
        troggles: state.troggles
    };
}

export default connect(select)(Board);