3,531 compiled.js
View file

Large diffs are not rendered by default.

203 components/App.js
View file
@@ -3,141 +3,102 @@ var Grid = require('react-bootstrap').Grid;
var Row = require('react-bootstrap').Row;
var Col = require('react-bootstrap').Col;
var ReactDOM = require('react-dom');
var Players = require('./Players');
var ScoreBoard = require('./ScoreBoard');
var DartBoard = require('./DartBoard');
var Contestants = require('./Contestants');
var MyModal = require('./MyModal');
var Finishes = require('./Finishes');
var RoundScore = require('./RoundScore');
var Players = require('./Players');
var PlayerModal = require('./PlayerModal');
var Alert = require('react-bootstrap/lib/Alert');
var WinModal = require('./WinModal');
var App = React.createClass({
getInitialState: function() {
getInitialState: function() {
return {
players: [],
score:[],
roundScore:[],
turn : 0,
gameOn: false,
gameOnElements:[],
modalIsOpen:false,
checkout:[],
isDouble:false
players:[],
score : undefined,
isDouble:false,
gameOver:false,
winner:undefined

};
},
addPlayer: function(name){
this.state.players.push(name.name);
this.setState({players:this.state.players});
},
addScore: function(value){
var letter = value.score[0];
var mult = 0;
this.state.isDouble = false;
if(letter == 's'){
mult = 1;
}
else if(letter == 'd'){
mult = 2;
this.state.isDouble = true;
}
else if(letter == 't'){
mult = 3;
}
else{
mult = 0;
}
var score = mult * value.score.substring(1);
if(isNaN(score)) {
score = 0;
}
this.state.roundScore.push(score);
this.setState({roundScore:this.state.roundScore});
console.log(this.state.turn);
this.updateScore();
},
checkWin: function(oldScore,newScore){
if(oldScore-newScore<0 || oldScore-newScore === 1){
for(var i = 0; i<3;i++){
this.state.roundScore.push(0);
if(this.state.roundScore.length===3){
break;
}
}
return oldScore;
newGame: function(){
this.setState({
turn : 0,
gameOn: false,
players:[],
score : undefined,
isDouble:false,
gameOver:false,
winner:undefined

});
},
addScore: function(value){
var letter = value.score[0];
var mult = 0;
this.state.isDouble = false;
if(letter == 's'){
mult = 1;
}
else if(letter == 'd'){
mult = 2;
this.state.isDouble = true;
}
else if(oldScore-newScore === 0){
if(this.state.isDouble){
this.setState({modalIsOpen: true});
return oldScore-newScore;
}
else{
return oldScore;
}

//return oldScore-newScore;
else if(letter == 't'){
mult = 3;
}
else{
return oldScore-newScore;
mult = 0;
}
var score = mult * value.score.substring(1);
if(isNaN(score)) {
score = 0;
}
this.setState({score:score, isDouble:this.state.isDouble});
},
addPlayer: function(name){
this.state.players.push(name.name);
this.setState({players:this.state.players});
},
startGame: function(){
this.setState({gameOn:true});
},
changeTurn: function(value){
if(this.value != undefined){
this.setState({turn:this.value.id});
}
this.state.score = undefined;
if(this.state.turn == this.state.players.length-1)this.setState({turn:0});
else{
this.setState({turn:this.state.turn+1});
}
},
updateScore: function(){
var totScore = 0;
var turn = this.state.turn;
for(var i = 0; i<this.state.roundScore.length;i++){
totScore += this.state.roundScore[i];
}
var oldScore = this.state.score[turn][this.state.score[turn].length-1];
var newScore = this.checkWin(oldScore,totScore);
this.setState({checkout:<Finishes dartsLeft={3-this.state.roundScore.length} score={newScore}/>});

if(this.state.roundScore.length == 3){
this.state.score[turn].push(newScore);
this.setState({score:this.state.score});
this.setState({roundScore:[]});
if(this.state.turn == this.state.players.length-1){
this.state.turn = 0;
}
else{
this.state.turn+=1;
}
this.setState({turn:this.state.turn});
}
},
startGame: function(value){
this.setState({gameOn:true});
//this.setState({modalIsOpen:true});
for(var i = 0; i<this.state.players.length;i++){
this.state.score.push([301]);
}
},

editPlayers: function(players){
var state = this.state;
var pos = players.pos;
this.setState(players => {
state.players.splice(pos, 1);
return {items: state.players};
});
gameOver: function(result){
this.setState({winner : this.state.players[result.id], gameOver: true})
},
render(){
return (
<Grid>
<Row>
<Col md={12}> <h1>Dart Waiter</h1></Col>
</Row>
<Row>
<Col xs={12} sm={8} md={8}>
<DartBoard gameOn = {this.state.gameOn} onHit = {this.addScore}/>
</Col>
<Col xs={6} sm={4} md={4}>
<Players onNameSubmit = {this.addPlayer} gameOn = {this.startGame}/>
<ScoreBoard gameOn = {this.state.gameOn} score = {this.state.score} turn = {this.state.turn} roundScore = {this.state.roundScore} players = {this.state.players}/>
{this.state.checkout}
</Col>
</Row>
<MyModal modalIsOpen={this.state.modalIsOpen}/>
</Grid>
);
}
return (
<Grid>
<Row>
<Col md={12}> <h1>Dart Waiter</h1></Col>
</Row>
<Row>
<Col xs={12} md={8}>
<DartBoard gameOn = {this.state.gameOn} onHit = {this.addScore}/>
</Col>
<Col xs={12} md={4}>
<Players showInput = {this.state.gameOn} onNameSubmit = {this.addPlayer} gameOn = {this.startGame} />
<PlayerModal name = {this.state.players[0]} playerID = {0} turn = {this.state.turn} score = {this.state.score} onChangeTurn = {this.changeTurn}
gameOn={this.state.gameOn} isDouble = {this.state.isDouble} gameOver={this.gameOver} />

<PlayerModal name = {this.state.players[1]} playerID = {1} turn = {this.state.turn} score = {this.state.score} onChangeTurn = {this.changeTurn}
gameOn={this.state.gameOn} isDouble = {this.state.isDouble} gameOver={this.gameOver}/>
</Col>
<WinModal show={this.state.gameOver} name = {this.state.winner} newGame = {this.newGame}/>
</Row>
</Grid>
);
}

});

35 components/Contestants.js
View file

This file was deleted.

3 components/DartBoard.js
View file
@@ -801,8 +801,7 @@ var DartBoard = React.createClass({
<path id = "t11" fill-rule="evenodd" clip-rule="evenodd" fill="#1BA9A6" d="M279.995,500.947c-0.145-10.31,0.753-20.548,2.021-30.768
c0.246-1.98,0.871-2.765,3.014-2.344c3.969,0.781,7.987,1.319,11.987,1.94c1.196,0.186,1.788,0.41,1.55,2.034
c-2.847,19.48-2.831,38.979-0.018,58.467c0.133,0.926,0.368,1.559-0.963,1.751c-4.622,0.67-9.227,1.454-13.835,2.216
c-2.125,0.352-1.517-1.455-1.634-2.309c-1.243-9.038-2.092-18.112-2.121-27.246C279.993,503.44,279.997,502.193,279.995,500.947z"
/>
c-2.125,0.352-1.517-1.455-1.634-2.309c-1.243-9.038-2.092-18.112-2.121-27.246C279.993,503.44,279.997,502.193,279.995,500.947z"/>
<path id = "t20" fill-rule="evenodd" clip-rule="evenodd" fill="#EB6001" d="M501.16,296.46c-9.836-0.083-19.617,0.677-29.344,2.08
c-1.361,0.197-1.611-0.041-1.795-1.369c-0.606-4.364-1.353-8.713-2.195-13.039c-0.352-1.808,0.728-1.889,1.913-2.041
c8.425-1.083,16.87-1.873,25.373-2.062c12.334-0.275,24.604,0.385,36.835,1.985c1.99,0.26,2.504,0.791,2.01,2.933
28 components/Finishes.js
View file
@@ -1,6 +1,7 @@
var React = require('react');
var tripleOut = require('./tripleOut.json');
var doubleOut = require('./doubleOut.json');
var singleOut = require('./singleOut.json');
var Finishes = React.createClass({
getInitialState: function() {
return {
@@ -9,29 +10,40 @@ var Finishes = React.createClass({
},
render(){
var hit = false;
if(this.props.dartsLeft===3){
for(var i in tripleOut){
if(tripleOut[i].score == this.props.score){
this.state.body = <p>Checkout : {tripleOut[i].Checkout}</p>;
hit = true;
if(this.props.dartsLeft>=1){
for(var i in singleOut){
if(singleOut[i].score == this.props.score){
this.state.body = <p>Checkout : {singleOut[i].checkout}</p>;
hit = true;
break;
}
}
}
else if(this.props.dartsLeft===2){
if(!hit && this.props.dartsLeft>=2){
for(var i in doubleOut){
if(doubleOut[i].score == this.props.score){
console.log("here : ",this.props.score,doubleOut[i].score);
this.state.body = <p>Checkout : {doubleOut[i].checkout}</p>;
hit = true;
break;
}
}
}
if(!hit && this.props.dartsLeft==3){
for(var i in tripleOut){
if(tripleOut[i].score == this.props.score){
this.state.body = <p>Checkout : {tripleOut[i].checkout}</p>;
hit = true;
break;
}
}
}

if(!hit){
return false;
}
else{
return (
<div>
<div id="finish">
{this.state.body}
</div>
);
42 components/MyModal.js
View file

This file was deleted.

145 components/PlayerModal.js
View file
@@ -0,0 +1,145 @@
var React = require('react');
var Finishes = require('./Finishes');

var PlayerModal = React.createClass({
getInitialState: function() {
return {
scoreLeft:301,
history: [],
round:[],
gameOn:false,
avgScore:undefined,
avgRoundScore:undefined,
noRounds:0,
undo:false,
dartString:""
};
},

lastThree: function(listi){
var last = [];
if(listi.length<=0)return last;

for(var i = listi.length-3; i<listi.length; i++){
last.push(listi[i]);
}
return last;
},

doUndo: function(){
var undoValue = this.state.history[this.state.history.length-1];
if(this.state.history.length<=0)return;
this.state.history.pop();
var newRounds = Math.floor(this.state.history.length/3)*3;
var thisRound = [];
for(var i = newRounds; i<this.state.history.length; i++){
thisRound.push(this.state.history[i]);
}
if(thisRound.length>0){
this.state.round = thisRound;
}
else{
this.state.round = this.lastThree(this.state.history);
}
//this.state.scoreLeft = this.state.scoreLeft+undoValue;
this.setState({scoreLeft: this.state.scoreLeft+undoValue, undo: true, round: this.state.round});
},

doFocus: function(){
if(this.props.turn != this.props.playerID){
this.props.onChangeTurn({id:this.props.playerID});
}
},
clearPlayer: function(){

},

shouldComponentUpdate: function(nextProps, nextState) {
if(nextProps.gameOn !== this.props.gameOn && !nextProps.gameOn){
this.setState({
scoreLeft:301,
history: [],
round:[],
gameOn:false,
avgScore:undefined,
avgRoundScore:undefined,
noRounds:0,
undo:false,
dartString:""
});
}
return true;
},
render(){
if(this.props.turn == this.props.playerID && this.props.gameOn && this.props.score != undefined){
if(!this.state.undo){

this.state.scoreLeft = this.state.scoreLeft-this.props.score;
this.state.history.push(this.props.score);
this.state.round.push(this.props.score);
if(this.state.scoreLeft <= 1){
if(this.state.scoreLeft == 0 && this.props.isDouble){
this.props.gameOver({id : this.props.playerID});
}
else{
this.state.scoreLeft = this.state.scoreLeft+this.props.score
}
}
}
}
if(this.state.round.length>0) this.state.dartString = <p>Recent darts : {this.state.round.join(", ")}</p>
if(this.state.round.length == 3){
this.state.round = [];
this.props.onChangeTurn();
}

var avgScore = 0;
for(var i in this.state.history){
avgScore += this.state.history[i];
}
this.state.avgScore = parseFloat(avgScore/this.state.history.length).toFixed(2);
var noRounds = Math.floor(this.state.history.length/3);
this.state.noRounds = noRounds;
if(noRounds>0){
var avgRoundScore = 0;
for(var i = 0; i<noRounds*3;i++){
avgRoundScore+=this.state.history[i];
}
this.state.avgRoundScore = parseFloat(avgRoundScore/noRounds).toFixed(2);
}
this.state.undo = false;

if(this.props.turn == this.props.playerID && this.props.gameOn){
var ActiveOrNot = "snip1082 blue active";
}
else{
var ActiveOrNot = "snip1082 blue";
}
console.log(this.state.avgScore);
var xxx = this.state.avgScore;
if(this.state.history.length>0)var showAvg = <p>Avg dart score : {this.state.avgScore}</p>;
if(this.state.noRounds>0)var showRoundScore = <p>Avg round score : {this.state.avgRoundScore}</p>;

if(this.props.name){

return(
<figure className={ActiveOrNot}>
<div id="notimg" >
<h2>{this.state.scoreLeft}</h2>
<p>Darts left : {3-this.state.round.length}</p>
{showAvg}
{showRoundScore}
{this.state.dartString}
<p>Rounds done : {this.state.noRounds}</p>
<Finishes score ={this.state.scoreLeft} dartsLeft={3-this.state.round.length}/>
</div>
<h3> <span>{this.props.name}</span></h3>
<div id="hoverDiv"><a onClick={this.doUndo}><i className="ion-ios-arrow-back"></i></a><a onClick={this.doFocus}><i className="ion-arrow-expand"></i></a></div>
</figure>
)}
else{
return false;
}
}
});
module.exports = PlayerModal;
39 components/Players.js
View file
@@ -13,37 +13,48 @@ var Players = React.createClass({
},
handleSubmit: function(event) {
event.preventDefault();
if(this.state.name.trim() !==""){

if(this.state.name.trim() !=="" && this.state.players.length<2){
this.state.players.push(this.state.name);
this.props.onNameSubmit({name: this.state.name});
this.setState({name:""});
//this.getDOMNode().focus();
}
this.setState({name:""});
},

gameStartSubmit: function(){
if(this.state.players.length){
this.setState({gameOn:true});
this.props.gameOn({value:true})
}
},
shouldComponentUpdate: function(nextProps, nextState) {
if(nextProps.showInput !== this.props.showInput && !nextProps.showInput){
this.setState({
players:[],
name: "",
gameOn: false
});
}
return true;
},
render(){
if(!this.state.gameOn){
if(!this.props.showInput){
return (
<div>
<form onSubmit={this.handleSubmit}>
<div className="input-group">
<form onSubmit={this.handleSubmit}>
<div className="input-group">
<input autoFocus className="form-control" type="text" value={this.state.name} placeholder = "Name" onChange={this.handleChange} />
<span className="input-group-btn">
<button type="submit" className="btn btn-primary" ><span className="glyphicon glyphicon-plus"></span></button>
<button type="button" className="btn btn-success" onClick={this.gameStartSubmit}><span className="glyphicon glyphicon-play"></span></button>
</span>
</div>
</form>
<button type="submit" className="btn btn-primary" ><span className="glyphicon glyphicon-plus"></span></button>
<button type="button" className="btn btn-success" onClick={this.gameStartSubmit}><span className="glyphicon glyphicon-play"></span></button>
</span>
</div>
</form>
</div>
);
}else{
return false;
}
}
else{
return false;}
}
});
module.exports = Players;
16 components/RoundScore.js
View file

This file was deleted.

54 components/ScoreBoard.js
View file

This file was deleted.

30 components/WinModal.js
View file
@@ -0,0 +1,30 @@
var React = require('react');
var Modal = require('react-bootstrap').Modal;
var WinModal = React.createClass({
getInitialState: function() {
return {
showModal: false,
close:false
};
},

close: function() {
this.setState({ showModal: false,close:true });
this.props.newGame({id:this.props.playerID});
},
render(){
if(!this.state.close){
this.state.showModal = this.props.show;
}
return(
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Body>
<h1>{this.props.name} wins!</h1>
</Modal.Body>
<Modal.Footer>
<button onClick={this.close}>Close</button>
</Modal.Footer>
</Modal>
)}
});
module.exports = WinModal;
23 components/singleOut.json
View file
@@ -0,0 +1,23 @@
[
{"score":50 ,"checkout":"DB"},
{"score":40 ,"checkout":"D20"},
{"score":38 ,"checkout":"D19"},
{"score":36 ,"checkout":"D18"},
{"score":34 ,"checkout":"D17"},
{"score":32 ,"checkout":"DB"},
{"score":30 ,"checkout":"D15"},
{"score":28 ,"checkout":"D14"},
{"score":26 ,"checkout":"D13"},
{"score":24 ,"checkout":"D12"},
{"score":22 ,"checkout":"D11"},
{"score":20 ,"checkout":"D10"},
{"score":18 ,"checkout":"D9"},
{"score":16 ,"checkout":"D8"},
{"score":14 ,"checkout":"D7"},
{"score":12 ,"checkout":"D6"},
{"score":10 ,"checkout":"D5"},
{"score":8 ,"checkout":"D4"},
{"score":6 ,"checkout":"D3"},
{"score":4 ,"checkout":"D2"},
{"score":2 ,"checkout":"D1"}
]
3 index.html
View file
@@ -5,7 +5,10 @@
<title>Your First Webapp With React</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
</head>
<body>

2 package.json
View file
@@ -12,7 +12,7 @@
"author": "Tutorialzine",
"license": "MIT",
"dependencies": {
"react": "^0.14.2",
"react": "^0.14.3",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-modal": "^0.6.1",