basic typing test without time and camera input ser

Author: amitjimiwal

.husky/pre-push

@@ -0,0 +1 @@
+npm run build

src/App.css

@@ -4,3 +4,33 @@
   box-sizing: border-box;
   scroll-behavior: smooth;
 }
+.word {
+  @apply text-3xl font-bold text-gray-400 flex;
+}
+.correct {
+  @apply text-green-500;
+}
+.wrong {
+  @apply text-red-500;
+}
+.typingBackgroundColor {
+  background-color: hsl(220 20% 14%);
+}
+.caret {
+  position: absolute;
+  height: 1.8rem;
+  top: 0;
+  border-right: 3px solid #e7d105;
+  animation: caret 1s infinite;
+  transition: all 0.2s ease;
+}
+
+@keyframes caret {
+  0%,
+  to {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}

src/components/Typing/CameraComponent.tsx

@@ -0,0 +1,85 @@
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+
+const CameraComponent = ({ isGameStarted }: { isGameStarted: boolean }) => {
+  const [isCheating, setIsCheating] = useState<boolean>(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  useEffect(() => {
+    try {
+      let websocket: WebSocket;
+      if (isGameStarted) {
+        websocket = new WebSocket("ws://localhost:8765");
+        websocket.onopen = () => {
+          toast.success("Video is being monitored, don't cheat!");
+        };
+        websocket.onerror = () => {
+          toast.error("Error in websocket connection");
+        };
+        websocket.onmessage = () => {
+          toast.error("Keyboard me mat dekh", {
+            position: "top-center",
+          });
+          setIsCheating(true);
+          setTimeout(() => {
+            setIsCheating(false);
+          }, 500);
+        };
+      }
+      if (navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices
+          .getUserMedia({ video: true })
+          .then(function (stream) {
+            if (videoRef.current) {
+              videoRef.current.srcObject = stream;
+              if (isGameStarted) websocket.binaryType = "arraybuffer";
+              videoRef.current.play();
+              //send the stream to the server every 0.1s
+              videoRef.current.addEventListener("play", function () {
+                if (isGameStarted) setInterval(sendFrame, 100);
+              });
+            }
+            function sendFrame() {
+              //used canvas to send blob object
+              if (!videoRef.current) return;
+              const canvas = document.createElement("canvas");
+              canvas.width = videoRef?.current?.videoWidth || 0;
+              canvas.height = videoRef?.current?.videoWidth || 0;
+              const context = canvas.getContext("2d");
+              context?.drawImage(
+                videoRef.current,
+                0,
+                0,
+                canvas.width,
+                canvas.height
+              );
+              canvas.toBlob(function (blob) {
+                if (blob) {
+                  websocket.send(blob);
+                }
+              }, "image/jpeg");
+            }
+          })
+          .catch(function (error) {
+            console.log("Something went wrong with webcam access: ", error);
+          });
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, [isGameStarted]);
+  return (
+    <div>
+      <video
+        ref={videoRef}
+        className={clsx(
+          "absolute bottom-0 right-0 w-[300px] h-auto border-2 border-white",
+          isCheating && "border-red-500 object-cover"
+        )}
+      ></video>
+    </div>
+  );
+};
+
+const MemoizedCameraComponent = React.memo(CameraComponent);
+export default MemoizedCameraComponent;

src/components/Typing/Control.tsx

@@ -2,14 +2,14 @@ import React from "react";
 
 const Control = () => {
   return (
-    <nav className="w-full flex flex-col gap-5 p-3 sm:flex-row sm:justify-between sm:p-5 shadow-2xl rounded-xl border-2 border-gray-400">
-      <h1>TypeSight</h1>
+    <nav className="w-full flex flex-col gap-5 p-3 sm:flex-row sm:justify-between sm:p-5 shadow-2xl rounded-xl border-2 text-white">
+      <h1 className="font-bold text-3xl">TypeSight</h1>
       <div className="flex justify-end gap-5">
-        <select className="px-3 rounded-xl bg-gray-200">
+        <select className="px-3 rounded-xl bg-white text-black">
           <option>30s</option>
           <option>60s</option>
         </select>
-        <select className="px-3 rounded-xl bg-gray-200">
+        <select className="px-3 rounded-xl bg-white text-black">
           <option>words</option>
           <option>sentences</option>
         </select>

src/components/Typing/Typing.tsx

@@ -1,11 +1,40 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
 type TypeProps = {
   text: string;
 };
 const Typing = ({ text }: TypeProps) => {
-  return <div>
-     {text}
-  </div>;
+  const ref=useRef<HTMLInputElement>(null);
+  const [time, settime] = useState<number>(30);
+  const [istimercompleted, setcomlete] = useState<boolean>(false);
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (!istimercompleted) settime((prev) => prev - 1);
+    }, 1000);
+    if (istimercompleted) {
+      clearInterval(id);
+      settime(30);
+      toast.success("Times Up");
+    }
+    return () => clearInterval(id);
+  }, [istimercompleted]);
+  useEffect(() => {
+    if (time === -1) setcomlete(true);
+  }, [time]);
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+  return (
+    <div className="w-full relative">
+      <input type="text" className="absolute top-10 opacity-0" onChange={()=>{
+        console.log("Pressed something")
+      }} ref={ref}/>
+      <div className="text-2xl font-extrabold text-green-400">{time}s</div>
+      <div className="text-justify text-3xl font-bold leading-10 text-gray-500">
+        {text}
+      </div>
+    </div>
+  );
 };
 
 export default Typing;

src/components/Typing/TypingFooter.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const TypingFooter = () => {
+  return (
+    <div className="w-full flex justify-center">
+      <button>Restart test</button>
+    </div>
+  );
+};
+
+export default TypingFooter;

src/components/WrongWord.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const WrongWord = ({letter}:{letter:string}) => {
+  return (
+    <span className='wrong'>
+      {letter}
+    </span>
+  )
+}
+
+export default WrongWord

src/context/TypingContext.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react'
+interface Props{
+     children:ReactNode
+}
+const TypingContext = ({children}:Props) => {
+  return (
+    <div>
+      {children}
+    </div>
+  )
+}
+
+export default TypingContext

src/lib/helpers/shufflewords.ts

@@ -4,12 +4,10 @@ import sentence from '@/lib/data/sentences.json';
 export default function shuffleWords(preference: string) {
      switch (preference) {
           case 'words':
-               console.log(_.shuffle(word).slice(0, 100));
-
-               return _.shuffle(word).slice(0, 100);
+               return _.shuffle(word).slice(0, 50);
           case 'sentences':
-               return _.shuffle(sentence).slice(0, 100);
+               return _.shuffle(sentence).slice(0, 50);
           default:
-               return _.shuffle(word).slice(0, 100);
+               return _.shuffle(word).slice(0, 50);
      }
 }