From 0765c333482774e950891dcfe38611b67fbf3bff Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-B1UMKRR>
Date: Wed, 12 Feb 2025 03:20:04 +0200
Subject: [PATCH] Added widget opacity controller, updated light theme styling

---
 app/components/widget-builder.tsx             | 293 ++++++++++--------
 app/components/widgets/MatchHistory.tsx       |  11 +-
 app/components/widgets/StatDisplay.tsx        |  16 +-
 app/components/widgets/box.tsx                |  66 +++-
 ...widgets.$region.$accountId.$widgetType.tsx |   3 +
 app/types/match-history.ts                    |   9 +-
 app/types/widget.ts                           |   4 +-
 7 files changed, 237 insertions(+), 165 deletions(-)

diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx
index 5eaf3ec..8792482 100644
--- a/app/components/widget-builder.tsx
+++ b/app/components/widget-builder.tsx
@@ -35,6 +35,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
   const [showMatchHistory, setShowMatchHistory] = useState(true);
   const [matchHistoryShowsToday, setMatchHistoryShowsToday] = useState(false);
   const [numMatches, setNumMatches] = useState(10);
+  const [opacity, setOpacity] = useState(100);
 
   const { data, error } = useQuery<Variable[]>({
     queryKey: ["available-variables"],
@@ -62,6 +63,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     url.searchParams.set("showMatchHistory", showMatchHistory.toString());
     url.searchParams.set("matchHistoryShowsToday", matchHistoryShowsToday.toString());
     url.searchParams.set("numMatches", numMatches.toString());
+    url.searchParams.set("opacity", opacity.toString());
     for (const [arg, value] of Object.entries(extraArgs)) {
       if (value) url.searchParams.set(arg, value);
     }
@@ -81,6 +83,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
             showMatchHistory={showMatchHistory}
             matchHistoryShowsToday={matchHistoryShowsToday}
             numMatches={numMatches}
+            opacity={opacity}
           />,
         );
         break;
@@ -100,6 +103,7 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     matchHistoryShowsToday,
     showMatchHistory,
     numMatches,
+    opacity,
   ]);
 
   const themes: { value: Theme; label: string }[] = [
@@ -110,70 +114,76 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
 
   return (
     <div className="mt-4 space-y-6">
-      <div className="max-w-2xl space-y-6">
-        <div>
-          <label htmlFor="type" className="block text-sm font-medium text-gray-700">
-            Type
-          </label>
-          <select
-            id="type"
-            value={widgetType}
-            onChange={(e) => setWidgetType(e.target.value)}
-            className="mt-1 block 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 pr-6"
-          >
-            {widgetTypes.map((w) => (
-              <option key={w} value={w}>
-                {w}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label htmlFor="theme" className="block text-sm font-medium text-gray-700">
-            Theme
-          </label>
-          <select
-            id="theme"
-            value={theme}
-            onChange={(e) => setTheme(e.target.value as Theme)}
-            className="mt-1 block 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 pr-6"
-          >
-            {themes.map(({ value, label }) => (
-              <option key={value} value={value}>
-                {label}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div className="space-y-4">
-          <div className="flex items-center gap-2">
-            <input
-              type="checkbox"
-              id="showHeader"
-              checked={showHeader}
-              onChange={(e) => setShowHeader(e.target.checked)}
-              className="rounded border-gray-300 text-blue-500 focus:ring-blue-500"
-            />
-            <label htmlFor="showHeader" className="text-sm font-medium text-gray-700">
-              Show Player Name Header
+      <div className="space-y-6">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="type" className="block text-sm font-medium text-gray-700">
+              Type
             </label>
+            <select
+              id="type"
+              value={widgetType}
+              onChange={(e) => setWidgetType(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"
+            >
+              {widgetTypes.map((w) => (
+                <option key={w} value={w}>
+                  {w}
+                </option>
+              ))}
+            </select>
           </div>
 
-          <div className="flex items-center gap-2">
-            <input
-              type="checkbox"
-              id="showBranding"
-              checked={showBranding}
-              onChange={(e) => setShowBranding(e.target.checked)}
-              className="rounded border-gray-300 text-blue-500 focus:ring-blue-500"
-            />
-            <label htmlFor="showBranding" className="text-sm font-medium text-gray-700">
-              Show &#34;Widget by deadlock-api.com&#34;
+          <div>
+            <label htmlFor="theme" className="block text-sm font-medium text-gray-700">
+              Theme
             </label>
+            <select
+              id="theme"
+              value={theme}
+              onChange={(e) => setTheme(e.target.value as Theme)}
+              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"
+            >
+              {themes.map(({ value, label }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
           </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="showHeader"
+                checked={showHeader}
+                onChange={(e) => setShowHeader(e.target.checked)}
+                className="rounded border-gray-300 text-blue-500 focus:ring-blue-500"
+              />
+              <label htmlFor="showHeader" className="text-sm font-medium text-gray-700">
+                Show Player Name Header
+              </label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="showBranding"
+                checked={showBranding}
+                onChange={(e) => setShowBranding(e.target.checked)}
+                className="rounded border-gray-300 text-blue-500 focus:ring-blue-500"
+              />
+              <label htmlFor="showBranding" className="text-sm font-medium text-gray-700">
+                Show Branding
+              </label>
+            </div>
+          </div>
+        </div>
 
+        <div className="grid grid-cols-2 gap-4">
           <div className="space-y-2">
             <div className="flex items-center gap-2">
               <input
@@ -200,19 +210,20 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
                 Show Todays Matches
               </label>
             </div>
-            <div className="ml-6 flex items-center gap-2">
-              <input
-                type="range"
-                min={1}
-                max={50}
-                disabled={!showMatchHistory || matchHistoryShowsToday}
-                id="numMatches"
-                value={numMatches}
-                onChange={(e) => setNumMatches(e.target.valueAsNumber)}
-                className="rounded border-gray-300 bg-gray-200 w-min"
-              />
-              <span className="text-sm font-medium text-gray-700">{numMatches} Matches</span>
-            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={1}
+              max={50}
+              disabled={!showMatchHistory || matchHistoryShowsToday}
+              id="numMatches"
+              value={numMatches}
+              onChange={(e) => setNumMatches(e.target.valueAsNumber)}
+              className="rounded border-gray-300 bg-gray-200 w-full"
+            />
+            <span className="text-sm font-medium text-gray-700 whitespace-nowrap">{numMatches} Matches</span>
           </div>
         </div>
 
@@ -298,71 +309,91 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
         </div>
       </div>
 
-      <div>
-        <h3 className="block text-sm font-medium text-gray-700">Generated URL</h3>
-        {widgetUrl ? (
-          <div className="relative mt-1">
-            <div className="break-all rounded-md border border-gray-300 bg-gray-50 p-3 pr-24 text-sm text-gray-600">
-              {widgetUrl}
-            </div>
-            <button
-              type="button"
-              onClick={() => navigator.clipboard.writeText(widgetUrl)}
-              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md bg-blue-500 px-3 py-1 text-sm font-medium text-white transition hover:bg-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-            >
-              Copy
-            </button>
-          </div>
-        ) : (
-          <div className="rounded-md border border-gray-300 bg-gray-50 p-3 text-sm text-gray-600">
-            No URL available yet. Fill in the fields to generate a URL.
+      <div className="space-y-6">
+        <div>
+          <label htmlFor="opacity" className="block text-sm font-medium text-gray-700">
+            Background Opacity
+          </label>
+          <div className="mt-1 flex items-center gap-2">
+            <input
+              type="range"
+              id="opacity"
+              min="0"
+              max="100"
+              value={opacity}
+              onChange={(e) => setOpacity(Number(e.target.value))}
+              className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200"
+            />
+            <span className="text-sm text-gray-600 min-w-[3ch]">{opacity}%</span>
           </div>
-        )}
-      </div>
+        </div>
 
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium text-gray-700">Preview</h3>
-        {widgetPreview && (
-          <div
-            className="p-4 rounded-lg  flex items-center justify-center bg-cover"
-            style={
-              widgetPreviewBackgroundImage
-                ? {
-                    background: "url('deadlock-background.webp'), url('deadlock-background.png')",
-                    backgroundSize: "cover",
-                    backgroundRepeat: "no-repeat",
-                  }
-                : { backgroundColor: widgetPreviewBackgroundColor }
-            }
-          >
-            {widgetPreview}
-          </div>
-        )}
-      </div>
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium text-gray-700">Preview</h3>
+          {widgetPreview && (
+            <div
+              className="p-4 rounded-lg flex items-center justify-center bg-cover"
+              style={
+                widgetPreviewBackgroundImage
+                  ? {
+                      background: "url('deadlock-background.webp'), url('deadlock-background.png')",
+                      backgroundSize: "cover",
+                      backgroundRepeat: "no-repeat",
+                    }
+                  : { backgroundColor: widgetPreviewBackgroundColor }
+              }
+            >
+              {widgetPreview}
+            </div>
+          )}
 
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            id="preview-bg-image-toggle"
-            checked={widgetPreviewBackgroundImage}
-            value={widgetPreviewBackgroundImage ? 1 : 0}
-            onChange={(e) => setWidgetPreviewBackgroundImage(e.target.checked)}
-            className="rounded-md border border-gray-300 w-8"
-          />
-          <label htmlFor="preview-bg-image-toggle">Show Image</label>
-          {!widgetPreviewBackgroundImage && (
-            <>
-              <label htmlFor="preview-bg-color-picker">Background Color</label>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
               <input
-                type="color"
-                id="preview-bg-color-picker"
-                disabled={widgetPreviewBackgroundImage}
-                value={widgetPreviewBackgroundColor}
-                onChange={(e) => setWidgetPreviewBackgroundColor(e.target.value as PreviewBackgroundColor)}
-                className="rounded-md border border-gray-300"
+                type="checkbox"
+                id="preview-bg-image-toggle"
+                checked={widgetPreviewBackgroundImage}
+                value={widgetPreviewBackgroundImage ? 1 : 0}
+                onChange={(e) => setWidgetPreviewBackgroundImage(e.target.checked)}
+                className="rounded-md border border-gray-300 w-4 h-4"
               />
-            </>
+              <label htmlFor="preview-bg-image-toggle" className="text-sm text-gray-700">Show Image</label>
+            </div>
+            {!widgetPreviewBackgroundImage && (
+              <div className="flex items-center gap-2">
+                <label htmlFor="preview-bg-color-picker" className="text-sm text-gray-700">Background Color</label>
+                <input
+                  type="color"
+                  id="preview-bg-color-picker"
+                  disabled={widgetPreviewBackgroundImage}
+                  value={widgetPreviewBackgroundColor}
+                  onChange={(e) => setWidgetPreviewBackgroundColor(e.target.value as PreviewBackgroundColor)}
+                  className="rounded-md border border-gray-300 w-8 h-8 p-0"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <h3 className="block text-sm font-medium text-gray-700 mb-2">Generated URL</h3>
+          {widgetUrl ? (
+            <div className="relative mt-1">
+              <div className="break-all rounded-md border border-gray-300 bg-gray-50 p-3 pr-24 text-sm text-gray-600">
+                {widgetUrl}
+              </div>
+              <button
+                type="button"
+                onClick={() => navigator.clipboard.writeText(widgetUrl)}
+                className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md bg-blue-500 px-3 py-1 text-sm font-medium text-white transition hover:bg-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              >
+                Copy
+              </button>
+            </div>
+          ) : (
+            <div className="rounded-md border border-gray-300 bg-gray-50 p-3 text-sm text-gray-600">
+              No URL available yet. Fill in the fields to generate a URL.
+            </div>
           )}
         </div>
       </div>
diff --git a/app/components/widgets/MatchHistory.tsx b/app/components/widgets/MatchHistory.tsx
index 1293b84..39f48e9 100644
--- 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, numMatches, accountId, refresh, opacity = 100 }) => {
   const [matches, setMatches] = useState<Match[]>([]);
   const [heroes, setHeroes] = useState<Map<number, string>>(new Map());
   const [loading, setLoading] = useState(true);
@@ -58,9 +58,14 @@ export const MatchHistory: FC<MatchHistoryProps> = ({ theme, numMatches, account
 
   return (
     <div
+      style={{ "--bg-opacity": opacity / 100 } as React.CSSProperties}
       className={cn(
-        "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",
+        "flex gap-0.5 justify-start items-center h-9 rounded-t-xl pt-1 border border-b-0 border-white/[0.03]",
+        theme === "light" 
+          ? "[background:rgba(255,255,255,var(--bg-opacity))]" 
+          : theme === "glass" 
+            ? "bg-white/5" 
+            : "[background:rgba(26,27,30,var(--bg-opacity))]",
       )}
     >
       {[...matches].map((match) => {
diff --git a/app/components/widgets/StatDisplay.tsx b/app/components/widgets/StatDisplay.tsx
index fdb30ad..9738631 100644
--- a/app/components/widgets/StatDisplay.tsx
+++ b/app/components/widgets/StatDisplay.tsx
@@ -4,26 +4,24 @@ import { cn } from "~/lib/utils";
 import type { StatDisplayProps } from "~/types/widget";
 
 export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "dark", className }) => {
-  const { variable, label, value, prefix, suffix } = stat;
+  const { variable, label, value, prefix, suffix, opacity = 100 } = stat;
 
   return (
     <div
+      style={{ "--bg-opacity": opacity / 100 } as React.CSSProperties}
       className={
         !variable.endsWith("_img")
           ? cn(
-              "flex flex-col items-center p-2.5 rounded-lg transition-all duration-200",
+              "flex flex-col items-center p-2.5 rounded-lg",
               theme === "light"
-                ? "bg-gradient-to-br from-gray-50 to-white border-gray-200/50"
+                ? "[background:rgba(240,240,240,var(--bg-opacity))]"
                 : theme === "glass"
                   ? "bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/[0.05]"
-                  : "bg-gradient-to-br from-[#25262B] to-[#2C2E33] border-white/[0.03]",
-              theme === "light" && "border",
-              "relative",
-              "min-w-fit",
-              THEME_STYLES[theme].stat,
+                  : "[background:rgba(38,39,43,var(--bg-opacity))] border-white/[0.03]",
+              "relative min-w-fit",
               className,
             )
-          : cn("flex flex-col items-center p-2.5 rounded-lg transition-all duration-200")
+          : cn("flex flex-col items-center p-2.5 rounded-lg")
       }
     >
       {variable.endsWith("_img") && value ? (
diff --git a/app/components/widgets/box.tsx b/app/components/widgets/box.tsx
index a916027..2c940b1 100644
--- a/app/components/widgets/box.tsx
+++ b/app/components/widgets/box.tsx
@@ -19,6 +19,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
   showMatchHistory = false,
   matchHistoryShowsToday = true,
   numMatches = 10,
+  opacity = 100,
 }) => {
   const [stats, setStats] = useState<Record<string, string> | null>(null);
   const [loading, setLoading] = useState(true);
@@ -79,6 +80,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
       variable,
       value: stats[variable],
       label: displayLabels[index] || snakeToPretty(variable),
+      opacity,
     }));
   };
 
@@ -89,27 +91,61 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
     numMatchesToShow = Number.parseInt(stats?.matches_today);
   }
 
+  const getBackgroundStyle = () => {
+    if (theme === "glass") return "bg-black/10 backdrop-blur-md";
+    
+    if (theme === "light") {
+      return cn(
+        "[background:rgba(255,255,255,var(--bg-opacity))]",
+        "border-gray-100/5"
+      );
+    }
+    
+    return cn(
+      "[background:rgba(26,27,30,var(--bg-opacity))]",
+      "border-white/[0.03]"
+    );
+  };
+
+  const getHeaderStyle = () => {
+    if (theme === "glass") return "bg-white/5";
+    
+    if (theme === "light") {
+      return cn(
+        "[background:linear-gradient(to_right,rgba(255,255,255,var(--bg-opacity)),rgba(249,250,251,var(--bg-opacity)))]",
+        "border-b border-gray-900/5"
+      );
+    }
+    
+    return cn(
+      "[background:linear-gradient(to_right,rgba(26,27,30,var(--bg-opacity)),rgba(37,38,43,var(--bg-opacity)))]",
+      "border-b border-white/[0.03]"
+    );
+  };
+
   return (
-    <div className="inline-block">
+    <div 
+      className="inline-block"
+      style={{ "--bg-opacity": opacity / 100 } as React.CSSProperties}
+    >
       {showMatchHistory && (
         <div className="flex">
-          <div
-            className="grow-1 w-0 overflow-clip
-          "
-          >
-            <MatchHistory theme={theme} refresh={refreshChildren} numMatches={numMatchesToShow} accountId={accountId} />
+          <div className="grow-1 w-0 overflow-clip">
+            <MatchHistory 
+              theme={theme} 
+              refresh={refreshChildren} 
+              numMatches={numMatchesToShow} 
+              accountId={accountId}
+              opacity={opacity}
+            />
           </div>
         </div>
       )}
       <div
         className={cn(
           "inline-flex flex-col",
-          "rounded-b-xl transition-all duration-300",
-          theme === "light"
-            ? "bg-gradient-to-br from-white via-gray-50 to-white border-gray-200/50"
-            : theme === "glass"
-              ? "bg-black/10 backdrop-blur-md"
-              : "bg-gradient-to-br from-[#1A1B1E] via-[#1E1F23] to-[#25262B] border-white/[0.03]",
+          "rounded-b-xl",
+          getBackgroundStyle(),
           theme !== "glass" && "border",
           showMatchHistory ? "border-t-0" : "rounded-t-xl",
           "shadow-lg",
@@ -121,11 +157,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
             className={cn(
               !showMatchHistory && "rounded-t-xl",
               "px-4 py-3",
-              theme === "light"
-                ? "bg-gradient-to-r from-white to-gray-50 border-b border-gray-200/50"
-                : theme === "glass"
-                  ? "bg-white/5"
-                  : "bg-gradient-to-r from-[#1A1B1E] to-[#25262B] border-b border-white/[0.03]",
+              getHeaderStyle(),
               "relative",
               THEME_STYLES[theme].header,
             )}
diff --git a/app/routes/widgets.$region.$accountId.$widgetType.tsx b/app/routes/widgets.$region.$accountId.$widgetType.tsx
index b76ca27..782c2a1 100644
--- a/app/routes/widgets.$region.$accountId.$widgetType.tsx
+++ b/app/routes/widgets.$region.$accountId.$widgetType.tsx
@@ -55,6 +55,7 @@ export default function Widget() {
       const showMatchHistory = searchParams.get("showMatchHistory") !== "false";
       const matchHistoryShowsToday = searchParams.get("matchHistoryShowsToday") !== "false";
       const numMatches = Number.parseInt(searchParams.get("numMatches") ?? "10", 10);
+      const opacity = Number.parseInt(searchParams.get("opacity") ?? "100", 10);
       const extraArgs = Object.fromEntries(
         Array.from(searchParams.entries()).filter(
           ([key]) =>
@@ -67,6 +68,7 @@ export default function Widget() {
               "numMatches",
               "matchHistoryShowsToday",
               "showMatchHistory",
+              "opacity",
             ].includes(key),
         ),
       );
@@ -84,6 +86,7 @@ export default function Widget() {
           showMatchHistory={showMatchHistory}
           matchHistoryShowsToday={matchHistoryShowsToday}
           numMatches={numMatches}
+          opacity={opacity}
         />
       );
     }
diff --git a/app/types/match-history.ts b/app/types/match-history.ts
index a60653c..0202da5 100644
--- a/app/types/match-history.ts
+++ b/app/types/match-history.ts
@@ -12,9 +12,10 @@ export type Hero = {
   };
 };
 
-export type MatchHistoryProps = {
-  theme: string;
+export interface MatchHistoryProps {
+  theme: "light" | "dark" | "glass";
   numMatches?: number;
   accountId: string;
-  refresh: number;
-};
+  refresh?: number;
+  opacity?: number;
+}
diff --git a/app/types/widget.ts b/app/types/widget.ts
index 77bb9bd..8c2dd40 100644
--- a/app/types/widget.ts
+++ b/app/types/widget.ts
@@ -8,7 +8,8 @@ export type Stat = {
   color?: string;
   prefix?: string;
   suffix?: string;
-};
+  opacity?: number;
+}
 
 export type Theme = "dark" | "glass" | "light";
 
@@ -27,6 +28,7 @@ export type BoxWidgetProps = {
   showMatchHistory?: boolean;
   matchHistoryShowsToday?: boolean;
   numMatches?: number;
+  opacity?: number;
 };
 
 export type StatDisplayProps = {