diff --git a/src/renderer/app/app.tsx b/src/renderer/app/app.tsx index 86eb68174..f831d1639 100644 --- a/src/renderer/app/app.tsx +++ b/src/renderer/app/app.tsx @@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from "react-router-dom"; import { Header } from "@/app/header/header"; import { LoginDialog } from "@/app/header/login_dialog"; import type { MenuItem } from "@/app/header/main_menu"; +import { AdDialog } from "@/components/ad_dialog"; import { AuthGuard } from "@/components/auth_guard"; import { PersistentNotification } from "@/components/persistent_notification"; @@ -44,6 +45,7 @@ export const App = React.memo(({ menuItems }: { menuItems: readonly MainMenuItem + ); }); diff --git a/src/renderer/components/ad_dialog.tsx b/src/renderer/components/ad_dialog.tsx new file mode 100644 index 000000000..6edb2ab5e --- /dev/null +++ b/src/renderer/components/ad_dialog.tsx @@ -0,0 +1,95 @@ +import { css } from "@emotion/react"; +import CloseIcon from "@mui/icons-material/Close"; +import Dialog from "@mui/material/Dialog"; +import DialogContent from "@mui/material/DialogContent"; +import IconButton from "@mui/material/IconButton"; +import { useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; +import { useState } from "react"; + +import { ExternalLink as A } from "@/components/external_link"; + +// import spifShopImage from "@/styles/images/ads/spif-slippi-shop-full-size.png"; + +const getActiveCampaign = (): + | { + image: string; + seenKey: string; + } + | undefined => { + // const now = new Date(); + + // // I'm disabling this because the banner by itself is probably enough. This feels quite heavy. + // const start = new Date("2024-12-25"); + // const end = new Date("2025-01-12"); + // if (now >= start && now <= end) { + // return { image: spifShopImage, seenKey: "SPIF_SHOP_SEEN" }; + // } + + return undefined; +}; + +export const AdDialog = () => { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); + + const campaign = getActiveCampaign(); + + const [modalOpen, setModalOpen] = useState(Boolean(campaign)); + + const defaultSeen = campaign && localStorage.getItem(campaign.seenKey) === "true"; + const [seenNotice, setSeenNotice] = useState(defaultSeen); + + const closeModal = () => { + if (campaign) { + localStorage.setItem(campaign.seenKey, "true"); + setSeenNotice(true); + } + setModalOpen(false); + }; + + if (!campaign || seenNotice) { + return null; + } + + return ( + + ({ + position: "absolute", + right: 8, + top: 8, + color: theme.palette.grey[500], + })} + > + + + + + Spif Shop + + + + ); +}; diff --git a/src/renderer/pages/home/news_feed/ad_banner.tsx b/src/renderer/pages/home/news_feed/ad_banner.tsx new file mode 100644 index 000000000..d97f33f8c --- /dev/null +++ b/src/renderer/pages/home/news_feed/ad_banner.tsx @@ -0,0 +1,60 @@ +import { css } from "@emotion/react"; + +import { ExternalLink as A } from "@/components/external_link"; +import spifShopBanner from "@/styles/images/ads/spif-shop-banner.png"; + +const getActiveBanner = () => { + const now = new Date(); + const start = new Date("2024-12-25"); + const end = new Date("2025-01-12"); + + if (now >= start && now <= end) { + return { image: spifShopBanner, url: "https://spif.space/pages/spif-x-slippi" }; + } + + return undefined; +}; + +export const AdBanner = () => { + const banner = getActiveBanner(); + + if (!banner) { + return null; + } + + return ( +
+ + + +
+ ); +}; diff --git a/src/renderer/pages/home/news_feed/news_feed.tsx b/src/renderer/pages/home/news_feed/news_feed.tsx index 4696d6df6..a0f23c4fb 100644 --- a/src/renderer/pages/home/news_feed/news_feed.tsx +++ b/src/renderer/pages/home/news_feed/news_feed.tsx @@ -5,6 +5,7 @@ import { useQuery } from "react-query"; import { LoadingScreen } from "@/components/loading_screen"; +import { AdBanner } from "./ad_banner"; import { NewsArticle } from "./news_article/news_article"; const ITEMS_TO_SHOW = 7; @@ -65,6 +66,7 @@ export const NewsFeed = React.memo(function NewsFeedContainer() { )} + ); }); diff --git a/src/renderer/styles/images/ads/spif-shop-banner.png b/src/renderer/styles/images/ads/spif-shop-banner.png new file mode 100644 index 000000000..7c882ded3 Binary files /dev/null and b/src/renderer/styles/images/ads/spif-shop-banner.png differ diff --git a/src/renderer/styles/images/ads/spif-slippi-shop-full-size.png b/src/renderer/styles/images/ads/spif-slippi-shop-full-size.png new file mode 100644 index 000000000..4036b91e5 Binary files /dev/null and b/src/renderer/styles/images/ads/spif-slippi-shop-full-size.png differ