Gameplay

client/components/Home.css

@@ -7,8 +7,8 @@ video {
 }
 
 .hero-container {
-	background: url('https://cdn.pixabay.com/photo/2017/12/22/08/01/literature-3033196_960_720.jpg')
-		center center/cover no-repeat;
+	/* background: url('https://cdn.pixabay.com/photo/2017/12/22/08/01/literature-3033196_960_720.jpg')
+		center center/cover no-repeat; */
 	height: 100vh;
 	width: 100%;
 	display: flex;

client/components/Home.js

@@ -11,12 +11,7 @@ function Home() {
 	}
 	return (
 		<div className="hero-container">
-			<video
-				src="https://www.youtube.com/watch?v=ezmsrB59mj8"
-				autoPlay
-				loop
-				muted
-			/>
+			<video src="Bee.mp4" autoPlay loop muted />
 			<h1>BE MY VOICE</h1>
 			<p>What are you waiting for?</p>
 			<div className="hero-btns">

client/components/Main.js

@@ -14,16 +14,21 @@ import PopUp from './PopUp'
 
 export const Main = props => {
 	const webcamRef = useRef(null)
-	console.log("WEBCAM REF", webcamRef)
+	console.log('WEBCAM REF', webcamRef)
 	const canvasRef = useRef(null)
 	const [translation, setTranslation] = useState(null)
-	const netRef = useRef(null);
+	const [guess, setGuess] = useState(['*', '*', '*', '*', '*'])
+	const [timer, setTimer] = useState(3)
+	const [finalAns, setFinalAns] = useState([])
+
+	console.log('GUESS --->', guess)
+	const netRef = useRef(null)
 
 	useEffect(() => {
 		const loadModel = async () => {
 			const net = await handpose.load()
-			netRef.current = net;
-			webcamInit();
+			netRef.current = net
+			webcamInit()
 		}
 
 		const webcamInit = () => {
@@ -46,7 +51,7 @@ export const Main = props => {
 
 				window.requestAnimationFrame(loop)
 			} else {
-				console.log("Web cam did not initialize")
+				console.log('Web cam did not initialize')
 			}
 		}
 
@@ -55,8 +60,6 @@ export const Main = props => {
 			window.requestAnimationFrame(loop)
 		}
 
-		//Loop and detect hands
-
 		async function detect(net) {
 			const video = webcamRef.current.video
 			// predict can take in an image, video or canvas html element
@@ -65,13 +68,10 @@ export const Main = props => {
 
 			const hand = await net.estimateHands(video)
 			const ctx = canvasRef.current.getContext('2d')
-			drawHand(hand, ctx);
-
+			drawHand(hand, ctx)
 
 			if (hand.length > 0) {
-				const gestureEstimator = new fp.GestureEstimator([
-					...letters.allLetters,
-				])
+				const gestureEstimator = new fp.GestureEstimator([...letters.allLetters])
 
 				// 8 is the confidence level
 				const gesture = await gestureEstimator.estimate(hand[0].landmarks, 8)
@@ -82,6 +82,7 @@ export const Main = props => {
 					const maxScore = score.indexOf(Math.max.apply(null, score))
 					const gestureName = gesture.gestures[maxScore].name
 					setTranslation(gestureName)
+					// setTimeout(handleSubmit(), 3000)
 				}
 			} else if (hand.length === 0) {
 				setTranslation(null)
@@ -91,6 +92,36 @@ export const Main = props => {
 		loadModel()
 	}, [])
 
+	useEffect(() => {
+		let t
+		clearTimeout(t)
+		if (translation !== null) {
+			if (translation !== 'A') {
+				console.log('tranlation in use effect is -----', translation)
+				t = setTimeout(() => {
+					console.log('get in set time out')
+					const copyGuessWord = guess.slice()
+					for (let i = 0; i < 6; i++) {
+						if (copyGuessWord[i] === '*') {
+							copyGuessWord[i] = translation
+							console.log('new copy guessed word------', copyGuessWord)
+							break
+						}
+					}
+					setGuess(copyGuessWord)
+					console.log('GUESS AFTER TRANSLATION-------', guess)
+				}, 3000)
+			} else {
+				t = setTimeout(() => {
+					const copyGuessWord = guess.pop()
+					setGuess(copyGuessWord)
+					console.log('GUESS AFTER TRANSLATION-------', guess)
+				}, 3000)
+			}
+		}
+	}, [translation])
+
+	console.log('new guess is', guess)
 	return (
 		<div>
 			<div className="container">
@@ -122,14 +153,26 @@ export const Main = props => {
 			/>
 			<div
 				style={{
-					backgroundColor: 'red',
+					backgroundColor: 'pink',
 					color: 'black',
 					fontSize: 30,
 
 					marginLeft: 600
 				}}>
+				Detecting:
 				{translation}
 			</div>
+			<div
+				style={{
+					backgroundColor: 'orange',
+					color: 'black',
+					fontSize: 30,
+
+					marginLeft: 600
+				}}>
+				Guessed word is: {guess}
+				{/* <div>Timer: {timer}</div> */}
+			</div>
 		</div>
 	)
 }