From 57291f888a711c9bf1629587676323adcba58a81 Mon Sep 17 00:00:00 2001 From: Nicole Date: Thu, 5 Nov 2015 14:07:49 -0800 Subject: [PATCH 1/4] add scores --- app.js.jsx | 47 ++++++++++++++++++++++++++++++++++++++++------- index.css | 10 +++++++--- 2 files changed, 47 insertions(+), 10 deletions(-) diff --git a/app.js.jsx b/app.js.jsx index 2dbfefd..d525b8e 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 { @@ -6,7 +12,13 @@ window.App = React.createClass({ showNotif: false, notif: "", gameWon: false - } + }; + }, + + componentDidMount: function() { + this.startTime = Date.now(); + this.highScore = 0; + this.badSets = 0; }, gameWon: function () { @@ -27,7 +39,7 @@ window.App = React.createClass({ duplicate = true; isASet = false; } - }) + }); this.handleCurrentSetStatus(isASet, duplicate); }, @@ -39,7 +51,7 @@ window.App = React.createClass({ this.setState({ buildingSet: [], showNotif: true, - notif: "Found a set!", + notif: "Found a set! Current score: " + this.calculateScore(), gameWon: gameStatus }); } else { @@ -47,7 +59,8 @@ window.App = React.createClass({ if (dup) { notif = "You already found that set."; } else { - notif = "That's not a set."; + this.badSets ++; + notif = "That's not a set. -50 points"; } this.setState({ @@ -75,10 +88,27 @@ window.App = React.createClass({ this.forceUpdate(); }, + calculateScore: function() { + var score = this.finishTimeInSeconds() / this.state.setsFound.length; // avg ms per currently discovered set + score = parseInt(TOP_SCORE / score); + if (score > this.highScore) {this.highScore = score;} + return score - (this.badSets * BAD_SET_PENALTY); + }, + + finishTimeInSeconds: function() { + return (Date.now() - this.startTime) / 1000; + }, + renderModal: function () { if (this.state.gameWon) { startParade(); - return + var winMessage = +
+

You won!



+ Your Score: {this.calculateScore()}

+ High Score: {this.highScore} +
; + return } }, @@ -107,12 +137,15 @@ window.App = React.createClass({ } }, + totalSets: function(){ + return this.props.cards.solution.length; + }, + render: function () { - var totalSets = this.props.cards.solution.length; return (
- Found {this.state.setsFound.length} set(s) out of {totalSets}. + Found {this.state.setsFound.length} set(s) out of {this.totalSets()}.
{this.state.notif}
{this.renderModal()} diff --git a/index.css b/index.css index 5ed4c9b..fc5bc09 100644 --- a/index.css +++ b/index.css @@ -140,6 +140,10 @@ body { top: 180px; } +.won-modal { + font-size: 22px; +} + .instruction-box { width: 800px; height: 422px; @@ -158,9 +162,9 @@ body { .modal-message { position: absolute; - top: 80px; - font-size: 60px; - left: 100px; + top: 50px; + font-size: 15px; + left: 36%; } .instructions { From 7db866cd8d1837a4d6ee2606733f4b5f69b79e9c Mon Sep 17 00:00:00 2001 From: Nicole Date: Thu, 5 Nov 2015 14:25:09 -0800 Subject: [PATCH 2/4] add running score to game view; style winning modal --- app.js.jsx | 13 +++++++++---- index.css | 13 +++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/app.js.jsx b/app.js.jsx index d525b8e..d97ce02 100644 --- a/app.js.jsx +++ b/app.js.jsx @@ -11,7 +11,8 @@ window.App = React.createClass({ buildingSet: [], showNotif: false, notif: "", - gameWon: false + gameWon: false, + score: 0 }; }, @@ -51,7 +52,7 @@ window.App = React.createClass({ this.setState({ buildingSet: [], showNotif: true, - notif: "Found a set! Current score: " + this.calculateScore(), + notif: "Found a set!", gameWon: gameStatus }); } else { @@ -63,10 +64,13 @@ window.App = React.createClass({ notif = "That's not a set. -50 points"; } + var currentScore = this.calculateScore(); + this.setState({ buildingSet: [], showNotif: true, - notif: notif + notif: notif, + score: currentScore }); } }, @@ -145,7 +149,8 @@ window.App = React.createClass({ return (
- Found {this.state.setsFound.length} set(s) out of {this.totalSets()}. + Found {this.state.setsFound.length} set(s) out of {this.totalSets()}.

+ Score: {this.state.score}
{this.state.notif}
{this.renderModal()} diff --git a/index.css b/index.css index fc5bc09..1841be7 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 { @@ -142,6 +144,9 @@ body { .won-modal { font-size: 22px; + padding: 1px; + margin-top: -30px; + text-align: center; } .instruction-box { @@ -164,7 +169,7 @@ body { position: absolute; top: 50px; font-size: 15px; - left: 36%; + left: 35%; } .instructions { @@ -173,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; From 665ff581660b1a7ea2a3d3ad13a5c9fd9071fb37 Mon Sep 17 00:00:00 2001 From: Nicole Date: Thu, 5 Nov 2015 16:34:57 -0800 Subject: [PATCH 3/4] fix running score reporting; modal styling needs work --- app.js.jsx | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/app.js.jsx b/app.js.jsx index d97ce02..15ce021 100644 --- a/app.js.jsx +++ b/app.js.jsx @@ -22,8 +22,8 @@ window.App = React.createClass({ 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; @@ -46,33 +46,33 @@ window.App = React.createClass({ }, 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!"; } else { - var notif; if (dup) { notif = "You already found that set."; } else { this.badSets ++; notif = "That's not a set. -50 points"; } - - var currentScore = this.calculateScore(); - - this.setState({ - buildingSet: [], - showNotif: true, - notif: notif, - score: currentScore - }); } + this.setState({ + buildingSet: [], + showNotif: true, + notif: notif, + setsFound: setsFound, + gameWon: gameStatus + }); + this.updateScore(); + }, + + updateScore: function() { + this.setState({score: this.calculateScore()}); }, handleClick: function (cardValue) { From e740a24d1378d71ccf46f9930698e55ea96563c8 Mon Sep 17 00:00:00 2001 From: Nicole Date: Sun, 22 Nov 2015 10:10:32 -0800 Subject: [PATCH 4/4] replace scores with average times --- app.js.jsx | 44 +++++++++++++++++++++++++++++--------------- index.css | 2 +- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/app.js.jsx b/app.js.jsx index 15ce021..3563a20 100644 --- a/app.js.jsx +++ b/app.js.jsx @@ -12,14 +12,14 @@ window.App = React.createClass({ showNotif: false, notif: "", gameWon: false, - score: 0 + averageTime: "" }; }, componentDidMount: function() { this.startTime = Date.now(); - this.highScore = 0; - this.badSets = 0; + this.bestTime = ""; + // this.badSets = 0; }, gameWon: function (setsFound) { @@ -30,6 +30,13 @@ window.App = React.createClass({ } }, + 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, @@ -53,12 +60,13 @@ window.App = React.createClass({ setsFound.push(this.state.buildingSet); gameStatus = this.gameWon(setsFound); notif = "Found a set!"; + this.updateScore(); } else { if (dup) { notif = "You already found that set."; } else { this.badSets ++; - notif = "That's not a set. -50 points"; + notif = "That's not a set."; } } this.setState({ @@ -68,11 +76,10 @@ window.App = React.createClass({ setsFound: setsFound, gameWon: gameStatus }); - this.updateScore(); }, updateScore: function() { - this.setState({score: this.calculateScore()}); + this.setState({averageTime: this.calculateScore()}); }, handleClick: function (cardValue) { @@ -93,14 +100,17 @@ window.App = React.createClass({ }, calculateScore: function() { - var score = this.finishTimeInSeconds() / this.state.setsFound.length; // avg ms per currently discovered set - score = parseInt(TOP_SCORE / score); - if (score > this.highScore) {this.highScore = score;} - return score - (this.badSets * BAD_SET_PENALTY); + 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; }, - finishTimeInSeconds: function() { - return (Date.now() - this.startTime) / 1000; + lastFinishTimeInSeconds: function() { + var latestTime = (Date.now() - this.startTime) / 1000; + this.startTime = Date.now(); + return latestTime; }, renderModal: function () { @@ -109,8 +119,8 @@ window.App = React.createClass({ var winMessage =

You won!



- Your Score: {this.calculateScore()}

- High Score: {this.highScore} + Time Per Set: {this.calculateScore() + " seconds"}

+ Best Time Per Set: {this.calculateBestTime() + " seconds"}
; return } @@ -146,11 +156,15 @@ window.App = React.createClass({ }, render: function () { + 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 {this.totalSets()}.

- Score: {this.state.score} + {avgTime}
{this.state.notif}
{this.renderModal()} diff --git a/index.css b/index.css index 1841be7..2ce704f 100644 --- a/index.css +++ b/index.css @@ -169,7 +169,7 @@ body { position: absolute; top: 50px; font-size: 15px; - left: 35%; + left: 50px } .instructions {