Electron Main Process

Relevant source files

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

• src/main.js
• src/auto-updater.js
• package.json
• src/renderer/save-manager.js
• ELECTRON-SETUP.md
• scripts/auto-update.js

The Electron Main Process, defined in src/main.js, serves as the backbone of the Skid-Inc desktop application. It is responsible for managing the application's lifecycle, creating and managing the main browser window, handling native OS interactions like menus, and providing backend services to the renderer process. This process orchestrates several key sub-systems, including game state management, file system operations, startup performance optimization, and automatic updates.

Communication with the renderer process (the game itself, running in index.html) is handled securely via Inter-Process Communication (IPC), with a preload script acting as the bridge. The main process exposes a comprehensive API for saving, loading, and managing game data, which is consumed by the renderer's SaveStateManager.

Architecture Overview

The main process is structured around the ElectronApp class, which initializes and coordinates various manager modules. Each manager is responsible for a specific domain of functionality.

This diagram illustrates the high-level architecture of the main process and its relationship with the renderer process.

Application Lifecycle and Startup

The application's entry point is the ElectronApp class constructor. The primary setup logic is triggered by the app.whenReady() event, which executes an optimized startup sequence.

Sources: src/main.js:19-21

Startup Sequence

The startup sequence is designed for performance, with critical tasks performed synchronously and non-essential tasks deferred until after the window is visible.

This flowchart shows the application startup flow.

1. initializeManagers(): Instantiates FileSystemManager, AutoSaveManager, MigrationManager, and StartupOptimizer.
2. optimizedStartup(): Executes the startup sequence managed by StartupOptimizer to accelerate loading.
3. createWindow(): Creates the main BrowserWindow and loads index.html.
4. setupMenu(): Builds and sets the native application menu.
5. setupIPC(): Configures all ipcMain handlers to communicate with the renderer.
6. performPostStartupOptimizations(): After a short delay, this method runs background tasks like checking for data migration and preloading save files.

Window Configuration

The main window is created with specific security and size constraints.

// src/main.js:83-97
this.mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  minWidth: 1024,
  minHeight: 768,
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    enableRemoteModule: false,
    preload: path.join(__dirname, 'preload.js')
  },
  icon: path.join(__dirname, '..', 'favicon.png'),
  title: 'Skid-Inc - Idle-game for hackers!'
});

Key webPreferences include:

• contextIsolation: true: Ensures the preload script and the renderer's JavaScript run in separate contexts for security.
• nodeIntegration: false: Prevents the renderer from accessing Node.js APIs directly.
• preload: Specifies the script that will bridge the main and renderer processes.

Sources: src/main.js:83-97, ELECTRON-SETUP.md

Inter-Process Communication (IPC)

IPC is the mechanism for communication between the main process and the renderer. The main process uses ipcMain to listen for events, and the renderer uses the window.electronAPI object (exposed by the preload script) to send them.

Save Game Flow Example

This sequence diagram shows how a "save game" action flows from the renderer to the main process and back.

IPC Channel Reference

The main process exposes a rich set of handlers for various application features.

Channel	Description	Parameters	Returns
app-ready	Confirms the Electron app is ready.	None	{ success, message }
save-game-state	Saves the current game state to a file.	gameState	{ success, filename, ... }
load-game-state	Loads the most recent game state.	None	{ success, gameState, ... }
get-save-list	Retrieves a list of all save files.	None	{ success, saves, ... }
delete-save	Deletes a specific save file.	filename	{ success, filename, ... }
load-specific-save	Loads a game state from a specific file.	filename	{ success, gameState, ... }
get-save-statistics	Gets statistics about saves and disk usage.	None	{ success, statistics, ... }
create-manual-backup	Creates a named manual backup of the game state.	gameState, backupName	{ success, filename, ... }
import-from-localstorage	Migrates game data from browser localStorage.	localStorageData	{ success, ... }
check-for-updates	Manually triggers an update check.	None	{ success, message }
install-update	Quits the application and installs a downloaded update.	None	{ success, message }

Sources: src/main.js:288-883

Core Sub-systems

The ElectronApp class manages several specialized modules to handle backend functionality.

Save and File Management

This system is responsible for all file I/O related to game saves. It is composed of several managers initialized at startup:

• FileSystemManager: Handles low-level file operations like reading, writing, and deleting save files.
• AutoSaveManager: Orchestrates automatic and manual saves, managing save intervals and backup creation.
• MigrationManager: Manages the one-time migration of save data from the browser's localStorage to the new file-based system.
• StartupOptimizer: Optimizes app launch by preloading recent save files into memory.

Sources: src/main.js:220-237, src/main.js:612-688, src/renderer/save-manager.js

Auto-Updater

The auto-update system, encapsulated in AutoUpdateManager, uses electron-updater to handle application updates from GitHub releases.

Configuration

The updater is configured in package.json to point to the correct GitHub repository.

// package.json:173-177
"publish": {
  "provider": "github",
  "owner": "TotomInc",
  "repo": "skid-inc"
}

Update Flow

The AutoUpdateManager class in src/auto-updater.js defines the logic for checking, downloading, and installing updates. It communicates with the user via native dialog boxes.

This diagram shows the auto-update process.

Application Menu

The setupMenu method dynamically constructs the application's native menu bar. It includes standard items like File and View, as well as platform-specific adjustments for macOS. Menu actions, such as "Save Game," are wired to send IPC events to the renderer process, which then initiates the corresponding action.

// src/main.js:127-132
{
    label: 'Save Game',
    accelerator: 'CmdOrCtrl+S',
    click: () => {
      this.mainWindow.webContents.send('menu-save-game');
    }
}

This snippet shows the "Save Game" menu item. When clicked, it sends the menu-save-game message to the renderer, which is handled by SaveStateManager to trigger a save operation.

Sources: src/main.js:122-218, src/renderer/save-manager.js:46-49