In-Game Consoles & UIs
Relevant source files
The following files were used as context for generating this wiki page:
In-Game Consoles and User Interfaces (UIs) in BandaStation use the tgui framework. This framework relies on modern web technologies, specifically React and TypeScript, to render interactive windows within the BYOND DreamSeeker client. Interfaces communicate with the game server (written in DM) using a specialized bridging API that handles data synchronization and user actions.
Sources: tgui/README.md:1-12, tgui/packages/tgui-setup/helpers.js:18-30
Architecture and Communication
The UI architecture separates the frontend presentation from the backend game logic. The frontend uses React components to display state data received from the server. The server sends periodic updates (JSON payloads) which the UI parses to refresh the view.
Data Flow Model
The following diagram illustrates the lifecycle of a message from the game server to the UI and the subsequent user action returning to the server.
The Byond.call and Byond.sendMessage functions facilitate communication by building URLs using the byond:// protocol. If the client supports Chromium (WebView2), it uses cef_to_byond for faster execution; otherwise, it falls back to standard location.href or XMLHttpRequest for large payloads.
Sources: tgui/packages/tgui-setup/helpers.js:77-110, tgui/packages/tgui-setup/helpers.js:160-176, tgui/README.md:120-130
UI Components and Layouts
Interfaces are built using standardized components from tgui-core. Common structural elements include:
- Window: The root container for every interface, defining dimensions and themes.
- Section: Logical groupings of information within a window.
- Stack: Layout tools for vertical or horizontal alignment.
- Button: Interactive elements that trigger
actcalls to the server.
Interface Metadata
Metadata tags in the HTML template provide critical environment information to the framework.
| Meta Tag | Description |
|---|---|
tgui:windowId | Unique identifier for the current browser window instance. |
tgui:strictMode | Enables or disables advanced error reporting and logging to the server. |
tgui:storagecdn | Specifies the base URL for external asset loading. |
Sources: tgui/packages/tgui-setup/helpers.js:23-28, tgui/packages/tgui-setup/helpers.js:46-46, tgui/packages/tgui/interfaces/AntagInfoMalf.tsx:173-180
Specialized Interface Implementation
BandaStation utilizes distinct interfaces for different gameplay systems, ranging from information readouts to complex construction tools.
1. Antagonist Information (Malf AI)
The AntagInfoMalf interface provides specific objectives and diagnostic flavor text for Malfunctioning AIs. It uses specialized themes like hackerman and monospace fonts to simulate a terminal environment.
- Key Data: Codewords, mission objectives, and "diagnostic" system status.
- Components:
IntroductionSection,FlavorSection, andCodewordsSection.
Sources: tgui/packages/tgui/interfaces/AntagInfoMalf.tsx:43-160
2. Rapid Construction Device (RCD)
The RapidConstructionDevice interface manages architectural changes. It synchronizes with a centralized "Silo" for resources and categorized construction designs.
3. Musical Instrument Editor
The InstrumentEditor provides a complex UI for creating songs in-game. It supports line-by-line editing, BPM control, and sustain settings.
- Settings: Volume, note shift (keys/octaves), and sustain modes (e.g., "Sustaining last held note").
- Editing: Features "Start a New Song", "Import a Song", and individual line modification triggers.
Sources: tgui/packages/tgui/interfaces/InstrumentEditor.tsx:88-210
4. Blueprints and Area Management
The Blueprints interface allows players to view structural data and modify station areas. It includes a multi-view system that switches between the Main Menu, a Wire Color Legend, and a List of Wiresets.
| Function | Action Triggered |
|---|---|
create_area | Triggers the creation or modification of a station area. |
edit_area | Opens a prompt to change an existing area's name. |
view_blueprints | Toggles the visibility of structural/wire data overlays. |
Sources: tgui/packages/tgui/interfaces/Blueprints.tsx:85-155
Error Handling and Debugging
The framework includes a robust error handling system defined in helpers.js. If a fatal error occurs and strictMode is enabled:
- The UI displays a
FatalErroroverlay. - The error stack trace is augmented with User Agent information.
- The error is sent to the game server logs via
Byond.sendMessage. - Standard updates to the UI are short-circuited to prevent further corruption.
Sources: tgui/packages/tgui-setup/helpers.js:315-370
Summary
The In-Game Consoles & UIs system provides a high-performance, web-based frontend for BandaStation. By leveraging React and a robust communication bridge, it enables complex interactions like musical editing and construction management while maintaining strict synchronization with the DM backend.