improve

islamozbek · Jul 5, 2020 · dcdf232 · dcdf232
1 parent 307863f
commit dcdf232
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "eslint-plugin-react-hooks": "^4.0.5",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -35,7 +36,7 @@
   },
   "devDependencies": {
     "eslint": "^6.6.0",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-config-airbnb": "^18.2.0"
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-react": "^7.20.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Word Find</title>
+    <title>Word Find Game</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -2,23 +2,27 @@ import React, { useState } from 'react';
 import { CommonContextProvider } from './context/common';
 
 import PlayGame from './components/PlayGame';
+import GameOver from './components/GameOver';
 import Computer from './components/Computer';
 import Human from './components/Human';
 
 function App() {
   const [play, setPlay] = useState(false);
   return (
     <CommonContextProvider>
-      { !play && <PlayGame setPlay={setPlay} /> }
-      {
-        play
-        && (
+      {!play
+        ? (
           <>
-            <Computer />
-            <Human />
+            <PlayGame setPlay={setPlay} />
+            <GameOver />
           </>
         )
-      }
+        : (
+          <>
+            <Computer setPlay={setPlay} />
+            <Human setPlay={setPlay} />
+          </>
+        )}
     </CommonContextProvider>
   );
 }

diff --git a/src/components/Computer/index.js b/src/components/Computer/index.js
@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
 import { CommonContext } from '../../context/common';
 import SpeechService from '../../services/Speech';
 
-const Computer = () => {
+const Computer = ({ setPlay }) => {
   const [state, dispatch] = useContext(CommonContext);
   const [word, setWord] = useState('');
 
@@ -14,7 +16,7 @@ const Computer = () => {
         dispatch({ type: 'SET_WORDS', word: computerWord });
         dispatch({ type: 'SET_NEXT', next: 'human' });
       } else {
-        console.log('wrong Answer');
+        setPlay(false);
       }
     };
     if (state.next === 'computer') {
@@ -29,4 +31,8 @@ const Computer = () => {
   );
 };
 
+Computer.propTypes = {
+  setPlay: PropTypes.func.isRequired,
+};
+
 export default Computer;
diff --git a/src/components/GameOver/index.js b/src/components/GameOver/index.js
@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import { CommonContext } from '../../context/common';
+
+const GameOver = () => {
+  const [state] = useContext(CommonContext);
+  return (
+    state.words.length > 0
+    && (
+      <div className="game-over">
+        <p>{state.words.join(' -> ')}</p>
+      </div>
+    )
+  );
+};
+
+export default GameOver;
diff --git a/src/components/Human/index.js b/src/components/Human/index.js
@@ -1,24 +1,26 @@
 import React, { useEffect, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
 import { CommonContext } from '../../context/common';
 import RecognitionService from '../../services/Recognition';
 import { isCorrectWord } from '../../lib/util';
 
-const Human = () => {
+const Human = ({ setPlay }) => {
   const [state, dispatch] = useContext(CommonContext);
   const [seconds, setSeconds] = useState(8);
   useEffect(() => {
     const handleService = async () => {
       const humanWord = await RecognitionService();
-      console.log(humanWord);
       const word = humanWord.split(' ').reverse()[0];
       const computerWord = state.words[state.words.length - 1];
-      const correct = state.names.includes(word) && isCorrectWord(computerWord, word);
+      const correct = !state.words.includes(word) && isCorrectWord(computerWord, word);
       if (correct) {
         dispatch({ type: 'SET_WORDS', word });
         dispatch({ type: 'SET_NEXT', next: 'computer' });
         setSeconds(8);
       } else {
-        console.log(word);
+        dispatch({ type: 'SET_WORDS', word });
+        setPlay(false);
       }
     };
 
@@ -31,6 +33,7 @@ const Human = () => {
     let interval = null;
     if (seconds === 0) {
       clearInterval(interval);
+      setPlay(false);
     } else {
       interval = setInterval(() => {
         const newSeconds = seconds - 1;
@@ -47,4 +50,8 @@ const Human = () => {
   );
 };
 
+Human.propTypes = {
+  setPlay: PropTypes.func.isRequired,
+};
+
 export default Human;
diff --git a/src/components/PlayGame/index.js b/src/components/PlayGame/index.js
@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { CommonContext } from '../../context/common';
 
 const PlayGame = ({ setPlay }) => {
+  const [, dispatch] = useContext(CommonContext);
   const handlePlayGame = async () => {
     try {
       await navigator.mediaDevices.getUserMedia({ audio: true });
+      dispatch({ type: 'SET_NEXT', next: 'computer' });
+      dispatch({ type: 'CLEAR_WORDS' });
       setPlay(true);
     } catch (err) {
-      alert('must');
+      alert('You have to allow your microphone to play!');
     }
   };
   return (

diff --git a/src/reducers/common.js b/src/reducers/common.js
@@ -4,7 +4,7 @@ import Names from '../names.json';
 const initialState = {
   names: Names,
   words: [],
-  next: 'computer',
+  next: null,
 };
 
 const CommonReducer = () => {
@@ -20,6 +20,11 @@ const CommonReducer = () => {
           ...state,
           words: [...state.words, action.word],
         };
+      case 'CLEAR_WORDS':
+        return {
+          ...state,
+          words: [],
+        };
       default:
         return state;
     }

diff --git a/yarn.lock b/yarn.lock
@@ -3975,6 +3975,11 @@ eslint-plugin-react-hooks@^1.6.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
   integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
 
+eslint-plugin-react-hooks@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.5.tgz#4879003aa38e5d05d0312175beb6e4a1f617bfcf"
+  integrity sha512-3YLSjoArsE2rUwL8li4Yxx1SUg3DQWp+78N3bcJQGWVZckcp+yeQGsap/MSq05+thJk57o+Ww4PtZukXGL02TQ==
+
 [email protected]:
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"