Renderer Process (Game Client)
Relevant source files
The following files were used as context for generating this wiki page:The Renderer Process is the front-end of the Skid-Inc application, responsible for rendering the user interface, executing all client-side game logic, and handling user input. It runs within an Electron BrowserWindow and functions as a web page, with index.html as its entry point. The game's functionality is built on a modular architecture, with different JavaScript files managing specific aspects like the player, console, scripts, and servers.
For the Electron version of the game, the renderer process includes specific integration modules, such as the SaveStateManager, which communicates with the Main Process via Inter-Process Communication (IPC) to handle file system operations like saving and loading game states. This separation ensures that node-specific operations do not block the UI, providing a responsive user experience.
Sources: src/main.js:63-78, index.html:717-735
Client-Side Architecture
The game client is structured as a single-page application. The index.html file defines the entire DOM structure, and JavaScript modules are loaded to manipulate this DOM, manage game state, and handle user interactions.
Sources: index.html
HTML Structure
The main UI is defined in index.html and is composed of several key sections:
- Loader: A loading screen (
#loader) displayed during initial asset loading. - Intro Terminal: A tutorial or introductory terminal view (
div.intro). - Game Terminal: The main game interface (
div.game), which includes:- Logs: A display area for game messages and command output (
#logs). - Stat Tabs: A tabbed interface for viewing player stats, autoscripts, battery, and prestige.
- Input: The command line input area for the player (
#command-input).
- Logs: A display area for game messages and command output (
- Modals: Several modals for features like shortcuts, achievements, options, and the save manager.
Sources: index.html:43-600
JavaScript Modules
The game logic is modularized into several JavaScript files, each attached to the global skidinc object. This modular approach separates concerns and organizes the codebase.
The following diagram shows the primary modules and their initialization by core.js.
This diagram illustrates how index.html loads core.js, which in turn likely initializes or relies on the other game logic modules. Electron-specific modules like save-manager.js are also loaded directly.
Sources: index.html:717-735
| File | Description |
|---|---|
app/js/core.js | Main game object, initialization, and game loop. |
app/js/console.js | Handles command input, parsing, and execution. |
app/js/player.js | Manages player data like level, experience, and money. |
app/js/script.js | Manages the execution of in-game scripts. |
app/js/server.js | Manages server-related upgrades and multipliers. |
app/js/buy.js | Handles the logic for the buy command. |
app/js/battery.js | Manages the battery micro-management feature. |
app/js/achievements.js | Manages game achievements. |
app/js/options.js | Manages in-game options and settings. |
src/renderer/save-manager.js | (Electron only) Manages IPC for save/load operations. |
app/js/save-manager-ui.js | (Electron only) Renders the UI for the save manager modal. |
Sources: index.html:717-735
Console and Command Parsing
A core gameplay mechanic is the terminal console, managed by app/js/console.js. It captures user input, validates it, and executes corresponding game logic.
Sources: app/js/console.js
Command Processing Flow
The skidinc.console.parse() function is the entry point for handling user commands. The flow is as follows:
This flowchart shows the logic for parsing and validating a command entered by the user.
Sources: app/js/console.js:121-200
Defined Commands
The skidinc.console.commands array defines all available commands, their descriptions, and the functions they execute.
| Command | Description | Arguments | Supports -list | Supports -help |
|---|---|---|---|---|
help | Show a list of available commands. | None | No | No |
clear | Remove all the logs from the terminal. | None | No | No |
username | Set your username, can only be used in the tutorial. | [string] | No | No |
script | Execute a script. | [string] | Yes | Yes |
buy | Buy things such as new scripts, auto-scripts and servers. | [string] | Yes | Yes |
option | Change in-game options. | [string] [string] | Yes | Yes |
achievements | Take a look on your progression. | None | No | No |
Sources: app/js/console.js:12-78
Electron Integration and Save System
In the Electron environment, the renderer process gains access to system-level features via a preload script. This is primarily used for the save/load system, which requires file system access managed by the main process.
Save State Manager
The SaveStateManager class in src/renderer/save-manager.js is the bridge between the game client and the Electron main process. It is responsible for:
- Detecting game state changes.
- Requesting save and load operations via IPC.
- Applying loaded game state to the running game.
- Handling auto-load on startup.
- Managing a local cache of the game state.
Sources: src/renderer/save-manager.js
This class diagram shows the key properties and methods of the SaveStateManager, which orchestrates all save-related functionality in the renderer.
Sources: src/renderer/save-manager.js:5-30
IPC for Save/Load Operations
When a user or the auto-save system triggers a save, the SaveStateManager sends the current game state to the main process. The main process then writes the data to a file and confirms back to the renderer.
The following sequence diagram illustrates the process of manually saving the game.
This diagram shows the sequence of events for a manual save, from user interaction in the renderer to file writing in the main process and back.
Sources: src/renderer/save-manager.js:485-506, src/main.js:304-333
Save Manager UI
The skidinc.saveManagerUI object, defined in app/js/save-manager-ui.js, controls the "Save Management" modal. It fetches the list of save files from the SaveStateManager and dynamically renders them, attaching event handlers for loading, duplicating, and deleting saves.
init(): Binds events to the modal and its buttons.loadSaveList(): Asynchronously fetches the list of saves fromsaveStateManager.renderSaveList(): Renders the fetched save files into the DOM.loadSave(filename)/deleteSave(filename): Calls the corresponding methods onsaveStateManager.
Sources: app/js/save-manager-ui.js
Visual Themes and Effects
The game client supports visual themes that alter the appearance of the terminal.
Matrix Theme
A "Matrix" theme is implemented, which includes a falling green code background effect.
app/js/helpers/matrix.js: This script creates a<canvas>element and draws the animated "code rain" effect. It manages the columns, velocity, and characters of the falling code. TheM.initBackground()function is called to activate it.app/css/themes/matrix.css: This stylesheet is applied when the theme is active. It styles the terminal to have a transparent background to show the canvas effect and changes the text colors to the iconic green.
Sources: app/js/helpers/matrix.js, app/css/themes/matrix.css
Conclusion
The Renderer Process of Skid-Inc serves as the complete game client. It is a well-structured web application that manages game state, renders all UI, and handles user input. Its modular JavaScript architecture allows for clear separation of concerns. For the desktop version, it intelligently delegates file system operations to the Main Process via a secure IPC bridge, ensuring a smooth and responsive experience while providing robust features like automatic and manual game saves.