diff --git a/app.js.jsx b/app.js.jsx index 2dbfefd..3563a20 100644 --- a/app.js.jsx +++ b/app.js.jsx @@ -1,3 +1,9 @@ +// points deducted for each bad guess +var BAD_SET_PENALTY = 50; +// will be divided by average solve time in seconds +// +var TOP_SCORE = 60000; + window.App = React.createClass({ getInitialState: function () { return { @@ -5,18 +11,32 @@ window.App = React.createClass({ buildingSet: [], showNotif: false, notif: "", - gameWon: false - } + gameWon: false, + averageTime: "" + }; + }, + + componentDidMount: function() { + this.startTime = Date.now(); + this.bestTime = ""; + // this.badSets = 0; }, - gameWon: function () { - if (this.state.setsFound.length == this.props.cards.solution.length) { + gameWon: function (setsFound) { + if (setsFound.length == this.props.cards.solution.length) { return true; } else { return false; } }, + calculateBestTime: function() { + if (this.bestTime === "" || this.state.averageTime < this.bestTime) { + this.bestTime = this.state.averageTime; + } + return this.bestTime; + }, + checkCurrentSet: function () { var set = this.state.buildingSet, duplicate = false, @@ -27,35 +47,39 @@ window.App = React.createClass({ duplicate = true; isASet = false; } - }) + }); this.handleCurrentSetStatus(isASet, duplicate); }, handleCurrentSetStatus: function (status, dup) { + var notif; + var setsFound = this.state.setsFound; + var gameStatus = this.state.gameStatus; if (status) { - this.state.setsFound.push(this.state.buildingSet); - var gameStatus = this.gameWon(); - this.setState({ - buildingSet: [], - showNotif: true, - notif: "Found a set!", - gameWon: gameStatus - }); + setsFound.push(this.state.buildingSet); + gameStatus = this.gameWon(setsFound); + notif = "Found a set!"; + this.updateScore(); } else { - var notif; if (dup) { notif = "You already found that set."; } else { + this.badSets ++; notif = "That's not a set."; } - - this.setState({ - buildingSet: [], - showNotif: true, - notif: notif - }); } + this.setState({ + buildingSet: [], + showNotif: true, + notif: notif, + setsFound: setsFound, + gameWon: gameStatus + }); + }, + + updateScore: function() { + this.setState({averageTime: this.calculateScore()}); }, handleClick: function (cardValue) { @@ -75,10 +99,30 @@ window.App = React.createClass({ this.forceUpdate(); }, + calculateScore: function() { + var totalTime = (Date.now() - this.startTime) / 1000; // avg seconds per currently discovered set + console.log("total time: " + totalTime); + var avgTime = totalTime / this.state.setsFound.length; + console.log(avgTime); + return avgTime; + }, + + lastFinishTimeInSeconds: function() { + var latestTime = (Date.now() - this.startTime) / 1000; + this.startTime = Date.now(); + return latestTime; + }, + renderModal: function () { if (this.state.gameWon) { startParade(); - return + var winMessage = +
+

You won!



+ Time Per Set: {this.calculateScore() + " seconds"}

+ Best Time Per Set: {this.calculateBestTime() + " seconds"} +
; + return } }, @@ -107,12 +151,20 @@ window.App = React.createClass({ } }, + totalSets: function(){ + return this.props.cards.solution.length; + }, + render: function () { - var totalSets = this.props.cards.solution.length; + var avgTime; + if (this.state.setsFound.length > 0) { + avgTime = Time Per Set: {this.state.averageTime} seconds + } return (
- Found {this.state.setsFound.length} set(s) out of {totalSets}. + Found {this.state.setsFound.length} set(s) out of {this.totalSets()}.

+ {avgTime}
{this.state.notif}
{this.renderModal()} diff --git a/index.css b/index.css index 5ed4c9b..2ce704f 100644 --- a/index.css +++ b/index.css @@ -109,6 +109,8 @@ body { color: #ccc; position: absolute; right: 10px; + top: -15px; + padding-bottom: 10px; } .sets-found { @@ -140,6 +142,13 @@ body { top: 180px; } +.won-modal { + font-size: 22px; + padding: 1px; + margin-top: -30px; + text-align: center; +} + .instruction-box { width: 800px; height: 422px; @@ -158,9 +167,9 @@ body { .modal-message { position: absolute; - top: 80px; - font-size: 60px; - left: 100px; + top: 50px; + font-size: 15px; + left: 50px } .instructions { @@ -169,11 +178,11 @@ body { .play-again { position: absolute; - bottom: 100px; - left: 170px; + bottom: 50px; + left: 39%; + font-weight: bold; } - .play-again:hover { cursor: pointer; text-decoration: underline;