Esposter

Clicker Types

The clicker type is a pure theming layer: switching between Default, Magical, and Physical (the toolbar selectors) instantly reskins the item's name, plural name, SVG icon, and color everywhere — page title, store text, stats — without touching any game state except the saved type field.

How it works

Constant maps in app/services/clicker/properties/ key every display property by ClickerType: NameMap / PluralNameMap (what a point is called), IconComponentMap (the SVG component rendered as the clickable item), and getColorMap (theme-aware color per type, resolved from the colors store).

Flavor text in the content maps is written once with compiled variablesBuildingMap descriptions embed compileVariable("pluralName") placeholders, and useDecompileString substitutes the active type's properties reactively at render time. One content set therefore serves all three themes.

The chosen type is part of the save (clicker.type), so it persists like any other purchase and its change triggers an immediate save through the virtualClicker watch.

Key files

Paths relative to packages/app.

FileRole
shared/models/clicker/data/ClickerType.tsthe type enum + schema
app/services/clicker/properties/NameMap.tstype → point name (with plural + icon + color siblings)
app/composables/clicker/useDecompileString.tsreactive flavor-text variable substitution
app/components/Clicker/Model/ItemTypeSelectors.vuetoolbar type switcher
shared/services/compiler/compileVariable.tsthe shared compile/decompile variable format