diff --git a/package-lock.json b/package-lock.json index 6731b87..1b33621 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@alveusgg/data": "github:alveusgg/data#0.37.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-parallax-tilt": "^1.7.222", "tmi.js": "^1.8.5" }, "devDependencies": { @@ -8755,6 +8756,15 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-parallax-tilt": { + "version": "1.7.222", + "resolved": "https://registry.npmjs.org/react-parallax-tilt/-/react-parallax-tilt-1.7.222.tgz", + "integrity": "sha512-lBB9N2QtGFkvIxsFQXM4O3V7p0oa2z9uO63TXzQTyS7MSRcycK+54iyAn/brOwkB+pouOa5yYNgUWBHzlDsDCg==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -16973,6 +16983,12 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "react-parallax-tilt": { + "version": "1.7.222", + "resolved": "https://registry.npmjs.org/react-parallax-tilt/-/react-parallax-tilt-1.7.222.tgz", + "integrity": "sha512-lBB9N2QtGFkvIxsFQXM4O3V7p0oa2z9uO63TXzQTyS7MSRcycK+54iyAn/brOwkB+pouOa5yYNgUWBHzlDsDCg==", + "requires": {} + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index e392723..f7b008c 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@alveusgg/data": "github:alveusgg/data#0.37.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-parallax-tilt": "^1.7.222", "tmi.js": "^1.8.5" }, "devDependencies": { diff --git a/src/components/ambassadorCard/AmbassadorCard.tsx b/src/components/ambassadorCard/AmbassadorCard.tsx index 5b3bb65..5a74481 100644 --- a/src/components/ambassadorCard/AmbassadorCard.tsx +++ b/src/components/ambassadorCard/AmbassadorCard.tsx @@ -18,6 +18,8 @@ import moderatorBadge from "../../assets/mod.svg"; import styles from "./ambassadorCard.module.scss"; +import Tilt from "react-parallax-tilt"; + const offsetPosition = (position: AmbassadorImage["position"]) => { const [x, y] = (position || "50% 50%").split(" "); return `${x} min(calc(${y} + 1.5rem), 0%)`; @@ -28,17 +30,29 @@ export interface AmbassadorCardProps { ambassador: AmbassadorType; onClose?: () => void; className?: string; + disableCardEffects?: boolean; } export default function AmbassadorCard(props: AmbassadorCardProps) { - const { ambassadorKey, ambassador, onClose, className } = props; + const { ambassadorKey, ambassador, onClose, className, disableCardEffects } = + props; const images = getAmbassadorImages(ambassadorKey); const mod = window?.Twitch?.ext?.viewer?.role === "broadcaster" || window?.Twitch?.ext?.viewer?.role === "moderator"; + const glareOpacity = disableCardEffects ? 0.0 : 0.3; return ( -
- + ); } diff --git a/src/components/ambassadorCard/ambassadorCard.module.scss b/src/components/ambassadorCard/ambassadorCard.module.scss index 4fa8d84..4ba6492 100644 --- a/src/components/ambassadorCard/ambassadorCard.module.scss +++ b/src/components/ambassadorCard/ambassadorCard.module.scss @@ -15,7 +15,7 @@ box-shadow: $shadow; border-radius: 1rem; - overflow: hidden; + overflow: visible; color: $primary-text; font-size: 0.7rem; @@ -41,6 +41,7 @@ width: 100%; object-fit: cover; aspect-ratio: 2.2; + border-radius: 1rem 1rem 0rem 0rem; @media (min-width: 480px) { aspect-ratio: 1.8; @@ -64,6 +65,7 @@ backdrop-filter: blur(0.25rem); transition: $transition; transition-property: opacity, backdrop-filter; + border-radius: 1rem 1rem 0rem 0rem; .name { font-size: 1.3rem; diff --git a/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx b/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx index bbb3733..23752f6 100644 --- a/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx +++ b/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx @@ -14,6 +14,8 @@ import type { OverlayOptionProps } from "../Overlay"; import styles from "./ambassadors.module.scss"; import IconChevron from "../../../../../components/icons/IconChevron"; +import useSettings from "../../../hooks/useSettings"; + export default function Ambassadors(props: OverlayOptionProps) { const { context: { activeAmbassador, setActiveAmbassador }, @@ -84,6 +86,8 @@ export default function Ambassadors(props: OverlayOptionProps) { handleArrowVisibility(); }, [handleArrowVisibility]); + const settings = useSettings(); + return (
@@ -136,6 +140,7 @@ export default function Ambassadors(props: OverlayOptionProps) { ambassador={ambassadors[activeAmbassador.key]} onClose={() => setActiveAmbassador({})} className={styles.ambassadorCard} + disableCardEffects={settings.disableCardEffects.value} /> )}
diff --git a/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss b/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss index 187cd8a..8a38e1c 100644 --- a/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss +++ b/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss @@ -120,7 +120,6 @@ $fade-distance: 3rem; .ambassadorCard { align-self: center; z-index: 0; // stay below ambassadors list - transform-origin: center left; animation: slideIn 0.5s ease-in-out; @media (prefers-reduced-motion) { diff --git a/src/pages/overlay/hooks/useSettings.tsx b/src/pages/overlay/hooks/useSettings.tsx index ad8f298..6eaec27 100644 --- a/src/pages/overlay/hooks/useSettings.tsx +++ b/src/pages/overlay/hooks/useSettings.tsx @@ -35,6 +35,12 @@ const settings = { }, configurable: false, }, + disableCardEffects: { + title: "Disable Ambassador Card Effects", + type: "boolean", + process: (value: any) => !!value, + configurable: true, + }, }; type SettingsKey = keyof typeof settings;