Playwire test

app/components/layout/Footer.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import { useTranslation } from "~/hooks/useTranslation";
 import type { RootLoaderData } from "~/root";
 import { discordFullName } from "~/utils/strings";
@@ -96,6 +96,7 @@ export function Footer({
           </ul>
         </div>
       ) : null}
+      <PlaywireBadge />
       <div className="layout__copyright-note">
         sendou.ink © Copyright of Sendou and contributors 2019-{currentYear}.
         Original content & source code is licensed under the GPL-3.0 license.
@@ -105,3 +106,38 @@ export function Footer({
     </footer>
   );
 }
+
+function PlaywireBadge() {
+  const location = useLocation();
+
+  if (location.pathname !== "/test") return null;
+
+  return (
+    <div className="stack sm">
+      <p>
+        {/* eslint-disable-next-line react/jsx-no-target-blank */}
+        <a href="http://www.playwire.com" rel="noopener" target="_blank">
+          <img
+            className="playwire__img dark-mode-only"
+            src="https://www.playwire.com/hubfs/Powered-by-Playwire-Badges/Powered-by-playwire-2021-standalone-large-white-300px.png"
+            alt="Playwire"
+            width="200"
+            loading="lazy"
+          />
+          <img
+            className="playwire__img light-mode-only"
+            src="https://www.playwire.com/hubfs/Powered-by-Playwire-Badges/Powered-by-playwire-2021-standalone-large-1-1.png"
+            alt="Playwire"
+            width="200"
+            loading="lazy"
+          />
+        </a>
+      </p>
+      <p className="playwire__text">
+        <a href="/contact-direct-sales" rel="noopener" target="_blank">
+          Advertise on this site
+        </a>
+      </p>
+    </div>
+  );
+}

app/features/info/routes/privacy-policy.tsx

@@ -0,0 +1,21 @@
+import type { MetaFunction } from "@remix-run/node";
+import { Main } from "~/components/Main";
+import { makeTitle } from "~/utils/strings";
+
+export const meta: MetaFunction = () => {
+  return {
+    title: makeTitle("Privacy Policy"),
+  };
+};
+
+export default function PrivacyPolicyPage() {
+  return (
+    <Main>
+      <div
+        dangerouslySetInnerHTML={{
+          __html: `<script type="text/javascript">let optOutCounter = 0; function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires='expires='+d.toUTCString();document.cookie=cname+'='+cvalue+';'+expires+';path=/'; if(optOutCounter==0){ let cookieP = document.getElementById('cookieP'); var successCookie = document.createElement('h3'); successCookie.innerHTML = 'Optout Success!'; successCookie.setAttribute('style','color:green'); cookieP.appendChild(successCookie); optOutCounter ++ } };</script> <h3>Common ID Cookie</h3> <p id="cookieP">This site uses cookies and similar tracking technologies such as the Common ID cookie to provide its services. Cookies are important devices for measuring advertising effectiveness and ensuring a robust online advertising industry. The Common ID cookie stores a unique user id in the first party domain and is accessible to our ad partners. This simple ID that can be utilized to improve user matching, especially for delivering ads to iOS and MacOS browsers. Users can opt out of the Common ID tracking cookie by clicking <a onclick="window.setCookie('_pubcid_optout', '1', 1825);" href="#opt-out">here</a>.</p> <h3>Advertising Privacy Settings</h3> <p>FOR EU USERS ONLY: When you use our site, pre-selected companies may access and use certain information on your device and about your interests to serve ads or personalized content. You may revisit or change consent-choices at any time by clicking <a href="#cmp" onclick="if(window.__cmp === undefined){console.warn('User is not in the EU - Consent Choices can only be configured when User is in the EU')}else{window.__cmp('showConsentTool')}" >here</a>.</p>`,
+        }}
+      />
+    </Main>
+  );
+}

app/root.tsx

@@ -14,6 +14,7 @@ import {
   type ShouldRevalidateFunction,
   useLoaderData,
   useMatches,
+  useLocation,
 } from "@remix-run/react";
 import * as React from "react";
 import commonStyles from "~/styles/common.css";
@@ -88,6 +89,9 @@ export interface RootLoaderData {
     | "discordName"
     | "patronTier"
   >;
+  gtagId?: string;
+  publisherId?: string;
+  websiteId?: string;
 }
 
 export const loader: LoaderFunction = async ({ request }) => {
@@ -103,6 +107,9 @@ export const loader: LoaderFunction = async ({ request }) => {
       theme: themeSession.getTheme(),
       patrons: db.users.findAllPatrons(),
       baseUrl: process.env["BASE_URL"],
+      gtagId: process.env["GTAG_ID"],
+      publisherId: process.env["PLAYWIRE_PUBLISHER_ID"],
+      websiteId: process.env["PLAYWIRE_WEBSITE_ID"],
       user: user
         ? {
             discordName: user.discordName,
@@ -151,6 +158,7 @@ function Document({
         <link rel="manifest" href="/app.webmanifest" />
         <PWALinks />
         <Fonts />
+        <PlaywireScripts />
       </head>
       <body style={customizedCSSVars}>
         {process.env.NODE_ENV === "development" && <HydrationTestIndicator />}
@@ -273,6 +281,101 @@ function Fonts() {
   );
 }
 
+function PlaywireScripts() {
+  const location = useLocation();
+  const data = useLoaderData<RootLoaderData>();
+
+  if (
+    !data ||
+    !data.gtagId ||
+    !data.publisherId ||
+    !data.websiteId ||
+    location.pathname !== "/test"
+  ) {
+    return null;
+  }
+
+  const units: Array<{ selectorId?: string; type: string }> = [
+    {
+      selectorId: "top-leaderboard",
+      type: "leaderboard_atf",
+    },
+    {
+      type: "bottom_rail",
+    },
+  ];
+
+  return (
+    <>
+      {/* Step 1. */}
+      <script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${data.gtagId}`}
+      />
+      <script
+        type="text/javascript"
+        dangerouslySetInnerHTML={{
+          __html: `
+      window.ramp = window.ramp || {};
+      window.ramp.que = window.ramp.que || [];
+      window.ramp.passiveMode = true;`,
+        }}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+              window._pwGA4PageviewId = ''.concat(Date.now());
+              window.dataLayer = window.dataLayer || [];
+              window.gtag = window.gtag || function () {
+                  dataLayer.push(arguments);
+              };
+              gtag('js', new Date());
+              gtag('config', '${data.gtagId}', { 'send_page_view': false });
+              gtag(
+                  'event',
+                  'ramp_js',
+                  {
+                      'send_to': '${data.gtagId}',
+                      'pageview_id': window._pwGA4PageviewId
+                  }
+              );
+            `,
+        }}
+      />
+      {/* Step 2.-3. */}
+      <script
+        type="text/javascript"
+        dangerouslySetInnerHTML={{
+          __html: `
+        var pwUnits = ${JSON.stringify(units)}
+    
+        var init = function () {  
+            ramp
+            .addUnits(pwUnits)
+            .then(() => {
+                ramp.displayUnits()
+            }).catch((e) =>{
+                ramp.displayUnits()
+                console.log(e)
+            })
+        }
+    
+        ramp.onReady = function() {
+          init()
+        }
+      `,
+        }}
+      />
+      {/* Step 4. */}
+      <script
+        type="text/javascript"
+        async
+        src={`//cdn.intergient.com/${data.publisherId}/${data.websiteId}/ramp.js`}
+      />
+    </>
+  );
+}
+
 function PWALinks() {
   return (
     <>

app/routes/test.tsx

@@ -0,0 +1,91 @@
+import { Link } from "@remix-run/react";
+import { useTranslation } from "~/hooks/useTranslation";
+import { Image } from "~/components/Image";
+import type { MainWeaponId } from "~/modules/in-game-lists";
+import { weaponCategories, weaponIdIsNotAlt } from "~/modules/in-game-lists";
+import {
+  BUILDS_PAGE,
+  mainWeaponImageUrl,
+  mySlugify,
+  navIconUrl,
+  weaponCategoryUrl,
+} from "~/utils/urls";
+import { type SendouRouteHandle } from "~/utils/remix";
+import styles from "~/styles/builds.css";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import { Main } from "~/components/Main";
+import { makeTitle } from "~/utils/strings";
+import { useSetTitle } from "~/hooks/useSetTitle";
+
+export const meta: MetaFunction = () => {
+  return {
+    title: makeTitle("Builds"),
+    description: "View Splatoon 3 builds for all weapons by the best players",
+  };
+};
+
+export const handle: SendouRouteHandle = {
+  i18n: "weapons",
+  breadcrumb: () => ({
+    imgPath: navIconUrl("builds"),
+    href: BUILDS_PAGE,
+    type: "IMAGE",
+  }),
+};
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export default function BuildsPage() {
+  const { t } = useTranslation(["common", "weapons"]);
+  useSetTitle(t("common:pages.builds"));
+
+  const weaponIdToSlug = (weaponId: MainWeaponId) => {
+    return mySlugify(t(`weapons:MAIN_${weaponId}`, { lng: "en" }));
+  };
+
+  return (
+    <>
+      <div id="top-leaderboard" />
+      <Main className="stack md">
+        {weaponCategories.map((category) => (
+          <div key={category.name} className="builds__category">
+            <div className="builds__category__header">
+              <Image
+                path={weaponCategoryUrl(category.name)}
+                width={40}
+                height={40}
+                alt={t(`common:weapon.category.${category.name}`)}
+              />
+              {t(`common:weapon.category.${category.name}`)}
+            </div>
+            <div className="builds__category__weapons">
+              {(category.weaponIds as readonly MainWeaponId[])
+                .filter(weaponIdIsNotAlt)
+                .sort((a, b) =>
+                  t(`weapons:MAIN_${a}`).localeCompare(t(`weapons:MAIN_${b}`))
+                )
+                .map((weaponId) => (
+                  <Link
+                    key={weaponId}
+                    to={"/builds/" + weaponIdToSlug(weaponId)}
+                    className="builds__category__weapon"
+                  >
+                    <Image
+                      className="builds__category__weapon__img"
+                      path={mainWeaponImageUrl(weaponId)}
+                      width={28}
+                      height={28}
+                      alt={t(`weapons:MAIN_${weaponId}`)}
+                    />
+                    {t(`weapons:MAIN_${weaponId}`)}
+                  </Link>
+                ))}
+            </div>
+          </div>
+        ))}
+      </Main>
+    </>
+  );
+}

app/styles/common.css

@@ -989,3 +989,15 @@ dialog::backdrop {
   grid-template-columns: 3fr 2fr 1fr;
   row-gap: var(--s-3);
 }
+
+.playwire__img {
+  width: 200px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.playwire__text {
+  text-align: center;
+  font-size: var(--fonts-sm);
+}

remix.config.js

@@ -24,6 +24,7 @@ module.exports = {
         route("/to/:id/join", "features/tournament/routes/to.$id.join.tsx");
       });
 
+      route("/privacy-policy", "features/info/routes/privacy-policy.tsx");
       route("/support", "features/info/routes/support.tsx");
 
       route("/t", "features/team/routes/t.tsx");