Load Screen

Description#

<load-screen></load-screen>

The load-screen component lets the player resume a previously saved game. It renders a list of the player’s manual saves and, when auto-saving is enabled, a second list of auto-saves. Clicking a slot loads that game and continues play from where it was saved.

Source Code: https://github.com/Monogatari/Monogatari/tree/develop/src/components/load-screen

Usage#

The load-screen is a screen component, so it is shown like any other screen:

// Open the load screen
monogatari.showScreen('load');

While a game is playing, the keyboard shortcut Shift + L opens the load screen.

Structure#

The load-screen renders the following structure:

<load-screen data-component="load-screen" data-screen="load">
    <button class="top left" data-action="back"><span class="fas fa-arrow-left"></span></button>
    <h2 data-string="Load">Load</h2>
    <div data-ui="saveSlots">
        <h3 data-string="LoadSlots">Saved Games</h3>
        <div data-ui="slots">
            <slot-container label="Save" type="load"></slot-container>
        </div>
    </div>
    <!-- Only rendered when auto-save is enabled -->
    <div data-ui="autoSaveSlots">
        <h3 data-string="LoadAutoSaveSlots">Auto Saved Games</h3>
        <div data-ui="slots" data-content="slots">
            <slot-container label="AutoSave" type="load"></slot-container>
        </div>
    </div>
</load-screen>

The two <slot-container> elements are rendered in load mode. Their label attributes come from the SaveLabel (default Save) and AutoSaveLabel (default AutoSave) settings. The data-screen="load" attribute and the active class are managed automatically by the base screen component.

State#

The load-screen inherits its state from the base screen component.

Slot Lists#

The load-screen does not list slots itself; it delegates to the slot-container component, one per list:

Each slot in those containers is a Save Slot. When a container has no saves to show, it displays the NoSavedGames message instead of slots.

Loading Flow#

Because both containers are created with type="load", clicking a slot loads it. The slot-container loads the chosen save and then resumes play from the saved position. Clicking a slot’s delete button removes that save instead of loading it.

Localization#

The screen uses data-string attributes for translatable text:

Styling#

The load-screen can be styled with CSS against its real selectors:

/* The screen itself */
load-screen {
    /* Your styles */
}

/* Only when the screen is open */
load-screen.active {
    /* Visible state */
}

/* Manual saves section */
load-screen [data-ui="saveSlots"] {
    /* Layout for the manual saves list */
}

/* Auto-saves section */
load-screen [data-ui="autoSaveSlots"] {
    /* Layout for the auto-saves list */
}

Related#

• Save Slot - The individual slot markup and the slot list container
• Save Screen - Where players create new saves
• Saving - Save labels, auto-save interval, and screenshots configuration
• Settings Screen - The in-game options panel