From 0051067371770390fd7aa726d0a59cb09df55877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Fri, 18 Oct 2024 18:24:45 +1100
Subject: [PATCH 1/2] fix: theme toggle did weird things

---
 components/ThemeToggle.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index dee8ecd..ea3b0f6 100644
--- 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">

From 947f79779faab5a4772a4541c21d7129d04c9d58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Fri, 18 Oct 2024 19:02:59 +1100
Subject: [PATCH 2/2] style: made it more obvious if you already bet a level

---
 app/play/page.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/play/page.tsx b/app/play/page.tsx
index f384264..842ed57 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -14,6 +14,8 @@ import {
 } from "@/components/ui/card";
 import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { StarFilledIcon } from "@radix-ui/react-icons";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps, {});
@@ -67,7 +69,20 @@ export default function PlayPage() {
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {maps.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}