Merge branch 'main' into added-filter-night-overview

webdevcody · Oct 18, 2024 · 427d8d0 · 427d8d0
2 parents a2f68b5 + dccf258
commit 427d8d0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -15,6 +15,8 @@ import {
 import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+import { StarFilledIcon } from "@radix-ui/react-icons";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps, {});
@@ -105,6 +107,20 @@ export default function PlayPage() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {filteredMaps.map((map) => (
           <Card key={map._id} className="flex flex-col h-full">
+          <Card
+            key={map._id}
+            className={cn(
+              "flex flex-col h-full relative",
+              resMap.get(map._id)
+                ? "bg-green-500"
+                : resMap.has(map._id)
+                  ? "bg-red-500"
+                  : "",
+            )}
+          >
+            {resMap.get(map._id) && (
+              <StarFilledIcon className="absolute top-3 right-3 w-9 h-9 -rotate-45 text-yellow-500" />
+            )}
             <CardHeader>
               <CardTitle className="text-xl font-semibold text-center">
                 Night #{map.level}

diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
@@ -13,8 +13,15 @@ export function ThemeToggle() {
       type="single"
       size="sm"
       value={theme}
-      onValueChange={(e) => setTheme(e)}
-      className={`${"flex px-1 py-1 rounded-md"} ${theme === "light" || (theme === "system" && darkMode === "light") ? "bg-blue-200" : "bg-slate-700"}`}
+      onValueChange={(newTheme) => {
+        // This check is needed because if the user clicks on a button twice the button gets unselected and the newTheme is undefined
+        if (newTheme) {
+          setTheme(newTheme);
+        } else {
+          console.log("No theme selected, keeping current theme:", theme);
+        }
+      }}
+      className="flex px-1 py-1 rounded-md bg-blue-200 dark:bg-slate-700"
     >
       {theme === "light" || (theme === "system" && darkMode === "light") ? (
         <ToggleGroupItem value="dark" aria-label="Dark">