Pontuacao e Verificacao de click

Author: nurycaroline

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "spellright.language": "pt",
+  "spellright.documentTypes": [
+    "latex",
+    "plaintext"
+  ]
+}

README.md

@@ -1,50 +1,114 @@
 import React, { Component } from "react";
 import "./assets/style.css";
+
 import startImg from "./assets/img/start.svg";
 import strictImg from "./assets/img/strict.svg";
 
 import { Point } from "./components/Point";
 import { Simon } from "./components/Simon";
+import { setTime, SOUNDS, playAudio } from "./components/utils";
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       ligado: false,
-      strict: false
+      strict: false,
+      listColors: [],
+      positionColor: 0,
+      turnColor: "",
+      point: 0
     };
   }
 
-  ligaDesligaSimon = () => {
-    this.setState({ ligado: !this.state.ligado });
+  startGame = () => {
+    console.log("Start game");
+    let listColors = Array.from({ length: 20 }, () =>
+      Math.floor(Math.random() * 4)
+    );
+    console.log(listColors);
+    this.setState(
+      {
+        listColors: listColors,
+        point: 0,
+        positionColor: 0
+      },
+      () => this.turnOn()
+    );
   };
 
-  ligaDesligaStrict = () => {
-    let { ligado, strict } = this.state;
-    if (ligado) {
-      this.setState({ strict: !strict });
+  turnOn = numColor => {
+    let { positionColor, listColors } = this.state;
+    let turnColor = listColors[positionColor];
+
+    console.log(`position: ${positionColor}`)
+    console.log(`turnColor: ${turnColor}`)
+    console.log(`numColor: ${numColor}`)
+
+    playAudio(numColor || turnColor);
+    this.setState(
+      {
+        turnColor: numColor || turnColor
+      },
+      setTime(() => this.setState({ turnColor: "" }))
+    );
+  };
+
+  onClickColor = numColor => {
+    this.turnOn(numColor);
+    setTime(() => this.verificaColor(numColor))
+  };
+
+  verificaColor = numColor => {
+    let { positionColor, listColors, strict, point } = this.state;
+    if (listColors[positionColor] === numColor) {
+      console.log("It's right");
+      this.setState(
+        {
+          point: point + 1,
+          positionColor: positionColor + 1
+        },
+        this.turnOn(listColors[positionColor + 1])
+      );
+    } else {
+      alert("It's wrong!!");
+      if (strict) {
+        this.startGame();
+      } else {
+        this.turnOn(listColors[positionColor]);
+      }
     }
   };
 
   render() {
-    let { ligado, strict } = this.state;
+    let { ligado, strict, turnColor, point } = this.state;
 
     return (
       <div className="game">
         <div className={`board ${ligado ? "on" : "off"}`}>
-          <Simon />
+          <Simon colorTurnOn={turnColor} onClickColor={this.onClickColor} />
+
+          <audio id={`audio0`} src={SOUNDS.sound0} />
+          <audio id={`audio1`} src={SOUNDS.sound1} />
+          <audio id={`audio2`} src={SOUNDS.sound2} />
+          <audio id={`audio3`} src={SOUNDS.sound3} />
 
           <div className="menu">
-            <Point />
+            <Point value={point} />
 
             <div className="buttons">
-              <div className="btn-start">
+              <div
+                className="btn-start"
+                onClick={ligado ? this.startGame : () => {}}
+              >
                 <img src={startImg} alt="Start" />
                 <span>START</span>
               </div>
               <div
                 className="btn-strict"
-                onClick={() => this.ligaDesligaStrict()}
+                onClick={
+                  ligado ? () => this.setState({ strict: !strict }) : () => {}
+                }
               >
                 <img src={strictImg} alt="Strict" />
                 STRICT
@@ -54,7 +118,7 @@ class App extends Component {
 
             <div
               className={`on-off ${ligado ? "on" : "off"}`}
-              onClick={() => this.ligaDesligaSimon()}
+              onClick={() => this.setState({ ligado: !this.state.ligado, strict: false, point: 0})}
             />
           </div>
         </div>

src/App.js

@@ -21,21 +21,29 @@ body {
   background-color: #219653;
   border-top-left-radius: 100%;
   margin-right: -10px; }
+  .simon .green.on {
+    background-color: #1d5636; }
 
 .simon .red {
   background-color: #EB5757;
   border-top-right-radius: 100%; }
+  .simon .red.on {
+    background-color: #4f1a1a; }
 
 .simon .yellow {
   background-color: #F2C94C;
   border-bottom-left-radius: 100%;
   margin-right: -10px;
   margin-top: -10px; }
+  .simon .yellow.on {
+    background-color: #493d17; }
 
 .simon .blue {
   background-color: #2D9CDB;
   border-bottom-right-radius: 100%;
   margin-top: -10px; }
+  .simon .blue.on {
+    background-color: #163547; }
 
 .menu {
   width: 200px;

src/assets/sound/sound1.mp3

@@ -3,6 +3,11 @@ $red: #EB5757;
 $yellow: #F2C94C;
 $blue: #2D9CDB;
 
+$onGreen: #1d5636;
+$onRed: #4f1a1a;
+$onYellow: #493d17;
+$onBlue: #163547;
+
 $onImg: url('./img/on.svg');
 $offImg: url('./img/off.svg');
 
@@ -36,21 +41,37 @@ body {
 		background-color: $green;
 		border-top-left-radius: 100%;
 		margin-right: -10px;
+
+		&.on {
+			background-color: $onGreen;
+		}
 	}
 	.red {
 		background-color: $red;
 		border-top-right-radius: 100%;
+
+		&.on {
+			background-color: $onRed;
+		}
 	}
 	.yellow {
 		background-color: $yellow;
 		border-bottom-left-radius: 100%;
 		margin-right: -10px;
 		margin-top: -10px;
+
+		&.on {
+			background-color: $onYellow;
+		}
 	}
 	.blue {
 		background-color: $blue;
 		border-bottom-right-radius: 100%;
 		margin-top: -10px;
+
+		&.on {
+			background-color: $onBlue;
+		}
 	}
 }
 

src/assets/sound/sound2.mp3

@@ -1,8 +1,8 @@
 import React from "react";
 
-export const Point = () => (
+export const Point = ({value}) => (
   <div className="point">
-    <input disabled value="25" type="text" />
+    <input disabled value={value} type="text" />
     POINT
   </div>
 );

src/assets/sound/sound3.mp3

@@ -1,10 +1,10 @@
 import React from "react";
 
-export const Simon = () => (
+export const Simon = ({colorTurnOn, onClickColor}) => (
   <div className="simon">
-    <div className="green" />
-    <div className="red" />
-    <div className="yellow" />
-    <div className="blue" />
+    <div onClick={() => onClickColor(0)} className={`green ${colorTurnOn === 0 && "on" }`} />
+    <div onClick={() => onClickColor(1)} className={`red ${colorTurnOn === 1 && "on" }`} />
+    <div onClick={() => onClickColor(2)} className={`yellow ${colorTurnOn === 2 && "on" }`} />
+    <div onClick={() => onClickColor(3)} className={`blue ${colorTurnOn === 3 && "on" }`} />
   </div>
 );

src/assets/sound/sound4.mp3

@@ -0,0 +1,24 @@
+import sound1 from "../assets/sound/sound1.mp3";
+import sound2 from "../assets/sound/sound2.mp3";
+import sound3 from "../assets/sound/sound3.mp3";
+import sound4 from "../assets/sound/sound4.mp3";
+
+export const SOUNDS = {
+  sound0: sound1,
+  sound1: sound2,
+  sound2: sound3,
+  sound3: sound4
+};
+
+export const setTime = (func, time=2000) => {
+  setTimeout(() => {
+    func();
+  }, time);
+}
+
+/* Play sound */
+export const playAudio = (num) => {
+  let audio = document.getElementById(`audio${num}`);
+  audio.play();
+  setTime(() => audio.load())
+}