Notifications

Toasts at the top of the screen that queue up and disappear on their own. The gamemode sends player.emit("notify", { text, colour }).

client/scripts/notify.js

const queue = [];
let showing = false;

const toast = sagl.ui.open(`
  <rml>
  <head>
    <link type="text/rcss" href="/sagl/ui/theme/base.rcss"/>
    <style>
      body { position: absolute; left: 30%; width: 40%; top: 24dp; }
      .panel { display: block; text-align: center; padding: 10dp 16dp; }
      #text { font-family: sa-menu; font-size: 20dp; font-effect: outline(2dp #000000); }
    </style>
  </head>
  <body><div class="panel"><span id="text"></span></div></body>
  </rml>`, { input: false });
toast.hide();

function next() {
  const item = queue.shift();
  if (!item) {
    showing = false;
    toast.hide();
    return;
  }
  showing = true;
  toast
    .setText("text", item.text)
    .setAttribute("text", "style", `color: ${item.colour ?? "#ffffff"}`)
    .show();
  setTimeout(next, item.ms ?? 3000);
}

sagl.on("notify", (item) => {
  queue.push(item);
  if (!showing) next();
});

index.ts (gamemode)

server.clientScripts.useClientFile("scripts/notify.js");

server.on("playerDeath", (player, killer) => {
  if (killer instanceof Player) {
    killer.emit("notify", { text: `You killed ${player.name}`, colour: "#dc9a32" });
  }
});