Merge branch 'newads'

backend/src/api/controllers/psa.ts

@@ -1,9 +1,7 @@
 import * as PsaDAL from "../../dal/psa";
 import { MonkeyResponse } from "../../utils/monkey-response";
 
-export async function getPsas(
-  _req: MonkeyTypes.Request
-): Promise<MonkeyResponse> {
+export async function getPsas(): Promise<MonkeyResponse> {
   const data = await PsaDAL.get();
   return new MonkeyResponse("PSAs retrieved", data);
 }

frontend/src/ts/controllers/ad-controller.ts

@@ -4,33 +4,50 @@ import * as ConfigEvent from "../observables/config-event";
 import * as BannerEvent from "../observables/banner-event";
 import Config from "../config";
 import * as TestState from "../test/test-state";
+import * as EG from "./eg-ad-controller";
+import * as PW from "./pw-ad-controller";
 
 const breakpoint = 900;
 let widerThanBreakpoint = true;
 
+const breakpoint2 = 1330;
+let widerThanBreakpoint2 = true;
+
 let initialised = false;
 
 export let adBlock: boolean;
 export let cookieBlocker: boolean;
 
+// export let choice: "eg" | "pw" = Math.random() < 0.5 ? "eg" : "pw";
+export const choice: "eg" | "pw" = "eg";
+
+// console.log("AB choice: " + choice);
+
+// const adChoiceForce = window.localStorage.getItem("adChoiceForce");
+// if (adChoiceForce === "eg") {
+//   choice = "eg";
+//   console.log("AB choice forced: " + choice);
+// } else if (adChoiceForce === "pw") {
+//   choice = "pw";
+//   console.log("AB choice forced: " + choice);
+// }
+
 export function init(): void {
-  $("head").append(`<script>
-!function(e){var s=new XMLHttpRequest;s.open("GET","https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=monkeytype.com",!0),s.onreadystatechange=function(){var t;4==s.readyState&&(200<=s.status&&s.status<300||304==s.status)&&((t=e.createElement("script")).type="text/javascript",t.text=s.responseText,e.head.appendChild(t))},s.send(null)}(document);
-(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-W7WN5QV');
-</script>`);
-  $("body")
-    .prepend(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`);
+  if (choice === "eg") {
+    EG.init();
+  } else {
+    PW.init();
+  }
 
   setInterval(() => {
     if (TestState.isActive) {
       return;
     }
-    refreshVisible();
+    if (choice === "eg") {
+      EG.refreshVisible();
+    } else {
+      PW.refreshVisible();
+    }
   }, 60000);
 
   initialised = true;
@@ -88,39 +105,52 @@ function updateBreakpoint(noReinstate = false): void {
   }
   if (noReinstate) return;
   if (beforeUpdate !== widerThanBreakpoint) {
-    reinstate();
+    if (choice === "eg") {
+      EG.reinstate();
+    } else {
+      PW.reinstate();
+    }
+  }
+}
+
+function updateBreakpoint2(noReinstate = false): void {
+  if (choice !== "pw") return;
+  const beforeUpdate = widerThanBreakpoint2;
+
+  if (window.innerWidth > breakpoint2) {
+    widerThanBreakpoint2 = true;
+  } else {
+    widerThanBreakpoint2 = false;
+  }
+  if (noReinstate) return;
+  if (beforeUpdate !== widerThanBreakpoint2) {
+    PW.reinstate();
   }
 }
 
 export async function refreshVisible(): Promise<void> {
-  //@ts-ignore
-  const adDivs = Object.keys(window.egAdPack.gptAdSlots);
-  const visibleAdDivs = [];
-
-  for (let i = 0; i < adDivs.length; i++) {
-    const el = document.querySelectorAll(
-      "[data-adunit-name='" + adDivs[i] + "']"
-    )[0];
-    if (!el) continue;
-    const elParent = el.parentElement as HTMLElement;
-    if (
-      window.getComputedStyle(elParent).getPropertyValue("display") != "none"
-    ) {
-      visibleAdDivs.push(adDivs[i]);
-    }
+  if (choice === "eg") {
+    await EG.refreshVisible();
+  } else {
+    await PW.refreshVisible();
   }
-  //@ts-ignore
-  window.egAps.refreshAds(visibleAdDivs);
 }
 
 export async function checkAdblock(): Promise<void> {
   return new Promise((resolve) => {
-    if (adBlock === undefined) {
+    if (choice === "eg") {
+      if (adBlock === undefined) {
+        //@ts-ignore
+        if (window.egAdPack === undefined) {
+          adBlock = true;
+        } else {
+          adBlock = false;
+        }
+      }
+    } else if (choice === "pw") {
       //@ts-ignore
-      if (window.egAdPack === undefined) {
+      if (window.ramp === undefined) {
         adBlock = true;
-      } else {
-        adBlock = false;
       }
     }
     resolve();
@@ -130,10 +160,17 @@ export async function checkAdblock(): Promise<void> {
 export async function checkCookieblocker(): Promise<void> {
   return new Promise((resolve) => {
     if (cookieBlocker === undefined) {
+      if (choice === "pw") {
+        cookieBlocker = false;
+        resolve();
+        return;
+      }
+
       //@ts-ignore
       if (window.__tcfapi === undefined) {
         cookieBlocker = true;
         resolve();
+        return;
       }
       //@ts-ignore
       window.__tcfapi("getTCData", 2, (tcData, success) => {
@@ -146,11 +183,9 @@ export async function checkCookieblocker(): Promise<void> {
         } else {
           cookieBlocker = true;
         }
-        resolve();
       });
-    } else {
-      resolve();
     }
+    resolve();
   });
 }
 
@@ -164,13 +199,10 @@ export async function reinstate(): Promise<boolean> {
   await checkCookieblocker();
   if (adBlock || cookieBlocker) return false;
 
-  try {
-    //@ts-ignore
-    window.egAps.reinstate();
-    return true;
-  } catch (e) {
-    console.error(e);
-    return false;
+  if (choice === "eg") {
+    return EG.reinstate();
+  } else {
+    return PW.reinstate();
   }
 }
 
@@ -210,40 +242,10 @@ export async function renderResult(): Promise<void> {
     return;
   }
 
-  if (widerThanBreakpoint) {
-    // $("#ad-result-wrapper").html(`
-    // <div class="icon"><i class="fas fa-ad"></i></div>
-    // <div id="ad-result"></div>
-    // `);
-    // if ($("#ad-result-wrapper").is(":empty")) {
-    //@ts-ignore
-    // window.egAps.render(["ad-result"]);
-    // } else {
-    //@ts-ignore
-    window.egAps.refreshAds([
-      "ad-result",
-      "ad-vertical-left",
-      "ad-vertical-right",
-      "ad-footer",
-    ]);
-    // }
+  if (choice === "eg") {
+    EG.renderResult(widerThanBreakpoint);
   } else {
-    // $("#ad-result-small-wrapper").html(`
-    // <div class="icon small"><i class="fas fa-ad"></i></div>
-    // <div id="ad-result-small"></div>
-    // `);
-    // if ($("#ad-result-small-wrapper").is(":empty")) {
-    //@ts-ignore
-    // window.egAps.render(["ad-result-small"]);
-    // } else {
-    //@ts-ignore
-    window.egAps.refreshAds([
-      "ad-result-small",
-      "ad-vertical-left",
-      "ad-vertical-right",
-      "ad-footer-small",
-    ]);
-    // }
+    PW.renderResult();
   }
 }
 
@@ -261,17 +263,34 @@ export function updateTestPageAds(visible: boolean): void {
   }
 }
 
+export function showConsentPopup(): void {
+  if (choice === "eg") {
+    //@ts-ignore
+    window.__tcfapi("displayConsentUi", 2, function () {
+      //
+    });
+  } else {
+    //@ts-ignore
+    ramp.showCmpModal();
+  }
+}
+
 export function destroyResult(): void {
+  if (choice === "pw") {
+    PW.destroyAll();
+  }
   // $("#ad-result-wrapper").empty();
   // $("#ad-result-small-wrapper").empty();
 }
 
-const debouncedMarginUpdate = debounce(100, updateVerticalMargin);
-const debouncedBreakpointUpdate = debounce(100, updateBreakpoint);
+const debouncedMarginUpdate = debounce(500, updateVerticalMargin);
+const debouncedBreakpointUpdate = debounce(500, updateBreakpoint);
+const debouncedBreakpoint2Update = debounce(500, updateBreakpoint2);
 
 $(window).on("resize", () => {
   debouncedMarginUpdate();
   debouncedBreakpointUpdate();
+  debouncedBreakpoint2Update();
 });
 
 ConfigEvent.subscribe((event, value) => {
@@ -293,10 +312,14 @@ BannerEvent.subscribe(() => {
 
 $(document).ready(() => {
   updateBreakpoint(true);
+  updateBreakpoint2();
 });
 
 window.onerror = function (error): void {
-  if (typeof error === "string" && error.substring(0, 6) === "EG APS") {
-    $("#ad-result-wrapper .iconAndText").addClass("withLeft");
+  //@ts-ignore
+  if (choice === "eg") {
+    if (typeof error === "string" && error.substring(0, 6) === "EG APS") {
+      $("#ad-result-wrapper .iconAndText").addClass("withLeft");
+    }
   }
 };

frontend/src/ts/controllers/badge-controller.ts

@@ -3,7 +3,7 @@ const badges: Record<number, MonkeyTypes.UserBadge> = {
     id: 1,
     name: "Developer",
     description: "I made this",
-    icon: "fa-rocket",
+    icon: "fa-laptop",
     color: "white",
     customStyle: "animation: rgb-bg 10s linear infinite;",
   },
@@ -95,6 +95,14 @@ const badges: Record<number, MonkeyTypes.UserBadge> = {
     color: "var(--text-color)",
     background: "var(--sub-color)",
   },
+  13: {
+    id: 13,
+    name: "Mythical",
+    description: "Yes, I'm actually this fast",
+    icon: "fa-rocket",
+    color: "white",
+    customStyle: "animation: rgb-bg 10s linear infinite;",
+  },
 };
 
 export function getHTMLById(

frontend/src/ts/controllers/eg-ad-controller.ts

@@ -0,0 +1,64 @@
+export function init(): void {
+  $("head").append(`<script>
+  !function(e){var s=new XMLHttpRequest;s.open("GET","https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=monkeytype.com",!0),s.onreadystatechange=function(){var t;4==s.readyState&&(200<=s.status&&s.status<300||304==s.status)&&((t=e.createElement("script")).type="text/javascript",t.text=s.responseText,e.head.appendChild(t))},s.send(null)}(document);
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-W7WN5QV');
+  </script>`);
+  $("body")
+    .prepend(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`);
+}
+
+export function renderResult(widerThanBreakpoint: boolean): void {
+  if (widerThanBreakpoint) {
+    //@ts-ignore
+    window.egAps.render([
+      "ad-result",
+      "ad-vertical-left",
+      "ad-vertical-right",
+      "ad-footer",
+    ]);
+  } else {
+    //@ts-ignore
+    window.egAps.render([
+      "ad-result-small",
+      "ad-vertical-left",
+      "ad-vertical-right",
+      "ad-footer-small",
+    ]);
+  }
+}
+
+export function reinstate(): boolean {
+  try {
+    //@ts-ignore
+    window.egAps.reinstate();
+    return true;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+}
+
+export async function refreshVisible(): Promise<void> {
+  //@ts-ignore
+  // const adDivs = Object.keys(window.egAdPack.gptAdSlots);
+  // const visibleAdDivs = [];
+  // for (let i = 0; i < adDivs.length; i++) {
+  //   const el = document.querySelectorAll(
+  //     "[data-adunit-name='" + adDivs[i] + "']"
+  //   )[0];
+  //   if (!el) continue;
+  //   const elParent = el.parentElement as HTMLElement;
+  //   if (
+  //     window.getComputedStyle(elParent).getPropertyValue("display") != "none"
+  //   ) {
+  //     visibleAdDivs.push(adDivs[i]);
+  //   }
+  // }
+  // //@ts-ignore
+  // window.egAps.refreshAds(visibleAdDivs);
+}

frontend/src/ts/controllers/pw-ad-controller.ts

@@ -0,0 +1,262 @@
+//@ts-nocheck
+
+import Config from "../config";
+import * as ActivePage from "../states/active-page";
+import * as TestUI from "../test/test-ui";
+
+// Step 1: Create the Ramp Object, NOTE: selector id needed for tagged units only
+const resultUnits = [
+  {
+    type: "leaderboard_atf",
+    selectorId: "ad-result-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-result-small-wrapper",
+  },
+];
+const onUnits = [
+  {
+    type: "leaderboard_atf",
+    selectorId: "ad-result-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-result-small-wrapper",
+  },
+  {
+    type: "sky_btf", //160x600
+    selectorId: "ad-vertical-right-wrapper",
+  },
+  {
+    type: "sky_btf", //160x600
+    selectorId: "ad-vertical-left-wrapper",
+  },
+];
+const selloutUnits = [
+  {
+    type: "leaderboard_atf",
+    selectorId: "ad-result-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-result-small-wrapper",
+  },
+  {
+    type: "sky_btf", //160x600
+    selectorId: "ad-vertical-right-wrapper",
+  },
+  {
+    type: "sky_btf", //160x600
+    selectorId: "ad-vertical-left-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-footer-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-footer-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-about-1-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-about-1-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-about-2-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-about-2-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-settings-1-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-settings-1-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-settings-2-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-settings-2-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-settings-3-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-settings-3-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-account-1-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-account-1-small-wrapper",
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-account-2-wrapper",
+  },
+  {
+    type: "med_rect_btf",
+    selectorId: "ad-account-2-small-wrapper",
+  },
+];
+
+let rampReady = false;
+
+export function init(): void {
+  // Set Values with your PubID and Website ID
+  const pubId = "1024888";
+  const websiteId = "74058";
+
+  window.ramp = {
+    que: [],
+    passiveMode: true,
+    forcePath: "320x50-test",
+    onReady: (): void => {
+      rampReady = true;
+
+      reinstate();
+    },
+  };
+
+  const headOfDocument = document.getElementsByTagName("head")[0];
+
+  // Step 2: Creates the Ramp Scripts
+  const rampScript = document.createElement("script");
+  rampScript.setAttribute("async", true);
+  rampScript.src = `//cdn.intergient.com/${pubId}/${websiteId}/ramp.js`;
+  headOfDocument.appendChild(rampScript);
+
+  window._pwGA4PageviewId = "".concat(Date.now());
+  window.dataLayer = window.dataLayer || [];
+  window.gtag =
+    window.gtag ||
+    function (): void {
+      // eslint-disable-next-line prefer-rest-params
+      dataLayer.push(arguments);
+    };
+  gtag("js", new Date());
+  gtag("config", "G-KETCPNHRJF", { send_page_view: false });
+  gtag("event", "ramp_js", {
+    send_to: "G-KETCPNHRJF",
+    pageview_id: window._pwGA4PageviewId,
+  });
+}
+
+function getUnits(): unknown {
+  let units = undefined;
+
+  if (Config.ads === "result") {
+    units = resultUnits;
+  } else if (Config.ads === "on") {
+    units = onUnits;
+  } else if (Config.ads === "sellout") {
+    units = selloutUnits;
+  }
+
+  const toReturn = [];
+  for (const unit of units) {
+    // const isSky = unit.type === "sky_btf";
+
+    const element = document.querySelector(`#${unit.selectorId}`);
+
+    if (
+      element &&
+      window.getComputedStyle(element).display !== "none" &&
+      element.offsetParent !== null
+      // && (!isSky || (isSky && showSky))
+    ) {
+      toReturn.push(unit);
+    }
+  }
+
+  return toReturn;
+}
+
+//add logic so script selects the correct ad units array, 'default', 'on', 'sellout'
+//Since ad units do not populate until results page is shown, trigger the API methods when results are
+//shown for user so the containers do not populate with hidden ads before the ad containers are shown.  Current example below will populate the container with an ad on page load.
+//use onClick's or other user events to trigger applicable API methods.  For example, if user clicks to a new area of the site, ramp.destroyUnits('all')...
+//then run ramp.addUnits(defaultUnits).then(
+//            () => {
+//                ramp.displayUnits()
+//            }
+//        )
+
+export async function reinstate(): boolean {
+  if (!rampReady) return;
+  if (ActivePage.get() === "test" && !TestUI.resultVisible) {
+    ramp.destroyUnits("all");
+    return;
+  }
+  await ramp.destroyUnits("all");
+  await ramp.addUnits(getUnits());
+  await ramp.displayUnits();
+}
+
+export async function refreshVisible(): Promise<void> {
+  // if (!rampReady) return;
+  // if (getUnits().length === 0) return;
+  // ramp.triggerRefresh();
+}
+
+export function destroyAll(): void {
+  if (!rampReady) return;
+  ramp.destroyUnits("all");
+}
+
+export async function renderResult(): Promise<void> {
+  if (!rampReady) return;
+  // if (
+  //   ramp.getUnits().includes("leaderboard_atf") ||
+  //   ramp.getUnits().includes("med_rect_btf")
+  // ) {
+  //   ramp.triggerRefresh();
+  // } else {
+  // reinstate();
+  const units = getUnits();
+  await ramp.addUnits(units);
+  await ramp.displayUnits();
+  // }
+}
+
+export function setMobile(tf: boolean): void {
+  if (!rampReady) return;
+  ramp.setMobile(tf);
+}
+
+// let showSky = false;
+
+// export function updateSky(visible: boolean): void {
+//   showSky = visible;
+//   if (
+//     showSky &&
+//     ramp &&
+//     !ramp.getUnits().some((u) => u.includes("pw-160x600"))
+//   ) {
+//     ramp.addUnits(getUnits()).then(() => {
+//       ramp.displayUnits();
+//     });
+//   } else if (ramp && !showSky) {
+//     const toDestroy = [];
+//     ramp.getUnits().map((u) => {
+//       if (u.includes("pw-160x600")) toDestroy.push(u);
+//     });
+//     ramp.destroyUnits(toDestroy);
+//   }
+// }

frontend/src/ts/popups/cookie-popup.ts

@@ -3,6 +3,7 @@ import { focusWords } from "../test/test-ui";
 import * as Notifications from "../elements/notifications";
 import * as Skeleton from "./skeleton";
 import { isPopupVisible } from "../utils/misc";
+import * as AdController from "../controllers/ad-controller";
 
 const wrapperId = "cookiePopupWrapper";
 
@@ -35,6 +36,7 @@ export function check(): void {
 
 export function show(): void {
   Skeleton.append(wrapperId);
+  $("#cookiePopupWrapper").removeClass("hidden");
   if (
     $("#cookiePopupWrapper")[0] === undefined ||
     $("#cookiePopupWrapper").is(":visible") === false ||
@@ -147,10 +149,7 @@ $(document).on("keypress", (e) => {
 
 $("#cookiePopup .cookie.ads .textButton").on("click", () => {
   try {
-    //@ts-ignore
-    window.__tcfapi("displayConsentUi", 2, function () {
-      //
-    });
+    AdController.showConsentPopup();
   } catch (e) {
     console.error("Failed to open ad consent UI");
     Notifications.add(

frontend/src/ts/ready.ts

@@ -104,12 +104,12 @@ if ("serviceWorker" in navigator) {
             (event.isUpdate || event2.isUpdate) &&
             updateBannerId === undefined
           ) {
-            updateBannerId = Notifications.addBanner(
-              "Update ready - please refresh",
-              1,
-              "gift",
-              true
-            );
+            // updateBannerId = Notifications.addBanner(
+            //   "Update ready - please refresh",
+            //   1,
+            //   "gift",
+            //   true
+            // );
           }
         });
 

frontend/src/ts/utils/misc.ts

@@ -1303,12 +1303,12 @@ export function createErrorMessage(error: unknown, message: string): string {
 }
 
 export function isElementVisible(query: string): boolean {
-  const popup = document.querySelector(query);
-  if (!popup) {
+  const el = document.querySelector(query);
+  if (!el) {
     return false;
   }
-  const style = window.getComputedStyle(popup);
-  return style.display !== "none";
+  // const style = window.getComputedStyle(el);
+  return !!el.getClientRects().length;
 }
 
 export function isPopupVisible(popupId: string): boolean {

frontend/static/languages/chinese_traditional.json

@@ -194,7 +194,6 @@
     "清新",
     "清爽",
     "清晨",
-    "青蛙",
     "情緒",
     "情感",
     "親情",

frontend/static/languages/turkish_1k.json

@@ -729,7 +729,6 @@
     "elbise",
     "bulut",
     "sürpriz",
-    "sessiz",
     "taş",
     "küçücük",
     "tırmanış",

frontend/webpack/config.base.js

@@ -11,6 +11,7 @@ const htmlWebpackPlugins = [
   "security-policy",
   "privacy-policy",
   "email-handler",
+  "adtest",
 ].map((name) => {
   return new HtmlWebpackPlugin({
     filename: `${name}.html`,