From 8f9a71c6363244175723554019471a057da2f8fc Mon Sep 17 00:00:00 2001
From: MasterGordon <gologo.x@gmail.com>
Date: Thu, 17 Oct 2024 00:43:43 +0200
Subject: [PATCH] fixed theme preview

---
 src/components/Board.tsx | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index a41afbf..76e3327 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -122,7 +122,7 @@ const Board: React.FC<BoardProps> = (props) => {
   }, [onViewportChange]);
   const theme = useTheme(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    themes.find((t) => t.id === (game.theme as any))!.theme
+    themes.find((t) => t.id === (game.theme as any))!.theme,
   );
   const boardWidth = game.width * (theme?.size || 0);
   const boardHeight = game.height * (theme?.size || 0);
@@ -154,7 +154,7 @@ const Board: React.FC<BoardProps> = (props) => {
         className={cn(
           "w-full h-[70vh] overflow-hidden outline-white/40 outline-2 flex flex-col",
           zenMode && "fixed top-0 left-0 z-50 right-0 bottom-0 h-[100vh]",
-          props.className
+          props.className,
         )}
         style={{
           width: props.width ? `${props.width}px` : undefined,
@@ -163,22 +163,24 @@ const Board: React.FC<BoardProps> = (props) => {
         ref={ref}
       >
         <div className="relative">
-          <div className="absolute right-4 top-4 text-white/70 flex gap-2">
-            <Button variant="ghost" onClick={() => restartGame()} size="sm">
-              <RotateCcw className="size-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              onClick={() => setZenMode(!zenMode)}
-              size="sm"
-            >
-              {props.width || props.height ? undefined : !zenMode ? (
-                <Maximize2 className="size-4" />
-              ) : (
-                <Minimize2 className="size-4" />
-              )}
-            </Button>
-          </div>
+          {!props.width && !props.height && (
+            <div className="absolute right-4 top-4 text-white/70 flex gap-2">
+              <Button variant="ghost" onClick={() => restartGame()} size="sm">
+                <RotateCcw className="size-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => setZenMode(!zenMode)}
+                size="sm"
+              >
+                {!zenMode ? (
+                  <Maximize2 className="size-4" />
+                ) : (
+                  <Minimize2 className="size-4" />
+                )}
+              </Button>
+            </div>
+          )}
           {zenMode && (
             <div className="absolute top-4 left-4 w-full h-full text-white/70 font-mono text-lg flex">
               {game.minesCount - game.isFlagged.flat().filter((f) => f).length}
@@ -317,7 +319,7 @@ const Tile = ({
       y: theme.size * 0.5,
       anchor: 0.5,
     }),
-    [scale, theme.size]
+    [scale, theme.size],
   );
   let content: ReactNode = null;
   if (isFlagged) {