From 6c4c0282f04bb41f90a4ab379a915691129e954e Mon Sep 17 00:00:00 2001 From: Manuel Raimann Date: Sun, 16 Feb 2025 22:25:53 +0100 Subject: [PATCH] Add prefix, suffix and fontColorLikeRank settings for raw widget --- app/components/widget-builder.tsx | 80 +++++++++++++++---- app/components/widgets/raw.tsx | 40 +++++++++- ...widgets.$region.$accountId.$widgetType.tsx | 6 ++ app/types/widget.ts | 3 + 4 files changed, 111 insertions(+), 18 deletions(-) diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx index 6399818..bceba5d 100644 --- 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("#f3f4f6"); const [variables, setVariables] = useState(DEFAULT_VARIABLES); const [variable, setVariable] = useState("wins_losses_today"); + const [prefix, setPrefix] = useState("Score: "); + const [suffix, setSuffix] = useState(""); + const [fontColorLikeRank, setFontColorLikeRank] = useState(true); const [fontColor, setFontColor] = useState("#ffffff"); const [labels, setLabels] = useState(DEFAULT_LABELS); const [extraArgs, setExtraArgs] = useState<{ [key: string]: string }>({}); @@ -93,6 +96,9 @@ 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( , ); 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) {widgetType === "raw" && ( -
-
+ <> +
@@ -194,24 +206,64 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps) ))}
-
- - 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" - /> +
+
+ + 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" + /> +
+
+ + 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" + /> +
+
+
+
+ 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" + /> + +
+
+ + 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" + /> +
variable === v.name).flatMap((v) => v.extra_args ?? [])} extraValues={extraArgs || {}} onChange={(arg, value) => setExtraArgs({ ...extraArgs, [arg]: value })} /> -
+ )} {widgetType === "box" && ( diff --git a/app/components/widgets/raw.tsx b/app/components/widgets/raw.tsx index b8c5599..8df7f03 100644 --- 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 = ({ region, accountId, variable = "wins_losses_today", + prefix = "", + suffix = "", extraArgs = {}, fontColor = "#ffffff", + fontColorLikeRank = false, refreshInterval = UPDATE_INTERVAL_MS, }) => { const [stat, setStat] = useState(null); const [loading, setLoading] = useState(true); + const [badgeLevel, setBadgeLevel] = useState(null); + const [fontColorState, setFontColor] = useState(fontColor); const fetchStats = async (region: Region, accountId: string, variable: string, extraArgs: Record) => { 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: Object.entries(extraArgs).forEach(([key, value]) => { @@ -38,10 +47,18 @@ export const RawWidget: FC = ({ refetchIntervalInBackground: true, }); + const { data: ranksData } = useQuery[]>({ + 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); @@ -49,6 +66,17 @@ export const RawWidget: FC = ({ } }, [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 (
{loading ? ( @@ -61,8 +89,12 @@ export const RawWidget: FC = ({ ) : stat ? ( <>
-
- {variable.endsWith("img") ? {variable} : stat} +
+ {variable.endsWith("img") ? ( + {variable} + ) : ( + prefix + stat + suffix + )}
diff --git a/app/routes/widgets.$region.$accountId.$widgetType.tsx b/app/routes/widgets.$region.$accountId.$widgetType.tsx index 1c0b2b1..5a6cd99 100644 --- 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 index 3f8ac36..47fc971 100644 --- 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; fontColor: Color; + fontColorLikeRank: boolean; refreshInterval?: number; };