Merge pull request #108 from webdevcody/feat-attempt-page

Move attempts visualizations to a separate page

app/play/[level]/[attempt]/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeftIcon } from "@radix-ui/react-icons";
+import { useQuery } from "convex/react";
+import Link from "next/link";
+import { Visualizer } from "@/components/Visualizer";
+import { Button } from "@/components/ui/button";
+import { api } from "@/convex/_generated/api";
+
+export default function PlayLevelAttemptPage({
+  params,
+}: {
+  params: { level: string; attempt: string };
+}) {
+  const level = Number.parseInt(params.level, 10);
+  const attemptNum = Number.parseInt(params.attempt, 10);
+
+  const attempt = useQuery(api.playerresults.getUserAttempt, {
+    level,
+    attempt: attemptNum,
+  });
+
+  if (attempt === undefined) {
+    return <p>Loading...</p>;
+  } else if (attempt === null) {
+    return <p className="text-red-500">Attempt Not Found</p>;
+  }
+
+  return (
+    <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+      <div className="flex w-full items-center justify-between">
+        <Button variant="outline" asChild className="flex items-center gap-2">
+          <Link href={`/play/${level}`}>
+            <ChevronLeftIcon /> Back To Night #{level}
+          </Link>
+        </Button>
+      </div>
+      <h1 className="text-center text-3xl font-bold">Night #{level}</h1>
+      <h2 className="mb-4 text-xl font-semibold">Attempt #{attemptNum}</h2>
+
+      <div className="flex flex-col items-center gap-y-2">
+        <Visualizer autoReplay autoStart controls={false} map={attempt.grid} />
+        <div
+          className={`mt-4 text-xl font-semibold ${
+            attempt.didWin ? "text-green-500" : "text-red-500"
+          }`}
+        >
+          {attempt.didWin ? "You Survived!" : "You Died!"}
+        </div>
+      </div>
+    </div>
+  );
+}

app/play/[level]/page.tsx

@@ -278,21 +278,24 @@ export default function PlayLevelPage({
             {tries && tries.attempts && tries.attempts.length > 0 && (
               <>
                 <div className="mt-4 text-2xl font-semibold">Tries</div>
-                <div className="flex w-full flex-wrap items-center justify-around">
-                  {tries.attempts.map((attempt) => (
-                    <div
+                <div className="flex w-full flex-wrap items-center justify-around gap-2">
+                  {tries.attempts.map((attempt, idx) => (
+                    <Button
+                      asChild
+                      className={
+                        attempt?.didWin ? "border-green-500" : "border-red-500"
+                      }
                       key={attempt?._id}
-                      className="flex flex-col items-center gap-y-2"
+                      variant="outline"
                     >
-                      {attempt?.grid && <Map map={attempt.grid} />}
-                      <div
-                        className={`mt-4 text-xl font-semibold ${
-                          attempt?.didWin ? "text-green-500" : "text-red-500"
-                        }`}
+                      <Link
+                        key={attempt?._id}
+                        className="flex flex-col items-center gap-y-2"
+                        href={`/play/${level}/${idx + 1}`}
                       >
-                        {attempt?.didWin ? "You Survived!" : "You Died!"}
-                      </div>
-                    </div>
+                        Attempt #{idx + 1}
+                      </Link>
+                    </Button>
                   ))}
                 </div>
               </>

convex/playerresults.ts

@@ -1,7 +1,51 @@
 import { getAuthUserId } from "@convex-dev/auth/server";
 import { v } from "convex/values";
+import { api } from "./_generated/api";
+import { Id } from "./_generated/dataModel";
 import { mutation, query } from "./_generated/server";
 
+export const getUserAttempt = query({
+  args: {
+    attempt: v.number(),
+    level: v.number(),
+  },
+  handler: async (ctx, args) => {
+    const userId = await getAuthUserId(ctx);
+
+    if (!userId) {
+      return null;
+    }
+
+    const map = await ctx.runQuery(api.maps.getMapByLevel, {
+      level: args.level,
+    });
+
+    if (map === null) {
+      return null;
+    }
+
+    const userResults = await ctx.db
+      .query("userResults")
+      .withIndex("by_mapId_userId", (q) =>
+        q.eq("mapId", map._id).eq("userId", userId),
+      )
+      .collect();
+
+    if (userResults.length !== 1) {
+      return null;
+    }
+
+    const userResult = userResults[0];
+
+    if (userResult.attempts.length < args.attempt) {
+      return null;
+    }
+
+    const attemptId: Id<"attempts"> = userResult.attempts[args.attempt - 1];
+    return await ctx.db.get(attemptId);
+  },
+});
+
 export const getUserMapStatus = query({
   handler: async (ctx) => {
     const userId = await getAuthUserId(ctx);