Save Screen

Description#

<save-screen></save-screen>

The save-screen component lets the player store their current progress. It renders a text input for naming the save, a Save button, and the list of existing save slots. Saving creates a new slot (or overwrites an existing one) labelled with the name the player typed.

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

Usage#

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

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

While a game is playing, the keyboard shortcut Shift + S opens the save screen.

Structure#

The save-screen renders the following structure:

<save-screen data-component="save-screen" data-screen="save">
    <button class="top left" data-action="back"><span class="fas fa-arrow-left"></span></button>
    <div class="horizontal horizontal--center">
        <input type="text" placeholder="Save Slot Name" data-input="slotName" data-content="slot-name" required>
        <button data-string="Save" data-action="save">Save</button>
    </div>
    <div data-ui="slots" data-content="slots">
        <slot-container label="Save" type="save"></slot-container>
    </div>
</save-screen>

The label on the inner <slot-container> comes from the SaveLabel setting (default Save). The data-screen="save" attribute and the active class are managed automatically by the base screen component.

State#

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

Content Areas#

Save Flow#

The screen registers a listener for the save action that the Save button triggers:

1. When the screen is opened, the slot-name input is filled with the current date and time (formatted with Luxon), giving the player a sensible default name.
2. The player may type a custom name, then press the Save button (data-action="save").
3. The listener reads the trimmed value of the slot-name input. If it is not empty, it saves the current game state using that name under the SaveLabel prefix, creating a new slot.

// What the Save button effectively does (with the typed name)
monogatari.saveTo('SaveLabel', null, slotName);

Localization#

The screen uses data-string attributes for translatable text:

The placeholder text (Save Slot Name) is a static attribute on the input.

Styling#

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

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

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

/* The slot-name input */
save-screen input {
    background-color: #fff;
    border: 1px solid #666;
}

/* Slot list area */
save-screen [data-content="slots"] {
    /* Layout for the list of save slots */
}

Related#

• Save Slot - The individual slot markup and the slot list container
• Load Screen - Where players resume a saved game
• Saving - Save labels, auto-save, and screenshots configuration
• Settings Screen - The in-game options panel