ui, UiView and mp.ui
Windows and HUD panels of a gamemode, their building blocks, and notices at the top of the HUD.
Building blocks for gamemode UIs (UiView). Shown with the client's own components (Watermelon UI); nothing but these blocks can be shown, no code of the server runs in the game. How to use them: User interfaces.
mp.ui.notify
mp.ui.notify(player: PlayerRef | readonly PlayerRef[], notice: Notice): voidA notice at the top of the player's HUD, in the style of the game's own messages - for announcements, warnings, results.
Types: Notice
UiView
A gamemode UI - a window (menu, shop, form ...) or a HUD panel - built from the ui.* blocks and shown to players.
const shop = new UiView({ title: "Truck shop" })
shop.add(
ui.text("Pick your truck"),
ui.grid({ columns: 3 }, ...trucks.map((t) =>
ui.card({ title: t.model },
ui.badge(t.axles),
ui.button({ label: "Buy", onClick: (player) => buy(player, t) })))),
)
shop.show(player)| Member | Description |
|---|---|
constructor(options?: OpenRoadMP.UiViewOptions) | A new, empty view. |
readonly id: string | Unique id of the view. |
options: OpenRoadMP.UiViewOptions | Title, size, mode ... - change them, then update(). |
add(...children: OpenRoadMP.UiChild[]): this | Adds blocks at the end. |
set(...children: OpenRoadMP.UiChild[]): this | Replaces all blocks. |
clear(): this | Removes all blocks. |
show(player: OpenRoadMP.PlayerRef | readonly OpenRoadMP.PlayerRef[]): void | Shows the view to one or more players (again: replaces what they see). |
update(): void | Sends the current blocks to everyone who has the view open (after add/set/options). |
hide(player?: OpenRoadMP.PlayerRef): void | Closes the view for a player, without a player for everyone. |
isOpen(player: OpenRoadMP.PlayerRef): boolean | Whether the player has the view open. |
readonly viewers: readonly OpenRoadMP.Player[] | Players who have the view open. |
onClose(handler: (player: OpenRoadMP.Player) => void): this | Called when a player closes the window (X, Escape, a button with close) or leaves. |
ui
The building blocks, global as ui (no import needed).
stack
ui.stack(props: UiStackProps, ...children: UiChild[]): UiElementChildren one below the other.
Types: UiStackProps, UiChild, UiElement
row
ui.row(props: UiRowProps, ...children: UiChild[]): UiElementChildren side by side.
Types: UiRowProps, UiChild, UiElement
grid
ui.grid(props: UiGridProps, ...children: UiChild[]): UiElementChildren in a grid with 1 to 6 columns.
Types: UiGridProps, UiChild, UiElement
card
ui.card(props: UiCardProps, ...children: UiChild[]): UiElementA framed card with title, content and footer.
Types: UiCardProps, UiChild, UiElement
tabs
ui.tabs(props: UiTabsProps): UiElementTabs, one content each.
Types: UiTabsProps, UiElement
accordion
ui.accordion(props: UiAccordionProps): UiElementSections that open and close.
Types: UiAccordionProps, UiElement
heading
ui.heading(text: string, props?: UiHeadingProps): UiElementA heading.
Types: UiHeadingProps, UiElement
text
ui.text(text: string, props?: UiTextProps): UiElementText.
Types: UiTextProps, UiElement
badge
ui.badge(text: string, props?: UiBadgeProps): UiElementA small label.
Types: UiBadgeProps, UiElement
alert
ui.alert(props: UiAlertProps): UiElementA notice box.
Types: UiAlertProps, UiElement
progress
ui.progress(props: UiProgressProps): UiElementA progress bar.
Types: UiProgressProps, UiElement
table
ui.table(props: UiTableProps): UiElementA table; cells may hold elements (e.g. buttons).
Types: UiTableProps, UiElement
separator
ui.separator(): UiElementA line.
Types: UiElement
spinner
ui.spinner(): UiElementA loading indicator.
Types: UiElement
button
ui.button(props: UiButtonProps): UiElementA button.
Types: UiButtonProps, UiElement
input
ui.input(props: UiInputProps): UiElementA text field.
Types: UiInputProps, UiElement
textarea
ui.textarea(props: UiTextareaProps): UiElementA text field with several lines.
Types: UiTextareaProps, UiElement
select
ui.select(props: UiSelectProps): UiElementA drop-down list.
Types: UiSelectProps, UiElement
checkbox
ui.checkbox(props: UiCheckProps): UiElementA checkbox.
Types: UiCheckProps, UiElement
switch
ui.switch(props: UiCheckProps): UiElementA switch.
Types: UiCheckProps, UiElement
radio
ui.radio(props: UiRadioProps): UiElementOne of several options.
Types: UiRadioProps, UiElement
slider
ui.slider(props: UiSliderProps): UiElementA slider for numbers.
Types: UiSliderProps, UiElement
logoPicker
ui.logoPicker(props: UiLogoPickerProps): UiElementThe game's 16 company logos as pictures to click on. The value is the logo number (0-15) as a number, as company.logo takes it.
Types: UiLogoPickerProps, UiElement