From f0346fce4e7ec2604264a14928d2deee88633160 Mon Sep 17 00:00:00 2001
From: Taken <taken@mairimashita.org>
Date: Wed, 17 Sep 2025 15:39:30 +0200
Subject: [PATCH] Updated general progress

---
 .../[ign]/_components/GenericProgress.tsx     | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/app/(stats)/player/[ign]/_components/GenericProgress.tsx b/src/app/(stats)/player/[ign]/_components/GenericProgress.tsx
index a8a9296..1f5da0d 100644
--- a/src/app/(stats)/player/[ign]/_components/GenericProgress.tsx
+++ b/src/app/(stats)/player/[ign]/_components/GenericProgress.tsx
@@ -27,12 +27,14 @@ type GenericProgressNoTooltipProps = {
 export function GenericProgressNoTooltip({ text, percent, className }: GenericProgressNoTooltipProps) {
     return (
         <div className="flex flex-1">
-            <div
-                className={cn("h-5 rounded-l-md flex items-center justify-center", percent >= 100 ? "rounded-r-md" : undefined, className)}
-                style={{ width: `${percent > 100 ? 100 : percent}%` }}
-            >
-                {text}
-            </div>
+            {percent > 0 && (
+                <div
+                    className={cn("h-5 rounded-l-md flex items-center justify-center", percent >= 100 ? "rounded-r-md" : undefined, className)}
+                    style={{ width: `${percent > 100 ? 100 : percent}%` }}
+                >
+                    {text}
+                </div>
+            )}
             {percent < 100 && (
                 <div
                     className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}
@@ -69,15 +71,17 @@ export function GenericProgress({ percent, tooltipId, tooltipContent, className,
                     data-tooltip-content={tooltipContent}
                     className="flex flex-1"
                 >
-                    <div
-                        data-id={tooltipId}
-                        className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
-                        style={{
-                            width: `${percent > 100 ? 100 : percent}%`,
-                            background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
-                        }}
-                    >
-                    </div>
+                    {percent > 0 && (
+                        <div
+                            data-id={tooltipId}
+                            className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
+                            style={{
+                                width: `${percent > 100 ? 100 : percent}%`,
+                                background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
+                            }}
+                        >
+                        </div>
+                    )}
                     {percent < 100 && (
                         <div
                             data-id={tooltipId}
@@ -98,12 +102,14 @@ export function GenericProgress({ percent, tooltipId, tooltipContent, className,
                 data-tooltip-content={tooltipContent}
                 className="flex flex-1"
             >
-                <div
-                    data-id={tooltipId}
-                    className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
-                    style={{ width: `${percent > 100 ? 100 : percent}%` }}
-                >
-                </div>
+                {percent > 0 && (
+                    <div
+                        data-id={tooltipId}
+                        className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
+                        style={{ width: `${percent > 100 ? 100 : percent}%` }}
+                    >
+                    </div>
+                )}
                 {percent < 100 && (
                     <div
                         data-id={tooltipId}