feat: Add quest completion meter (#136)

namesakefyi · Oct 20, 2024 · 28d720f · 28d720f
1 parent f35921f
commit 28d720f
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 30 deletions.
diff --git a/.changeset/fuzzy-items-grin.md b/.changeset/fuzzy-items-grin.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Add quest completion meter
diff --git a/convex/userQuests.ts b/convex/userQuests.ts
@@ -40,7 +40,7 @@ export const getAvailableQuestsForUser = userQuery({
   },
 });
 
-export const getQuestCount = query({
+export const getGlobalQuestCount = query({
   args: { questId: v.id("quests") },
   handler: async (ctx, args) => {
     const quests = await ctx.db
@@ -52,6 +52,21 @@ export const getQuestCount = query({
   },
 });
 
+export const getCompletedQuestCount = userQuery({
+  handler: async (ctx) => {
+    const userQuests = await ctx.db
+      .query("userQuests")
+      .withIndex("userId", (q) => q.eq("userId", ctx.userId))
+      .collect();
+
+    const completedQuests = userQuests.filter(
+      (quest) => quest.completionTime !== undefined,
+    );
+
+    return completedQuests.length;
+  },
+});
+
 export const create = userMutation({
   args: { questId: v.id("quests") },
   handler: async (ctx, args) => {

diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
@@ -26,7 +26,7 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
           </div>
           <div className="w-64 h-2 rounded-full bg-gray-4 dark:bg-graydark-4 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
             <div
-              className={`absolute top-0 h-full rounded-full bg-purple-9 dark:bg-purpledark-9 forced-colors:bg-[Highlight] ${isIndeterminate ? "left-full animate-in duration-10 [--tw-enter-translate-x:calc(-16rem-1%)] slide-out-to-right-full repeat-infinite ease-out" : "left-0"}`}
+              className={`absolute top-0 h-full rounded-full bg-purple-9 dark:bg-purpledark-9 transition-all forced-colors:bg-[Highlight] ${isIndeterminate ? "left-full animate-in duration-10 [--tw-enter-translate-x:calc(-16rem-1%)] slide-out-to-right-full repeat-infinite ease-out" : "left-0"}`}
               style={{ width: `${isIndeterminate ? 40 : percentage}%` }}
             />
           </div>

diff --git a/src/routes/_authenticated/admin/quests/index.tsx b/src/routes/_authenticated/admin/quests/index.tsx
@@ -117,7 +117,7 @@ const QuestTableRow = ({
 }: {
   quest: DataModel["quests"]["document"];
 }) => {
-  const questCount = useQuery(api.userQuests.getQuestCount, {
+  const questCount = useQuery(api.userQuests.getGlobalQuestCount, {
     questId: quest._id,
   });
   const deleteQuest = useMutation(api.quests.deleteQuest);

diff --git a/src/routes/_authenticated/quests/route.tsx b/src/routes/_authenticated/quests/route.tsx
@@ -7,6 +7,7 @@ import {
   GridList,
   GridListItem,
   Modal,
+  ProgressBar,
 } from "@/components";
 import { api } from "@convex/_generated/api";
 import type { Id } from "@convex/_generated/dataModel";
@@ -113,6 +114,7 @@ function IndexRoute() {
 
   const MyQuests = () => {
     const myQuests = useQuery(api.userQuests.getQuestsForCurrentUser);
+    const completedQuests = useQuery(api.userQuests.getCompletedQuestCount);
 
     if (myQuests === undefined) return;
 
@@ -129,34 +131,47 @@ function IndexRoute() {
         />
       );
 
+    const totalQuests = myQuests.length;
+
     return (
-      <GridList aria-label="My quests">
-        {myQuests.map((quest) => {
-          if (quest === null) return null;
-
-          const Icon = ICONS[quest.icon];
-
-          return (
-            <GridListItem
-              textValue={quest.title}
-              key={quest._id}
-              href={{ to: "/quests/$questId", params: { questId: quest._id } }}
-            >
-              <div className="flex items-center gap-2">
-                <Icon className="text-gray-dim" />
-                <p className="font-bold text-lg">{quest.title}</p>
-                {quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
-              </div>
-            </GridListItem>
-          );
-        })}
-        <GridListItem
-          textValue="Add quest"
-          onAction={() => setIsNewQuestModalOpen(true)}
-        >
-          <RiAddLine /> Add quest
-        </GridListItem>
-      </GridList>
+      <div className="flex flex-col gap-4">
+        <ProgressBar
+          label="Quests complete"
+          value={completedQuests}
+          maxValue={totalQuests}
+          valueLabel={`${completedQuests} of ${totalQuests}`}
+        />
+        <GridList aria-label="My quests">
+          {myQuests.map((quest) => {
+            if (quest === null) return null;
+
+            const Icon = ICONS[quest.icon];
+
+            return (
+              <GridListItem
+                textValue={quest.title}
+                key={quest._id}
+                href={{
+                  to: "/quests/$questId",
+                  params: { questId: quest._id },
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <Icon className="text-gray-dim" />
+                  <p className="font-bold text-lg">{quest.title}</p>
+                  {quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
+                </div>
+              </GridListItem>
+            );
+          })}
+          <GridListItem
+            textValue="Add quest"
+            onAction={() => setIsNewQuestModalOpen(true)}
+          >
+            <RiAddLine /> Add quest
+          </GridListItem>
+        </GridList>
+      </div>
     );
   };