Skip to main content

Interface: SideLabelHotspot

Defined in: packages/core/src/passages/interactiveMap/types.ts:501

Label hotspot positioned on the edge of the map. Appears outside the main map area, on one of the four sides.

Example​

{
  type: 'label',
  content: 'Menu',
  position: 'top',
  action: () => openMenu()
}

Extends​

Properties​

action()​

action: () => void

Defined in: packages/core/src/passages/interactiveMap/types.ts:66

Callback function executed when the hotspot is clicked. Called only when the hotspot is not disabled.

Returns​

void

Example​

// Navigate to another passage
action: () => Game.jumpTo('village')

// Perform complex game logic
action: () => {
  player.gold -= 50;
  player.inventory.add('sword');
  Game.jumpTo('shop-exit');
}

Inherited from​

LabelHotspot.action

content​

content: MaybeCallable<string>

Defined in: packages/core/src/passages/interactiveMap/types.ts:169

The text to display on the button. Can be static string or a function for dynamic content.

Example​

// Static label
content: 'Enter Shop'

// Dynamic label
content: () => `Health: ${player.health}/100`
content: () => player.hasVisited ? 'Return to Town' : 'Discover Town'

Inherited from​

LabelHotspot.content

id?​

optional id: string

Defined in: packages/core/src/passages/interactiveMap/types.ts:47

Optional unique identifier for this hotspot. Can be used for debugging, analytics, or programmatic hotspot manipulation.

Example​

id: 'village-entrance'
id: 'shop-button'

Inherited from​

LabelHotspot.id

isDisabled?​

optional isDisabled: boolean | () => boolean

Defined in: packages/core/src/passages/interactiveMap/types.ts:91

Controls whether the hotspot is interactive. Can be a static boolean or a function for dynamic state.

Default Value​

false

Example​

// Static disabled state
isDisabled: true

// Dynamic based on game state
isDisabled: () => player.gold < 50
isDisabled: () => !player.hasKey

Remarks​

When disabled:

  • Hotspot cannot be clicked
  • Visual appearance changes (usually dimmed/grayed out)
  • For image hotspots, the "disabled" image variant is shown if provided
  • Tooltip still displays to explain why it's disabled

Inherited from​

LabelHotspot.isDisabled

position​

position: "top" | "bottom" | "left" | "right"

Defined in: packages/core/src/passages/interactiveMap/types.ts:484

Which edge of the map to place this hotspot.

Remarks​

Side hotspots are useful for:

  • Persistent UI elements that shouldn't overlap the map
  • Navigation controls
  • Status displays
  • Menu buttons

Multiple hotspots on the same side are stacked in order.

Inherited from​

SideHotspot.position

props?​

optional props: object

Defined in: packages/core/src/passages/interactiveMap/types.ts:174

Optional configuration for button styling and appearance.

classNames?​

optional classNames: object

CSS class name overrides.

classNames.button?​

optional button: string

CSS class for the button element.

Example​
button: 'text-lg font-bold px-6 py-3'

color?​

optional color: ButtonColor

Color scheme for the button. Maps to semantic color tokens in the UI theme.

Default Value​

"primary"

See​

ButtonColor for available options

variant?​

optional variant: ButtonVariant

Visual style variant for the button.

Default Value​

"solid"

See​

ButtonVariant for available options

Inherited from​

LabelHotspot.props

tooltip?​

optional tooltip: object

Defined in: packages/core/src/passages/interactiveMap/types.ts:97

Optional tooltip configuration. Displays additional information when hovering over the hotspot.

content​

content: MaybeCallable<string>

The text to display in the tooltip. Can be static string or a function for dynamic content.

Example​
// Static tooltip
content: 'Click to enter the village'

// Dynamic tooltip based on state
content: () => player.hasKey
  ? 'Unlock the door'
  : 'You need a key to unlock this door'

position?​

optional position: "top" | "bottom" | "left" | "right"

Position of the tooltip relative to the hotspot.

Default Value​

"top"

Inherited from​

LabelHotspot.tooltip

type​

type: "label"

Defined in: packages/core/src/passages/interactiveMap/types.ts:153

Discriminator property identifying this as a label hotspot.

Inherited from​

LabelHotspot.type