Description
<dialog-log></dialog-log>The dialog-log component provides a scrollable history of all dialogs displayed during gameplay. Players can access it to review past conversations they may have missed or want to re-read.
Source Code: https://github.com/Monogatari/Monogatari/tree/develop/src/components/dialog-log
Usage
The dialog-log automatically appears in the quick menu as a “Log” button. Clicking it toggles the dialog log modal.
Structure
<dialog-log class="modal" data-component="dialog-log">
<div class="modal__content">
<div data-content="log">
<!-- Dialog entries appear here -->
<div class="text--center padded" data-string="NoDialogsAvailable" data-content="placeholder">
No dialogs available. Dialogs will appear here as they show up.
</div>
</div>
<button data-string="Close" data-action="dialog-log">Close</button>
</div>
</dialog-log>Dialog Entry Structure
Each dialog entry is rendered as:
<!-- Character dialog -->
<div data-spoke="character_id" class="named">
<span style="color:#ff0000;">Character Name </span>
<p>The dialog text here.</p>
</div>
<!-- Narrator dialog -->
<div data-spoke="_narrator" class="unnamed">
<p>Narrator text here.</p>
</div>State
| Property | Type | Default | Description |
|---|---|---|---|
active |
boolean |
false |
Whether the dialog log modal is currently visible |
Methods
write(entry: DialogEntry): void
Add a new dialog entry to the log. This is called automatically by the Dialog action.
interface DialogEntry {
id: string; // Character ID or '_narrator'
character: Character; // Character object with name/color
dialog: string; // The dialog text
}pop(): void
Remove the last dialog entry from the log. Used during rollback/revert operations.
Events
The dialog-log registers a listener for the dialog-log action, which toggles its visibility:
// Toggle dialog log programmatically
monogatari.trigger('dialog-log');Quick Menu Integration
During setup, the dialog-log automatically adds a “Log” button to the quick menu:
// This happens automatically during component setup
quickMenu.addButtonAfter('Hide', {
string: 'Log',
icon: 'far fa-comments',
data: {
action: 'dialog-log'
}
});Styling
/* Modal container */
dialog-log {
/* Modal base styles inherited from .modal class */
}
/* Active state */
dialog-log.modal--active {
display: flex;
/* Or your preferred display method */
}
/* Log content area */
dialog-log [data-content="log"] {
overflow-y: auto;
max-height: 60vh;
}
/* Character dialog entry */
dialog-log [data-spoke].named {
/* Named character styling */
}
dialog-log [data-spoke].named span {
/* Character name styling (color is inline from character definition) */
}
/* Narrator dialog entry */
dialog-log [data-spoke].unnamed {
/* Narrator styling */
}
/* Placeholder when empty */
dialog-log [data-content="placeholder"] {
text-align: center;
padding: 2em;
opacity: 0.7;
}
/* Close button */
dialog-log button[data-action="dialog-log"] {
/* Close button styling */
}Reset Behavior
When the game is reset, the dialog log is cleared and the placeholder message is restored:
// Automatically called on game reset
dialogLog.onReset();Localization
The component uses data-string attributes for translatable text:
| String Key | Default | Description |
|---|---|---|
NoDialogsAvailable |
“No dialogs available…” | Placeholder text |
Close |
“Close” | Close button text |
Related
- Dialog Action - Populates the dialog log
- Text Box - Displays current dialog
- Quick Menu - Contains the Log button