From 8b88e750afe782cecdcc391f5bbc4def7382adf4 Mon Sep 17 00:00:00 2001
From: Karsten Rabe <karstenrabe91@gmail.com>
Date: Fri, 18 Oct 2019 22:30:41 -0400
Subject: [PATCH 1/2] Disable the input field when game is won or time is up

---
 src/App.js   | 243 ++++++++++++++++++++++++++++-----------------------
 src/Timer.js | 143 +++++++++++++++---------------
 2 files changed, 203 insertions(+), 183 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7500a45..c14b765 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,13 +15,35 @@ class App extends React.Component {
       userMax: '',
       error: null,
       counter: 1,
-
-          };
+      win: false,
+      stop: false
+    };
   }
 
   generateRandomNumber(min = 0, max = 10) {
     return Math.floor(Math.random() * (max - min) + min);
-    
+
+  }
+
+  winUpdater = () => {
+    this.setState({
+      win: true,
+      stop: true
+    });
+  }
+
+  winUpdater = () => {
+    this.setState({
+      win: true,
+      stop: true
+    });
+  }
+
+  winUpdater = () => {
+    this.setState({
+      win: true,
+      stop: true
+    });
   }
 
   componentDidMount() {
@@ -29,14 +51,14 @@ class App extends React.Component {
   }
 
   handleUserInput(e) {
-    this.setState( { guessInput: e.target.value } );
+    this.setState({ guessInput: e.target.value });
   }
 
   handleRangeInput(e) {
     let { name, value } = e.target;
     console.log(name, value);
     this.setState({ [name]: parseInt(value) });
-    
+
   }
 
   handleRangeClick = e => {
@@ -44,19 +66,19 @@ class App extends React.Component {
     this.setState({
       min: this.state.userMin,
       max: this.state.userMax,
-      //userMax: '',
-      //userMin: '',
       randomNumber: this.generateRandomNumber(this.state.userMin, this.state.userMax)
-    },() =>{
-      this.refs.child.startTimer(); 
-  });
-}//() => {
+    }, () => {
       // start the game once you have your random number!
-      handleGuessClick() {
-    
+      this.refs.child.startTimer();
+    });
+  }
+
+  handleGuessClick() {
+    // this.refs.child.startTimer();
+    // This should be moved to the submit button maybe?
     this.setState({
       guess: parseInt(this.state.guessInput),
-      counter:this.state.counter + 1,
+      counter: this.state.counter + 1,
       guessInput: ''
     });
     this.displayMessage();
@@ -75,143 +97,142 @@ class App extends React.Component {
       message: '',
       min: 0,
       max: 10,
-     
-    } )  
-    window.location.reload(false)    
-      };
-    displayMessage() {
-      let userGuess = parseInt(this.state.guessInput);
-     let min = this.state.min;
-      let max = this.state.max;
-     
-      if ( userGuess > max || userGuess < min) {
-        const mes=`value must be between ${this.state.min} and ${this.state.max} `
-        this.setState({
-          message:mes,
-          counter:this.state.counter + 1
-        });
-      }
-      else if ( userGuess === this.state.randomNumber ) {
-       const mes= `YOU WON! In ${this.state.counter} Attempts in
-        ${this.refs.child.timecounter} seconds!!!`
-        console.log('CLEAR int: ', this.refs.child.timer);
-       
-        this.setState({
-          message: mes,
-          min: min = 0,
-          max: max = 10,
-          time:clearInterval(this.refs.child.timer),
-         
-        })
-        
-        
-        }        
-             
-       else if ( userGuess > this.state.randomNumber ) {
-        const mes=`Too High.Try Again: ${this.state.counter}`
-        this.setState ({
-          message:mes,
-          
-          
-        });
-      } else {
-        const mes=`Too Low,Try Again: ${this.state.counter}`
-        this.setState ({
-       
-          message:mes,
-         
-        });
-      }
+      win: false
+    })
+    window.location.reload(false)
+  };
+
+
+
+  displayMessage() {
+    let userGuess = parseInt(this.state.guessInput);
+    let min = this.state.min;
+    let max = this.state.max;
+
+
+    if (userGuess > max || userGuess < min) {
+      const mes = `value must be between ${this.state.min} and ${this.state.max} `
+      this.setState({
+        message: mes,
+        counter: this.state.counter + 1
+      });
     }
-  
-  
-    disableRangeButton() {
-      if ( this.state.userMin === '' || this.state.userMax === '' ) {
-        return true
-      } else {
-        return false
-      }
+    else if (userGuess === this.state.randomNumber) {
+      this.setState({
+        win: true
+      });
+      const mes = `YOU WON! In ${this.state.counter} Attempts in
+      ${this.refs.child.timecounter} seconds!!!`
+
+      console.log('CLEAR int: ', this.refs.child.timer);
+      this.setState({
+        message: mes,
+        min: min = 0,
+        max: max = 10,
+        time: clearInterval(this.refs.child.timer)
+      });
+
+
     }
-  
-    render() {
-          return(
-        <main className='container'>
-           <section className='custom-max-min'>
+
+    else if (userGuess > this.state.randomNumber) {
+      const mes = `Too High.Try Again: ${this.state.counter}`
+      this.setState({
+        message: mes,
+
+
+      });
+    } else {
+      const mes = `Too Low,Try Again: ${this.state.counter}`
+      this.setState({
+
+        message: mes,
+
+      });
+    }
+  }
+
+
+  disableRangeButton() {
+    if (this.state.userMin === '' || this.state.userMax === '') {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  render() {
+    return (
+      <main className='container'>
+        <section className='custom-max-min'>
           <input
             className='guess'
             type='text'
-            value='Number Guessing Game' readOnly/>
-         
-          <Timer ref="child"/>
-              
+            value='Number Guessing Game' readOnly />
+
+          <Timer ref="child" winUpdater={this.winUpdater} stop={this.state.stop} />
+
           <div className='right-container'>
             <UserMinAndMax
-              userMin={this.state.UserMin}
-              userMax={this.state.UserMax}
-              //handleRangeInput={this.handleRangeInput.bind(this)}
               handleRangeClick={this.handleRangeClick.bind(this)}
-              value={this.handleRangeInput.bind(this)}
               handleRangeInput={this.handleRangeInput.bind(this)}
-             // disabled={this.disableRangeButton()}
+            />
 
-
-
-            
-             />
-              <h5 className='last-guess-text'>
+            <h5 className='last-guess-text'>
               Your last guess was:<br />
             </h5>
-              <h4 className='number-guess'>
+
+            <h4 className='number-guess'>
               {this.state.guess}
             </h4>
-  
+
             <div className='message-text'>
               {this.state.message}
-              
+
             </div>
           </div>
-  
+
           <div className='left-container'>
-           <h4 className='min-max-text'>
-             Guess a number between {this.state.userMin} and {this.state.userMax}
-           </h4>
-  
+            <h4 className='min-max-text'>
+              Guess a number between {this.state.userMin} and {this.state.userMax}
+            </h4>
+
             <input
               type='number'
               className='guess-input-field'
               value={this.state.guessInput}
               onChange={this.handleUserInput.bind(this)}
-              placeholder="Your best guess" />
-  <br/><br/>
+              placeholder="Your best guess"
+              disabled={this.state.win} />
+            <br /><br />
             <section className='buttons'>
               <button
                 className="GuessButton"
                 onClick={this.handleGuessClick.bind(this)}
                 disabled={this.state.guessInput === '' ? true : false}>
                 Guess
-              </button>
-  
+            </button>
+
               <button
                 className="ClearButton"
                 onClick={this.handleClearClick.bind(this)}
                 disabled={this.state.guessInput === '' ? true : false}>
                 Clear
-              </button>
-  
+            </button>
+
               <button
                 className="ResetButton"
                 onClick={this.handleResetClick.bind(this)}
-                >
+              >
                 Reset
-              </button>
+            </button>
             </section>
           </div>
-        
+
         </section>
-        </main>
-      )
-    }
-  
+      </main>
+    )
   }
-  
-  export default App
+
+}
+export default App;
diff --git a/src/Timer.js b/src/Timer.js
index e547dd0..3166849 100644
--- a/src/Timer.js
+++ b/src/Timer.js
@@ -1,89 +1,88 @@
 import React from 'react'
 const getInitialState = () => ({
-  time:{},
-  seconds:30
+  time: {},
+  seconds: 30
 })
 class Timer extends React.Component {
-    constructor() {
-      super();
+  constructor(props) {
+    super(props);
     this.state = getInitialState();
     this.timer = 0;
     this.timecounter = 0;
     this.startTimer = this.startTimer.bind(this);
     this.countDown = this.countDown.bind(this)
+  }
+  secondsToTime(secs) {
+    let divisor_for_minutes = secs % (60 * 60);
+    let divisor_for_seconds = divisor_for_minutes % 60;
+    let seconds = Math.ceil(divisor_for_seconds);
+
+    let obj = {
+      "sec": seconds
+    };
+    return obj;
+  }
+
+  componentDidMount() {
+    let timeLeftVar = this.secondsToTime(this.state.seconds);
+    this.setState({ time: timeLeftVar });
+  }
+
+  startTimer() {
+    if (this.timer === 0 && this.state.seconds > 0) {
+      this.timer = setInterval(this.countDown, 1000);
+      console.log('start int: ', this.timer);
     }
-    secondsToTime(secs){
- 
-      let divisor_for_minutes = secs % (60 * 60); 
-      let divisor_for_seconds = divisor_for_minutes % 60;
-      let seconds = Math.ceil(divisor_for_seconds);
-  
-      let obj = {
-       
-        "sec": seconds
-      };
-      return obj;
-    }
-  
-    componentDidMount() {
-      let timeLeftVar = this.secondsToTime(this.state.seconds);
-      this.setState({ time: timeLeftVar });
-    }
-  
-    startTimer() {
-      if (this.timer === 0 && this.state.seconds > 0) {
-        this.timer = setInterval(this.countDown, 1000);
-        console.log('start int: ', this.timer);
-      }
-    }
-    resetGame = () => {
-      // this.setState(getInitialState());
-      window.location.reload(false);
+  }
+  resetGame = () => {
+    window.location.reload(false); // since state is wiped when page loads, you don't need to set here
   };
-  
-    countDown(){
- 
-      let seconds = this.state.seconds - 1;
-      this.timecounter += 1
-      this.setState({
-        time: this.secondsToTime(seconds),
-        seconds: seconds,
-      });
-      
-      //give warning for time shot
-      //if (seconds === 5) { 
-        if(this.timecounter===25){
-           alert('you are left with 5 seconds!')
-      }
-//checking if we are running out of time
-      if (seconds === 0) { 
-       clearInterval(this.timer);
-           // alert('Sorry,Game Over!')
-      
-      }
-    }
-     render() {
+
+  countDown() {
+
+    let seconds = this.state.seconds - 1;
+    this.timecounter += 1
+    this.setState({
+      time: this.secondsToTime(seconds),
+      seconds: seconds
+    }, () => {
       if (this.state.seconds === 0) {
-        console.log('clear int: ', this.timer);
-        clearInterval(this.timer);
+        this.props.winUpdater();
+      }
+    });
 
-       return(<div style={{textAlign:"center"}}>
-       <h1 style={{ color: "red" }}>Game over!</h1>
-     <button onClick={this.resetGame} >New Game</button>
-    
-     </div>
-   
-     )
+    //give warning for time shot
+    //if (seconds === 5) { 
+    if (this.timecounter === 25) {
+      alert('you are left with 5 seconds!')
     }
-      
-      return(
-        <div>
-         
- <p style={{color:'red'}}> Remaining Time :{this.state.time.sec}</p>
-                </div>
-      );
+    //checking if we are running out of time
+    if (seconds === 0) {
+      console.log('clear int: ', this.timer);
+      clearInterval(this.timer);
+      //alert('Sorry,Game Over!')
+      return
     }
   }
+  render() {
+    if (this.state.seconds === 0 && !this.props.stop) {
+
+      clearInterval(this.timer);
+
+      return (<div style={{ textAlign: "center" }}>
+        <h1 style={{ color: "blue" }}>Game over!</h1>
+        <button onClick={this.resetGame} >New Game</button>
+      </div>
+      )
+    }
+
+    return (
+      <div>
+
+        <p style={{ color: 'red' }}> Remaining Time :{this.state.time.sec}</p>
+      </div>
+    );
+  }
+}
 
-  export default Timer
-  
\ No newline at end of file
+export default Timer

From 8dbb8ae2af09dc64552ea52d125f8871897a1bf2 Mon Sep 17 00:00:00 2001
From: Karsten Rabe <karstenrabe91@gmail.com>
Date: Fri, 18 Oct 2019 22:33:13 -0400
Subject: [PATCH 2/2] Remove duplicated fns()

---
 src/App.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index c14b765..e0ab0d3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -32,20 +32,6 @@ class App extends React.Component {
     });
   }
 
-  winUpdater = () => {
-    this.setState({
-      win: true,
-      stop: true
-    });
-  }
-
-  winUpdater = () => {
-    this.setState({
-      win: true,
-      stop: true
-    });
-  }
-
   componentDidMount() {
     this.setState({ randomNumber: this.generateRandomNumber() });
   }