Notification System

Relevant source files

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

• src/renderer/notification-manager.js
• app/js/save-status-manager.js
• src/renderer/save-manager.js
• index.html
• app/css/save-manager.css
• src/auto-updater.js

The Notification System is a client-side module responsible for displaying non-blocking, temporary messages to the user within the renderer process. Its primary purpose is to provide feedback on background events such as game saves, errors, and other system statuses without interrupting gameplay. The system is architected around a central NotificationManager class that handles the creation, display, and lifecycle of notification elements in the DOM.

This system is primarily used by other managers, such as the SaveStateManager and SaveStatusManager, to communicate the status of save and load operations. It is designed to be flexible, supporting different notification types (success, error, warning, info), configurable durations, and interactive elements like buttons.

Architecture

The Notification System is composed of a core manager and several client modules that invoke it. The NotificationManager is the central component that directly manipulates the DOM to show notifications. Other modules, like SaveStatusManager and SaveStateManager, act as clients, calling the NotificationManager in response to specific game events.

The following diagram illustrates the high-level interaction between these components.

NotificationManager Class

The NotificationManager class is the heart of the notification system. It is instantiated globally as window.NotificationManager and manages the entire lifecycle of notifications.

Sources: src/renderer/notification-manager.js:5-350

Class Structure

The diagram below shows the key properties and methods of the NotificationManager class.

Initialization

Upon instantiation, the NotificationManager's constructor calls initializeContainer(). This method searches for a DOM element with the ID notification-container. If it doesn't exist, it creates and appends a <div> to the document body with the necessary styles to act as the notification host.

Sources: src/renderer/notification-manager.js:14-38

Core Method: showNotification()

This is the primary method for displaying a notification. It orchestrates the creation, display, and eventual removal of the notification element.

Parameters

Parameter	Type	Description	Default
message	string	The text content of the notification.
type	string	The type of notification (success, error, warning, info). This determines the color.	'info'
duration	number	The time in milliseconds before the notification auto-dismisses. 0 for no auto-dismissal.	3000
options	Object	An object for additional configuration, such as persistent and actions.	{}

Sources: src/renderer/notification-manager.js:237-270

The logic flow for this method is as follows:

Notification Types

The manager provides several specialized methods that call showNotification with preset configurations.

Method	Type	Default Duration	Description
showSaveSuccess	success	3000ms	Indicates a successful save operation.
showSaveError	error	5000ms	Indicates a failed save operation.
showLastSaveTime	info	2000ms	Displays the timestamp of the last save.
showMigrationPrompt	warning	10000ms	A persistent notification with 'Migrate' and 'Skip' actions.
showAutoSaveStatus	success/warning	2000ms	Shows whether auto-save is enabled or disabled.
showBackupCreated	info	3000ms	Confirms that a backup file has been created.
showDiskSpaceWarning	warning	8000ms	Warns about low disk space, with conditional actions.
showLoadSuccess	success	2000ms	Indicates a successful load operation.
showLoadError	error	5000ms	Indicates a failed load operation.

Sources: src/renderer/notification-manager.js:45-235

DOM Element Creation

The createNotificationElement method is responsible for building the notification's HTML structure. It creates a div and styles it based on the notification type. It can also add action buttons or a close button for persistent notifications.

Sources: src/renderer/notification-manager.js:277-350

System Integration

The Notification System is not used in isolation. It is integrated with other parts of the application to provide contextual feedback.

SaveStatusManager

The skidinc.saveStatusManager object is a primary client of the NotificationManager. It listens for save-related events and decides whether to show a full notification or a more discrete status indicator based on its internal notificationSettings.

Key integration points:

• It maintains its own notificationSettings (e.g., showSuccessNotifications, discreteMode) loaded from localStorage.
• In handleSaveStatus and handleAutoSaveEvent, it checks these settings before calling showNotification.
• The showNotification method within saveStatusManager is a wrapper that calls window.notificationManager.showNotification.

Sources: app/js/save-status-manager.js:5-298

The sequence diagram below shows how a successful auto-save event is processed to display a notification.

SaveStateManager

The SaveStateManager class also interacts with the notification system. A key integration pattern is established at the end of src/renderer/save-manager.js, where the SaveStateManager's own showNotification method is dynamically overridden to use the more advanced NotificationManager.

This ensures that any part of the SaveStateManager that needs to show a notification will use the centralized system.

// src/renderer/save-manager.js:1010-1027
// Connect notification manager to save state manager
if (window.saveStateManager && window.notificationManager) {
  // Override the showNotification method to use NotificationManager
  window.saveStateManager.showNotification = (message, type, duration) => {
    switch (type) {
      case 'success':
        window.notificationManager.showSaveSuccess(message, duration);
        break;
      case 'error':
        window.notificationManager.showSaveError(message.replace('Save failed: ', '').replace('Load failed: ', '').replace('Save error: ', '').replace('Load error: ', ''), duration);
        break;
      case 'warning':
        window.notificationManager.showNotification(message, 'warning', duration);
        break;
      case 'info':
      default:
        window.notificationManager.showNotification(message, 'info', duration);
        break;
    }
  };
}

Sources: src/renderer/save-manager.js:1011-1027

UI and Styling

The visual appearance of notifications is defined in app/css/save-manager.css. The NotificationManager creates a container and individual notification elements, which are then styled by these CSS rules.

CSS Selector	Description
.notification-container	A fixed-position container at the top-right of the screen.
.notification	Base style for a single notification, including shadow, border-radius, and transition for animation.
.notification-success	Sets the background color for success notifications.
.notification-error	Sets the background color for error notifications.
.notification-warning	Sets the background color for warning notifications.
.notification-info	Sets the background color for info notifications.
.inverted .notification	Provides styles for dark theme support.

Sources: app/css/save-manager.css:235-288, src/renderer/notification-manager.js:282-297

The index.html file includes the necessary scripts in the correct order for the system to function: notification-manager.js is loaded before save-manager.js so that the window.notificationManager object is available for the override.

Sources: index.html:670-672