fixed closing drawer + reconnect

backend/controller/userController.ts

@@ -17,9 +17,9 @@ import {
   upsertCollection,
 } from "../repositories/collectionRepository";
 import { getWeight, lootboxes } from "../../shared/lootboxes";
-import { weightedPickRandom } from "../../shared/utils";
+import { round, weightedPickRandom } from "../../shared/utils";
 import { emit } from "../events";
-import { Game } from "../schema";
+import { Game, Gems } from "../schema";
 import { and, count, eq, gt, max, not, sum } from "drizzle-orm";
 import dayjs from "dayjs";
 
@@ -222,10 +222,19 @@ export const userController = createController({
         })
         .from(Game)
         .where(and(eq(Game.user, id), not(eq(Game.finished, 0))));
+      const [{ totalGems, currentGems }] = await db
+        .select({
+          totalGems: Gems.totalCount,
+          currentGems: Gems.count,
+        })
+        .from(Gems)
+        .where(eq(Gems.user, id));
       return {
         totalGames,
         highestStage,
-        averageStage: Number(totalStages) / totalGames,
+        averageStage: round(Number(totalStages) / totalGames, 3),
+        totalGems,
+        currentGems,
       };
     },
   ),

backend/repositories/gemsRepository.ts

@@ -40,6 +40,6 @@ export const removeGems = async (
   if (count - gems < 0) throw new Error("Not enough gems");
   await db
     .update(Gems)
-    .set({ count: count - gems, totalCount: totalCount - gems })
+    .set({ count: count - gems, totalCount: totalCount })
     .where(eq(Gems.user, user));
 };

shared/utils.ts

@@ -20,3 +20,8 @@ export const weightedPickRandom = <T>(
   }
   return arr[arr.length - 1];
 };
+
+export const round = (value: number, digits: number) => {
+  const factor = Math.pow(10, digits);
+  return Math.round(value * factor) / factor;
+};

src/Shell.tsx

@@ -57,7 +57,14 @@ const Shell: React.FC<PropsWithChildren> = ({ children }) => {
         animate={{ x }}
         transition={{ type: "tween" }}
       >
-        <div className="w-full p-2 flex flex-col gap-6">
+        <div
+          className="w-full p-2 flex flex-col gap-6"
+          onClick={() => {
+            if (isMobile) {
+              setIsOpen(false);
+            }
+          }}
+        >
           <h2 className="[background:var(--bg-brand)] [-webkit-text-fill-color:transparent] font-black [-webkit-background-clip:text!important] font-mono text-3xl">
             Business
             <br />
@@ -101,7 +108,10 @@ const Shell: React.FC<PropsWithChildren> = ({ children }) => {
           <Button
             className="absolute left-4 bg-black border-white/10 border-y-1 border-r-1 rounded-l-none"
             variant="ghost"
-            onClick={() => setIsOpen((isOpen) => !isOpen)}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsOpen((isOpen) => !isOpen);
+            }}
             aria-label="Menu"
           >
             <Menu />

src/views/collection/Collection.tsx

@@ -11,6 +11,7 @@ import {
 } from "../../components/DropdownMenu";
 import { cn } from "../../lib/utils";
 import { useWSMutation, useWSQuery } from "../../hooks";
+import { Suspense } from "react";
 
 const Collection = () => {
   const { data: collection, refetch } = useWSQuery(
@@ -75,17 +76,19 @@ const Collection = () => {
                   </DropdownMenu>
                 )}
               </div>
-              <Board
-                game={testBoard(theme.id)}
-                onLeftClick={() => {}}
-                restartGame={() => {}}
-                onRightClick={() => {}}
-                width={11 * 32}
-                height={4 * 32}
-                className={cn(
-                  selected && "outline-primary outline-4 rounded-md",
-                )}
-              />
+              <Suspense>
+                <Board
+                  game={testBoard(theme.id)}
+                  onLeftClick={() => {}}
+                  restartGame={() => {}}
+                  onRightClick={() => {}}
+                  width={11 * 32}
+                  height={4 * 32}
+                  className={cn(
+                    selected && "outline-primary outline-4 rounded-md",
+                  )}
+                />
+              </Suspense>
             </div>
           );
         })}

src/views/endless/Endless.tsx

@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 import { gameIdAtom } from "../../atoms";
 import { Button } from "../../components/Button";
 import LeaderboardButton from "../../components/LeaderboardButton";
-import { Fragment, useEffect } from "react";
+import { Fragment, startTransition, Suspense, useEffect } from "react";
 import { Board } from "../../components/LazyBoard";
 
 interface EndlessProps {
@@ -41,31 +41,33 @@ const Endless: React.FC<EndlessProps> = (props) => {
         <div className="grow" />
         <LeaderboardButton label="View Leaderboard" />
       </div>
-      <Board
-        game={game}
-        restartGame={async () => {
-          const gameId = await startGame.mutateAsync(null);
-          setGameId(gameId.uuid);
-        }}
-        onLeftClick={(x, y) => {
-          reveal.mutateAsync({ x, y });
-        }}
-        onRightClick={(x, y) => {
-          const isFlagged = game.isFlagged[x][y];
-          const isQuestionMark = game.isQuestionMark[x][y];
-          if (!isFlagged && !isQuestionMark) {
-            placeFlag.mutateAsync({ x, y });
-            return;
-          }
-          if (isFlagged && settings?.placeQuestionMark) {
-            placeQuestionMark.mutateAsync({ x, y });
-            return;
-          } else {
-            clearTile.mutateAsync({ x, y });
-            return;
-          }
-        }}
-      />
+      <Suspense>
+        <Board
+          game={game}
+          restartGame={async () => {
+            const gameId = await startGame.mutateAsync(null);
+            setGameId(gameId.uuid);
+          }}
+          onLeftClick={(x, y) => {
+            reveal.mutateAsync({ x, y });
+          }}
+          onRightClick={(x, y) => {
+            const isFlagged = game.isFlagged[x][y];
+            const isQuestionMark = game.isQuestionMark[x][y];
+            if (!isFlagged && !isQuestionMark) {
+              placeFlag.mutateAsync({ x, y });
+              return;
+            }
+            if (isFlagged && settings?.placeQuestionMark) {
+              placeQuestionMark.mutateAsync({ x, y });
+              return;
+            } else {
+              clearTile.mutateAsync({ x, y });
+              return;
+            }
+          }}
+        />
+      </Suspense>
     </>
   ) : (
     <div className="w-full grid md:grid-cols-[350px_1fr]">
@@ -76,7 +78,9 @@ const Endless: React.FC<EndlessProps> = (props) => {
           variant="primary"
           onClick={async () => {
             const gameId = await startGame.mutateAsync(null);
-            setGameId(gameId.uuid);
+            startTransition(() => {
+              setGameId(gameId.uuid);
+            });
           }}
         >
           Start Game

src/views/profile/Profile.tsx

@@ -7,6 +7,7 @@ import {
   TooltipTrigger,
 } from "../../components/Tooltip";
 import PastMatch from "../../components/PastMatch";
+import GemsIcon from "../../components/GemIcon";
 
 const Profile: React.FC = () => {
   const { data: username } = useWSQuery("user.getSelf", null);
@@ -43,6 +44,11 @@ const Profile: React.FC = () => {
           <p>
             Average Stage: {Math.round(profile?.averageStage ?? 1 * 100) / 100}
           </p>
+          <p>
+            Gems Spend:{" "}
+            {(profile?.totalGems ?? 0) - (profile?.currentGems ?? 0)}{" "}
+            <GemsIcon />
+          </p>
         </div>
       </div>
       <div className="flex flex-col gap-4">

src/wsClient.ts

@@ -25,6 +25,17 @@ const createWSClient = () => {
   let reconnectAttempts = 0;
   const maxReconnectAttempts = 5;
 
+  const tryReconnect = () => {
+    if (reconnectAttempts < maxReconnectAttempts) {
+      setTimeout(() => {
+        reconnectAttempts++;
+        connect();
+      }, 1000 * reconnectAttempts);
+    } else {
+      console.error("Max reconnect attempts reached");
+    }
+  };
+
   const connect = () => {
     ws = new WebSocket(connectionString);
 
@@ -42,16 +53,7 @@ const createWSClient = () => {
 
     ws.onmessage = emitMessage;
 
-    ws.onclose = () => {
-      if (reconnectAttempts < maxReconnectAttempts) {
-        setTimeout(() => {
-          reconnectAttempts++;
-          connect();
-        }, 1000 * reconnectAttempts);
-      } else {
-        console.error("Max reconnect attempts reached");
-      }
-    };
+    ws.onclose = tryReconnect;
 
     ws.onerror = (err) => {
       console.error("WebSocket error", err);
@@ -60,6 +62,11 @@ const createWSClient = () => {
   };
 
   connect();
+  document.addEventListener("focus", () => {
+    if (ws.readyState != ws.OPEN) {
+      tryReconnect();
+    }
+  });
 
   addMessageListener((event: MessageEvent) => {
     const data = JSON.parse(event.data) as Events;

vite.config.ts

@@ -2,12 +2,17 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
 import { imagetools } from "vite-imagetools";
-import { analyzer } from "vite-bundle-analyzer";
+// import { analyzer } from "vite-bundle-analyzer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     port: 3003,
   },
-  plugins: [react(), tailwindcss(), imagetools(), analyzer()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    imagetools(),
+    // analyzer()
+  ],
 });