Local Novaria

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container">

  <h2 style="text-align: center;">Nation Details</h2>

  <table id="nationDetails" style="width: 100%; border-collapse: collapse; margin: 20px 0;">

    <thead>

      <tr>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Industry</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Output</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Upgrade Level</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Income from Industry</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Percentage Contribution to Exports</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Investment Cost</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Divestment Yield</th>

      </tr>

    </thead>

    <tbody>

      <!-- Rows will be dynamically inserted here -->

    </tbody>

  </table>

  <div>

    <p><strong>Cash:</strong> <span id="nationCash"></span></p>

    <p><strong>Total Income (This Round):</strong> <span id="nationIncome"></span></p>

    <p><strong>Debt:</strong> <span id="nationDebt"></span></p>

  </div>

  <!-- Pie Chart Container -->

  <div style="width: 50%; margin: 20px auto;">

    <canvas id="pieChart"></canvas>

  </div>

  <!-- Invest Section -->

  <div class="wp-block-jetpack-contact-form" style="margin-top: 20px;">

    <div class="wp-block-jetpack-field-select">

      <label for="investDropdown">Select the Industry to invest in:</label>

      <select id="investDropdown">

        <option value="IT">IT</option>

        <option value="Agriculture">Agriculture</option>

        <option value="Auto">Auto</option>

        <option value="Defense">Defense</option>

        <option value="FinancialServices">Financial Services</option>

      </select>

    </div>

    <div class="wp-block-jetpack-button">

      <button id="investButton" class="wp-block-button__link wp-element-button">Invest</button>

    </div>

  </div>

  <!-- Divest Section -->

  <div class="wp-block-jetpack-contact-form" style="margin-top: 20px;">

    <div class="wp-block-jetpack-field-select">

      <label for="divestDropdown">Select the Industry to divest from:</label>

      <select id="divestDropdown">

        <option value="IT">IT</option>

        <option value="Agriculture">Agriculture</option>

        <option value="Auto">Auto</option>

        <option value="Defense">Defense</option>

        <option value="FinancialServices">Financial Services</option>

      </select>

    </div>

    <div class="wp-block-jetpack-button">

      <button id="divestButton" class="wp-block-button__link wp-element-button">Divest</button>

    </div>

  </div>

</div>

	<!-- Debt Schedule Table -->

  <h2 style="text-align: center;">Debt Schedule</h2>

  <table id="debtSchedule" style="width: 100%; border-collapse: collapse; margin: 20px 0;">

    <thead>

      <tr>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Round</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Debt Amount</th>

        <th style="padding: 15px; text-align: center; border: 1px solid #ddd;">Debt Coverage</th>

      </tr>

    </thead>

    <tbody>

      <!-- Rows will be dynamically inserted here -->

    </tbody>

  </table>

<script>

  const nationName = "Zephyria";

  const SAVE_KEY = "game_save";

  // Exponential formula for upgrade cost

  function calculateInvestmentCost(currentLevel) {

    return Math.floor(1000 * Math.pow(1.5, currentLevel)); // Exponential cost formula

  }

  // Divestment yield formula (smaller than investment cost)

  function calculateDivestmentYield(currentLevel) {

    return Math.floor(500 * Math.pow(1.2, currentLevel)); // Smaller yield formula

  }

  // Load game state from localStorage

  function loadGameState() {

    const savedGame = localStorage.getItem(SAVE_KEY);

    if (savedGame) {

      return JSON.parse(savedGame);

    }

    return null;

  }

  // Save game state to localStorage

  function saveGameState(gameState) {

    localStorage.setItem(SAVE_KEY, JSON.stringify(gameState));

  }

  // Display nation details

  function displayNationDetails(gameState) {

    if (!gameState || !gameState.nations[nationName]) {

      alert("Game state or nation not found!");

      return;

    }

    const nation = gameState.nations[nationName];

    const marketPrices = gameState.marketPrices;

    // Display the nation name

    document.getElementById("nationName").textContent = nationName;

    // Calculate total income for the nation

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

      return total + output * marketPrices[industry];

    }, 0);

    // Arrays to store data for the pie chart

    const industries = [];

    const percentages = [];

    // Display output, upgrade levels, income from industry, and percentage contribution in the table

    const tableBody = document.querySelector("#nationDetails tbody");

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

    Object.entries(nation.output).forEach(([industry, output]) => {

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

      // Industry

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

      industryCell.textContent = industry;

      industryCell.style.padding = "15px";

      industryCell.style.textAlign = "center";

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

      row.appendChild(industryCell);

      // Output

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

      outputCell.textContent = output;

      outputCell.style.padding = "15px";

      outputCell.style.textAlign = "center";

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

      row.appendChild(outputCell);

      // Upgrade Level

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

      upgradeCell.textContent = nation.upgrades[industry];

      upgradeCell.style.padding = "15px";

      upgradeCell.style.textAlign = "center";

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

      row.appendChild(upgradeCell);

      // Income from Industry

      const incomeFromIndustry = output * marketPrices[industry];

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

      incomeCell.textContent = incomeFromIndustry.toLocaleString(); // Format with commas

      incomeCell.style.padding = "15px";

      incomeCell.style.textAlign = "center";

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

      row.appendChild(incomeCell);

      // Percentage Contribution to Exports

      const percentageContribution = ((incomeFromIndustry / totalIncome) * 100).toFixed(2);

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

      percentageCell.textContent = `${percentageContribution}%`;

      percentageCell.style.padding = "15px";

      percentageCell.style.textAlign = "center";

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

      row.appendChild(percentageCell);

      // Investment Cost

      const investmentCost = calculateInvestmentCost(nation.upgrades[industry]);

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

      investmentCostCell.textContent = investmentCost.toLocaleString();

      investmentCostCell.style.padding = "15px";

      investmentCostCell.style.textAlign = "center";

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

      row.appendChild(investmentCostCell);

      // Divestment Yield

      const divestmentYield = calculateDivestmentYield(nation.upgrades[industry]);

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

      divestmentYieldCell.textContent = divestmentYield.toLocaleString();

      divestmentYieldCell.style.padding = "15px";

      divestmentYieldCell.style.textAlign = "center";

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

      row.appendChild(divestmentYieldCell);

      tableBody.appendChild(row);

      // Store data for the pie chart

      industries.push(industry);

      percentages.push(parseFloat(percentageContribution));

    });

    // Display cash, total income, and debt

    document.getElementById("nationCash").textContent = nation.cash.toLocaleString();

    document.getElementById("nationIncome").textContent = totalIncome.toLocaleString();

    document.getElementById("nationDebt").textContent = nation.debt.toLocaleString();

    // Render the pie chart

    renderPieChart(industries, percentages);

    // Display debt schedule

    const debtScheduleBody = document.querySelector("#debtSchedule tbody");

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

    const debtSchedule = [

      { round: 1, debtAmount: 1000, debtCoverage: 200 },

      { round: 2, debtAmount: 800, debtCoverage: 200 },

      { round: 3, debtAmount: 600, debtCoverage: 200 },

      { round: 4, debtAmount: 400, debtCoverage: 200 },

      { round: 5, debtAmount: 200, debtCoverage: 200 },

    ];

    debtSchedule.forEach(({ round, debtAmount, debtCoverage }) => {

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

      // Round

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

      roundCell.textContent = round;

      roundCell.style.padding = "15px";

      roundCell.style.textAlign = "center";

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

      row.appendChild(roundCell);

      // Debt Amount

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

      debtAmountCell.textContent = debtAmount.toLocaleString();

      debtAmountCell.style.padding = "15px";

      debtAmountCell.style.textAlign = "center";

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

      row.appendChild(debtAmountCell);

      // Debt Coverage

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

      debtCoverageCell.textContent = debtCoverage.toLocaleString();

      debtCoverageCell.style.padding = "15px";

      debtCoverageCell.style.textAlign = "center";

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

      row.appendChild(debtCoverageCell);

      debtScheduleBody.appendChild(row);

    });

  }

  // Handle investment

  function handleInvest() {

    const gameState = loadGameState();

    if (!gameState || !gameState.nations[nationName]) {

      alert("Game state or nation not found!");

      return;

    }

    const nation = gameState.nations[nationName];

    const selectedIndustry = document.getElementById("investDropdown").value;

    if (selectedIndustry && nation.upgrades[selectedIndustry] !== undefined) {

      const investmentCost = calculateInvestmentCost(nation.upgrades[selectedIndustry]);

      if (nation.cash >= investmentCost) {

        nation.cash -= investmentCost;

        nation.upgrades[selectedIndustry] += 1;

        saveGameState(gameState); // Save updated game state

        alert(`Successfully invested in ${selectedIndustry}!`);

        displayNationDetails(gameState);

      } else {

        alert("Not enough cash to invest!");

      }

    } else {

      alert("Invalid industry selected.");

    }

  }

  // Handle divestment

  function handleDivest() {

    const gameState = loadGameState();

    if (!gameState || !gameState.nations[nationName]) {

      alert("Game state or nation not found!");

      return;

    }

    const nation = gameState.nations[nationName];

    const selectedIndustry = document.getElementById("divestDropdown").value;

    if (selectedIndustry && nation.upgrades[selectedIndustry] !== undefined && nation.upgrades[selectedIndustry] > 1) {

      const divestmentYield = calculateDivestmentYield(nation.upgrades[selectedIndustry]);

      nation.cash += divestmentYield;

      nation.upgrades[selectedIndustry] -= 1;

      saveGameState(gameState); // Save updated game state

      alert(`Successfully divested from ${selectedIndustry}!`);

      displayNationDetails(gameState);

    } else {

      alert("Invalid industry selected or industry level is already at minimum.");

    }

  }

  // Function to render the pie chart

  function renderPieChart(labels, data) {

    const ctx = document.getElementById("pieChart").getContext("2d");

    new Chart(ctx, {

      type: "pie",

      data: {

        labels: labels,

        datasets: [{

          data: data,

          backgroundColor: [

            "rgba(255, 99, 132, 0.6)",

            "rgba(54, 162, 235, 0.6)",

            "rgba(255, 206, 86, 0.6)",

            "rgba(75, 192, 192, 0.6)",

            "rgba(153, 102, 255, 0.6)",

          ],

          borderWidth: 1,

        }],

      },

      options: {

        responsive: true,

        plugins: {

          legend: {

            position: "bottom",

          },

          tooltip: {

            callbacks: {

              label: (context) => {

                const label = context.label || "";

                const value = context.raw || 0;

                return `${label}: ${value}%`;

              },

            },

          },

        },

      },

    });

  }

  // Listen for storage events (sync changes from main page)

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

    if (event.key === SAVE_KEY) {

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

      displayNationDetails(gameState);

    }

  });

  // Initialize page

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

    const gameState = loadGameState();

    if (gameState) {

      displayNationDetails(gameState);

    } else {

      alert("Game state not loaded. Please start or load a game first.");

    }

    // Attach event listeners

    document.getElementById("investButton").addEventListener("click", handleInvest);

    document.getElementById("divestButton").addEventListener("click", handleDivest);

  });

</script>