import React from "react"; import ReactDOM from "react-dom"; import GameWin from "./Components/GameWin"; import WelcomeScreen from "./Components/WelcomeScreen"; import GameBoard from "./Components/GameBoard"; import "./styles.css"; class App extends React.Component { constructor() { super(); this.state = { hogOne: {}, hogTwo: {}, turn: 0, thisScore: 0, activePlayer: "", animated: false, pOneScore: 0, pOneName: "Player 1", pTwoScore: 0, pTwoName: "Player 2" }; this.handleClick = this.handleClick.bind(this); this.handleTurn = this.handleTurn.bind(this); this.gameReset = this.gameReset.bind(this); this.handleChange = this.handleChange.bind(this); this.returnHome = this.returnHome.bind(this); } handleChange = e => { const { name, value } = e.target; this.setState({ [name]: value }); }; returnHome = () => { this.setState({ activePlayer: "", hogOne: {}, hogTwo: {}, turn: 0, thisScore: 0, animated: false, pOneScore: 0, pTwoScore: 0 }); }; pigToss = () => { const pigOne = (Math.random() * 100).toFixed(1); let pOneLands = { score: 0, pic: "", position: "" }; if (pigOne <= 34) { pOneLands.position = "Spot Up"; pOneLands.pic = "/Img/spotup.png"; pOneLands.score = 0.25; } else if (pigOne <= 68) { pOneLands.position = "Spot Down"; pOneLands.pic = "/Img/spotdown.png"; pOneLands.score = 0.25; } else if (pigOne <= 76) { pOneLands.position = "RazerBack"; pOneLands.pic = "/Img/razorback.png"; pOneLands.score = 5; } else if (pigOne <= 86) { pOneLands.position = "Trotters"; pOneLands.pic = "/Img/trotter.png"; pOneLands.score = 5; } else if (pigOne <= 92) { pOneLands.position = "Snouter"; pOneLands.pic = "/Img/snouter.png"; pOneLands.score = 10; } else if (pigOne <= 95.9) { pOneLands.position = "Jouster"; pOneLands.pic = "/Img/jouster.png"; pOneLands.score = 15; } else if (pigOne <= 99.9) { pOneLands.position = "Touching"; pOneLands.pic = "/Img/spotup.png"; pOneLands.score = 0; } return pOneLands; }; gameStart = () => { this.setState(() => { return { activePlayer: "pOne" }; }); }; gameReset = () => { this.setState(() => { return { hogOne: {}, hogTwo: {}, turn: 0, thisScore: 0, animated: false, activePlayer: "pOne", pOneScore: 0, pTwoScore: 0 }; }); }; handleTurn = () => { this.setState(prevState => { let newPlayer = ""; let playerScore = 0; const currentScore = prevState.thisScore; if (prevState.activePlayer === "pOne") { newPlayer = "pTwo"; playerScore = prevState.pOneScore + currentScore; return { activePlayer: newPlayer, pOneScore: playerScore, thisScore: 0, turn: 0 }; } else if (prevState.activePlayer === "pTwo") { newPlayer = "pOne"; playerScore = prevState.pTwoScore + currentScore; return { activePlayer: newPlayer, pTwoScore: playerScore, thisScore: 0, turn: 0 }; } }); }; handleClick = () => { const hogOne = this.pigToss(); const hogTwo = this.pigToss(); this.setState({ animated: true }); let addScore = 0; if (hogOne.position === "Touching" || hogTwo.position === "Touching") { setTimeout( function() { this.setState(() => { return { thisScore: 0, animated: false }; }); this.handleTurn(); }.bind(this), 1001 ); } else if (hogOne.position === hogTwo.position) { addScore = (hogOne.score + hogTwo.score) * 2; } else if ( hogOne.position === "Spot Down" || hogOne.position === "Spot Up" ) { addScore = Math.floor(hogTwo.score); } else if ( hogTwo.position === "Spot Down" || hogTwo.position === "Spot Up" ) { addScore = Math.floor(hogOne.score); } else { addScore = hogOne.score + hogTwo.score; } setTimeout( function() { this.setState(prevState => { const newTurn = prevState.turn + 1; const newScore = prevState.thisScore + addScore; return { hogOne, hogTwo, turn: newTurn, thisScore: newScore, animated: false }; }); }.bind(this), 1001 ); }; render() { if (this.state.pOneScore >= 100 || this.state.pTwoScore >= 100) { return ( ); } else if (this.state.activePlayer === "") { return ( ); } else { return ( ); } } } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

Hand Hog