Skip to content
KCD MultiplayerKCD Multiplayer Docs

KcdMp.onComponent

Registers a function that receives the events of the game component this frame draws.

fn(data, name) is called for every event named name of the component the frame draws - the tables above list them - for "*" with every event, and for "assign" when the frame is given a component or loses it, with { component, contract } (component is "" when it draws none any more; KcdMp.env.component and KcdMp.contract change with it). A handler registered while the frame draws a component is told the assignment at once.

The events that describe a state - chat:config, chat:history, server:info, scoreboard:columns, scoreboard:show, roster:snapshot, hudtext:snapshot, gametext:show, sleep:slept, death:show, party:config, party:state, party:vitals, party:invite, voice:self, voice:talking, voice:muted, emotes:list, emotes:open, emotes:pointer, shop:open, shop:list (each tab’s), shop:state, player:purse, dialog:open, dialog:cursor, loading:state, loading:handover and loading:end - are kept by the page’s KcdMp and handed to a handler that registers late, as they are now: chat:history with the lines that arrived since and without the ones a clear took away, roster:snapshot and hudtext:snapshot with the updates applied, a GameText, a sleep’s fade or an invitation only while it lasts (its remainingMs, elapsedMs or seconds moved on), death:show until death:hide, the wheel until emotes:close, the shop until shop:close, a dialog until dialog:close. The others - a line, an open, a scroll, a notice

  • are only ever told as they happen. When the frame loses the component, what was kept is forgotten.

Syntax

Section titled “Syntax”
KcdMp.onComponent(name, fn)
Parameter Type
name string an event’s name ("chat:message"), "*" for all of them, or "assign"
fn (data: unknown, name: string) => void called with each event’s data and its name

Returns

Section titled “Returns”

() => void - a function that takes the handler off again

Example

Section titled “Example”
const list = document.querySelector("#lines");
function addLine(line) {
  const row = document.createElement("div");
  row.textContent = (line.author ? line.author + ": " : "") + line.text;   // never innerHTML: the words are the players'
  row.style.color = line.color;
  list.append(row);
}
KcdMp.onComponent("chat:history", ({ lines }) => { list.replaceChildren(); lines.forEach(addLine); });
KcdMp.onComponent("chat:message", addLine);
KcdMp.onComponent("chat:open", () => document.querySelector("#box").focus());
document.querySelector("#box").addEventListener("keydown", async (e) => {
  if (e.key === "Enter" && e.target.value) {
    await KcdMp.call("chat.send", { text: e.target.value, channel: "" });
    e.target.value = "";
    await KcdMp.call("chat.close");
  } else if (e.key === "Escape") {
    e.preventDefault();   // the page closes the box itself
    await KcdMp.call("chat.close");
  }
});

See also

Section titled “See also”

KcdMp.call · KcdMp.env.component · KcdMp.contract · KcdMp.mock.component · the Drawing a component group of the index

PrivacyCookie settings