React-raphael-mine-sweeping NPM

react-raphael-mine-sweeping

so easy! create mine sweeping game with react-raphael!

Install

# or specify the externals in webpack config
npm install --save raphael
# install react-raphael-mine-sweeping in your react-raphael-mine-sweeping project
npm install --save react-raphael-mine-sweeping

Quickly Start

var React = require('react');
var ReactDOM = require('react-dom');
var MineSweeping = require('react-raphael-mine-sweeping');
	
class MineSweepingApp extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			mineCount: 60,
			xSize: 24,
			ySize: 24,
			openSum: 24 * 24,
			closeSum: 0
		}
	}
    replay(){
        this.refs.mine.replay();
		this.setState({
			openSum: 24 * 24,
			closeSum: 0
		})
    }
	handleClick(context){
		this.setState({
			openSum: context.openSum,
			closeSum: context.closeSum
		})
	}
    render(){
		var {mineCount,openSum,closeSum} = this.state;
        return (<div>
        <div>
                <button onClick={this.replay.bind(this)}>replay</button>
                <span>open box count:</span>
                <span>{openSum}</span>
                <span>close box count:</span>
                <span>{closeSum}</span>
                <span>mine count:</span>
                <span>{mineCount}</span>
        </div>        
        <MineSweeping ref="mine" mineCount={60} xSize={24} ySize={24} onClick={this.handleClick.bind(this)}/>
        </div>)
    }
}

ReactDOM.render(<div>
                <MineSweepingApp />
                </div>,document.getElementById("react-container"));

API

All Mine Sweeping Props

mineCount number mine count of the game
xSize number column count of the boxs
ySize number row count of the boxs
onClick function click event of the game context=>{x,y,models,openSum,closeSum}