Add opacity control to widget settings and match history display

deadlock-api · Feb 11, 2025 · 689b5ce · 689b5ce
1 parent 8a2e8fd
commit 689b5ce
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 3 deletions.
diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx
@@ -22,6 +22,7 @@ type PreviewBackground = "image" | RGB | RGBA | HEX;
 export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps) {
   const [widgetType, setWidgetType] = useState<string>(widgetTypes[0]);
   const [theme, setTheme] = useState<Theme>("dark");
+  const [opacity, setOpacity] = useState<number>(100);
   const [widgetUrl, setWidgetUrl] = useState<string | null>(null);
   const [widgetPreview, setWidgetPreview] = useState<ReactElement | null>(null);
   const [widgetPreviewBackground, setWidgetPreviewBackground] = useState<PreviewBackground>("#f3f4f6");
@@ -56,6 +57,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     if (variables.length > 0) url.searchParams.set("vars", variables.join(","));
     if (labels.length > 0) url.searchParams.set("labels", labels.join(","));
     url.searchParams.set("theme", theme);
+    url.searchParams.set("opacity", opacity.toString());
     url.searchParams.set("showHeader", showHeader.toString());
     url.searchParams.set("showBranding", showBranding.toString());
     url.searchParams.set("showMatchHistory", showMatchHistory.toString());
@@ -75,6 +77,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
             labels={labels}
             extraArgs={extraArgs}
             theme={theme}
+            opacity={opacity}
             showHeader={showHeader}
             showBranding={showBranding}
             showMatchHistory={showMatchHistory}
@@ -94,6 +97,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     labels,
     extraArgs,
     theme,
+    opacity,
     showHeader,
     showBranding,
     matchHistoryShowsToday,
@@ -146,6 +150,25 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
           </select>
         </div>
 
+        <div>
+          <label htmlFor="opacity" className="block text-sm font-medium text-gray-700">
+            Opacity
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              id="opacity"
+              type="range"
+              min={0}
+              max={100}
+              step={5}
+              value={opacity}
+              onChange={(e) => setOpacity(Number.parseInt(e.target.value))}
+              className="rounded border-gray-300 bg-gray-200 w-min"
+            />
+            <span className="text-sm font-medium text-gray-700">{opacity.toFixed(0)}%</span>
+          </div>
+        </div>
+
         <div className="space-y-4">
           <div className="flex items-center gap-2">
             <input

diff --git a/app/components/widgets/MatchHistory.tsx b/app/components/widgets/MatchHistory.tsx
@@ -5,7 +5,7 @@ import { UPDATE_INTERVAL_MS } from "~/constants/widget";
 import { cn } from "~/lib/utils";
 import type { Hero, Match, MatchHistoryProps } from "~/types/match-history";
 
-export const MatchHistory: FC<MatchHistoryProps> = ({ theme, numMatches, accountId, refresh }) => {
+export const MatchHistory: FC<MatchHistoryProps> = ({ theme, opacity, numMatches, accountId, refresh }) => {
   const [matches, setMatches] = useState<Match[]>([]);
   const [heroes, setHeroes] = useState<Map<number, string>>(new Map());
   const [loading, setLoading] = useState(true);
@@ -62,6 +62,7 @@ export const MatchHistory: FC<MatchHistoryProps> = ({ theme, numMatches, account
         "flex gap-0.5 justify-start items-center h-9 rounded-t-xl pt-1",
         theme === "light" ? "bg-white" : theme === "dark" ? "bg-[#1A1B1E]" : "text-white",
       )}
+      style={{ opacity: opacity / 100 }}
     >
       {[...matches].map((match) => {
         const heroImage = heroes.get(match.hero_id);

diff --git a/app/components/widgets/box.tsx b/app/components/widgets/box.tsx
@@ -13,6 +13,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
   labels = DEFAULT_LABELS,
   extraArgs = {},
   theme = "default",
+  opacity = 100,
   showHeader = true,
   refreshInterval = UPDATE_INTERVAL_MS,
   showBranding = true,
@@ -97,7 +98,13 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
             className="grow-1 w-0 overflow-clip
           "
           >
-            <MatchHistory theme={theme} refresh={refreshChildren} numMatches={numMatchesToShow} accountId={accountId} />
+            <MatchHistory
+              theme={theme}
+              opacity={opacity}
+              refresh={refreshChildren}
+              numMatches={numMatchesToShow}
+              accountId={accountId}
+            />
           </div>
         </div>
       )}
@@ -115,6 +122,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
           "shadow-lg",
           THEME_STYLES[theme].container,
         )}
+        style={{ opacity: opacity / 100 }}
       >
         {shouldShowHeader && (
           <div

diff --git a/app/routes/widgets.$region.$accountId.$widgetType.tsx b/app/routes/widgets.$region.$accountId.$widgetType.tsx
@@ -50,11 +50,12 @@ export default function Widget() {
       const variables = searchParams.get("vars")?.split(",");
       const labels = searchParams.get("labels")?.split(",") ?? variables?.map(snakeToPretty);
       const theme = (searchParams.get("theme") || "dark") as Theme;
+      const opacity = Number.parseFloat(searchParams.get("opacity") ?? "100");
       const showHeader = searchParams.get("showHeader") !== "false";
       const showBranding = searchParams.get("showBranding") !== "false";
       const showMatchHistory = searchParams.get("showMatchHistory") !== "false";
       const matchHistoryShowsToday = searchParams.get("matchHistoryShowsToday") !== "false";
-      const numMatches = Number.parseInt(searchParams.get("numMatches") ?? "10", 10);
+      const numMatches = Number.parseInt(searchParams.get("numMatches") ?? "10");
       const extraArgs = Object.fromEntries(
         Array.from(searchParams.entries()).filter(
           ([key]) =>
@@ -79,6 +80,7 @@ export default function Widget() {
           labels={labels}
           extraArgs={extraArgs}
           theme={theme}
+          opacity={opacity}
           showHeader={showHeader}
           showBranding={showBranding}
           showMatchHistory={showMatchHistory}

diff --git a/app/types/match-history.ts b/app/types/match-history.ts
@@ -14,6 +14,7 @@ export type Hero = {
 
 export type MatchHistoryProps = {
   theme: string;
+  opacity: number;
   numMatches?: number;
   accountId: string;
   refresh: number;

diff --git a/app/types/widget.ts b/app/types/widget.ts
@@ -21,6 +21,7 @@ export type BoxWidgetProps = {
   labels?: string[];
   extraArgs?: Record<string, string>;
   theme?: Theme;
+  opacity?: number;
   showHeader?: boolean;
   refreshInterval?: number;
   showBranding?: boolean;