From 6a122d211cf56938d8d2de0a5a89c2dfe7433783 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Sat, 19 Oct 2024 22:52:25 +0300
Subject: [PATCH 1/4] Move attempts visualizations to separate page

---
 app/play/[level]/[attempt]/page.tsx | 61 +++++++++++++++++++++++++++++
 app/play/[level]/page.tsx           | 27 +++++++------
 convex/playerresults.ts             | 46 +++++++++++++++++++++-
 3 files changed, 121 insertions(+), 13 deletions(-)
 create mode 100644 app/play/[level]/[attempt]/page.tsx

diff --git a/app/play/[level]/[attempt]/page.tsx b/app/play/[level]/[attempt]/page.tsx
new file mode 100644
index 0000000..1b65d0b
--- /dev/null
+++ b/app/play/[level]/[attempt]/page.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { Authenticated, useQuery } from "convex/react";
+import { ChevronLeftIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Visualizer } from "@/components/Visualizer";
+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 (
+    <Authenticated>
+      <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
+        <div className="w-full flex justify-between items-center">
+          <Button variant="outline" asChild className="flex gap-2 items-center">
+            <Link href={`/play/${level}`}>
+              <ChevronLeftIcon /> Back To Night #{level}
+            </Link>
+          </Button>
+        </div>
+        <h1 className="text-3xl font-bold text-center">Night #{level}</h1>
+        <h2 className="text-xl font-semibold mb-4">Attempt #{attemptNum}</h2>
+
+        <div className="flex flex-col gap-y-2 items-center">
+          <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>
+    </Authenticated>
+  );
+}
diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
index 2078ce4..5ac0648 100644
--- a/app/play/[level]/page.tsx
+++ b/app/play/[level]/page.tsx
@@ -281,21 +281,24 @@ export default function PlayLevelPage({
             {tries && tries.attempts && tries.attempts.length > 0 && (
               <>
                 <div className="font-semibold text-2xl mt-4">Tries</div>
-                <div className="flex flex-wrap items-center justify-around w-full">
-                  {tries.attempts.map((attempt) => (
-                    <div
+                <div className="flex flex-wrap items-center justify-around w-full 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 gap-y-2 items-center"
+                      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 gap-y-2 items-center"
+                        href={`/play/${level}/${idx + 1}`}
                       >
-                        {attempt?.didWin ? "You Survived!" : "You Died!"}
-                      </div>
-                    </div>
+                        Attempt #{idx + 1}
+                      </Link>
+                    </Button>
                   ))}
                 </div>
               </>
diff --git a/convex/playerresults.ts b/convex/playerresults.ts
index 1b700e0..e4ae0cd 100644
--- a/convex/playerresults.ts
+++ b/convex/playerresults.ts
@@ -1,6 +1,50 @@
+import { getAuthUserId } from "@convex-dev/auth/server";
 import { v } from "convex/values";
+import { Id } from "./_generated/dataModel";
+import { api } from "./_generated/api";
 import { mutation, query } from "./_generated/server";
-import { getAuthUserId } from "@convex-dev/auth/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) => {

From 04e8289f1ab2d68c1409c78a3667f81b6ddea9d6 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Sun, 20 Oct 2024 14:07:17 +0300
Subject: [PATCH 2/4] Fix TW classes order

---
 app/play/[level]/[attempt]/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/play/[level]/[attempt]/page.tsx b/app/play/[level]/[attempt]/page.tsx
index 1b65d0b..8804786 100644
--- a/app/play/[level]/[attempt]/page.tsx
+++ b/app/play/[level]/[attempt]/page.tsx
@@ -29,18 +29,18 @@ export default function PlayLevelAttemptPage({
 
   return (
     <Authenticated>
-      <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
-        <div className="w-full flex justify-between items-center">
-          <Button variant="outline" asChild className="flex gap-2 items-center">
+      <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-3xl font-bold text-center">Night #{level}</h1>
-        <h2 className="text-xl font-semibold mb-4">Attempt #{attemptNum}</h2>
+        <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 gap-y-2 items-center">
+        <div className="flex flex-col items-center gap-y-2">
           <Visualizer
             autoReplay
             autoStart

From 4569c958b1a007f92f130649fab1ab980f22b64a Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Sun, 20 Oct 2024 14:51:53 +0300
Subject: [PATCH 3/4] Fix code style

---
 app/play/[level]/[attempt]/page.tsx | 4 ++--
 app/play/[level]/page.tsx           | 6 +++---
 convex/playerresults.ts             | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/play/[level]/[attempt]/page.tsx b/app/play/[level]/[attempt]/page.tsx
index 8804786..6d5a642 100644
--- a/app/play/[level]/[attempt]/page.tsx
+++ b/app/play/[level]/[attempt]/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import React from "react";
-import { Authenticated, useQuery } from "convex/react";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
+import { Authenticated, useQuery } from "convex/react";
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
 import { Visualizer } from "@/components/Visualizer";
+import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 
 export default function PlayLevelAttemptPage({
diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
index 50f2275..1409584 100644
--- a/app/play/[level]/page.tsx
+++ b/app/play/[level]/page.tsx
@@ -277,8 +277,8 @@ export default function PlayLevelPage({
           <Authenticated>
             {tries && tries.attempts && tries.attempts.length > 0 && (
               <>
-                <div className="font-semibold text-2xl mt-4">Tries</div>
-                <div className="flex flex-wrap items-center justify-around w-full gap-2">
+                <div className="mt-4 text-2xl font-semibold">Tries</div>
+                <div className="flex w-full flex-wrap items-center justify-around gap-2">
                   {tries.attempts.map((attempt, idx) => (
                     <Button
                       asChild
@@ -290,7 +290,7 @@ export default function PlayLevelPage({
                     >
                       <Link
                         key={attempt?._id}
-                        className="flex flex-col gap-y-2 items-center"
+                        className="flex flex-col items-center gap-y-2"
                         href={`/play/${level}/${idx + 1}`}
                       >
                         Attempt #{idx + 1}
diff --git a/convex/playerresults.ts b/convex/playerresults.ts
index e4ae0cd..21056aa 100644
--- a/convex/playerresults.ts
+++ b/convex/playerresults.ts
@@ -1,7 +1,7 @@
 import { getAuthUserId } from "@convex-dev/auth/server";
 import { v } from "convex/values";
-import { Id } from "./_generated/dataModel";
 import { api } from "./_generated/api";
+import { Id } from "./_generated/dataModel";
 import { mutation, query } from "./_generated/server";
 
 export const getUserAttempt = query({

From 27e98bd843ea26d45439ca27a9200ea14b4601e5 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Sun, 20 Oct 2024 14:54:27 +0300
Subject: [PATCH 4/4] Remove authenticated wrapper

---
 app/play/[level]/[attempt]/page.tsx | 49 +++++++++++++----------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/app/play/[level]/[attempt]/page.tsx b/app/play/[level]/[attempt]/page.tsx
index 6d5a642..04d4333 100644
--- a/app/play/[level]/[attempt]/page.tsx
+++ b/app/play/[level]/[attempt]/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import React from "react";
+import * as React from "react";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { Authenticated, useQuery } from "convex/react";
+import { useQuery } from "convex/react";
 import Link from "next/link";
 import { Visualizer } from "@/components/Visualizer";
 import { Button } from "@/components/ui/button";
@@ -28,34 +28,27 @@ export default function PlayLevelAttemptPage({
   }
 
   return (
-    <Authenticated>
-      <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="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 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>
-    </Authenticated>
+    </div>
   );
 }