In-Game Console

Relevant source files

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

• app/js/console.js
• index.html
• app/js/tutorial.js
• app/css/themes/matrix.css
• src/renderer/save-manager.js
• test-tutorial-disable.html

The In-Game Console is the primary user interface for Skid-Inc. It serves as the central point of interaction, where players input commands to perform actions, manage resources, and progress through the game. The console emulates a command-line terminal, featuring a log area for game feedback and an editable input field for entering commands.

The system is designed to be extensible, with a structured command registration and parsing mechanism. It includes user experience features such as command history, autocomplete, and a "typed" text effect for a more immersive terminal feel. The console's behavior and appearance are also integrated with the game's tutorial and theming systems.

Core Architecture

The console's logic is encapsulated within the skidinc.console object. This object manages the console's state, command definitions, and user interaction handlers.

Sources: app/js/console.js:1-12

Console State and Configuration

The skidinc.console object holds several properties that define its current state and behavior.

Property	Type	Description	Source File
typeSpeed	Number	Controls the speed of the typed text effect. Default is -50.	app/js/console.js:2
inputEnabled	Boolean	Toggles whether the user can enter commands. Used by the tutorial.	app/js/console.js:3
isTyping	Boolean	Flag indicating if the typed effect is currently active.	app/js/console.js:4
notAccepted	Array	A list of special characters that are rejected by the command parser.	app/js/console.js:6
history	Array	Stores a history of previously entered commands.	app/js/consolejs:8
posInHistory	Number	The current position when navigating the command history.	app/js/console.js:9
grammarly	Boolean	A flag to track if the Grammarly warning has been shown.	app/js/console.js:15

HTML Structure

The console is composed of several key DOM elements defined in index.html. There are two main console instances: one for the introductory tutorial (.intro) and one for the main game (.game).

This diagram shows the HTML structure for the main game console.

• Log Area (#logs, #intro-logs): Displays all output from the game and commands.
• Command Input (#command-input, #intro-input): A contenteditable <span> where the user types commands.
• Prompt (.input-before): The text displayed before the input field, e.g., skidinc@skid:~$.

Sources: index.html:62-67, 269-276

Command Processing

Command processing is handled by the skidinc.console.parse() function. It is triggered when the user submits a command from the input field. The function validates, interprets, and executes the command.

Sources: app/js/console.js:146-224

Parsing Flow

The following flowchart illustrates the logic of the parse() function.

Command Definition

Commands are defined as an array of objects in skidinc.console.commands. Each object specifies the command's behavior and properties.

Property	Type	Description
id	String	The command name (e.g., 'help', 'script').
desc	String	A brief description of the command.
effect	String	A string of JavaScript code to be executed via eval() when the command is run.
requireArg	Boolean	Whether the command requires at least one argument.
argsType	Array	An array defining the expected types for arguments (e.g., 'base', 'string', 'number').
supportList	Boolean	Whether the command supports a -l or -list flag.
listExec	String	The code to execute for the list flag.
supportHelp	Boolean	Whether the command supports a -h or -help flag.
helpExec	String	The code to execute for the help flag.

Sources: app/js/console.js:17-80

Available Commands

The following commands are registered in the console system.

Command	Description	Requires Argument	Supports -list	Supports -help
help	show a list of available commands.	No	No	No
clear	remove all the logs from the terminal.	No	No	No
username	set your username, can only be used in the tutorial.	Yes	No	No
script	execute a script.	Yes	Yes	Yes
buy	buy things such as new scripts, auto-scripts and servers.	Yes	Yes	Yes
option	change in-game options.	Yes	Yes	Yes
achievements	take a look on your progression.	No	No	No

Sources: app/js/console.js:17-80

User Experience Features

Command History and Autocomplete

The console provides features to improve usability, managed by dedicated functions.

• Command History: The skidinc.console.navigateHistory(how) function allows users to cycle through past commands using the 'up' and 'down' arrow keys. It manipulates posInHistory to retrieve commands from the history array.
• Autocomplete: The skidinc.console.autocomplete() function provides command and argument completion when the user presses the TAB key. It matches the current input against the commands array and the secondArgs/thirdArgs properties of related game modules.

Sources: app/js/console.js:274-307, 309-361

Typed Output Effect

The skidinc.console.print() function is responsible for writing messages to the log area. It supports an optional "typed" effect, which animates the text output as if it's being typed in real-time.

This feature is controlled by skidinc.options.typed and uses the typed.min.js library. When active, it creates a new div and uses the library to animate the text. A callback can be provided to execute code once the animation is complete. The isTyping flag is used to manage state, particularly for the auto-scroll functionality.

Sources: app/js/console.js:226-259, index.html:43

Keyboard Shortcuts

Several keyboard shortcuts are available to interact with the console and related UI elements.

Controls	Effect
TAB	Autocomplete command and gain input focus.
UP/DOWN	Navigate through commands history.
CTRL+L	Clear terminal logs.
CTRL+Q	Clear all text from the input.

Sources: index.html:289-317

Visuals and Theming

The console's output can be styled using custom HTML-like tags within the printed strings (e.g., <x>, <y>, <z>). These tags are then targeted by CSS to apply specific colors or styles.

The game supports theming, which can dramatically alter the console's appearance. For example, the "Matrix" theme changes the color scheme to the iconic green-on-black and applies a custom font.

/* app/css/themes/matrix.css:21-26 */
/* <x> for errors (green) */
.game.matrix .logs span x,
.intro.matrix .logs span x {
    color: #18FF62;
    background-color: #3c3c3c;
    font-weight: bold;
}

This CSS snippet shows how the Matrix theme re-styles the error message tag <x> to be green, fitting the theme.

Sources: app/css/themes/matrix.css:1-51

Tutorial and Game Integration

The console is a critical component of the in-game tutorial. The skidinc.tutorial module uses the console to deliver instructions and guide the player.

The following sequence diagram shows the interaction between the user, the console, and the tutorial module during the first step of the tutorial.

Furthermore, when a game is loaded, the SaveStateManager ensures the tutorial is bypassed. It directly hides the intro screen and shows the main game screen, effectively skipping the tutorial's console interaction.

Sources: src/renderer/save-manager.js:520-525, 579-623, test-tutorial-disable.html:36-81