From cc7d0bfc7c52f50dc8bc20a634fb0b2d278e1b78 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 28 Jan 2023 13:10:40 +0200
Subject: [PATCH] Playwire test

---
 app/components/layout/Footer.tsx            |  38 +++++++-
 app/features/info/routes/privacy-policy.tsx |  21 ++++
 app/root.tsx                                | 103 ++++++++++++++++++++
 app/routes/test.tsx                         |  91 +++++++++++++++++
 app/styles/common.css                       |  12 +++
 remix.config.js                             |   1 +
 6 files changed, 265 insertions(+), 1 deletion(-)
 create mode 100644 app/features/info/routes/privacy-policy.tsx
 create mode 100644 app/routes/test.tsx

diff --git a/app/components/layout/Footer.tsx b/app/components/layout/Footer.tsx
index b8d4f2dbe..51bffb265 100644
--- a/app/components/layout/Footer.tsx
+++ b/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>
+  );
+}
diff --git a/app/features/info/routes/privacy-policy.tsx b/app/features/info/routes/privacy-policy.tsx
new file mode 100644
index 000000000..7d889be9d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/root.tsx b/app/root.tsx
index 6b39c7401..56ecf2021 100644
--- a/app/root.tsx
+++ b/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 (
     <>
diff --git a/app/routes/test.tsx b/app/routes/test.tsx
new file mode 100644
index 000000000..613427048
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/app/styles/common.css b/app/styles/common.css
index 4a43f0e38..84eda2164 100644
--- a/app/styles/common.css
+++ b/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);
+}
diff --git a/remix.config.js b/remix.config.js
index 35f79908b..481d8a4b3 100644
--- a/remix.config.js
+++ b/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");