[WIP] Game 3

src/App.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import ColorGame from './components/color_game/color_game';
-import OrderClick from './components/OrderClick/OrderClick';
+import ColorGame from './components/color_game/color_game'
+import ColorMatch from './components/ColorMatch/ColorMatch'
+import OrderClick from './components/OrderClick/OrderClick'
 
 function App() {
   return (
     <div className="App">
+      {/* Todo: Add routes here */}
       {/* {<ColorGame></ColorGame>} */}
-      <OrderClick> </OrderClick>
+      {/* <OrderClick> </OrderClick> */}
+      <ColorMatch />
     </div>
   );
 }

src/components/ColorMatch/ColorMatch.css

@@ -0,0 +1,25 @@
+.box {
+    width: 5rem;
+    height: 3rem;
+    font-size: 2rem;
+}
+
+.font-yellow {
+    color: yellow;
+}
+
+.font-green {
+    color: green;
+}
+
+.font-blue {
+    color: blue;
+}
+
+.font-pink {
+    color: pink;
+}
+
+.font-orange {
+    color: orange;
+}

src/components/ColorMatch/ColorMatch.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import { COLORS } from '../utils/utils'
+import './ColorMatch.css'
+
+const ColorMatch = () => {
+
+    const [name, setName] = useState(COLORS[Math.floor(Math.random() * (COLORS.length-1))])
+    const [color, setColor] = useState(COLORS[Math.floor(Math.random() * (COLORS.length-1))])
+
+    useEffect(() => {
+        const timer = setInterval(
+            () => {
+                setName(COLORS[Math.floor(Math.random() * (COLORS.length-1))])
+                setColor(COLORS[Math.floor(Math.random() * (COLORS.length-1))])
+            }, 
+            1000)
+            return () => clearInterval(timer)
+    },[])
+
+    const check = () => {
+        console.log(name, color)
+    }
+
+    return <div onClick={()=>{check()}} className={`box font-${color}`}> 
+        {name}
+    </div>
+}
+
+export default ColorMatch

src/components/color_game/color_game.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
+import { COLORS } from '../utils/utils'
 import './color_game.css';
 
-const colors = ["yellow", "green", "blue", "pink", "orange"];
-
-
 class ColorGame extends Component {
     constructor(props) {
         super(props);
@@ -23,7 +21,7 @@ class ColorGame extends Component {
 
         setTimeout(() => {
             this.setState({
-                classes: colors[this.state.index],
+                classes: COLORS[this.state.index],
                 start_time: new Date()
             });
         this.setState(prevstate => ({ index: prevstate.index + 1}));

src/components/utils/utils.js

@@ -0,0 +1,7 @@
+export const shuffle = arr => arr
+.map(a => [Math.random(), a])
+.sort((a, b) => a[0] - b[0])
+.map(a => a[1]);
+
+
+export const COLORS = ["yellow", "green", "blue", "pink", "orange"];