Add image variables

deadlock-api · Feb 6, 2025 · 5cb069e · 5cb069e
1 parent 1b60629
commit 5cb069e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 25 deletions.
diff --git a/app/components/widgets/StatDisplay.tsx b/app/components/widgets/StatDisplay.tsx
@@ -4,7 +4,7 @@ import { cn } from "~/lib/utils";
 import type { StatDisplayProps } from "~/types/widget";
 
 export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "default", className }) => {
-  const { label, value, prefix, suffix } = stat;
+  const { variable, label, value, prefix, suffix } = stat;
 
   return (
     <div
@@ -22,29 +22,35 @@ export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "default", cla
         className,
       )}
     >
-      <span
-        className={cn(
-          "text-[11px] font-medium tracking-wide uppercase text-center",
-          theme === "light" ? "text-gray-500" : "text-white/60",
-        )}
-      >
-        {label}
-      </span>
-      <div className={cn("mt-0.5 flex items-baseline justify-center gap-1")}>
-        {prefix && (
-          <span className={cn("text-xs font-medium", theme === "light" ? "text-gray-500" : "text-white/60")}>
-            {prefix}
+      {variable.endsWith("_img") ? (
+        <img src={value as string} alt={label} className="w-10 h-10 rounded-full object-cover" />
+      ) : (
+        <>
+          <span
+            className={cn(
+              "text-[11px] font-medium tracking-wide uppercase text-center",
+              theme === "light" ? "text-gray-500" : "text-white/60",
+            )}
+          >
+            {label}
           </span>
-        )}
-        <span className={cn("font-bold tracking-tight", theme === "light" ? "text-gray-900" : "text-white")}>
-          {value ?? "-"}
-        </span>
-        {suffix && (
-          <span className={cn("text-xs font-medium", theme === "light" ? "text-gray-500" : "text-white/60")}>
-            {suffix}
-          </span>
-        )}
-      </div>
+          <div className={cn("mt-0.5 flex items-baseline justify-center gap-1")}>
+            {prefix && (
+              <span className={cn("text-xs font-medium", theme === "light" ? "text-gray-500" : "text-white/60")}>
+                {prefix}
+              </span>
+            )}
+            <span className={cn("font-bold tracking-tight", theme === "light" ? "text-gray-900" : "text-white")}>
+              {value ?? "-"}
+            </span>
+            {suffix && (
+              <span className={cn("text-xs font-medium", theme === "light" ? "text-gray-500" : "text-white/60")}>
+                {suffix}
+              </span>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };
diff --git a/app/components/widgets/box.tsx b/app/components/widgets/box.tsx
@@ -85,6 +85,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
     if (!stats) return [];
 
     return displayVariables.map((variable, index) => ({
+      variable,
       value: stats[variable],
       label: displayLabels[index] || snakeToPretty(variable),
     }));

diff --git a/app/constants/widget.ts b/app/constants/widget.ts
@@ -1,8 +1,14 @@
 export const UPDATE_INTERVAL_MS = 2 * 60 * 1000;
 
-export const DEFAULT_VARIABLES = ["leaderboard_place", "leaderboard_rank", "wins_losses_today", "total_kd"];
+export const DEFAULT_VARIABLES = [
+  "leaderboard_rank_img",
+  "leaderboard_place",
+  "wins_losses_today",
+  "total_kd",
+  "hours_played",
+];
 
-export const DEFAULT_LABELS = ["Place", "Rank", "Daily W-L", "K/D"];
+export const DEFAULT_LABELS = ["Rank", "Place", "Daily W-L", "K/D", "Hours Played"];
 
 export const THEME_STYLES = {
   default: {

diff --git a/app/types/widget.ts b/app/types/widget.ts
@@ -1,6 +1,7 @@
 export type StatValue = string | number | null;
 
 export type Stat = {
+  variable: string;
   value: StatValue;
   label: string;
   icon?: string;