Global UI Api

GL.ui

Accessors

message

Get Signature

get message(): AntdMessage

Gimkit’s message object

https://ant.design/components/message#api

Returns

AntdMessage

---

modal

Get Signature

get modal(): AntdModal

Gimkit’s modal object

https://ant.design/components/modal#modalmethod

Returns

AntdModal

---

notification

Get Signature

get notification(): AntdNotification

Gimkit’s notification object, only available when joining or playing a game

https://ant.design/components/notification#api

Returns

AntdNotification

Methods

addStyles()

addStyles(id, style): () => void

Adds a style to the DOM

Parameters

Parameter	Type
id	string
style	string

Returns

Function

A function to remove the styles

Returns

void

Example

const styles = `#element {
    color: red;
}`;

GL.UI.addStyles("MyPlugin", styles);

---

forceReactUpdate()

forceReactUpdate(): void

Forces Gimkit’s react tree to fully rerender

Returns

void

---

offComponentLoad()

offComponentLoad(id): void

Cancels any calls made to onComponentLoad with the same id

Parameters

Parameter	Type
id	string

Returns

void

---

onComponentLoad()

onComponentLoad<K>(id, type, callback): undefined | () => void

Waits for a component to load, and calls the callback with the component as an argument. If the component has already loaded the callback will be fired immediately. The available components are “notification”, “message”, and “modal”.

Type Parameters

Type Parameter
K extends "message" | "notification" | "modal"

Parameters

Parameter	Type
id	string
type	K
callback	(component) => void

Returns

undefined | () => void

A function that cancels waiting

Example

GL.UI.onComponentLoad("MyPlugin", "message", (message) => {
    message.success({ content: "This is a message!" });
});

---

removeStyles()

removeStyles(id): void

Remove all styles with a given id

Parameters

Parameter	Type
id	string

Returns

void

---

showModal()

showModal(element, options): void

Shows a customizable modal to the user

Parameters

Parameter	Type
element	HTMLElement | ReactElement<any, string | JSXElementConstructor<any>>
options	{ buttons: readonly ModalButton[]; className: string; closeOnBackgroundClick: boolean; id: string; onClosed: () => void; style: string; title: string; }
options.buttons?	readonly ModalButton[]
options.className?	string
options.closeOnBackgroundClick?	boolean
options.id?	string
options.onClosed?	() => void
options.style?	string
options.title?	string

Returns

void

Example

const element = document.createElement("div");
element.textContent = "Hello, world!";

GL.UI.showModal(element, {
    id: "my-modal",
    title: "My Modal",
    style: "width: 300px;",
    className: "someClass",
    closeOnBackgroundClick: true,
    onClosed: () => {},
    buttons: [
        { text: "OK", style: "primary", onClick: () => {} },
        { text: "Cancel", style: "close" },
        { text: "Revert", style: "danger", onClick: () => {} }
    ]
});