Overview

This page briefly describes the Unit class, the heart of BitsmistJS, and serves as a gateway to more detailed explanations.

In BitmistJS, functionality is added to units by attaching what is called a perk to the unit. Units can have additional properties and methods, but the addition of properties and methods is kept to a minimum to avoid name conflicts between the functions added by the various perks. Instead, we have a container called an asset, into which each perk will add functions. Items in assets are prefixed with a period-separated perk-specific word, such as “basic.scan”, to prevent name collisions.

Each unit operates according to its settings described in JSON or Javascript object format. There are two types of settings: global settings for all units and settings specific to each unit. Unit settings and global settings are linked, so that settings not found in the unit settings are automatically obtained from the global settings. The settings are stored in “setting” asset.

The Javascript file for each unit must be loaded into the browser. There are two loading methods: autoloading and manual loading. Autoloading automatically loads the necessary files and instantiates the tag by specifying the bm-autoload attribute in the unit's tag attribute. Manual loading is done by explicitly specifying the necessary files in the script tag and loading the unit. The former is easy but requires three files to be loaded per unit by default. In the latter case, multiple units can be combined into one using, for example, Webpack.

One of the features of BitsmistJS is that it is event-driven. Events occur at various times in each unit. When an event occurs, BitmistJS prepares arguments and calls the registered event handler. By writing the event handler for each event, you create the behavior of the unit.

Each unit has one HTML file by default. The unit's HTML file must be loaded and applied to the unit (added to the node). It is possible to switch between multiple HTML files or create a unit with no HTML at all. These functions are handled by SkinPerk. In addition, the Shadow DOM is also handled by SkinPerk.

A unit uses the “basic.transform” spell during its initialization to trigger beforeTransform, doTransform, and afterTransform events.

Each unit has one CSS file by default. BitsmistJS uses Constructable Stylesheets, a standard technology for applying CSS, which allows multiple structured CSS to be applied to a unit, including common CSS and CSS specific to each unit, just by writing them in the settings. It is also possible to switch between multiple CSS or to create units that use no CSS at all. These functions are handled by StylePerk.

BitsmistJS also allows you to load and apply styles using the usual <style> tags, but you can make them more componentized using Constructable Stylesheets, which is essential when using Shadow DOM.

The unit uses the “basic.transform” spell during initialization to trigger beforeTransform, doTransform, and afterTransform events.

The core component of BitsmistJS “Unit” has few functions. Each unit can be extended in functionality by applying perks.

For example, in "Create a Sample Unit", an event handler is set in the configuration, which is handled by EventPerk. Loading and applying HTML files is done by SkinPerk.

Perk has the following functions.

• Add event handlers to the unit to perform processing at specific times.
• Add skills, spells, and inventories to the unit instance or prototype.

By default, the following perks are applied to a unit.

• BasicPerk
• EventPerk
• PerkPerk
• SettingPerk
• SkinPerk
• StatusPerk
• StylePerk
• UnitPerk