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

created basic game w/ table and animations

Browse Source
This commit is contained in:
Root
2016-10-11 22:11:21 +02:00
parent 8583be9d2a
commit 91bf6aa737
18 changed files with 327 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
View File

@@ -11,7 +11,11 @@ class GridControl extends React.Component {
this.state = {
grid: grid.state.grid,
updated: []
updated: [],
lastClicked: {
red: null,
blue: null
}
};
}
@@ -28,12 +32,13 @@ class GridControl extends React.Component {
var currentField = this.refs[this.refString(row, col)];
currentField.setState({
currentImage: this.state.grid[row][col],
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
* TODO 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 &&
@@ -99,17 +104,56 @@ class GridControl extends React.Component {
/**
* Player control method
* @param currentObject
* @param x
* @param y
*/
handlePlayers(currentObject) {
handleGridField(currentObject, x, y) {
var userControl = this.refs.userControl,
gridFieldControl = this.refs[this.refString(x, y)],
activePlayer = userControl.state.activePlayer ? 'blue' : 'red';
if (currentObject === 'm') {
userControl.refs[activePlayer].setState({
mines: userControl.refs[activePlayer].state.mines + 1
/** 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'
});
} else {
userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;
}
}
@@ -120,7 +164,7 @@ class GridControl extends React.Component {
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]]);
this.handleGridField(this.state.grid[coords[0]][coords[1]], coords[0], coords[1]);
}
renderGrid() {
@@ -131,7 +175,6 @@ class GridControl extends React.Component {
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])}

62
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js
View File

@@ -6,21 +6,71 @@ class GridField extends React.Component {
this.state = {
currentObj: 'w',
obj: this.props.obj,
active: false
currentImage: null,
active: false,
lastClickedRed: false,
lastClickedBlue: false,
icons: {
root: 'bundles/mineseeker/images/',
water: {
1: 'bg-wave-1-outbg.png',
2: 'bg-wave-1-outbg.png',
3: 'bg-wave-2-outbg.png'
},
flag: {
red: 'bg-flag-red-outbg.png',
blue: 'bg-flag-blue-outbg.png'
},
target: {
lastBlue: 'bg-last-blue-outbg.png',
lastRed: 'bg-last-red-outbg.png',
crosshair: 'bg-target-outbg.png',
crosshairBomb: 'bg-target-bomb-outbg.png'
}
}
};
}
isActive() {
componentWillMount() {
var wave = Math.floor(Math.random() * 3) + 1;
this.setState({
currentImage: this.state.icons.root + this.state.icons.water[wave]
});
}
classNameWhenActive() {
return 'field'
+ (this.state.active === true ? ' active' : '')
+ (this.state.active === true && this.state.obj === 'm' ? ' mine' : '');
+ (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
+ ' color-' + this.state.currentObj;
}
currentImage() {
return isNaN(this.state.currentImage)
? <div className="flag-mine"><img src={this.state.currentImage}/><div className="flag-mine-base"></div></div>
: this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
}
lastClickedRed() {
return 'field-red-last' + (this.state.lastClickedRed ? ' last-clicked' : '');
}
lastClickedBlue() {
return 'field-blue-last' + (this.state.lastClickedBlue ? ' last-clicked' : '');
}
render() {
return (
<div className={this.isActive()} onClick={this.props.onClick}>
{this.state.currentObj}
<div className="field-wrapper">
<img className="field-target" src="/bundles/mineseeker/images/bg-target-outbg.png" alt="target" onClick={this.props.onClick}/>
<img className={this.lastClickedRed()} src="/bundles/mineseeker/images/bg-last-red-outbg.png" alt="red last"/>
<img className={this.lastClickedBlue()} src="/bundles/mineseeker/images/bg-last-blue-outbg.png" alt="blue last"/>
<div className={this.classNameWhenActive()}>
<div className="field-corner">
{this.currentImage()}
</div>
</div>
</div>
);
}