From e78e6142e05ab6e09a90285f0036388795506cab Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Thu, 12 Mar 2026 20:33:15 +0200 Subject: [PATCH] Add Fuse --- app/components/Main.tsx | 2 +- app/components/fuse/Fuse.tsx | 56 +++++++++++++++++++++++ app/components/layout/index.tsx | 15 +++--- app/components/ramp/Ramp.tsx | 50 -------------------- app/features/map-planner/plans-global.css | 4 -- app/root.tsx | 15 ++++-- app/styles/common.css | 7 --- types/vite.d.ts | 3 +- 8 files changed, 78 insertions(+), 74 deletions(-) create mode 100644 app/components/fuse/Fuse.tsx delete mode 100644 app/components/ramp/Ramp.tsx diff --git a/app/components/Main.tsx b/app/components/Main.tsx index ab2e6e9b8..3c2a595f2 100644 --- a/app/components/Main.tsx +++ b/app/components/Main.tsx @@ -22,7 +22,7 @@ export const Main = ({ const error = useRouteError(); const isMinorSupporter = useHasRole("MINOR_SUPPORT"); const showLeaderboard = - import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID && + import.meta.env.VITE_FUSE_ENABLED && !isMinorSupporter && !isRouteErrorResponse(error); diff --git a/app/components/fuse/Fuse.tsx b/app/components/fuse/Fuse.tsx new file mode 100644 index 000000000..eaa306d02 --- /dev/null +++ b/app/components/fuse/Fuse.tsx @@ -0,0 +1,56 @@ +import { useEffect, useRef } from "react"; +import { useLocation } from "react-router"; + +declare global { + interface Window { + fusetag: { + que: Array<() => void>; + pageInit?: () => void; + registerZone?: (id: string) => void; + }; + } +} + +function callPageInit() { + window.fusetag = window.fusetag || { que: [] }; + window.fusetag.que.push(() => { + window.fusetag.pageInit?.(); + }); +} + +export function FusePageInit() { + const { pathname } = useLocation(); + const previousPathname = useRef(pathname); + + useEffect(() => { + callPageInit(); + }, []); + + useEffect(() => { + if (previousPathname.current === pathname) return; + + previousPathname.current = pathname; + callPageInit(); + }); + + return null; +} + +export function FuseZone({ + id, + fuseSlot, + className, +}: { + id: string; + fuseSlot: string; + className?: string; +}) { + useEffect(() => { + window.fusetag = window.fusetag || { que: [] }; + window.fusetag.que.push(() => { + window.fusetag.registerZone?.(id); + }); + }, [id]); + + return
; +} diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx index 3ca6fbb2c..6a0c4d744 100644 --- a/app/components/layout/index.tsx +++ b/app/components/layout/index.tsx @@ -35,6 +35,7 @@ import { import { Avatar } from "../Avatar"; import { SendouButton } from "../elements/Button"; import { SendouPopover } from "../elements/Popover"; +import { FuseZone } from "../fuse/Fuse"; import { Image } from "../Image"; import { MobileNav } from "../MobileNav"; import { NotificationDot } from "../NotificationDot"; @@ -211,7 +212,7 @@ export function Layout({ const isFrontPage = location.pathname === "/"; const showLeaderboard = - import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID && + import.meta.env.VITE_FUSE_ENABLED && !data?.user?.roles.includes("MINOR_SUPPORT") && !location.pathname.includes("plans"); @@ -376,7 +377,13 @@ export function Layout({ chatUnreadCount={chatContext?.totalUnreadCount} /> - {showLeaderboard ? : null} + {showLeaderboard ? ( + + ) : null} {children}
@@ -481,10 +488,6 @@ function PageIcon({ crumb }: { crumb: Breadcrumb }) { ); } -function MyRampUnit() { - return
; -} - function SideNavUserPanel() { const { t } = useTranslation(); const location = useLocation(); diff --git a/app/components/ramp/Ramp.tsx b/app/components/ramp/Ramp.tsx deleted file mode 100644 index 5737449c9..000000000 --- a/app/components/ramp/Ramp.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useEffect, useState } from "react"; -import { useLocation } from "react-router"; -import { logger } from "../../utils/logger"; - -declare global { - interface Window { - ramp: any; - } -} - -const PUBLISHER_ID = import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID; -const WEBSITE_ID = import.meta.env.VITE_PLAYWIRE_WEBSITE_ID; - -export const Ramp = () => { - const [rampComponentLoaded, setRampComponentLoaded] = useState(false); - const location = useLocation(); - - useEffect(() => { - if (!PUBLISHER_ID || !WEBSITE_ID) { - logger.info("RAMP: Missing Publisher Id or Website Id"); - return; - } - - if (!rampComponentLoaded) { - logger.info("RAMP: Loading"); - setRampComponentLoaded(true); - window.ramp = window.ramp || {}; - window.ramp.que = window.ramp.que || []; - window.ramp.passiveMode = true; - - // Load the Ramp configuration script - const configScript = document.createElement("script"); - configScript.src = `https://cdn.intergient.com/${PUBLISHER_ID}/${WEBSITE_ID}/ramp.js`; - document.body.appendChild(configScript); - - configScript.onload = window.ramp.que.push(() => { - window.ramp.spaNewPage; - }); - } - - // Cleanup function to handle component unmount and updating page state - return () => { - window.ramp.que.push(() => { - window.ramp.spaNewPage(location.pathname); - }); - }; - }, [rampComponentLoaded, location.pathname]); - - return null; -}; diff --git a/app/features/map-planner/plans-global.css b/app/features/map-planner/plans-global.css index 4d2441cfa..1b1a55f3b 100644 --- a/app/features/map-planner/plans-global.css +++ b/app/features/map-planner/plans-global.css @@ -62,10 +62,6 @@ body:has(.planner) header { display: none; } -#pw-oop-bottom_rail { - display: none; -} - .tl-canvas { background-color: var(--color-bg); } diff --git a/app/root.tsx b/app/root.tsx index 8975fc73e..cd43f9e03 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -37,8 +37,8 @@ import type { SendouRouteHandle } from "~/utils/remix.server"; import type { Route } from "./+types/root"; import { Catcher } from "./components/Catcher"; import { SendouToastRegion, toastQueue } from "./components/elements/Toast"; +import { FusePageInit } from "./components/fuse/Fuse"; import { Layout } from "./components/layout"; -import { Ramp } from "./components/ramp/Ramp"; import { getUser } from "./features/auth/core/user.server"; import { userMiddleware } from "./features/auth/core/user-middleware.server"; import { ChatProvider } from "./features/chat/ChatProvider"; @@ -180,6 +180,13 @@ function Document({ + {import.meta.env.VITE_FUSE_ENABLED && + !data?.user?.roles.includes("MINOR_SUPPORT") ? ( +