Страница ресурса рисуется поверх игры с прозрачным фоном. Подходят любые HTML, CSS и JavaScript, в том числе React и Vue.

-- resource.lua
client_scripts { "client/main.lua" }
files { "client/ui" }

-- client/main.lua
web.open("client/ui/index.html")

events.onServer("money", function(amount)
    web.emit("money", amount)          -- в страницу
end)

web.on("buy", function(item)           -- из страницы
    events.emitServer("shop:buy", item)
end)

<!-- client/ui/index.html -->
<div id="money"></div>
<button onclick="m2o.emit('buy', 'pistol')">Купить</button>
<script>
  m2o.on("money", (amount) => {
    document.getElementById("money").textContent = "$" + amount;
  });
</script>

Мышь и клавиатура

web.focus(true) отдаёт странице мышь и клавиатуру: появляется курсор, персонаж не двигается. web.focus(false) возвращает управление игре.

Адреса

Файлы ресурса доступны странице как https://nui.m2o/<ресурс>/<путь>; относительные ссылки (style.css, img/logo.png) работают как обычно.

Svelte, React, Vue

Подойдёт любой фреймворк: соберите проект и положите в ресурс сборку. С Vite:

// vite.config.js
export default {
  base: "./",                 // относительные пути: страница живёт по адресу https://nui.m2o/<ресурс>/...
  build: { outDir: "../client/ui" },
};

-- resource.lua
client_scripts { "client/main.lua" }
files { "client/ui" }                    -- сборка: index.html, assets/...

-- client/main.lua
web.open("client/ui/index.html")

base: "./" обязателен: с / по умолчанию страница просит /assets/..., а это вне ресурса, и она остаётся пустой. Внутри страницы с Lua общайтесь через m2o.emit / m2o.on, как выше. Цикл разработки: npm run build, затем restart <ресурс> в консоли сервера — игроки сразу получат новую страницу. Скачанные файлы у игроков сохраняются, в следующий раз докачивается только изменённое.

Интерфейсы на HTML

Мышь и клавиатура

Адреса

Svelte, React, Vue