Save Manager UI

Relevant source files

The following files were used as context for generating this wiki page:

• app/js/save-manager-ui.js
• app/css/save-manager.css
• index.html
• src/renderer/save-manager.js
• src/main.js
• src/filesystem-manager.js

The Save Manager UI provides a graphical interface for players to manage their game save files within the Electron version of Skid-Inc. It allows users to view, search, load, delete, and create manual saves and backups. The interface is presented as a modal dialog and is only available when the game is running in the Electron environment, as it relies on Node.js APIs for file system access.

The UI is built using jQuery and Bootstrap, and it communicates with the main Electron process via the window.electronAPI preload script. The core logic is encapsulated within the skidinc.saveManagerUI object, which handles event binding, data fetching, and rendering of the save file list.

Sources: app/js/save-manager-ui.js:5-6, index.html:99-100

Architecture and Components

The Save Manager UI is composed of a main modal window, several action buttons, a search input, and a dynamic list that displays save files. The entire feature is conditionally displayed, becoming visible only if window.electronAPI is detected, confirming an Electron environment.

Sources: app/js/save-manager-ui.js:13-15

HTML Structure

The UI is defined in index.html within a Bootstrap modal element with the ID #modal-save-manager.

<!-- index.html:608-663 -->
<div id="modal-save-manager" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-save-mgr" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save Management</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <button id="save-manager-manual-save" class="btn btn-success btn-block">
                            <i class="fa fa-floppy-o" aria-hidden="true"></i> Create Manual Save
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button id="save-manager-create-backup" class="btn btn-info btn-block">
                            <i class="fa fa-archive" aria-hidden="true"></i> Create Backup
                        </button>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="save-manager-search">Search saves:</label>
                            <input type="text" id="save-manager-search" class="form-control" placeholder="Filter by filename or date...">
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <h6>Save Files <span id="save-manager-count" class="badge badge-secondary">0</span></h6>
                        <div id="save-manager-list" class="save-list">
                            <!-- Save items are rendered here -->
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <!-- Footer with stats and close button -->
            </div>
        </div>
    </div>
</div>

Sources: index.html:608-663

The following diagram illustrates the component hierarchy of the Save Manager modal.

UI Components Table

Element ID / Class	Description	Source File
#modal-save-manager	The main Bootstrap modal container for the UI.	index.html:608
#nav-save-manager	The navigation link in the "More" dropdown that opens the modal. It is hidden by default.	index.html:99
#save-manager-manual-save	Button to trigger the creation of a new manual save file.	index.html:616
#save-manager-create-backup	Button to trigger the creation of a backup file.	index.html:621
#save-manager-search	An input field for filtering the list of save files by name or date.	index.html:630
#save-manager-list	The container where the list of save files is dynamically rendered.	index.html:637
#save-manager-count	A badge that displays the number of currently visible save files.	index.html:636
#save-manager-stats	A text element in the footer showing total save and backup counts.	index.html:654
.save-item	The container for a single save file entry in the list.	app/css/save-manager.css:10
.load-save	Button within a save item to load that specific save file.	app/js/save-manager-ui.js:192
.delete-save	Button within a save item to delete that save file.	app/js/save-manager-ui.js:199

Sources: index.html:99,608-663, app/js/save-manager-ui.js:192-199, app/css/save-manager.css:10

Core Logic and Flow

The UI's functionality is managed by the skidinc.saveManagerUI object. It initializes event listeners and handles all user interactions within the modal.

Sources: app/js/save-manager-ui.js:5-423

Initialization

The init function is the entry point. It checks for the Electron environment, shows the "Save Manager" navigation link if available, and binds all necessary event handlers.

The following diagram shows the initialization flow.

Loading and Rendering Save Files

When the user opens the Save Manager modal, the show.bs.modal event triggers the loadSaveList function. This function is responsible for fetching the list of save files from the backend and rendering them.

This sequence diagram shows the process of loading the save list.

The renderSaveList function iterates through the fetched saves and generates HTML for each one using the renderSaveItem template. It distinguishes between regular saves and backups, applying different styles.

Sources: app/js/save-manager-ui.js:129-150

User Actions

The UI supports several actions on save files, each handled by a dedicated async function that communicates with the saveStateManager.

Delete Save

1. User clicks the "Delete" button on a save item.
2. deleteSave is called with the filename.
3. A native confirm() dialog is shown to the user.
4. If confirmed, window.saveStateManager.deleteSave(filename) is called.
5. This triggers an IPC call to the main process to delete the file from the filesystem.
6. The UI list is refreshed by calling loadSaveList() again.

Other Actions

Function	Trigger	Action	Source Lines (UI)
loadSave	Click on "Load" button.	Calls saveStateManager.loadSpecificSave() to load the game state and closes the modal.	app/js/save-manager-ui.js:241-262
createManualSave	Click on "Create Manual Save" button.	Calls saveStateManager.handleSaveRequest() to save the current game state.	app/js/save-manager-ui.js:305-317
createBackup	Click on "Create Backup" button.	Calls saveStateManager.createManualBackup() to create a backup.	app/js/save-manager-ui.js:319-331
filterSaves	User types in the search input.	Filters the saves array based on the query and re-renders the list with filteredSaves.	app/js/save-manager-ui.js:92-106

Styling

The visual appearance of the Save Manager is defined in app/css/save-manager.css. It includes styles for the save list, individual save items, and states like loading, empty, and error.

• .save-list: Defines the scrollable container for save items.
• .save-item: Styles for a single save entry, including hover effects.
• .save-item.backup: Special styling for backup files, giving them a yellow-tinted background and a left border.
• .save-item-type: Styles for the "Save" and "Backup" labels, with different colors for each.
• .save-list-empty: Centered text and icon for when no saves are found or search yields no results.
• .inverted .*: A full set of rules to support the game's dark theme.
• @keyframes fadeInUp: A simple fade-in animation for when save items are rendered.

Sources: app/css/save-manager.css

Summary

The Save Manager UI is a self-contained module that provides a crucial interface for file management in the Electron version of Skid-Inc. It is dynamically enabled, communicates with the backend through a well-defined saveStateManager and Electron's IPC mechanism, and provides a clear, styled, and responsive user experience for managing game saves. Its logic is cleanly separated from the core game, ensuring it only loads and runs when needed.

Sources: app/js/save-manager-ui.js, src/renderer/save-manager.js