HTML and CSS: overlays and panels

Celestial shows RmlUi documents from your mod folder: RML looks like HTML and RCSS like CSS. A document can be a HUD overlay, a panel inside one of your screens, or a screen. Your C++ code fills its data model and handles its actions through the C functions.

An overlay

assets/my_mod/gui/status.rml:

<rml>
<head><link type="text/rcss" href="celestial:theme.rcss"/></head>
<body data-model="mod">
    <div class="cl-hud-panel cl-small" style="padding: 2px 4px;">Coins: {{ coins }}</div>
</body>
</rml>

cl_rml_doc status{};

void open_status() {
    cl_rml_desc d = CL_RML_DESC_INIT;
    d.path = CL_STR("assets/my_mod/gui/status.rml");
    d.as_screen = false;            // a HUD overlay
    d.id = CL_STR("coins");
    d.label = CL_STR("Coins");
    d.anchor = CL_HUD_TOP_RIGHT;
    d.x = 4;
    d.y = 4;
    d.width = 70;
    d.height = 12;
    d.model = CL_STR("coins");      // the variables the document uses
    if (cl_rml_open(&d, &status) == CL_OK) cl_rml_data_set_num(status, CL_STR("coins"), 0);
}

void coins_changed(int coins) { cl_rml_data_set_num(status, CL_STR("coins"), coins); }

The overlay is a HUD element of your mod (the player moves, scales and hides it in the HUD editor), takes no input and draws under every screen. celestial:theme.rcss gives its classes the player’s Vanilla or Fancy look.

Lists, objects and actions

d.model = CL_STR("members[]");
d.actions = CL_STR("kick");
d.on_action = [](cl_rml_doc, cl_str action, cl_str args, void*) {
    // action "kick", args the arguments as a JSON array: "[\"Sam\"]"
};
// ...
cl_rml_data_set_json(doc, CL_STR("members"), CL_STR(R"([{"name":"Alex","hp":20},{"name":"Sam","hp":6}])"));

<div data-for="m : members">{{ m.name }} <button data-event-click="kick(m.name)">Kick</button></div>

Actions need input, so they work in documents shown as screens or panels (parent = <your screen> and a box).

The sandbox

Only your mod’s files load. URLs, absolute paths, .., <script> and onclick-style attributes make cl_rml_open return CL_E_PERMISSION_DENIED. Pictures come from the resource packs (my_mod:textures/gui/coin.png).

Exercise

Show the overlay’s text in the accent colour from 100 coins on.

<div class="cl-hud-panel cl-small" style="padding: 2px 4px;" data-class-cl-accent="coins >= 100">Coins: {{ coins }}</div>

Recap: an overlay is cl_rml_open with as_screen = false and a size; cl_rml_data_set_* update it; actions + on_action handle buttons in screens and panels. The reference is HTML/CSS Overlays and Panels.