websocket basic setup FE & BE && working basic game w/ react && webpack & babel config

2016-10-01 21:49:15 +02:00
parent cc411a4a73
commit 8583be9d2a
17 changed files with 470 additions and 21 deletions
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
+++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
@@ -0,0 +1,160 @@
+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;