SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

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

Browse Source
This commit is contained in:
Root
2016-10-01 21:49:15 +02:00
parent cc411a4a73
commit 8583be9d2a
17 changed files with 470 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css Normal file
View File

@@ -0,0 +1,32 @@
#mine-wrapper,
#mine-wrapper * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#mine-wrapper .grid {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 642px;
border: 1px solid red;
}
#mine-wrapper .grid .field {
background: #fff;
width: 40px;
height: 40px;
border: 1px solid red;
}
#mine-wrapper .grid .field.active {
background: blue;
color: #FFFFFF;
}
#mine-wrapper .grid .field.active.mine {
background: red;
color: #FFFFFF;
}

8
src/Mine/SeekerBundle/Resources/public/js/mine-seeker.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import MineSeeker from './mine-seeker/app';
ReactDOM.render(
<MineSeeker />,
document.getElementById('mine-wrapper')
);

21
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import GridControl from './grid/grid-control';
class MineSeeker extends React.Component {
// /** after rendering */
// componentDidMount() {
// this.connection = new WebSocket('ws://127.0.0.1:8080');
//
// this.connection.onmessage = evt => {
// // console.log(evt.data);
// };
// }
render() {
return (
<GridControl ref="gridControl"/>
);
}
}
export default MineSeeker;

160
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js Normal file
View File

@@ -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;

29
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
class GridField extends React.Component {
constructor(props) {
super(props);
this.state = {
currentObj: 'w',
obj: this.props.obj,
active: false
};
}
isActive() {
return 'field'
+ (this.state.active === true ? ' active' : '')
+ (this.state.active === true && this.state.obj === 'm' ? ' mine' : '');
}
render() {
return (
<div className={this.isActive()} onClick={this.props.onClick}>
{this.state.currentObj}
</div>
);
}
}
export default GridField;

101
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid.js Normal file
View File

@@ -0,0 +1,101 @@
import React from 'react';
class Grid extends React.Component {
constructor() {
super();
this.state = {
row: 16,
col: 16,
mines: 51,
set: []
};
this.state.grid = this.numberingGrid(
this.createGrid(
this.shuffleSet(
this.createSet(
this.state.set
)
)
)
);
}
createSet(obj) {
for (var i = 0, j = this.state.row * this.state.col; i < j; i++) {
obj.push(
this.state.mines > 0
? "m"
: "w"
);
this.state.mines--;
}
return obj;
}
shuffleSet(obj) {
return obj.sort(function () {
return Math.round(Math.random()) - .5;
});
}
createGrid(obj) {
var grid = [[]],
row = 0,
col = 0;
for (var i = 0, j = obj.length; i < j; i++) {
grid[row][col] = obj[i];
if (col === 15 && row !== 15) {
row++;
col = 0;
grid.push([]);
} else {
col++;
}
}
return grid;
}
checkMine(field, i, j) {
return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] === 'm';
}
isThereMine(obj, row, col) {
if (this.checkMine(obj, row, col)) {
return 1;
}
return 0;
}
numberingGrid(obj) {
var nbr = 0;
for (var i = 0; i < this.state.row; i++) {
for (var j = 0; j < this.state.col; j++) {
if (obj[i][j] === 'w') {
nbr = 0;
nbr += this.isThereMine(obj, i - 1, j);
nbr += this.isThereMine(obj, i - 1, j - 1);
nbr += this.isThereMine(obj, i - 1, j + 1);
nbr += this.isThereMine(obj, i, j - 1);
nbr += this.isThereMine(obj, i, j + 1);
nbr += this.isThereMine(obj, i + 1, j);
nbr += this.isThereMine(obj, i + 1, j + 1);
nbr += this.isThereMine(obj, i + 1, j - 1);
obj[i][j] = nbr;
}
}
}
return obj;
}
}
export default Grid;

28
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user-control.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import User from './user';
class UserControl extends React.Component {
constructor() {
super();
/**
* activePlayer - red: 0, blue: 1
* @type {{activePlayer: number, mines: number}}
*/
this.state = {
activePlayer: 0,
mines: 51
};
}
render() {
return (
<div>
<User ref="blue" name={this.props.blue}/>
<User ref="red" name={this.props.red}/>
</div>
);
}
}
export default UserControl;

23
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
name: this.props.name,
bomb: 1,
mines: 0
}
}
render() {
return (
<div>
{this.state.name}: {this.state.mines}
</div>
);
}
}
export default User;