Merge branch 'webdevcody:main' into webdevcody#648-invalid-race-post-request

Author: bkbCodes

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing
+# CONTRIBUTING
 
 When contributing to this repository, please first discuss the change you wish to make via [issues](https://github.com/webdevcody/code-racer/issues), [discord](https://discord.gg/4kGbBaa).
 
@@ -70,7 +70,7 @@ To get started with Code Racer locally, follow these steps
    npm i
    ```
 
-8. Start the database
+8. Start the Database
 
    ```sh
    npm run dev:db

README.md

@@ -12,7 +12,7 @@
 <div align="center">
   <!-- TO ADD more Badges use -> https://shields.io/ -->
 
-  <img alt="GitHub contributors" src="https://img.shields.io/github/contributors-anon/webdevcody/code-racer">
+  <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/webdevcody/code-racer">
   <img alt="Repo License" src="https://img.shields.io/github/license/webdevcody/code-racer">
   <img alt="Website Status" src="https://img.shields.io/website?url=https%3A%2F%2Fcode-racer-eight.vercel.app">
 

packages/app/src/app/dashboard/_components/recentRaces.tsx

@@ -43,25 +43,25 @@ export function RecentRacesTable({
         },
       },
       {
-        accessorKey: "snippet",
+        accessorKey: "name",
         header: "Name",
         cell: ({ cell }) => {
           const snippet = cell.getValue() as Snippet;
 
-          return <span>{snippet.name ?? "-"}</span>
-        }
+          return <span>{snippet.name ?? "-"}</span>;
+        },
       },
       {
-        accessorKey: "snippet",
+        accessorKey: "language",
         header: "Language",
         cell: ({ cell }) => {
           const snippet = cell.getValue() as Snippet;
           const language = snippetLanguages.find((language) => {
-              if (language.value === snippet.language) {
-                    return language.label
-              }
-          })
-          
+            if (language.value === snippet.language) {
+              return language.label;
+            }
+          });
+
           return language?.label;
         },
       },
@@ -114,7 +114,7 @@ export function RecentRacesTable({
         },
       },
     ],
-    [],
+    []
   );
 
   return (

packages/app/src/app/result/replay-timestamps.tsx

@@ -18,6 +18,7 @@ export const ReplayCode = ({ code }: TReplayCode) => {
   const [replayTimeStamp, setReplayTimeStamp] = useState<ReplayTimeStamp[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isPlayingFinished, setIsPlayingFinished] = useState(false);
 
   useEffect(() => {
     const getReplay = () => {
@@ -29,24 +30,22 @@ export const ReplayCode = ({ code }: TReplayCode) => {
   }, []);
 
   useEffect(() => {
-    let timeout: NodeJS.Timeout;
-
-    if (isPlaying && replayTimeStamp && currentIndex < replayTimeStamp.length) {
-      const currentTimestamp = replayTimeStamp[currentIndex];
-      let nextTimestampDelay = 0;
-
-      if (currentIndex + 1 < replayTimeStamp.length) {
-        nextTimestampDelay =
-          replayTimeStamp[currentIndex + 1].time - currentTimestamp.time;
-      } else {
-        return;
-      }
-
-      timeout = setTimeout(() => {
-        setCurrentIndex(currentIndex + 1);
-      }, nextTimestampDelay);
+    const isPlayingActive = isPlaying && replayTimeStamp;
+    if (!isPlayingActive) return;
+
+    const nextIndex = currentIndex + 1;
+    if (nextIndex === replayTimeStamp.length) {
+      setIsPlayingFinished(true);
+      return;
     }
 
+    const currentTimestamp = replayTimeStamp[currentIndex];
+    const nextTimestampDelay = replayTimeStamp[nextIndex].time - currentTimestamp.time;
+
+    const timeout = setTimeout(() => {
+      setCurrentIndex(currentIndex + 1);
+    }, nextTimestampDelay);
+
     return () => clearTimeout(timeout);
   }, [currentIndex, isPlaying, replayTimeStamp]);
 
@@ -55,6 +54,7 @@ export const ReplayCode = ({ code }: TReplayCode) => {
   };
 
   const handleRestart = () => {
+    setIsPlayingFinished(false);
     setIsPlaying(false);
     setCurrentIndex(0);
   };
@@ -70,16 +70,18 @@ export const ReplayCode = ({ code }: TReplayCode) => {
   return (
     <div className="py-2 w-full bg-accent text-2xl text-primary relative group">
       <div className="opacity-0 group-hover:opacity-100 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex space-x-2  z-10">
-        {isPlaying ? (
-          <PauseIcon
-            onClick={handlePlayPause}
-            className="w-12 h-12 text-primary cursor-pointer"
-          />
-        ) : (
-          <PlayIcon
-            onClick={handlePlayPause}
-            className="w-12 h-12 text-primary cursor-pointer"
-          />
+        {!isPlayingFinished && (
+          isPlaying ? (
+            <PauseIcon
+              onClick={handlePlayPause}
+              className="w-12 h-12 text-primary cursor-pointer"
+            />
+          ) : (
+            <PlayIcon
+              onClick={handlePlayPause}
+              className="w-12 h-12 text-primary cursor-pointer"
+            />
+          )
         )}
 
         <RefreshCcw