add: user ads

crates/app/src/public/js/ads.js

@@ -0,0 +1,65 @@
+globalThis.TetrattoAds = {
+    AD_SIZES: {
+        Billboard: [970, 250],
+        Leaderboard: [720, 90],
+        Skyscraper: [160, 600],
+        MediumRectangle: [300, 250],
+        MobileLeaderboard: [320, 50],
+    },
+    IS_MOBILE: window.innerWidth <= 900 && window.innerHeight <= 900,
+};
+
+globalThis.TetrattoAds.init = () => {
+    const styles = document.createElement("style");
+    styles.id = "tetratto_ads_css";
+    styles.setAttribute("data-turbo-permanent", "true");
+
+    styles.innerHTML = `.tetratto_ad {
+        width: 100%;
+        display: grid;
+        place-items: center;
+    }
+
+    .tetratto_ad,
+    .tetratto_ad iframe {
+        max-width: 100%;
+        background: transparent;
+    }`;
+
+    document.head.appendChild(styles);
+};
+
+globalThis.TetrattoAds.render_ads = (
+    host_id = 0,
+    tetratto = "https://tetratto.com",
+) => {
+    for (const element of Array.from(
+        document.querySelectorAll(".tetratto_ad"),
+    )) {
+        if (element.children.length > 0) {
+            continue;
+        }
+
+        const iframe = document.createElement("iframe");
+        let size = element.getAttribute("data-ad-size") || "MediumRectangle";
+
+        if (size === "Leaderboard" && TetrattoAds.IS_MOBILE) {
+            size = "MobileLeaderboard";
+        }
+
+        const size_px = TetrattoAds.AD_SIZES[size];
+
+        const noclick =
+            element.getAttribute("data-noclick") === "true" || false;
+        const ad_id = element.getAttribute("data-ad-id");
+
+        iframe.src = `${tetratto}/adn/${ad_id ? ad_id : "random"}?size=${size}&host=${host_id}&noclick=${noclick}`;
+        iframe.setAttribute("frameborder", "0");
+        iframe.loading = "lazy";
+
+        iframe.style.width = `${size_px[0]}px`;
+        iframe.style.height = `${size_px[1]}px`;
+
+        element.appendChild(iframe);
+    }
+};