keytracking fix - created instance variable and cleared it on compone…

…nt unmount
codephil-columbia · Jul 3, 2019 · 641278e · 641278e
1 parent d93d115
commit 641278e
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 193 deletions.
diff --git a/src/BoatGame.js b/src/BoatGame.js
@@ -15,21 +15,6 @@ class BoatGame extends Component{
         this.cache = new LocalStorageCache();
         this.gameService = new GameService();
 
-        this.endGames=this.endGames.bind(this)
-        this.exitMainPage=this.exitMainPage.bind(this)
-        this.incrementDifficulty=this.incrementDifficulty.bind(this)
-        this.totalTime=this.totalTime.bind(this)
-        this.showStatspage=this.showStatspage.bind(this)
-        this.parse=this.parse.bind(this)
-        this.cleanContent=this.cleanContent.bind(this)
-        this.playAgain=this.playAgain.bind(this)
-        this.setTotalWords=this.setTotalWords.bind(this)
-        this.limitWords=this.limitWords.bind(this)
-        this.setInitContent=this.setInitContent.bind(this)
-        this.setLimitedContent=this.setLimitedContent.bind(this)
-        this.assignPlayerPlace=this.assignPlayerPlace.bind(this)
-        this.recordHighScore = this.recordHighScore.bind(this);
-
         this.state={
             isPlayerReady:false,
             beginCountDown:false,
@@ -41,6 +26,7 @@ class BoatGame extends Component{
             originalContent:"",
             content:"",
             accuracy:0,
+            timeOutInstance:0,
             gameStart:false,
             playerPlace:0,
             playerDifficulty:1,
@@ -50,6 +36,8 @@ class BoatGame extends Component{
             username: this.cache.get("username"),
             headerLinks: ["Stats" ,"Games", "Learn", "Home"],
         };
+
+
     }
 
     async recordHighScore() {
@@ -70,10 +58,13 @@ class BoatGame extends Component{
         this.setInitContent(data.games.boatrace[randIndex])
     }
 
+    componentWillUnmount = () => {
+        clearTimeout(this.state.timeOutInstance)
+    }
 
     exitMainPage = (difficulty) => {
-        var diffString = difficulty
-        var diffNum = 1
+        let diffString = difficulty
+        let diffNum = 1
 
         if( diffString === "easy" ){
             diffNum = 1
@@ -198,28 +189,34 @@ class BoatGame extends Component{
     }
 
     totalTime = (time) => {
-        var minutes=time/60
+        let minutes=time/60
         this.setState({totalMinutes:minutes})
     }
 
     assignPlayerPlace = (position) => {
         this.setState({playerPlace:position})
     }
 
-    endGames= (state, time) => {
-        var minutes=time/60
-        var totalChars= state.incorrect.length + state.correct.length   
-        var playerAccuracy= Math.floor((1- state.incorrect.length/totalChars)*100)
-        var wpm = Math.floor(totalChars/(5*minutes))
-        this.setState({showSign:true,inputOff:true})
-        setTimeout(() => {
-            this.setState({
+    initiateTimeOut = (playerAccuracy,wpm) => {
+        return setTimeout(() => {
+          this.setState({
             playerHasLost:true,
             isPlayerReady:false,
             gameStart:false,
             accuracy:playerAccuracy,
-            wordsPerMinute:wpm,
-        })},6000)
+            wordsPerMinute:wpm
+          })
+        }, 6000);
+      }
+
+    endGames= (state, time) => {
+        let minutes=time/60
+        let totalChars= state.incorrect.length + state.correct.length   
+        let playerAccuracy= Math.floor((1- state.incorrect.length/totalChars)*100)
+        let wpm = Math.floor(totalChars/(5*minutes))
+        this.setState({showSign:true,inputOff:true})
+
+        this.setState({timeOutInstance:this.initiateTimeOut(playerAccuracy,wpm)})
     }
 
     showStatspage = () => {

diff --git a/src/CocoType.js b/src/CocoType.js
diff --git a/src/KeyTracking.js b/src/KeyTracking.js
@@ -22,27 +22,33 @@ class KeyTracking extends Component{
       isPlayerReady:false,
       beginCountDown:false,
       inputOff:false,
+      gameStart:false,
+      showMainPage:true,
+      showSign:false,
+      timeOutInstance:0,
       beginningDifficulty:1,
       totalMinutes:0,
       wordsPerMinute:0,
       accuracy:0,
-      gameStart:false,
       playerDifficulty:1,
-      showMainPage:true,
       username: this.cache.get("username"),
       headerLinks: ["Stats", "Games", "Learn", "Home"],
-      showSign:false,
       jsonArray:[],
       dataArray:[]
     };
 
     this.endGames = this.endGames.bind(this);
     this.exitMainPage = this.exitMainPage.bind(this);
     this.incrementDifficulty = this.incrementDifficulty.bind(this);
+    this.initiateTimeOut = this.initiateTimeOut.bind(this);
     this.totalTime = this.totalTime.bind(this);
     this.playAgain = this.playAgain.bind(this);
   }
 
+  componentWillUnmount(){
+    clearTimeout(this.state.timeOutInstance)
+  }
+
   exitMainPage = (difficulty) => {
     let diffString = difficulty
     let diffNum = 1
@@ -73,8 +79,18 @@ class KeyTracking extends Component{
     let minutes = time/60
     this.setState({totalMinutes:minutes})
   }
-
 
+  initiateTimeOut = (playerAccuracy,wpm) => {
+    return setTimeout(() => {
+      this.setState({
+        playerHasLost:true,
+        isPlayerReady:false,
+        gameStart:false,
+        accuracy:playerAccuracy,
+        wordsPerMinute:wpm
+      })
+    }, 6000);
+  }
 
   endGames = async (state, time) => {
     let minutes = time/60
@@ -89,15 +105,8 @@ class KeyTracking extends Component{
       { wpm, accuracy:playerAccuracy, level:this.state.playerDifficulty }
     );
 
-    setTimeout(() => {
-      this.setState({
-        playerHasLost:true,
-        isPlayerReady:false,
-        gameStart:false,
-        accuracy:playerAccuracy,
-        wordsPerMinute:wpm
-      })
-    }, 6000);
+    this.setState({timeOutInstance:this.initiateTimeOut(playerAccuracy,wpm)})
+
   }
 
   playAgain = () => {

diff --git a/src/SpaceraceGame.js b/src/SpaceraceGame.js
@@ -135,6 +135,7 @@ class SpaceraceGame extends React.Component {
       startPresses:0,
       totalCorrect:0,
       playerAccuracy:0,
+      timeOutInstance:0,
       ref1:0,
       ref2:0,
       ref3:0,
@@ -148,22 +149,23 @@ class SpaceraceGame extends React.Component {
       difficultySelected:"",
     } 
 
-    this.doesWordExist = this.doesWordExist.bind(this)
-    this.spawnRocket = this.spawnRocket.bind(this)
-    this.destroyRocket = this.destroyRocket.bind(this)
-    this.subtractLife = this.subtractLife.bind(this)
-    this.incrementDifficulty = this.incrementDifficulty.bind(this)
-    this.tick = this.tick.bind(this)
-    this.checkDifficultyIncrement = this.checkDifficultyIncrement.bind(this)
-    this.calculateStats = this.calculateStats.bind(this)
-    this.playAgain = this.playAgain.bind(this)
-    this.getParentDiv = this.getParentDiv.bind(this)
-    this.exitGame = this.exitGame.bind(this)
-    this.returnMainPage = this.returnMainPage.bind(this)
-    this.exitMainPage = this.exitMainPage.bind(this)
-    this.setAvailableWords = this.setAvailableWords.bind(this)
-    this.createStyler = this.createStyler.bind(this)
+    this.doesWordExist = this.doesWordExist.bind(this);
+    this.spawnRocket = this.spawnRocket.bind(this);
+    this.destroyRocket = this.destroyRocket.bind(this);
+    this.subtractLife = this.subtractLife.bind(this);
+    this.incrementDifficulty = this.incrementDifficulty.bind(this);
+    this.tick = this.tick.bind(this);
+    this.checkDifficultyIncrement = this.checkDifficultyIncrement.bind(this);
+    this.calculateStats = this.calculateStats.bind(this);
+    this.playAgain = this.playAgain.bind(this);
+    this.getParentDiv = this.getParentDiv.bind(this);
+    this.exitGame = this.exitGame.bind(this);
+    this.returnMainPage = this.returnMainPage.bind(this);
+    this.exitMainPage = this.exitMainPage.bind(this);
+    this.setAvailableWords = this.setAvailableWords.bind(this);
+    this.createStyler = this.createStyler.bind(this);
     this.recordHighScore = this.recordHighScore.bind(this);
+    this.initiateTimeOut = this.initiateTimeOut.bind(this);
 
     this.attachEventListener();
   }
@@ -174,6 +176,7 @@ class SpaceraceGame extends React.Component {
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.registerUserKeyPress);
+    clearTimeout(this.state.timeOutInstance)
   }
 
   exitMainPage = (difficulty) => {
@@ -314,6 +317,10 @@ class SpaceraceGame extends React.Component {
     }
   }
 
+  initiateTimeOut = () => {
+    return setTimeout(() => {this.setState({playerHasLost:true})},6000)
+  }
+
   subtractLife = () => {
     if (this.state.lives === 3){
       this.setState({live3: null})
@@ -330,7 +337,7 @@ class SpaceraceGame extends React.Component {
       clearInterval(this.state.ref3)
       document.removeEventListener("keydown", this.registerUserKeyPress);
       this.calculateStats()
-      setTimeout(() => {this.setState({playerHasLost:true})},6000)
+      this.setState({timeOutInstance:this.initiateTimeOut()})
     }
   }