A shop page

A Shop page in the pause menu with a list of items. The gamemode sends what's for sale when the player walks into a shop, and checks and charges each purchase. See Shops and money for the server side.

client/scripts/shop.js

let page = null;

function render(items) {
  page.setHtml("items", items.map((i) =>
    `<div class="item" id="${i.id}">${i.name} - $${i.price.toLocaleString()}</div>`).join(""));
}

sagl.on("shop", (msg) => {
  if (msg.open && !page) {
    page = sagl.ui.pauseMenu.addPage("Shop", `
      <h2 class="first">Ammu-Nation</h2>
      <span class="subtitle">Pick something. It's taken from your cash.</span>
      <div class="list" id="items"></div>
      <span class="status" id="status"></span>`);
    page.on("click", (e) => {
      if (e.id && e.id !== "items" && e.id !== "status") sagl.emit("shop", { buy: e.id });
    });
    render(msg.items);
  }
  if (msg.open === false && page) {
    page.remove();
    page = null;
  }
  if (msg.status && page) page.setText("status", msg.status);
});

The page only exists while the player stands in the shop, and the client never decides prices or what they get: it asks, the server answers.