fix: only show completed countries when logged in

src/pages/Game/MapChart.tsx

@@ -5,6 +5,7 @@ import { Minus, Plus } from "lucide-react";
 import { useSearchParams } from "react-router-dom";
 import { ZoomableGroup, ComposableMap, Geographies, Geography, Marker } from "react-simple-maps";
 import useBreakpoint from "use-breakpoint";
+import { useUserStore } from "@state/userStore.ts";
 import { BREAKPOINTS } from "@utils/constants.ts";
 import { useCountryInformation } from "@utils/hooks/useCountryInformation";
 
@@ -14,6 +15,7 @@ interface Position {
 }
 
 export const MapChart: FC = () => {
+  const { isLoggedIn } = useUserStore();
   const [searchParams, setSearchParams] = useSearchParams();
   const [position, setPosition] = useState<Position>({ coordinates: [5, 46], zoom: 1 });
   const { breakpoint } = useBreakpoint(BREAKPOINTS);
@@ -147,15 +149,17 @@ export const MapChart: FC = () => {
         </Tooltip>
       </div>
 
-      <div className="absolute -bottom-14 left-0 flex items-center md:left-4">
-        <Tooltip content="Current selected country">
-          <div className="flex gap-2">
-            <Typography variant="small" className="font-medium">
-              {countriesPassedBy} countries completed out of 202
-            </Typography>
-          </div>
-        </Tooltip>
-      </div>
+      {isLoggedIn && (
+        <div className="absolute -bottom-14 left-0 flex items-center md:left-4">
+          <Tooltip content="Current selected country">
+            <div className="flex gap-2">
+              <Typography variant="small" className="font-medium">
+                {countriesPassedBy} countries completed out of 202
+              </Typography>
+            </div>
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 };