Merge remote-tracking branch 'upstream/main' into multiplayer

qunm00 · Jul 22, 2023 · 1576376 · 1576376
2 parents 3123fae + a894cf7
commit 1576376
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 54 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -34,7 +34,7 @@ If you are getting WSL error when you launch your desktop docker application, go
 
 To get started with Code Racer locally, follow these steps
 
-1. Fork the repo asdfasdf
+1. Fork the repo
 
 2. clone your fork
 

diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@ Happy coding and enjoy the race!
   2. Get the Postgres running - `docker compose up -d`
   3. Run the dev env - `npm run dev`
 
-  Don't forget to turn down the postgres post devlopment - `docker compose down`
+  Don't forget to turn down the postgres post development - `docker compose down`
 
 ### Check the logs of Post
 

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -14,8 +14,9 @@ enum UserRole {
 }
 
 enum AchievementType {
-    FIRST_RACE
-    FIRST_SNIPPET
+  FIRST_RACE
+  FIRST_SNIPPET
+  FIFTH_RACE
 }
 
 model User {

diff --git a/src/app/leaderboard/loaders.ts b/src/app/leaderboard/loaders.ts
@@ -21,8 +21,10 @@ export async function getUsersWithResultCounts({
       results: true,
     },
     where: {
-      results: {
-        some: {},
+      achievements: {
+        some: {
+          achievementType: "FIFTH_RACE",
+        },
       },
     },
   });
@@ -49,8 +51,10 @@ export async function getUsersWithResults({
       results: true,
     },
     where: {
-      results: {
-        some: {},
+      achievements: {
+        some: {
+          achievementType: "FIFTH_RACE",
+        },
       },
     },
   });
@@ -59,8 +63,10 @@ export async function getUsersWithResults({
 export async function getTotalUsers() {
   return prisma.user.count({
     where: {
-      results: {
-        some: {},
+      achievements: {
+        some: {
+          achievementType: "FIFTH_RACE",
+        },
       },
     },
   });

diff --git a/src/app/leaderboard/users-table.tsx b/src/app/leaderboard/users-table.tsx
@@ -116,6 +116,7 @@ export function UsersTable({
   );
 
   return (
+    <>
     <DataTable
       columns={columns}
       data={data}
@@ -124,6 +125,8 @@ export function UsersTable({
         prop: "averageCpm",
         val: "desc",
       }}
-    />
+      />
+      <p className="text-sm md:text-base mt-1 text-muted-foreground">You must complete have completed 5 races to be placed in the leaderboards.</p>
+    </>
   );
 }
diff --git a/src/app/race/_components/multiplayer-race.tsx b/src/app/race/_components/multiplayer-race.tsx
@@ -35,7 +35,7 @@ export default function MultiplayerRace() {
   }
 
   return (
-    <Card className="flex flex-col justify-between flex-1 border-2 border-warning  ">
+    <Card className="flex flex-col justify-between flex-1 border-2 border-warning">
       <CardHeader>
         <div className="grid text-center place-content-center">
           <Users className="justify-self-center" size={40} />

diff --git a/src/app/result/fifth-race-badge.tsx b/src/app/result/fifth-race-badge.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import Image from "next/image";
+import { UnlockIcon } from "lucide-react";
+import { useConfettiContext } from "@/context/confetti";
+import { toast } from "@/components/ui/use-toast";
+import * as React from "react";
+
+
+export function FifthRaceBadge({ image }: { image: string }) {
+  const confettiCtx = useConfettiContext();
+
+  React.useEffect(() => {
+    toast({
+      description: (
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-2 text-lg md:text-xl">
+            <UnlockIcon className="text-accent-foreground" />{" "}
+            <span className="text-muted-foreground">Unlocked:</span>{" "}
+            <span className="text-accent-foreground">You are in the Club!</span>
+          </div>
+          <div className="flex items-center gap-8">
+            <Image src={image} width={65} height={65} alt="Fifth Race Badge" />
+            <span>Congrats on completing your fifth race! You will now show up in the leaderboards.</span>
+          </div>
+        </div>
+      ),
+    }),
+      confettiCtx.showConfetti();
+  }, []);
+
+  return null;
+}
diff --git a/src/app/result/loaders.ts b/src/app/result/loaders.ts
@@ -39,6 +39,41 @@ export async function getFirstRaceBadge() {
   }
 }
 
+export async function getFifthRaceBadge() {
+  const user = await getCurrentUser();
+
+  if (!user) {
+    return undefined;
+  }
+
+  const fifthRaceAchievement = achievements.find(
+    (achievement) => achievement.type === "FIFTH_RACE",
+  );
+
+  const resultsCount = await prisma.result.count({
+    where: {
+      userId: user.id,
+    },
+  });
+
+  const fifthRaceBadge = await prisma.achievement.findFirst({
+    where: {
+      achievementType: "FIFTH_RACE",
+      userId: user.id,
+    },
+  });
+
+  if (!fifthRaceBadge && resultsCount >= 5) {
+    await prisma.achievement.create({
+      data: {
+        achievementType: "FIFTH_RACE",
+        userId: user.id,
+      },
+    });
+    return fifthRaceAchievement;
+  }
+}
+
 export async function getUserResultsForSnippet(
   snippetId: string,
   numberOfResults = 7,

diff --git a/src/app/result/page.tsx b/src/app/result/page.tsx
@@ -4,11 +4,13 @@ import Chart, { ParentCurrentChart } from "./chart";
 import { Icons } from "@/components/icons";
 import Link from "next/link";
 import { FirstRaceBadge } from "./first-race-badge";
+import { FifthRaceBadge } from "./fifth-race-badge"
 import { getCurrentUser } from "@/lib/session";
 import { Voting } from "./voting";
 import { Badge } from "@/components/ui/badge";
 import {
   getFirstRaceBadge,
+  getFifthRaceBadge,
   getUserResultsForSnippet,
   getCurrentRaceResult,
   ParsedRacesResult,
@@ -51,6 +53,8 @@ async function AuthenticatedPage({
   const currentSnippet = await getSnippetById(currentRaceResult.snippetId);
 
   const firstRaceBadge = await getFirstRaceBadge();
+  const fifthRaceBadge = await getFifthRaceBadge();
+
   let raceResults: ParsedRacesResult[] = [];
   let cardObjects = [] as { title: string; value: string | undefined }[];
 
@@ -84,6 +88,7 @@ async function AuthenticatedPage({
     <div className="w-auto">
       <div className="flex flex-col justify-center gap-4 mt-5">
         {firstRaceBadge && <FirstRaceBadge image={firstRaceBadge.image} />}
+        {fifthRaceBadge && <FifthRaceBadge  image={fifthRaceBadge.image}/>}
         <Heading
           centered
           title="Your Race Results"
@@ -94,7 +99,9 @@ async function AuthenticatedPage({
             return (
               <Card key={idx}>
                 <CardHeader>
-                  <CardTitle className="text-center">{c.title}</CardTitle>
+                  <CardTitle className="text-center text-warning">
+                    {c.title}
+                  </CardTitle>
                 </CardHeader>
                 <CardContent className="text-center">{c.value}</CardContent>
               </Card>
@@ -103,15 +110,14 @@ async function AuthenticatedPage({
         </div>
       </div>
       <div className="flex flex-col px-8 rounded-xl">
-        <Tabs defaultValue="Current" className="w-full">
-          <TabsList>
+        <Tabs defaultValue="Current" className="w-full m-5">
+          <TabsList className="m-5">
             <TabsTrigger value="Current">Current</TabsTrigger>
-            <TabsTrigger value="History">History</TabsTrigger>
             <TabsTrigger value="Replay">Replay</TabsTrigger>
             <TabsTrigger value="TopTen">Top 10</TabsTrigger>
+            <TabsTrigger value="History">History</TabsTrigger>
           </TabsList>
           <TabsContent value="Current">
-            {/* works even for unauthorized user */}
             <span className="text-2xl mx-auto text-primary flex-wrap sm:hidden">
               View in Larger Screen to Unlock Exciting Features!
             </span>
@@ -131,16 +137,37 @@ async function AuthenticatedPage({
       <div className="flex flex-wrap items-center justify-center gap-4 p-2">
         <Link
           title="Retry"
-          className={cn(buttonVariants(), "gap-2")}
+          className={cn(buttonVariants(), "gap-2 text-accent")}
           href={`/race/practice?snippetId=${currentRaceResult.snippetId}`}
         >
           <Icons.refresh className="w-5 h-5" aria-hidden="true" /> Retry
         </Link>
-        <Link title="New Race" className={buttonVariants()} href="/race">
+        <Link
+          title="New Race"
+          className={cn(buttonVariants(), "text-accent")}
+          href="/race"
+        >
           <Icons.chevronRight className="w-5 h-5" aria-hidden="true" /> New Race
         </Link>
       </div>
-      <div className="my-4">
+
+      <div className="flex items-center justify-center m-2">
+        <Badge
+          variant="outline"
+          className="flex items-center justify-center text-base border-2"
+        >
+          <Badge variant="secondary" className="text-warning">
+            Tab
+          </Badge>
+          <span className="m-1">+</span>
+          <Badge variant="secondary" className="text-warning">
+            Enter
+          </Badge>
+          <span className="m-1">Restart Game</span>
+        </Badge>
+      </div>
+
+      <div className="m-2">
         {currentRaceResult && (
           <Voting
             snippetId={currentRaceResult.snippetId}
@@ -149,21 +176,6 @@ async function AuthenticatedPage({
           />
         )}
       </div>
-      <div className="flex items-center justify-center space-x-2">
-        <Badge variant="outline">
-          <Badge variant="secondary" className="mr-2">
-            tab
-          </Badge>
-          <span>+</span>
-          <Badge variant="secondary" className="mx-2">
-            enter
-          </Badge>
-          <span>restart game</span>
-        </Badge>
-
-        {/* <span className={buttonVariants()}>tab</span> <span>+</span>
-        <span className={buttonVariants()}>enter</span> <span>-</span> */}
-      </div>
     </div>
   );
 }

diff --git a/src/app/review/page.tsx b/src/app/review/page.tsx
@@ -14,6 +14,7 @@ export default async function ReviewPage() {
   return (
     <div className="container flex flex-col items-center p-4 space-y-4">
       <Heading
+        centered
         title="Review page"
         description="Review snippets to either approve or remove"
       />
@@ -26,8 +27,12 @@ export default async function ReviewPage() {
               className="flex flex-col justify-between gap-4 p-8 border rounded overflow-hidden min-h-[100px]"
               key={s.id}
             >
-              <code className="text-muted-foreground">{s.code}</code>
-              <span className="text-sm">Total characters: {s.code.length}</span>
+              <pre className="text-sm md:text-base whitespace-pre-wrap text-muted-foreground">
+                {s.code}
+              </pre>
+              <span className="text-sm mt-auto">
+                Total characters: {s.code.length}
+              </span>
               <ReviewButtons snippetId={s.id} />
             </div>
           ))}

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -7,7 +7,7 @@ const hoverLinkStyles = "hover:underline underline-offset-2";
 
 export function Footer() {
   return (
-    <footer className="border-t-2 border-primary">
+    <footer className="bg-gray-300 dark:bg-black ">
       <article className="container flex flex-col py-6 gap-x-8 gap-y-4 lg:flex-row lg:justify-between lg:py-4">
         <section className="flex flex-col lg:flex-row gap-x-2 gap-y-4 lg:items-center">
           <Link href={"/"} title="CodeRacer Home">
@@ -51,7 +51,7 @@ export function Footer() {
 
         <section
           data-name="legal-links"
-          className="text-sm flex flex-wrap flex-row gap-4 lg:items-center"
+          className="flex flex-row flex-wrap gap-4 text-sm lg:items-center"
         >
           <Link
             href={"/privacy"}
@@ -104,7 +104,7 @@ export function Footer() {
           </p>
         </section>
 
-        <div className="text-center mb-2">
+        <div className="mb-2 text-center">
           <Link href={"/privacy"} className="text-xs font-medium">
             Privacy Policy
           </Link>

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -9,13 +9,13 @@ export async function Header() {
   const user = await getCurrentUser();
 
   return (
-    <header className="sticky top-0 z-40 flex w-full border-b-2 border-primary bg-background/10 backdrop-blur-sm">
+    <header className="sticky top-0 z-40 flex w-full dark:shadow-black shadow-slate-300 dark:bg-opacity-50 bg-background/10 backdrop-blur-md">
       <div className="flex items-center w-full px-4 space-x-4 lg:container h-14 sm:space-x-0">
-        <div className="flex-1">
+        <div className="flex-1 h-full">
           <MainNav items={siteConfig.getHeaderLinks(!!user)} />
         </div>
         <MobileNav user={user} />
-        <nav className="items-center hidden space-x-2 md:flex">
+        <nav className="items-center hidden h-full space-x-2 md:flex">
           <ModeToggle />
           <UserDropdown user={user} />
         </nav>