html.html

<!DOCTYPE html>
<html>
  <head> 
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0YLTCV2MMS"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0YLTCV2MMS');
</script>
    <title>foldername - StrongDog XP</title>
    <style>
      body {
        font-family: "Poppins", sans-serif;
        margin: 0;
        padding: 0;
        background-color: #2e2e2e;
        color: #e0e0e0;
      }

      .header {
        background-color: #3c3c3c;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 3px solid #ff8c00;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      }

      .header-logo {
        text-decoration: none;
        font-size: 36px;
        font-weight: bold;
        transition: color 0.3s;
      }

      .header-logo span:nth-child(1) {
        color: #ffffff;
      }

      .header-logo span:nth-child(2) {
        color: #ff8c00;
      }

      .header-logo:hover span:nth-child(1) {
        color: #e0e0e0;
      }

      .nav-links {
        display: flex;
        gap: 30px;
      }

      .nav-links a {
        color: #e0e0e0;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        transition: color 0.3s;
      }

      .nav-links a:hover {
        color: #ff8c00;
      }

      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px;
      }

      .ad {
        width: 120px;
        height: 300px;
        background-color: #4a4a4a;
        margin: 0 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      }

      .game-container {
        flex-shrink: 0;
        width: 85%;
        height: 700px;
        margin: 20px auto;
        background-color: #3a3a3a;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
      }

      .game-container iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
        border-radius: 20px;
      }

      .game-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #3a3a3a;
        border-radius: 10px;
        padding: 20px;
        margin: 30px auto;
        width: 85%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
      }

      .fullscreen-button {
        padding: 10px 20px;
        background-color: #ff8c00;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
        font-weight: bold;
      }

      .fullscreen-button:hover {
        background-color: #ff6a00;
      }

      .cards-section {
        background-color: #3a3a3a;
        padding: 50px;
        text-align: center;
        border-radius: 20px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
        margin: 40px;
      }

      .card-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
      }

      .card {
        display: block;
        width: 200px;
        text-align: center;
        background-color: #4a4a4a;
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
        overflow: hidden;
        text-decoration: none;
        color: #e0e0e0;
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 1);
      }

      .card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }

      .card figcaption {
        padding: 15px;
        font-size: 16px;
        color: #ff8c00;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <a href="../../index.html" class="header-logo">
        <span>StrongDog</span>
        <span>XP</span>
      </a>
    </div>

    <div class="content">
      <div class="ad ad-left">
        <script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1609993827735056"
          crossorigin="anonymous"
        ></script>
        <!-- in game ads -->
        <ins
          class="adsbygoogle"
          style="display: inline-block; width: 120px; height: 300px"
          data-ad-client="ca-pub-1609993827735056"
          data-ad-slot="3552085788"
        ></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
      <div class="game-container" id="gameContainer">
        <!-- Game Embed Will Go Here -->
      </div>
      <div class="ad ad-right">
        <script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1609993827735056"
          crossorigin="anonymous"
        ></script>
        <!-- in game ads -->
        <ins
          class="adsbygoogle"
          style="display: inline-block; width: 120px; height: 300px"
          data-ad-client="ca-pub-1609993827735056"
          data-ad-slot="3552085788"
        ></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>

    <div class="game-bar">
      <span id="gameTitle">Game Title</span>
      <span
        id="favoriteIcon"
        class="favorite-icon"
        style="cursor: pointer; font-size: 24px"
        >&#9734;</span
      >
      <button id="fullscreenButton" class="fullscreen-button">
        Fullscreen
      </button>
    </div>

    <div class="cards-section">
      <h2>Recommended Games</h2>
      <div class="card-container" id="cardContainer">
        <!-- Cards will be loaded here -->
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var fullscreenButton = document.getElementById("fullscreenButton");
        var gameContainer = document.getElementById("gameContainer");
        var gameTitle = document.getElementById("gameTitle");

        function embedGame(gamePath, title) {
          var iframe = document.createElement("iframe");
          iframe.src = gamePath;
          gameContainer.innerHTML = "";
          gameContainer.appendChild(iframe);
          gameTitle.textContent = title;
        }

        embedGame("./game/index.html", "foldername");

        fullscreenButton.addEventListener("click", function () {
          if (gameContainer.requestFullscreen) {
            gameContainer.requestFullscreen();
          } else if (gameContainer.webkitRequestFullscreen) {
            gameContainer.webkitRequestFullscreen();
          } else if (gameContainer.msRequestFullscreen) {
            gameContainer.msRequestFullscreen();
          }
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const favoriteIcon = document.getElementById("favoriteIcon");
        const gameTitle = document.getElementById("gameTitle").textContent;

        function toggleFavorite() {
          let favorites = JSON.parse(localStorage.getItem("favorites") || "{}");
          const imagePath = "./img/" + gameTitle + ".jpg";

          if (favorites[gameTitle]) {
            delete favorites[gameTitle];
          } else {
            favorites[gameTitle] = {
              path: `./html/${gameTitle}/index.html`,
              image: imagePath,
            };
          }

          localStorage.setItem("favorites", JSON.stringify(favorites));
          updateFavoriteIcon(favorites, gameTitle);
        }

        function updateFavoriteIcon(favorites, title) {
          if (favorites[title]) {
            favoriteIcon.innerHTML = "&#9733;";
          } else {
            favoriteIcon.innerHTML = "&#9734;";
          }
        }

        const favorites = JSON.parse(localStorage.getItem("favorites") || "{}");
        updateFavoriteIcon(favorites, gameTitle);

        favoriteIcon.addEventListener("click", function () {
          toggleFavorite();
        });
      });
    </script>

    <script>
      window.onload = function () {
        var titleElement = document.getElementById("gameTitle");
        var title = titleElement.textContent;

        fetch(
          "https://script.google.com/macros/s/AKfycbx1xYwL2QqkOQHyeCWIVSMVLP_XXts5zpb0M-vbvlRl1MpRYYcv4NI-i8OaGc0YP0wpsg/exec?title=" +
            encodeURIComponent(title),
          {
            method: "GET",
          }
        )
          .then((response) => response.text())
          .then((result) => console.log(result))
          .catch((error) => console.error("Error:", error));
      };
    </script>
<script type="module">
  import games from "../../cards-data.js";
  import { siteMapping } from "../../site-mapping.js";

  document.addEventListener("DOMContentLoaded", function () {
    const cardContainer = document.getElementById("cardContainer");

    // Function to get the Page 1 host and protocol based on current host
    function getPage1HostAndProtocol() {
      const currentHost = window.location.hostname;

      // Iterate over the siteMapping to find the current host as a value
      for (const [page1Host, page2URL] of Object.entries(siteMapping)) {
        try {
          const page2URLObj = new URL(page2URL);
          const page2Host = page2URLObj.hostname;
          const protocol = page2URLObj.protocol; // e.g., 'http:' or 'https:'

          if (page2Host === currentHost) {
            return { page1Host, protocol };
          }
        } catch (error) {
          console.error(`Invalid URL in siteMapping: ${page2URL}`, error);
        }
      }
      return null;
    }

    function adjustHrefPath(path, page) {
      // Remove leading './' or '/' from the path
      path = path.replace(/^\.\//, "").replace(/^\//, "");

      if (page === undefined || page != 2) {
        // For Page 1 games
        const page1Info = getPage1HostAndProtocol();
        if (page1Info) {
          const { page1Host, protocol } = page1Info;
          const adjustedFirstPageLink =
            protocol + "//" + page1Host.replace(/\/$/, "");
          const adjustedPath = "/" + path;
          return adjustedFirstPageLink + adjustedPath;
        } else {
          // If currentHost not found in siteMapping values, log an error
          console.error(
            `Current host not found in siteMapping values. Unable to adjust href for Page 1 game.`
          );
          return "#"; // Fallback href
        }
      } else {
        // For Page 2 games, adjust the path to go back two directories
        return "../../" + path;
      }
    }

    function adjustImgPath(path, page) {
      // Remove leading './', '/', or 'img/' from the path
      path = path
        .replace(/^\.\//, "")
        .replace(/^\//, "")
        .replace(/^img\//, "");

      if (page === undefined || page != 2) {
        // For Page 1 games, get image from the first page link
        const page1Info = getPage1HostAndProtocol();
        if (page1Info) {
          const { page1Host, protocol } = page1Info;
          const adjustedFirstPageLink =
            protocol + "//" + page1Host.replace(/\/$/, "");
          const adjustedPath = "/img/" + path;
          return adjustedFirstPageLink + adjustedPath;
        } else {
          // If currentHost not found in siteMapping values, log an error
          console.error(
            `Current host not found in siteMapping values. Unable to adjust image path for Page 1 game.`
          );
          return "../../img/" + path; // Fallback to local image
        }
      } else {
        // For Page 2 games, adjust the path to go back two directories
        return "../../img/" + path;
      }
    }

    function getCardHTML(gameObject) {
      const { href, imgSrc, name, page } = gameObject;

      // Adjust the href and imgSrc paths
      const adjustedHref = adjustHrefPath(href, page);
      const adjustedImgSrc = adjustImgPath(imgSrc, page);

      // Create the card element
      const card = document.createElement("a");
      card.className = "card";
      card.href = adjustedHref;

      const img = document.createElement("img");
      img.src = adjustedImgSrc;
      img.alt = name;
      card.appendChild(img);

      const figcaption = document.createElement("figcaption");
      figcaption.textContent = name;
      card.appendChild(figcaption);

      return card;
    }

    // Generate and display random recommended games
    const randomGames = games.sort(() => 0.5 - Math.random()).slice(0, 10);
    randomGames.forEach((game) => {
      const card = getCardHTML(game);
      cardContainer.appendChild(card);
    });
  });
</script>
  </body>
</html>