Setting up the Display

After you have set up reset layers, now it's time to set up the display.

First, modify index.html to include the following code:

index.html
<!DOCTYPE html>
<html>
  <head>
	<script src="https://cdn.jsdelivr.net/npm/emath.js@latest/dist/game/eMath.game.min.js"></script>
    <script defer src="script.js"></script>
  </head>
  <body>
    <div id="game">
      <p id="coinsDisplay">Coins: 0</p>
      <button id="gainCoins">Click me to get coins!</button>
      <button id="buyUpgrades">Buy an upgrade</button>
      <br>
      <p id="gemsDisplay">Gems: 0</p>
      <button id="gainGems">Gain gems</button>
    </div>
  </body>
</html>

This code sets up the body of the HTML file with a paragraph element to display the number of coins, a button to gain coins, and a button to buy upgrades.

JavaScript
TypeScript

Next, modify script.js to include the following code:

script.js
// ... Previous code

// Gain coins button
const gainCoins = () => {
    coins.gain();
};
document.getElementById("gainCoins").addEventListener("click", gainCoins);

// Gain gems button
const gainGems = () => {
    prestige.reset();
};
document.getElementById("gainGems").addEventListener("click", gainGems);

// Buy (max) upgrades button
const buyUpgrades = () => {
    coins.buyUpgrade("upg1Coins");
};
document.getElementById("buyUpgrades").addEventListener("click", buyUpgrades);

// Add display
const coinsDisplay = document.getElementById("coinsDisplay");
const gemsDisplay = document.getElementById("gemsDisplay");

// Add a render event that executes every frame
coinGame.eventManager.setEvent("render", "interval", 0, () => {
    coinsDisplay.innerHTML = `Coins: ${coins.value.format()}`;
    gemsDisplay.innerHTML = `Gems: ${gems.value.format()}`;
});

Next, modify script.ts to include the following code:

script.ts
// ... Previous code

// Gain coins button
const gainCoins = (): void => {
    coins.gain();
};
document.getElementById("gainCoins").addEventListener("click", gainCoins);

// Gain gems button
const gainGems = (): void => {
    prestige.reset();
};
document.getElementById("gainGems").addEventListener("click", gainGems);

// Buy (max) upgrades button
const buyUpgrades = (): void => {
    coins.buyUpgrade("upg1Coins");
};
document.getElementById("buyUpgrades").addEventListener("click", buyUpgrades);

// Add display
const coinsDisplay = document.getElementById("coinsDisplay");
const gemsDisplay = document.getElementById("gemsDisplay");

// Add a render event that executes every frame
coinGame.eventManager.setEvent("render", "interval", 0, () => {
    coinsDisplay.innerHTML = `Coins: ${coins.value.format()}`;
    gemsDisplay.innerHTML = `Gems: ${gems.value.format()}`;
});

Explanation:

The gainCoins function is called when the "Click me to get coins!" button is clicked. It adds coins to the player's currency.
The gainGems function is called when the "Gain gems" button is clicked. It resets the currency, which in this case is the coins currency.
The buyUpgrades function is called when the "Buy an upgrade" button is clicked. It buys the maximum number of upgrades for the currency.
The coinsDisplay element is used to display the number of coins.
The gemsDisplay element is used to display the number of gems.
The render event is set to update the coins display every frame. It uses the format method to format the coin value.

After this step, you are done with the basic setup of the game! You can now continue to the advanced tutorials.