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.

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>

static cl_rml_doc status;

static void on_client_setup(void* payload, void* user) {
    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);   /* only {{ coins }} updates */
}

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

Lists and objects

Declare a list with [] and set it as JSON:

d.model = CL_STR("members[]");
/* ... */
cl_rml_data_set_json(doc, CL_STR("members"), CL_STR("[{\"name\":\"Alex\",\"hp\":20},{\"name\":\"Sam\",\"hp\":6}]"));

<div data-for="m : members" data-class-low="m.hp < 8">{{ m.name }}: {{ m.hp }}</div>

Actions in screens and panels

A document shown as a screen or panel takes input. List the actions it may call and handle them:

static void on_action(cl_rml_doc doc, cl_str action, cl_str args, void* user) {
    /* action "buy", args "[3]" (the arguments as a JSON array) */
}

cl_rml_desc d = CL_RML_DESC_INIT;
d.path = CL_STR("assets/my_mod/gui/shop.rml");
d.actions = CL_STR("buy");
d.on_action = on_action;

<button data-event-click="buy(3)">Buy</button>

The sandbox

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

Exercise

Make the overlay above show the coins in the accent colour once they reach 100. (data-class-<name>="expression" sets a class while the expression is true.)

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

Recap: cl_rml_open with as_screen = false and a size makes an overlay, cl_rml_data_set_* update its variables, actions + on_action handle buttons. The reference is HTML/CSS Overlays and Panels.