Web UI guide

server folder                     player's game
 ├ config.xml   <ui folder="ui"/>  ──join──▶  downloads the changed files (cached per server)
 ├ ui/login/index.html, assets/...             │
 └ scripts/client.lua (type="client")          ▼
                                     createBrowser("login/index.html", ...)
                                       page (JavaScript)  ◀── window.gmp ──▶  Browser (Lua)  ◀── events ──▶  server (Lua)

<scripts>
  <script src="scripts/main.lua" type="server" />
  <script src="scripts/client.lua" type="client" />
</scripts>
<ui folder="ui" />

my-server/
├ config.xml
├ scripts/
│ ├ main.lua
│ └ client.lua
└ ui/
  ├ hud/
  │ └ index.html
  └ login/              <- e.g. the dist/ folder of a React build
    ├ index.html
    └ assets/
      ├ index-4f1c2a.js
      └ index-9b3e77.css

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    html, body { margin: 0; height: 100%; background: transparent; font: 600 16px/1.4 "Segoe UI", sans-serif; color: #f2e6cf; }
    .bar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 24px;
           padding: 8px 18px; background: rgba(14, 12, 9, 0.6); border: 1px solid rgba(227, 196, 137, 0.4); }
    .health { color: #ff8a80; } .mana { color: #8ab4ff; } .gold { color: #e3c489; }
  </style>
</head>
<body>
  <div class="bar">
    <span class="health">HP <b id="health">-</b></span>
    <span class="mana">Mana <b id="mana">-</b></span>
    <span class="gold">Gold <b id="gold">0</b></span>
  </div>
  <script>
    gmp.on("stats", (s) => {
      document.getElementById("health").textContent = `${s.health} / ${s.maxHealth}`;
      document.getElementById("mana").textContent = `${s.mana} / ${s.maxMana}`;
    });
    gmp.on("gold", (amount) => { document.getElementById("gold").textContent = amount; });
    gmp.trigger("ready");   // tell the script the gmp.on handlers are registered
  </script>
</body>
</html>

-- client scripts start when the player is already in the world - the page can open right away
local w, h = getScreenSize()
local hud = createBrowser("hud/index.html", 0, 0, w, h)   -- nil: this game cannot show web pages (isBrowserSupported)

local function update()
  local me = getLocalPlayer()
  if not hud or not me then return end
  hud:trigger("stats", {
    health = me:getHealth(), maxHealth = me:getMaxHealth(),
    mana = me:getMana(), maxMana = me:getMaxMana(),
  })
end

if hud then
  hud:on("ready", function()
    update()
    setTimer(update, 500, true)   -- twice a second
  end)
end

-- the server keeps the gold: triggerClientEvent(pid, "gold", 35)
addEventHandler("gold", function(amount)
  if hud then hud:trigger("gold", amount) end
end)

showCursor(true)    -- the game's cursor; the game ignores the mouse and the keys meanwhile
page:focus()        -- optional: the keys go to this page at once (an <input autofocus> can be typed into)
-- ...
showCursor(false)   -- the control goes back to the game

<button id="close">Close</button>
<script>
  const close = () => gmp.trigger("close");
  document.getElementById("close").addEventListener("click", close);
  document.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); });
</script>

shop:on("close", function()
  shop:setVisible(false)   -- or shop:destroy()
  showCursor(false)
end)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    html, body { margin: 0; height: 100%; background: rgba(0, 0, 0, 0.55); font: 16px/1.4 "Segoe UI", sans-serif; color: #f2e6cf; }
    form { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px;
           padding: 28px; background: #16130f; border: 1px solid rgba(227, 196, 137, 0.5); }
    h1 { margin: 0 0 18px; font-size: 24px; color: #e3c489; }
    input, button { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px; font: inherit; }
    input { background: #0d0b08; color: inherit; border: 1px solid #5c5240; }
    button { background: #e3c489; color: #16130f; border: 0; cursor: pointer; font-weight: 600; }
    button:disabled { opacity: 0.5; }
    .error { min-height: 22px; margin-top: 10px; color: #ff8a80; }
  </style>
</head>
<body>
  <form id="form">
    <h1>Lorem ipsum</h1>
    <input id="user" placeholder="Name" autocomplete="off" autofocus>
    <input id="password" type="password" placeholder="Password">
    <div class="error" id="error"></div>
    <button id="submit">Log in</button>
  </form>
  <script>
    const $ = (id) => document.getElementById(id);
    $("form").addEventListener("submit", (e) => {
      e.preventDefault();
      $("submit").disabled = true;
      $("error").textContent = "";
      gmp.trigger("login", { user: $("user").value, password: $("password").value });
    });
    gmp.on("loginResult", (ok, message) => {
      $("submit").disabled = false;
      if (!ok) $("error").textContent = message;
    });
    gmp.on("setUser", (name) => { $("user").value = name; $("password").focus(); });
    gmp.trigger("ready");
  </script>
</body>
</html>

local w, h = getScreenSize()
local login = createBrowser("login/index.html", 0, 0, w, h)

if login then
  login:setOrder(200)   -- above other pages
  showCursor(true)
  login:focus()
  login:on("ready", function() login:trigger("setUser", getLocalPlayer():getName()) end)
  login:on("login", function(data)
    triggerServerEvent("login", data.user, data.password)
  end)
else
  addChatMessage(0xFF8080, "Your game cannot show the login panel - log in with /login <name> <password>.")
end

addEventHandler("loginResult", function(ok, message)
  if not login then return end
  login:trigger("loginResult", ok, message)
  if ok then
    login:destroy()
    login = nil
    showCursor(false)
  end
end)

-- example only: a real server keeps accounts in a database (PostgreSQL guide) with hashed passwords
local accounts = { lorem = "ipsum" }

addEventHandler("login", function(pid, user, password)
  if type(user) ~= "string" or type(password) ~= "string" then return end   -- never trust data from a client
  if accounts[user] == password then
    triggerClientEvent(pid, "loginResult", true, "Welcome, " .. user)
    -- remember that pid is logged in, load their data...
  else
    triggerClientEvent(pid, "loginResult", false, "Wrong name or password.")
  end
end)

type Handler = (...args: any[]) => void;

interface Gmp {
  trigger(name: string, ...args: unknown[]): void;
  on(name: string, handler: Handler): void;
  off(name: string, handler: Handler): void;
}

declare global {
  interface Window { gmp?: Gmp }
}

// outside the game (npm run dev in a browser) a stand-in prints the events to the console
export const gmp: Gmp = window.gmp ?? {
  trigger: (name, ...args) => console.log("gmp.trigger", name, ...args),
  on: () => {},
  off: () => {},
};

npm create vite@latest login -- --template react-ts
cd login
npm install

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "./",          // relative paths - the page is opened from the server's ui folder
  plugins: [react()],
});

import { useEffect, useRef } from "react";
import { gmp } from "./gmp";

export function useGmpEvent(name: string, handler: (...args: any[]) => void) {
  const latest = useRef(handler);
  latest.current = handler;
  useEffect(() => {
    const listener = (...args: any[]) => latest.current(...args);
    gmp.on(name, listener);
    return () => gmp.off(name, listener);
  }, [name]);
}

import { useEffect, useState } from "react";
import { gmp } from "./gmp";
import { useGmpEvent } from "./useGmpEvent";

export default function App() {
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  useGmpEvent("setUser", (name: string) => setUser(name));
  useGmpEvent("loginResult", (ok: boolean, message: string) => {
    setBusy(false);
    if (!ok) setError(message);
  });

  // the handlers above are registered in this render - now the script may send data
  useEffect(() => gmp.trigger("ready"), []);

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError("");
    gmp.trigger("login", { user, password });   // -> login:on("login", function(data) ... end) in Lua
  };

  return (
    <form className="login" onSubmit={submit}>
      <h1>Lorem ipsum</h1>
      <input value={user} onChange={(e) => setUser(e.target.value)} placeholder="Name" autoFocus />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Password" />
      <div className="error">{error}</div>
      <button disabled={busy}>Log in</button>
    </form>
  );
}

npm run build      # -> dist/index.html, dist/assets/...

npm create vite@latest login -- --template vue-ts

import { onMounted, onBeforeUnmount } from "vue";
import { gmp } from "./gmp";

export function useGmpEvent(name: string, handler: (...args: any[]) => void) {
  onMounted(() => gmp.on(name, handler));
  onBeforeUnmount(() => gmp.off(name, handler));
}

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { gmp } from "./gmp";
import { useGmpEvent } from "./useGmpEvent";

const user = ref("");
const password = ref("");
const error = ref("");
const busy = ref(false);

useGmpEvent("setUser", (name: string) => (user.value = name));
useGmpEvent("loginResult", (ok: boolean, message: string) => {
  busy.value = false;
  if (!ok) error.value = message;
});
onMounted(() => gmp.trigger("ready"));

function submit() {
  busy.value = true;
  error.value = "";
  gmp.trigger("login", { user: user.value, password: password.value });
}
</script>

<template>
  <form class="login" @submit.prevent="submit">
    <h1>Lorem ipsum</h1>
    <input v-model="user" placeholder="Name" autofocus />
    <input v-model="password" type="password" placeholder="Password" />
    <div class="error">{{ error }}</div>
    <button :disabled="busy">Log in</button>
  </form>
</template>