Nanz

components/Buttons.jsx

@@ -1,21 +1,46 @@
 import React, { Component } from 'react';
+import Word from './Word.jsx'
+import data from '../data.js'
+
 
 class Buttons extends Component {
     constructor(props) {
         super(props);
         this.state = {  }
     }
+
     render() { 
+        let theObjId = this.props.match.params.id
+
+        let theObj =  data.find( x => x.id == theObjId)
+
+        let winColor = theObj.color
+
+        console.log('winColor',  theObj)
+
+       const handleClick = (e) => {
+           if (winColor == e.target.innerHTML.toLowerCase()) {
+               this.props.history.push('/result/win')
+           } else if(winColor !== e.target.innerHTML) {
+               this.props.history.push('/result/lose')
+           }
+
+
+        }
+
         return ( 
             <div>
-                <button>RED</button>
-                <button>BLUE</button>
-                <button>YELLOW</button>
-                <button>GREEN</button>
+
+                <button onClick={handleClick}>RED</button>
+                <button onClick={handleClick}>BLUE</button>
+                <button onClick={handleClick}>YELLOW</button>
+                <button onClick={handleClick}>GREEN</button>
+
              </div>
 
 
 
+
         );
     }
 }

components/Header.jsx

@@ -1,20 +1,18 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 class Header extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {  }
-    }
-    render() { 
-        return (
-             <div>
-            <h1>COLOUR ANXIETY</h1>
 
-
-          </div>
-
-        ) 
-    }
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div>
+        <h1>COLOUR ANXIETY</h1>
+      </div>
+    );
+  }
 }
- 
+
 export default Header;

components/Lose.jsx

@@ -1,27 +1,31 @@
-import React, { Component } from 'react';
+
+import React, { Component } from "react";
 
 class Lose extends Component {
   constructor(props) {
-      super(props);
-      this.state = {  }
+    super(props);
+    this.state = {};
   }
-  render() { 
-      return (
-        <div>
-          <h1 className='heading'>That Stinks</h1>
-          <img src={'https://ih0.redbubble.net/image.468330822.4032/flat,550x550,075,f.jpg'}/>
-        </div>
-        );
+
+  render() {
+    const handleClick = e => {
+      window.location = "/";
+    };
+
+    return (
+      <div>
+        <h1 className="heading">That Stinks</h1>
+        <img
+          src={
+            "https://ih0.redbubble.net/image.468330822.4032/flat,550x550,075,f.jpg"
+          }
+        />
+        <br />
+        <button onClick={handleClick}> Try Again! </button>
+      </div>
+    );
   }
 }
 
+export default Lose;
 
-
-
-
-
-
-
-
-
-export default Lose

components/Timer.jsx

@@ -1,20 +1,23 @@
-import React from 'react'
-import CountdownTimer from "react-component-countdown-timer"
+import React from "react";
+import CountdownTimer from "react-component-countdown-timer";
 
 class Countdown extends React.Component {
   render() {
     var settings = {
-count: 5,
-border: true,
-hideDay: true,
-hideHours: true,
-noPoints: true,
-  };
+      count: 3,
+      border: true,
+      hideDay: true,
+      hideHours: true,
+      noPoints: true,
+      onEnd: () => {
+        if (this.props.history.location.pathname != "/result/lose") {
+          this.props.history.push("/result/lose");
+        }
+      }
+    };
 
-return (
- <CountdownTimer {...settings} />
-    );
+    return <CountdownTimer {...settings} />;
   }
 }
 
-export default Countdown
+export default Countdown;

components/Win.jsx

@@ -6,21 +6,26 @@ class Win extends Component {
         super(props);
         this.state = {  }
     }
-    render() { 
+
+
+    render() {
+      const handleClick = (e) => {
+        window.location = "/";     
+     }
+
         return (
           <div>
             <h1 className='heading'>That's Awesome</h1>
             <img src={'https://images-na.ssl-images-amazon.com/images/I/51-G3tQVdfL._SX425_.jpg'}/>
+            <br>
+            </br>
+          <button onClick={handleClick}> Try Again! </button>
+
           </div>
           );
     }
   }
 
 
+export default Win
 
-
-
-
-
-
-export default Win

components/Word.jsx

@@ -1,33 +1,29 @@
-import React, { Component } from 'react';
-import data from '../data.js'
+import React, { Component } from "react";
+import data from "../data.js";
 
-var min=0; 
-var max=10;  
-
-let randomId = Math.floor(Math.random() * (+max - +min)) + +min;
+import Countdown from "./Timer.jsx";
+import { HashRouter as Router, Route, Link } from "react-router-dom";
 
 class Word extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {  }
-    }
-
-
-
-    render() { 
-
-
-        let {color} = data[randomId]
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
 
-        return ( 
-            <div className='word' style={{color}} >
-             {data[randomId].word}
+  render() {
+    let randomId = this.props.match.params.id;
+    let {word, color} =  data.find( x => x.id == randomId)
 
-            </div>
-
-
-         );
-    }
+
+    console.log('random id', randomId, 'colour', color);
+
+    return (
+
+      <div className="word" style={{ color }}>
+        {word}
+      </div>
+    );
+  }
 }
- 
-export default Word;
+
+export default Word;

components/app.js

@@ -1,32 +1,56 @@
-import React, { Component } from 'react'
-import Audio from "./Sounds.jsx"
-import Header from './Header.jsx'
-import Word from './Word.jsx'
-import Buttons from './Buttons.jsx'
-import Countdown from './Timer.jsx'
 
-class App extends Component {
+import React, { Component } from "react";
+import { Redirect } from "react-router-dom";
+import { HashRouter as Router, Route, Link } from "react-router-dom";
+
+import Audio from "./Sounds.jsx";
+import Header from "./Header.jsx";
+import Word from "./Word.jsx";
+import Buttons from "./Buttons.jsx";
+
+import Countdown from "./Timer.jsx";
+import Win from "./Win.jsx";
+import Lose from "./Lose.jsx";
+import data from "../data.js";
+
+var min = 0;
+var max = 10;
 
-  constructor (props) {
-    super(props)
+let randomId = Math.floor(Math.random() * (+max - +min)) + +min;
+
+let { id } = data[randomId];
+
+class App extends Component {
+  constructor(props) {
+    super(props);
   }
 
-  render () {
-    return(
+  render() {
+    return (
       <div>
-        {/* <h1>Welcome to {this.props.name}</h1> */}
-        <Header />
-        <Word />
-        <Buttons />
-        <Countdown />
-
-      </div>
 
-    ) 
+        <Router>
 
-
-  }
+          <div>
+            <Route
+              exact="true"
+              path="/"
+              component={() => <Redirect to={`/${id}`} />}
+            />
+            <Route path="/" component={Header} />
+            <Route exact="true" path="/:id" component={Countdown} />
+
+            <Route exact="true" path="/:id" component={Word} />
+            <Route exact="true" path="/:id" component={Buttons} />
 
+            <Route path="/result/win" component={Win} />
+            <Route path="/result/lose" component={Lose} />
+          </div>
+        </Router>
+
+      </div>
+    );
+  }
 }
 
-export default App
+export default App;

data.js

@@ -1,7 +1,7 @@
 const colour = [{
   id:1,
   word:"RED",
-  color: 'royalblue'
+  color: 'blue'
 },
 {
   id:2,
@@ -16,7 +16,7 @@ const colour = [{
 {
   id:4,
   word:"BLUE",
-  color: 'gold'
+  color: 'yellow'
 },
 {
   id:5,
@@ -31,7 +31,7 @@ const colour = [{
 {
   id:7,
   word:"YELLOW",
-  color: 'royalblue'
+  color: 'blue'
 },
 {
   id:8,
@@ -41,12 +41,12 @@ const colour = [{
 {
   id:9,
   word:"BLUE",
-  color: 'gold'
+  color: 'yellow'
 },
 {
   id:10,
   word:"RED",
-  color: 'royalblue'
+  color: 'blue'
 }
 ]