Market Prices

<!-- Add this section to your HTML file -->

<div id="marketPricesBanner" style="overflow: hidden; white-space: nowrap; background-color: #333; color: #fff; padding: 10px 0;">

  <div id="marketPricesContent" style="display: inline-block; padding-left: 100%; animation: scrollBanner 20s linear infinite;">

    <!-- Market prices will be dynamically inserted here -->

  </div>

</div>

<style>

  @keyframes scrollBanner {

    0% {

      transform: translateX(100%);

    }

    100% {

      transform: translateX(-100%);

    }

  }

</style>

<script>

  // Function to update the market prices banner

  function updateMarketPricesBanner() {

    if (!window.gameState) return;

    const marketPricesContent = document.getElementById("marketPricesContent");

    marketPricesContent.innerHTML = ""; // Clear previous content

    // Create a string of market prices

    let marketPricesString = "";

    for (const industry in window.gameState.marketPrices) {

      const price = window.gameState.marketPrices[industry].toFixed(2);

      marketPricesString += `${industry}: $${price} | `;

    }

    // Add the market prices to the banner

    const marketPricesElement = document.createElement("span");

    marketPricesElement.textContent = marketPricesString;

    marketPricesContent.appendChild(marketPricesElement);

    // Duplicate the content to create a seamless loop

    const duplicateElement = marketPricesElement.cloneNode(true);

    marketPricesContent.appendChild(duplicateElement);

  }

  // Update the banner whenever the game state changes

  document.addEventListener("DOMContentLoaded", () => {

    updateMarketPricesBanner(); // Initial update

    window.addEventListener("storage", (event) => {

      if (event.key === window.SAVE_KEY) {

        window.gameState = JSON.parse(event.newValue);

        updateMarketPricesBanner(); // Update when game state changes

      }

    });

  });

</script>