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,
            updated: []
        };
    }

    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({
                currentObj: this.state.grid[row][col],
                active: true
            });

            /**
             * ez azért kell, mert amíg nem fut le a showAppropriateFields(), addig nem updatelődik a GridField.state
             */
            if (
                this.state.grid[row][col] !== 0 &&
                this.state.updated.indexOf(this.refString(row, col)) < 0 && !currentField.state.active
            ) {
                this.state.updated.push(this.refString(row, col));
            }

            if (
                this.state.grid[row][col] === 0 &&
                this.state.updated.indexOf(this.refString(row, col)) < 0 && !currentField.state.active
            ) {
                this.state.updated.push(this.refString(row, col));

                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.updated.indexOf(this.refString(row, col)) < 0) {
            this.state.updated.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
     */
    handlePlayers(currentObject) {
        var userControl = this.refs.userControl,
            activePlayer = userControl.state.activePlayer ? 'blue' : 'red';

        if (currentObject === 'm') {
            userControl.refs[activePlayer].setState({
                mines: userControl.refs[activePlayer].state.mines + 1
            });
        } else {
            userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;
        }
    }

    /**
     * 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.handlePlayers(this.state.grid[coords[0]][coords[1]]);
    }

    renderGrid() {
        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}
                               obj={this.state.grid[i][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.renderGrid()}
                </div>
            </div>
        );
    }
}

export default GridControl;