Local Leaderboard

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

<div id="leaderboardSection" style="margin-top: 20px;">

  <h3>Leaderboard</h3>

  <table id="leaderboard" style="width: 100%; border-collapse: collapse;">

    <thead>

      <tr>

        <th style="padding: 10px; border: 1px solid #ddd;">Nation</th>

        <th style="padding: 10px; border: 1px solid #ddd;">Round 1 Income</th>

        <th style="padding: 10px; border: 1px solid #ddd;">Current Round Income</th>

        <th style="padding: 10px; border: 1px solid #ddd;">Percentage Difference</th>

      </tr>

    </thead>

    <tbody id="leaderboardBody"></tbody>

  </table>

</div>

<script>

  // Function to calculate income for a nation

  function calculateIncome(nation) {

    return Object.entries(nation.output).reduce((total, [industry, output]) => {

      const scaledOutput = output * nation.upgrades[industry];

      return total + scaledOutput * window.gameState.marketPrices[industry];

    }, 0);

  }

  // Function to update the leaderboard

  function updateLeaderboard() {

    if (!window.gameState) return;

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

    leaderboardBody.innerHTML = ""; // Clear previous rows

    // Get Round 1 income for each nation

    const round1Income = {};

    for (const nationName in window.gameState.nations) {

      const nation = window.gameState.nations[nationName];

      round1Income[nationName] = calculateIncome(nation);

    }

    // Populate the leaderboard

    for (const nationName in window.gameState.nations) {

      const nation = window.gameState.nations[nationName];

      const currentIncome = calculateIncome(nation);

      const round1 = round1Income[nationName];

      // Calculate percentage difference

      const percentageDifference = ((currentIncome - round1) / round1) * 100;

      // Create a new row

      const row = document.createElement("tr");

      // Nation

      const nationCell = document.createElement("td");

      nationCell.textContent = nationName;

      nationCell.style.padding = "10px";

      nationCell.style.border = "1px solid #ddd";

      row.appendChild(nationCell);

      // Round 1 Income

      const round1Cell = document.createElement("td");

      round1Cell.textContent = round1.toLocaleString();

      round1Cell.style.padding = "10px";

      round1Cell.style.border = "1px solid #ddd";

      row.appendChild(round1Cell);

      // Current Round Income

      const currentIncomeCell = document.createElement("td");

      currentIncomeCell.textContent = currentIncome.toLocaleString();

      currentIncomeCell.style.padding = "10px";

      currentIncomeCell.style.border = "1px solid #ddd";

      row.appendChild(currentIncomeCell);

      // Percentage Difference

      const percentageCell = document.createElement("td");

      percentageCell.textContent = `${percentageDifference.toFixed(2)}%`;

      percentageCell.style.padding = "10px";

      percentageCell.style.border = "1px solid #ddd";

      row.appendChild(percentageCell);

      leaderboardBody.appendChild(row);

    }

  }

  // Update the leaderboard whenever the game state changes

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

    updateLeaderboard(); // Initial update

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

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

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

        updateLeaderboard(); // Update when game state changes

      }

    });

  });

</script>