Theming System

Relevant source files

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

• app/css/themes/default.css
• app/css/themes/matrix.css
• app/css/themes/stardust.css
• app/js/options.js
• index.html
• app/js/console.js

The Theming System in Skid-Inc provides players with the ability to customize the visual appearance of the game's terminal interface. This system is built upon a straightforward CSS class-swapping mechanism, where different themes are defined in separate stylesheets. The application of a theme alters colors, backgrounds, and can even trigger special JavaScript-driven visual effects.

While a default theme is provided, additional themes like "Stardust" and "Matrix" are available as premium content, purchasable with Kongregate's virtual currency, Kreds. Users can manage their themes through the in-game options menu or via console commands.

Architecture

The theming architecture is composed of HTML, CSS, and JavaScript components working together. Themes are pre-loaded as CSS files and are activated by adding a specific class to the <body> element of the document.

Sources: index.html:26-28, app/js/options.js:40-57

Core Components

Component	File Path	Description
HTML Structure	index.html	Includes all theme CSS files and contains the "Theme Shop" modal for purchases.
Theme Stylesheets	app/css/themes/	Directory containing individual CSS files for each theme (default.css, matrix.css, stardust.css).
Theme Logic	app/js/options.js	Contains the JavaScript logic for managing, applying, and purchasing themes.
Console Command	app/js/console.js	Defines the option command, allowing theme changes via the terminal.

Sources: index.html:26-28, 340-370, app/js/options.js, app/js/console.js:56-65

The following diagram illustrates the relationship between these components.

Available Themes

The application includes three distinct themes. The default.css file is empty, indicating that the default appearance is defined by the core stylesheets (core.css, game.css). The other themes override these default styles.

Theme Name	CSS Class	Description	Type
Default	(none)	The standard, default look of the terminal.	Free
Stardust	.theme-stardust	A cosmic theme featuring an animated stardust background GIF and custom colors.	Premium (30 Kreds)
Matrix	.theme-matrix	A theme inspired by "The Matrix," with a black background, green text, and a falling characters effect.	Premium (30 Kreds)

Sources: app/js/options.js:10-20, app/css/themes/stardust.css, app/css/themes/matrix.css, app/css/themes/default.css

Stardust Theme

This theme is activated by adding the theme-stardust class to the body. Its primary feature is an animated background.

/* Source: app/css/themes/stardust.css:1-3 */
.theme-stardust body {
    background: #000 url(../../assets/stardust.gif);
}

Matrix Theme

This theme uses the theme-matrix class. In addition to changing colors to the iconic green-on-black, it triggers a JavaScript animation to create the "digital rain" effect. This is initiated by the skidinc.matrix.init() function call within applyTheme.

Sources: app/css/themes/matrix.css, app/js/options.js:49-51

Theme Management

Theme management is handled by the skidinc.options object in app/js/options.js.

Data Structure

Themes are defined in an array, which tracks their properties, including ownership status and cost.

// Source: app/js/options.js:10-20
skidinc.options.themes = [{
    id: 0,
    name: 'stardust',
    isOwned: false,
    kreds: 30
}, {
    id: 1,
    name: 'matrix',
    isOwned: false,
    kreds: 30
}];

Applying a Theme

The applyTheme(id) function is responsible for changing the active theme. It removes any existing theme classes from the <body> element and adds the new one. For the Matrix theme, it also initializes the canvas animation.

The following diagram shows the flow for applying a theme.

Changing Themes via Console

Players can change themes using the option command in the terminal. The command option theme <theme_name> will apply the selected theme if it is owned.

Command format:

option theme [stardust|matrix|default]

Sources: app/js/console.js:56-65, app/js/options.js:111-125

Theme Shop and Monetization

Premium themes are monetized through the Kongregate platform using Kreds. The "Theme Shop" is a modal window defined in index.html.

UI

The modal (#modal-themes) displays the available premium themes, their descriptions, and a "Buy" button for each. This UI is only intended to be fully functional for players logged into Kongregate.

Sources: index.html:340-370

Purchase Flow

When a user clicks a "Buy" button, the buyTheme(id) function is called. This function then uses the Kongregate API (kongregate.mtx.purchaseItems) to initiate the transaction.

The sequence diagram below illustrates the purchase process.