Add prefix, suffix and fontColorLikeRank settings for raw widget

deadlock-api · Feb 16, 2025 · 6c4c028 · 6c4c028
1 parent f960f3e
commit 6c4c028
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 18 deletions.
diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx
@@ -29,6 +29,9 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
   const [widgetPreviewBackgroundColor, setWidgetPreviewBackgroundColor] = useState<PreviewBackgroundColor>("#f3f4f6");
   const [variables, setVariables] = useState<string[]>(DEFAULT_VARIABLES);
   const [variable, setVariable] = useState<string>("wins_losses_today");
+  const [prefix, setPrefix] = useState<string>("Score: ");
+  const [suffix, setSuffix] = useState<string>("");
+  const [fontColorLikeRank, setFontColorLikeRank] = useState<boolean>(true);
   const [fontColor, setFontColor] = useState<Color>("#ffffff");
   const [labels, setLabels] = useState<string[]>(DEFAULT_LABELS);
   const [extraArgs, setExtraArgs] = useState<{ [key: string]: string }>({});
@@ -93,14 +96,20 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
       case "raw":
         url.searchParams.set("fontColor", fontColor);
         url.searchParams.set("variable", variable);
+        url.searchParams.set("fontColorLikeRank", fontColorLikeRank.toString());
+        url.searchParams.set("prefix", prefix);
+        url.searchParams.set("suffix", suffix);
         setWidgetUrl(url.toString());
         setWidgetPreview(
           <RawWidget
             region={region as Region}
             accountId={accountId}
             variable={variable}
             fontColor={fontColor}
+            fontColorLikeRank={fontColorLikeRank}
             extraArgs={extraArgs}
+            prefix={prefix}
+            suffix={suffix}
           />,
         );
         break;
@@ -123,6 +132,9 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     showMatchHistory,
     numMatches,
     opacity,
+    prefix,
+    suffix,
+    fontColorLikeRank,
   ]);
 
   const themes: { value: Theme; label: string }[] = [
@@ -175,8 +187,8 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
         </div>
 
         {widgetType === "raw" && (
-          <div className="grid grid-cols-2 gap-4">
-            <div>
+          <>
+            <div className="w-fit">
               <label htmlFor="variable" className="block text-sm font-medium text-gray-700">
                 Variable
               </label>
@@ -194,24 +206,64 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
                 ))}
               </select>
             </div>
-            <div>
-              <label htmlFor="fontColor" className="block text-sm font-medium text-gray-700">
-                Font Color
-              </label>
-              <input
-                type="color"
-                id="fontColor"
-                value={fontColor}
-                onChange={(e) => setFontColor(e.target.value as Color)}
-                className="mt-1 block w-full h-10 rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 text-black"
-              />
+            <div className="grid grid-cols-2 items-center w-full gap-4">
+              <div>
+                <label htmlFor="prefix" className="block text-sm font-medium text-gray-700">
+                  Prefix
+                </label>
+                <input
+                  type="text"
+                  id="prefix"
+                  value={prefix}
+                  onChange={(e) => setPrefix(e.target.value)}
+                  className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 text-black"
+                />
+              </div>
+              <div>
+                <label htmlFor="suffix" className="block text-sm font-medium text-gray-700">
+                  Suffix
+                </label>
+                <input
+                  type="text"
+                  id="suffix"
+                  value={suffix}
+                  onChange={(e) => setSuffix(e.target.value)}
+                  className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 text-black"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 items-center w-full gap-4">
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="fontColorLikeRank"
+                  checked={fontColorLikeRank}
+                  onChange={(e) => setFontColorLikeRank(e.target.checked)}
+                  className="block rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs focus:border-blue-500 focus:outline-hidden text-black"
+                />
+                <label htmlFor="fontColor" className="block text-sm font-medium text-gray-700">
+                  Font Color Like Rank (if available)
+                </label>
+              </div>
+              <div>
+                <label htmlFor="fontColor" className="block text-sm font-medium text-gray-700">
+                  Font Color
+                </label>
+                <input
+                  type="color"
+                  id="fontColor"
+                  value={fontColor}
+                  onChange={(e) => setFontColor(e.target.value as Color)}
+                  className="mt-1 block w-full h-10 rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 text-black disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-200"
+                />
+              </div>
             </div>
             <ExtraArguments
               extraArgs={availableVariables.filter((v) => variable === v.name).flatMap((v) => v.extra_args ?? [])}
               extraValues={extraArgs || {}}
               onChange={(arg, value) => setExtraArgs({ ...extraArgs, [arg]: value })}
             />
-          </div>
+          </>
         )}
 
         {widgetType === "box" && (

diff --git a/app/components/widgets/raw.tsx b/app/components/widgets/raw.tsx
@@ -1,22 +1,31 @@
 import { useQuery } from "@tanstack/react-query";
 import { type FC, useEffect, useState } from "react";
 import { UPDATE_INTERVAL_MS } from "~/constants/widget";
-import type { RawWidgetProps, Region } from "~/types/widget";
+import type { Color, RawWidgetProps, Region } from "~/types/widget";
 
 export const RawWidget: FC<RawWidgetProps> = ({
   region,
   accountId,
   variable = "wins_losses_today",
+  prefix = "",
+  suffix = "",
   extraArgs = {},
   fontColor = "#ffffff",
+  fontColorLikeRank = false,
   refreshInterval = UPDATE_INTERVAL_MS,
 }) => {
   const [stat, setStat] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [badgeLevel, setBadgeLevel] = useState<number | null>(null);
+  const [fontColorState, setFontColor] = useState(fontColor);
 
   const fetchStats = async (region: Region, accountId: string, variable: string, extraArgs: Record<string, string>) => {
     const url = new URL(`https://data.deadlock-api.com/v1/commands/${region}/${accountId}/resolve-variables`);
-    url.searchParams.append("variables", [variable].join(","));
+    const variables = [variable];
+    if (fontColorLikeRank) {
+      variables.push("leaderboard_rank_badge_level");
+    }
+    url.searchParams.append("variables", variables.join(","));
 
     // biome-ignore lint/complexity/noForEach: <explanation>
     Object.entries(extraArgs).forEach(([key, value]) => {
@@ -38,17 +47,36 @@ export const RawWidget: FC<RawWidgetProps> = ({
     refetchIntervalInBackground: true,
   });
 
+  const { data: ranksData } = useQuery<Record<string, string | number>[]>({
+    queryKey: ["ranks"],
+    queryFn: () => fetch("https://assets.deadlock-api.com/v2/ranks").then((res) => res.json()),
+  });
+
   useEffect(() => {
     setLoading(statsLoading);
     if (data) {
       setStat(data[variable]);
+      if ("leaderboard_rank_badge_level" in data) {
+        setBadgeLevel(Number.parseInt(data.leaderboard_rank_badge_level));
+      }
     }
     if (statsError) {
       setStat(null);
       console.error(`Failed to fetch stats: ${statsError}`);
     }
   }, [data, variable, statsLoading, statsError]);
 
+  useEffect(() => {
+    let newFontColor = fontColor;
+    if (fontColorLikeRank && ranksData && badgeLevel) {
+      const rankData = ranksData.find((r) => r.tier === Math.floor(badgeLevel / 10));
+      if (rankData) {
+        newFontColor = rankData.color as Color;
+      }
+    }
+    setFontColor(newFontColor);
+  }, [ranksData, badgeLevel, fontColorLikeRank, fontColor]);
+
   return (
     <div>
       {loading ? (
@@ -61,8 +89,12 @@ export const RawWidget: FC<RawWidgetProps> = ({
       ) : stat ? (
         <>
           <div className="flex gap-2 w-fit items-center">
-            <div className="text-4xl font-bold" style={{ color: fontColor }}>
-              {variable.endsWith("img") ? <img src={stat} alt={variable} className="h-20 rounded-full" /> : stat}
+            <div className="text-4xl font-bold" style={{ color: fontColorState }}>
+              {variable.endsWith("img") ? (
+                <img src={stat} alt={variable} className="h-20 rounded-full" />
+              ) : (
+                prefix + stat + suffix
+              )}
             </div>
           </div>
         </>

diff --git a/app/routes/widgets.$region.$accountId.$widgetType.tsx b/app/routes/widgets.$region.$accountId.$widgetType.tsx
@@ -93,6 +93,9 @@ export default function Widget() {
     }
     case "raw": {
       const variable = searchParams.get("variable");
+      const prefix = searchParams.get("prefix") ?? "";
+      const suffix = searchParams.get("suffix") ?? "";
+      const fontColorLikeRank = searchParams.get("fontColorLikeRank") === "true";
       const fontColor = (searchParams.get("fontColor") as Color) ?? "#FFFFFF";
       const extraArgs = Object.fromEntries(
         Array.from(searchParams.entries()).filter(([key]) => !["variable", "fontColor"].includes(key)),
@@ -105,7 +108,10 @@ export default function Widget() {
           accountId={accountId}
           variable={variable}
           fontColor={fontColor}
+          fontColorLikeRank={fontColorLikeRank}
           extraArgs={extraArgs}
+          prefix={prefix}
+          suffix={suffix}
         />
       );
     }

diff --git a/app/types/widget.ts b/app/types/widget.ts
@@ -39,8 +39,11 @@ export type RawWidgetProps = {
   region: Region;
   accountId: string;
   variable: string;
+  prefix?: string;
+  suffix?: string;
   extraArgs?: Record<string, string>;
   fontColor: Color;
+  fontColorLikeRank: boolean;
   refreshInterval?: number;
 };