improve pw unit logic

Author: atomicptr

src/@types/globals.d.ts

@@ -1,6 +1,7 @@
 declare const DB_BUILD_TIME: number;
 declare const DB_ENABLE_ADS: boolean;
 declare const DB_DEVMODE: boolean;
+declare const DB_DISPLAY_AD_PLACEHOLDERS: boolean;
 declare const DB_GA4_MEASUREMENT_ID: string | null;
 declare const DB_PW_PUBLISHER_ID: string | null;
 declare const DB_PW_WEBSITE_ID: string | null;

src/@types/playwire.d.ts

@@ -9,6 +9,7 @@ interface Window {
         passiveMode: boolean;
         addUnits: (units: PlaywireUnit[]) => Promise<void>;
         displayUnits: () => void;
+        destroyUnits: (what: string) => void;
     };
 
     _pwGA4PageviewId: string;

src/components/AdSpace.tsx

@@ -1,34 +1,78 @@
 import { FeaturedVideo } from "@mui/icons-material";
-import { Box, useTheme } from "@mui/material";
-import { eventsAtom } from "@src/state/events";
+import { Box, ListSubheader, useTheme } from "@mui/material";
+import { eventsAtom, playwireAddInitializedUnit } from "@src/state/events";
 import { adsEnabled } from "@src/utils/env-tools";
 import log from "@src/utils/logger";
-import { useAtomValue } from "jotai";
-import React, { useEffect } from "react";
-import useDevMode from "@src/hooks/dev-mode";
+import { useAtom } from "jotai";
 import md5 from "md5";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 export enum UnitType {
-    RightRail = "right_rail",
     BottomRail = "bottom_rail",
-    LeftRail = "left_rail",
-    Skyscraper = "sky_atf",
+    Skyscraper160x600 = "sky_atf",
+    Skyscraper300x600 = "sky_btf",
 }
 
+export const adSpaceSize = {
+    [UnitType.BottomRail]: { height: 50, width: 320 },
+    [UnitType.Skyscraper160x600]: { height: 600, width: 160 },
+    [UnitType.Skyscraper300x600]: { height: 600, width: 300 },
+};
+
 interface AdSpaceProps {
     name: string;
     unitType: UnitType;
+    withoutHeader?: boolean;
 }
 
-const AdSpace: React.FC<AdSpaceProps> = ({ name, unitType }) => {
+interface AdSpaceWrapperProps {
+    children: React.ReactElement;
+    withoutHeader?: boolean;
+}
+
+const AdSpaceWrapper: React.FC<AdSpaceWrapperProps> = ({ children, withoutHeader }) => {
+    const { t } = useTranslation();
+    return (
+        <Box
+            sx={{
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                textAlign: "center",
+            }}
+        >
+            {withoutHeader ? null : <ListSubheader sx={{ userSelect: "none" }}>{t("misc.ad")}</ListSubheader>}
+            <Box>{children}</Box>
+        </Box>
+    );
+};
+
+const AdSpace: React.FC<AdSpaceProps> = ({ name, unitType, withoutHeader }) => {
     const theme = useTheme();
-    const isDevMode = useDevMode();
 
-    const events = useAtomValue(eventsAtom);
+    const [events, setEvents] = useAtom(eventsAtom);
 
     const selectorName = `dbu_${md5(name + unitType.toString())}`;
 
+    const size = unitType in adSpaceSize ? adSpaceSize[unitType as keyof typeof adSpaceSize] : null;
+
     useEffect(() => {
+        if (events.playwireInitializedUnits.indexOf(name) > -1) {
+            log.error(`ramp: Unit ${name} (${unitType}) has already been initialized...`);
+            return;
+        }
+
+        if (DB_DISPLAY_AD_PLACEHOLDERS) {
+            setEvents(playwireAddInitializedUnit(name));
+            log.debug(`not ramp: initialized unit ${name} (${unitType})`);
+        }
+
+        if (!adsEnabled) {
+            return;
+        }
+
         if (!events.playwireSetupHasFinished) {
             return;
         }
@@ -46,34 +90,46 @@ const AdSpace: React.FC<AdSpaceProps> = ({ name, unitType }) => {
                 log.error("ramp: could not add unit", { error });
                 window.ramp.displayUnits();
             }
+
+            setEvents(playwireAddInitializedUnit(name));
+            log.debug(`ramp: initialized unit ${name} (${unitType})`);
         };
         initUnit();
-    }, [events.playwireSetupHasFinished, selectorName, unitType]);
+    }, [events.playwireSetupHasFinished, events.playwireInitializedUnits, selectorName, unitType, setEvents, name]);
 
-    if (!adsEnabled) {
-        return null;
-    }
-
-    if (isDevMode) {
+    if (DB_DISPLAY_AD_PLACEHOLDERS) {
         return (
-            <Box
-                sx={{
-                    alignItems: "center",
-                    border: `5px dashed ${theme.palette.primary.main}`,
-                    color: theme.palette.primary.main,
-                    display: "flex",
-                    flexGrow: 10,
-                    justifyContent: "center",
-                    m: 1,
-                    p: 1,
-                }}
-            >
-                <FeaturedVideo />
-            </Box>
+            <AdSpaceWrapper withoutHeader={withoutHeader}>
+                <Box
+                    id={selectorName}
+                    sx={{
+                        alignItems: "center",
+                        background: theme.palette.background.default,
+                        border: `5px dashed ${theme.palette.primary.main}`,
+                        color: theme.palette.primary.main,
+                        display: "flex",
+                        height: `${size?.height}px`,
+                        justifyContent: "center",
+                        m: 1,
+                        p: 1,
+                        width: `${size?.width}px`,
+                    }}
+                >
+                    <FeaturedVideo />
+                </Box>
+            </AdSpaceWrapper>
         );
     }
 
-    return <div id={selectorName} />;
+    if (!adsEnabled) {
+        return null;
+    }
+
+    return (
+        <AdSpaceWrapper>
+            <div id={selectorName} />
+        </AdSpaceWrapper>
+    );
 };
 
 export default React.memo(AdSpace);

src/components/AdSpaceFloating.tsx

@@ -1,55 +1,66 @@
 import { Box, useTheme } from "@mui/material";
+import { Breakpoint } from "@mui/system";
 import AdSpace, { UnitType } from "@src/components/AdSpace";
-import useIsMobile from "@src/hooks/is-mobile";
 import useWindowSize from "@src/hooks/window-size";
 import { adsEnabled } from "@src/utils/env-tools";
 import React from "react";
 
-export const adSpaceRightSideMinSize = 300;
-export const adSpaceMobileBannerHeight = 96;
+interface AdSpaceFloatingProps {
+    name: string;
+    unitType: UnitType;
+    fromBreakpoint?: Breakpoint;
+    untilBreakpoint?: Breakpoint;
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+    withoutHeader?: boolean;
+}
 
-const AdSpaceFloating = () => {
+const AdSpaceFloating: React.FC<AdSpaceFloatingProps> = ({
+    name,
+    unitType,
+    fromBreakpoint,
+    untilBreakpoint,
+    left,
+    right,
+    top,
+    bottom,
+    withoutHeader,
+}) => {
     const theme = useTheme();
-    const isMobile = useIsMobile();
     const { width } = useWindowSize();
 
-    if (!adsEnabled) {
+    if (!adsEnabled && !DB_DISPLAY_AD_PLACEHOLDERS) {
         return null;
     }
 
-    const rightSideSpace = (width - theme.breakpoints.values.xl) * 0.5;
-    const rightSideHasEnoughSpace = rightSideSpace > adSpaceRightSideMinSize;
+    const canRenderUsingFromRule = fromBreakpoint ? width >= theme.breakpoints.values[fromBreakpoint] : true;
+    const canRenderUsingUntilRule = untilBreakpoint ? width <= theme.breakpoints.values[untilBreakpoint] : true;
 
-    const baseStyle = {
-        background: theme.palette.background.default,
-        display: "flex",
-        position: "fixed",
-    };
-
-    if (!isMobile && !rightSideHasEnoughSpace) {
+    if (!canRenderUsingFromRule || !canRenderUsingUntilRule) {
         return null;
     }
 
-    const style = {
-        ...baseStyle,
-        ...(isMobile
-            ? {
-                bottom: 0,
-                height: `${adSpaceMobileBannerHeight}px`,
-                left: 0,
-                right: 0,
-            }
-            : {
-                bottom: 0,
-                right: 0,
-                top: 64,
-                width: `${rightSideSpace - adSpaceRightSideMinSize * 0.5}px`,
-            }),
-    };
-
     return (
-        <Box sx={style}>
-            <AdSpace name={"AdSpaceFloating"} unitType={isMobile ? UnitType.BottomRail : UnitType.Skyscraper} />
+        <Box
+            sx={{
+                bottom,
+                display: "flex",
+                justifyContent: "center",
+                left,
+                pointerEvents: "none",
+                position: "fixed",
+                right,
+                top,
+                zIndex: 99999,
+            }}
+        >
+            <AdSpace
+                name={name}
+                unitType={unitType}
+                withoutHeader={withoutHeader}
+            />
         </Box>
     );
 };

src/components/BuildMenu.tsx

@@ -1,9 +1,11 @@
 import { Bookmark, BookmarkBorder, ContentCopy, Undo } from "@mui/icons-material";
 import { Fab, IconButton, useTheme } from "@mui/material";
-import { adSpaceMobileBannerHeight } from "@src/components/AdSpaceFloating";
+import { adSpaceSize, UnitType } from "@src/components/AdSpace";
 import InputDialog from "@src/components/InputDialog";
+import { playwireUnitMobileBottomRail } from "@src/constants";
 import useIsMobile from "@src/hooks/is-mobile";
 import { buildModelView, lastSelectedBuildModelView } from "@src/state/build";
+import { eventsAtom, playwireIsUnitInitialized } from "@src/state/events";
 import {
     addFavorite,
     favoritesAtom,
@@ -41,6 +43,8 @@ const BuildMenu: React.FC = () => {
     const isFavorite = isBuildInFavorites(favorites, buildId);
     const isCopyToClipboardEnabled = navigator.clipboard !== undefined;
 
+    const events = useAtomValue(eventsAtom);
+
     if (buildIdRegex.exec(location.pathname) === null) {
         return null;
     }
@@ -95,7 +99,14 @@ const BuildMenu: React.FC = () => {
                         color="primary"
                         onClick={handleCopyToClipboardClicked}
                         sx={{
-                            bottom: adsEnabled ? `${adSpaceMobileBannerHeight}px` : theme.spacing(2),
+                            bottom:
+                                (adsEnabled || DB_DISPLAY_AD_PLACEHOLDERS) &&
+                                playwireIsUnitInitialized(events, playwireUnitMobileBottomRail)
+                                    ? `${
+                                        adSpaceSize[UnitType.BottomRail].height +
+                                          parseInt(theme.spacing(3).slice(0, -2))
+                                    }px`
+                                    : theme.spacing(2), // TODO: edit this
                             position: "fixed",
                             right: theme.spacing(3),
                         }}

src/components/Layout.tsx

@@ -31,14 +31,21 @@ import {
     Typography,
     useTheme,
 } from "@mui/material";
-import AdSpace, { UnitType } from "@src/components/AdSpace";
-import AdSpaceFloating, { adSpaceRightSideMinSize } from "@src/components/AdSpaceFloating";
+import { UnitType } from "@src/components/AdSpace";
+import AdSpaceFloating from "@src/components/AdSpaceFloating";
 import BuildMenu from "@src/components/BuildMenu";
 import LinkBox from "@src/components/LinkBox";
 import SomethingWentWrong from "@src/components/SometingWentWrong";
 import Spacer from "@src/components/Spacer";
 import { drawerWidth } from "@src/components/theme";
-import { crowdinLink, discordServerUrl, githubUrl, xTwitterUrl } from "@src/constants";
+import {
+    crowdinLink,
+    discordServerUrl,
+    githubUrl,
+    playwireUnitMobileBottomRail,
+    playwireUnitRightSide,
+    xTwitterUrl,
+} from "@src/constants";
 import dauntlessBuilderData from "@src/data/Data";
 import useDevMode from "@src/hooks/dev-mode";
 import useIsMobile from "@src/hooks/is-mobile";
@@ -263,7 +270,23 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                 </ErrorBoundary>
             </Container>
 
-            <AdSpaceFloating />
+            <AdSpaceFloating
+                bottom={0}
+                fromBreakpoint={"xl"}
+                name={playwireUnitRightSide}
+                right={0}
+                unitType={UnitType.Skyscraper160x600}
+                withoutHeader
+            />
+            <AdSpaceFloating
+                bottom={0}
+                left={0}
+                name={playwireUnitMobileBottomRail}
+                right={0}
+                unitType={UnitType.BottomRail}
+                untilBreakpoint={"md"}
+                withoutHeader
+            />
         </Box>
     );
 };