Skip to content

Commit

Permalink
Implement Opacity right
Browse files Browse the repository at this point in the history
  • Loading branch information
@raimannma
raimannma committed Feb 11, 2025
1 parent f59de86 commit 47ad33d
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 77 deletions.
36 changes: 19 additions & 17 deletions app/components/widget-builder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,24 +151,26 @@ 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>
{theme !== "glass" && (
<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={10}
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>
)}

<div className="space-y-4">
<div className="flex items-center gap-2">
Expand Down
12 changes: 4 additions & 8 deletions app/components/widgets/MatchHistory.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useQuery } from "@tanstack/react-query";
import type { FC } from "react";
import { useEffect, useState } from "react";
import { UPDATE_INTERVAL_MS } from "~/constants/widget";
import { THEME_STYLES, UPDATE_INTERVAL_MS } from "~/constants/widget";
import { cn } from "~/lib/utils";
import type { Hero, Match, MatchHistoryProps } from "~/types/match-history";

Expand Down Expand Up @@ -56,14 +56,10 @@ export const MatchHistory: FC<MatchHistoryProps> = ({ theme, opacity, numMatches

if (loading) return null;

const bgColor = theme !== "glass" ? THEME_STYLES[theme].bgColor[Math.max(0, Math.round(opacity / 20 - 1))] : "";

return (
<div
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",
)}
style={{ opacity: opacity / 100 }}
>
<div className={cn("flex gap-0.5 justify-start items-center h-9 rounded-t-xl p-1", bgColor)}>
{[...matches].map((match) => {
const heroImage = heroes.get(match.hero_id);
if (!heroImage) return null;
Expand Down
23 changes: 9 additions & 14 deletions app/components/widgets/StatDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,22 @@ import { THEME_STYLES } from "~/constants/widget";
import { cn } from "~/lib/utils";
import type { StatDisplayProps } from "~/types/widget";

export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "dark", className }) => {
export const StatDisplay: FC<StatDisplayProps> = ({ stat, opacity, theme = "dark", className }) => {
const { variable, label, value, prefix, suffix } = stat;

const bgColor = theme !== "glass" ? THEME_STYLES[theme].bgColor[Math.max(0, Math.round(opacity / 20 - 1))] : "";

return (
<div
className={
!variable.endsWith("_img")
? cn(
"flex flex-col items-center p-2.5 rounded-lg transition-all duration-200",
theme === "light"
? "bg-gradient-to-br from-gray-50 to-white border-gray-200/50"
: 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",
variable.endsWith("_img")
? "flex flex-col items-center p-2.5 transition-all duration-200"
: cn(
"flex flex-col items-center p-2.5 rounded-xl transition-all duration-200 relative min-w-fit",
THEME_STYLES[theme].stat,
className,
bgColor ?? "",
)
: cn("flex flex-col items-center p-2.5 rounded-lg transition-all duration-200")
}
>
{variable.endsWith("_img") && value ? (
Expand All @@ -33,7 +28,7 @@ export const StatDisplay: FC<StatDisplayProps> = ({ stat, theme = "dark", classN
<span
className={cn(
"text-[11px] font-medium tracking-wide uppercase text-center",
theme === "light" ? "text-gray-500" : "text-white/60",
theme === "light" ? "text-gray-800" : "text-white/60",
)}
>
{label}
Expand Down
36 changes: 12 additions & 24 deletions app/components/widgets/box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
numMatchesToShow = Number.parseInt(stats?.matches_today);
}

const bgGradient = theme !== "glass" ? THEME_STYLES[theme].bgGradient[Math.round(opacity / 10)] : "";
const bgColor = theme !== "glass" ? THEME_STYLES[theme].bgColor[Math.max(0, Math.round(opacity / 20 - 1))] : "";

return (
<div className="inline-block">
{showMatchHistory && (
Expand All @@ -110,32 +113,21 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
)}
<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]",
theme !== "glass" && "border",
"inline-flex flex-col shadow-lg rounded-b-xl transition-all duration-300",
theme !== "glass" && opacity > 0 && "border",
showMatchHistory ? "border-t-0" : "rounded-t-xl",
"shadow-lg",
THEME_STYLES[theme].container,
bgGradient ?? "",
)}
style={{ opacity: opacity / 100 }}
>
{shouldShowHeader && (
<div
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]",
"relative",
THEME_STYLES[theme].header,
bgColor ?? "",
)}
>
<div className="flex items-center justify-between">
Expand Down Expand Up @@ -167,7 +159,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
<>
<div className="flex gap-2 w-fit items-center">
{getStatDisplays().map((stat) => (
<StatDisplay key={stat.label} stat={stat} theme={theme} className="flex-none" />
<StatDisplay key={stat.label} opacity={opacity} stat={stat} theme={theme} className="flex-none" />
))}
</div>

Expand All @@ -184,18 +176,14 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
target="_blank"
rel="noopener noreferrer"
className={cn(
"group flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all",
theme === "light"
? "bg-gray-100/50 hover:bg-gray-100"
: theme === "glass"
? "bg-white/5 hover:bg-white/10"
: "bg-white/[0.02] hover:bg-white/[0.04]",
"group flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all bg-gradient-to-r",
opacity < 60 ? (bgColor ?? "") : "",
)}
>
<span
className={cn(
"text-[11px] font-medium transition-all",
theme === "light" ? "text-gray-500" : "text-white/50",
theme === "light" ? "text-gray-800" : "text-white/50",
)}
>
Widget by
Expand All @@ -204,7 +192,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
className={cn(
"text-[11px] font-semibold transition-all",
theme === "light"
? "text-gray-600 group-hover:text-gray-900"
? "text-gray-900 group-hover:text-gray-900"
: "text-white/70 group-hover:text-white",
)}
>
Expand Down
53 changes: 39 additions & 14 deletions app/constants/widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,49 @@ export const DEFAULT_VARIABLES = [
export const DEFAULT_LABELS = ["Rank", "Place", "Daily W-L", "K/D", "Hours Played"];

export const THEME_STYLES = {
default: {
container: "bg-[#1A1B1E]",
header: "text-white/90",
stat: "bg-[#25262B] hover:bg-[#2C2E33]",
},
dark: {
container: "bg-[#1A1B1E]",
header: "text-white/90",
stat: "bg-[#25262B] hover:bg-[#2C2E33]",
container: "bg-gradient-to-br border-white/[0.03]",
header: "text-white/90 bg-gradient-to-r border-b border-white/[0.03]",
stat: "",
bgColor: ["bg-[#25262B]/40", "bg-[#25262B]/50", "bg-[#25262B]/70", "bg-[#25262B]/80", "bg-[#25262B]/100"],
bgGradient: [
"from-[#1A1B1E]/0 via-[#1E1F23]/0 to-[#25262B]/0",
"from-[#1A1B1E]/10 via-[#1E1F23]/10 to-[#25262B]/10",
"from-[#1A1B1E]/20 via-[#1E1F23]/20 to-[#25262B]/20",
"from-[#1A1B1E]/30 via-[#1E1F23]/30 to-[#25262B]/30",
"from-[#1A1B1E]/40 via-[#1E1F23]/40 to-[#25262B]/40",
"from-[#1A1B1E]/50 via-[#1E1F23]/50 to-[#25262B]/50",
"from-[#1A1B1E]/60 via-[#1E1F23]/60 to-[#25262B]/60",
"from-[#1A1B1E]/70 via-[#1E1F23]/70 to-[#25262B]/70",
"from-[#1A1B1E]/80 via-[#1E1F23]/80 to-[#25262B]/80",
"from-[#1A1B1E]/90 via-[#1E1F23]/90 to-[#25262B]/90",
"from-[#1A1B1E]/100 via-[#1E1F23]/100 to-[#25262B]/100",
],
},
light: {
container: "bg-white",
header: "text-gray-900",
stat: "bg-gray-50 hover:bg-gray-100",
container: "bg-gradient-to-br border-gray-200/50",
header: "text-gray-900 bg-gradient-to-r border-b border-gray-200/50",
stat: "",
bgColor: ["bg-gray-50/40", "bg-gray-50/50", "bg-gray-50/70", "bg-gray-50/80", "bg-gray-50/100"],
bgGradient: [
"from-white/0 via-gray-50/0 to-white/0",
"from-white/10 via-gray-50/10 to-white/10",
"from-white/20 via-gray-50/20 to-white/20",
"from-white/30 via-gray-50/30 to-white/30",
"from-white/40 via-gray-50/40 to-white/40",
"from-white/50 via-gray-50/50 to-white/50",
"from-white/60 via-gray-50/60 to-white/60",
"from-white/70 via-gray-50/70 to-white/70",
"from-white/80 via-gray-50/80 to-white/80",
"from-white/90 via-gray-50/90 to-white/90",
"from-white/100 via-gray-50/100 to-white/100",
],
},
glass: {
container: "bg-black/10",
header: "text-white",
stat: "bg-white/5 hover:bg-white/10",
container: "bg-black/10 backdrop-blur-md",
header: "text-white bg-white/5",
stat: "bg-white/5 hover:bg-white/10 backdrop-blur-sm border border-white/[0.05]",
bgColor: [],
bgGradient: [],
},
} as const;
1 change: 1 addition & 0 deletions app/types/widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export type BoxWidgetProps = {

export type StatDisplayProps = {
stat: Stat;
opacity: number;
className?: string;
theme?: Theme;
};

0 comments on commit 47ad33d

Please sign in to comment.