MineSeeker/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js

import React from 'react';
import Grid from './grid';
import GridField from './grid-field';
import UserControl from '../user/user-control';

class GridControl extends React.Component {
    constructor() {
        super();

        var grid = new Grid();

        this.state = {
            grid: grid.state.grid,
            updatedFieldCache: [],
            lastClicked: {
                red: null,
                blue: null
            }
        };
    }

    refString(row, col) {
        return 'gridField_' + row + '_' + col;
    }

    checkMine(field, i, j) {
        return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] !== 'm';
    }

    checkNeighbourItem(row, col) {
        if (this.checkMine(this.state.grid, row, col)) {
            var currentField = this.refs[this.refString(row, col)];

            currentField.setState({
                currentImage: this.state.grid[row][col],
                currentObj: this.state.grid[row][col],
                active: true
            });

            /**
             * It must be cached because the GridField.state not updated until
             * all showAppropriateFields() method runned out!!
             */
            if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0 && !currentField.state.active) {
                this.state.updatedFieldCache.push(this.refString(row, col));

                if (this.state.grid[row][col] === 0) {
                    return {
                        row: row,
                        col: col
                    };
                }
            }
        }

        return false;
    }

    checkNeighbours(row, col) {
        var anotherFields = [];

        anotherFields.push(this.checkNeighbourItem(row - 1, col));
        anotherFields.push(this.checkNeighbourItem(row - 1, col - 1));
        anotherFields.push(this.checkNeighbourItem(row - 1, col + 1));
        anotherFields.push(this.checkNeighbourItem(row, col - 1));
        anotherFields.push(this.checkNeighbourItem(row, col + 1));
        anotherFields.push(this.checkNeighbourItem(row + 1, col));
        anotherFields.push(this.checkNeighbourItem(row + 1, col + 1));
        anotherFields.push(this.checkNeighbourItem(row + 1, col - 1));

        return anotherFields;
    }

    showAppropriateFields(currentField, row, col) {
        currentField.setState({
            currentObj: this.state.grid[row][col],
            active: true
        });

        if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) {
            this.state.updatedFieldCache.push(this.refString(row, col));
        }

        if (this.state.grid[row][col] === 0) {
            var neighbours = this.checkNeighbours(row, col);

            neighbours
                .filter((i) => {
                    return i !== false;
                })
                .forEach((element, index, array) => {
                    var currentField = this.refs[this.refString(element.row, element.col)];
                    this.showAppropriateFields(currentField, element.row, element.col);
                });
        }
    }

    /**
     * Player control method
     * @param currentObject
     * @param x
     * @param y
     */
    handleGridField(currentObject, x, y) {
        var userControl = this.refs.userControl,
            gridFieldControl = this.refs[this.refString(x, y)],
            activePlayer = userControl.state.activePlayer ? 'blue' : 'red';

        /** update last cliked grid field */
        if (this.state.lastClicked[activePlayer] !== null) {
            this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
                lastClickedRed: false,
                lastClickedBlue: false
            });
        }

        if (!gridFieldControl.state.active) {
            this.state.lastClicked[activePlayer] = [x, y];

            /** If you found mine */
            if (currentObject === 'm') {
                userControl.setState({
                    mines: userControl.state.mines - 1
                });

                userControl.refs[activePlayer].setState({
                    mines: userControl.refs[activePlayer].state.mines + 1
                });

                this.state.lastClicked[activePlayer] = [x, y];

                gridFieldControl.setState({
                    currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
                });
            } else {
                userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;

                /** It is a number */
                if (!isNaN(currentObject)) {
                    gridFieldControl.setState({
                        currentImage: currentObject
                    });
                }
            }

            /** set-up last clicked */
            gridFieldControl.setState({
                lastClickedRed: activePlayer === 'red',
                lastClickedBlue: activePlayer === 'blue'
            });
        }
    }

    /**
     * Most important event!!
     * @param coords
     */
    onClick(coords) {
        var currentField = this.refs[this.refString(coords[0], coords[1])];
        this.showAppropriateFields(currentField, coords[0], coords[1]);
        this.handleGridField(this.state.grid[coords[0]][coords[1]], coords[0], coords[1]);
    }

    renderGridFields() {
        var grid = [];

        for (var i = 0, j = this.state.grid.length; i < j; i++) {
            for (var k = 0, l = this.state.grid[i].length; k < l; k++) {
                grid.push(
                    <GridField row={i}
                               col={k}
                               ref={this.refString(i, k)}
                               key={i + k * Math.random() * 0.5}
                               onClick={this.onClick.bind(this, [i, k])}
                    />
                );
            }
        }

        return grid;
    }

    render() {
        return (
            <div className="game-wrapper">
                <div className="users">
                    <UserControl ref="userControl" blue="Olcsó János" red="Eszet Lenke"/>
                </div>
                <div className="grid">
                    {this.renderGridFields()}
                </div>
            </div>
        );
    }
}

export default GridControl;