Updating The UI & Stats

Our stored data

While creating this game, we have kept track of some numbers such as the completed pizzas, wasted pizzas and completed orders:

let gameStarted = false;
const gameLength = 300;
let countdownTime = gameLength;
const cookingTime = 20;
let completedPizzas = 0;
let completedSteps = [];
let wastedPizzas = 0;
let completedOrders = 0;

These can be used to display a stats section at the end of the game. They will appear in place of the method section since we don’t need this once the game has ended.

The stats markup

The stats section is already set up in the index.html:

<main>
  <section id="stats">
    <h3>Stats</h3>
    <p>Completed orders: <span id="completedOrders"></span></p>
    <p>Completed pizzas: <span id="completedPizzas"></span></p>
    <p>Wasted pizzas: <span id="wastedPizzas"></span></p>
  </section>

But we hide it in the styles.css file:

#stats {
  display: none;
}

At the end of game, we can hide the method section, and then show this stats section to the player.

UI update functions

We could do this directly in the startOfGame and endOfGame functions. Or, to keep things cleaner, create two new functions:

function startGameUI() {}
function endGameUI() {}

Call the startGameUI function inside of startOfGame:

function startOfGame() {
  if (gameStarted) {
    return;
  }
  startGameUI()
  // ...
}

Then call the endGameUI function inside of the endOfGame function:

function endOfGame() {
  endGameUI()
  // ...
}

The startOfGame function refactor

Take a look at the startGameUI function:

function startGameUI() {
    document.querySelector('#startBtn').style.display = 'none';
    document.querySelector('#endBtn').style.display = 'inline';
    document.querySelector('#message').innerText =
    'Chef, our first orders are coming in!!!';
    setTimeout(function () {
    document.querySelector('#message').innerText = '';
    }, 3000);
}

Cut and paste this content from the startOfGame function.

The endOfGame function refactor

Then the same for the end of game:

// cut and past the code from the endOfGame function:
function endGameUI() {
    document.querySelector('#endBtn').style.display = 'none';
    document.querySelector('#startBtn').style.display = 'inline';
}

Nothing different here just a refactor to keep our code more organised.

Show and hide the stats area

These new functions can also show and hide the stats section. Beginning with endGameUI:

function endGameUI() {
    document.querySelector("#endBtn").style.display = "none";
    document.querySelector("#startBtn").style.display = "inline";
    // hide method area, show stats area
    document.querySelector("#method").style.display = "none";
    document.querySelector("#stats").style.display = "block";
}

And then the opposite in the startGameUI function:

function startGameUI() {
    document.querySelector("#startBtn").style.display = "none";
    document.querySelector("#endBtn").style.display = "inline";
    document.querySelector("#message").innerText =
        "Chef, our first orders are coming in!!!";
    setTimeout(function () {
        document.querySelector("#message").innerText = "";
    }, 3000);
    // show method area, hide stats area
    document.querySelector("#method").style.display = "block";
    document.querySelector("#stats").style.display = "none";
}

Dynamic stats

Try this out and the stats should appear at the end of the game. The stats area is just HTML, and we need to update it with the values we have stored in our variables:

function endGameUI() {
    document.querySelector("#endBtn").style.display = "none";
    document.querySelector("#startBtn").style.display = "inline";
    document.querySelector("#method").style.display = "none";
    document.querySelector("#stats").style.display = "block";
    // add:
    document.querySelector("#completedOrders").innerText = completedOrders;
    document.querySelector("#completedPizzas").innerText = completedPizzas;
    document.querySelector("#wastedPizzas").innerText = wastedPizzas;
}

And reset these values at the start of the game:

function startGameUI() {
    document.querySelector("#startBtn").style.display = "none";
    document.querySelector("#endBtn").style.display = "inline";
    document.querySelector("#message").innerText =
        "Chef, our first orders are coming in!!!";
    setTimeout(function () {
        document.querySelector("#message").innerText = "";
    }, 3000);
    document.querySelector("#method").style.display = "block";
    document.querySelector("#stats").style.display = "none";
    // reset three variables when beginning a new game:
    completedOrders = 0;
    completedPizzas = 0;
    wastedPizzas = 0;
}

Resolving issues

There is also two small issues to fix with the UI, and both happen when we click start > end > start. The ingredients will duplicate in the kitchen, and the time does not yet reset.

This fix involves resetting both in the startGameUI function:

function startGameUI() {
    // ...
    wastedPizzas = 0;

    // 1. reset ingredients
    document.querySelector("#ingredients").innerHTML = "";

    // 2. reset game countdown
    countdownTime = gameLength;
}

Fade animation

As a finishing touch, included in the styles.css file is a fade in animation with the class name of fade-in.

This will make the stats section fade into view more smoothly, all we need to do it to attach this class when we end the game:

function endGameUI() {
    document.querySelector("#endBtn").style.display = "none";
    document.querySelector("#startBtn").style.display = "inline";
    document.querySelector("#method").style.display = "none";
    document.querySelector("#stats").style.display = "block";
    document.querySelector("#completedOrders").innerText = completedOrders;
    document.querySelector("#completedPizzas").innerText = completedPizzas;
    document.querySelector("#wastedPizzas").innerText = wastedPizzas;
    // add animation
    document.querySelector("#stats").className = "fade-in";
}

There are probably a few things which can be improved, but this project is about learning JavaScript, and it has given us a lot to practice with. And a good chance to see how all these little things work together to create something much bigger.

Congratulations on completing the Speedy Chef project!