LevelSelectionButtonGroup¶

Overview¶

LevelSelectionButtonGroup is a group of related LevelSelectionButtons, used in games.

Responsibilities include: - Instantiation of the buttons, based on an 'items' array that describes the buttons. - Setting an effective uniform size for the button icons. - Layout of the buttons, see details below. - Support for the gameLevels query parameter, via LevelSelectionButtonGroupOptions.gameLevels.

Layout: - The default layout is a single row of buttons, customizable via LevelSelectionButtonGroupOptions.flowBoxOptions. - To create multiple rows of buttons, see example MultiRowButtonGroup in demoLevelSelectionButtonGroup.ts. - To create a custom layout, see example XButtonGroup in demoLevelSelectionButtonGroup.ts.

@author Chris Malley (PixelZoom, Inc.)

Class LevelSelectionButtonGroup¶

import { LevelSelectionButtonGroup } from 'scenerystack/vegas';

Constructor¶

new LevelSelectionButtonGroup( items : LevelSelectionButtonGroupItem[], providedOptions? : LevelSelectionButtonGroupOptions )¶

Instance Methods¶

focusLevelSelectionButton( level : number )¶

Sets the focus to the button associated with a specified level number. If your simulation supports keyboard traversal, you'll typically need to call this when returning to the UI that show the LevelSelectionButtonGroup, for example, when the 'Back' or 'Start Over' button is pressed in a game. @param level - numbered starting from 1, to comply with gameLevels query parameter

Type LevelSelectionButtonGroupItem¶

Describes one LevelSelectionButton

import type { LevelSelectionButtonGroupItem } from 'scenerystack/vegas';

• icon: Node
  The icon displayed on the button
• scoreProperty: TProperty<number>
  The score displayed on the button
• tandemName?: string
  Name used when creating the button's tandem, defaults to level${N}Button
• options?: StrictOmit<LevelSelectionButtonOptions, "tandem" | "buttonHeight" | "buttonWidth">
  Options for the button. These will override LevelSelectionButtonGroupOptions.levelSelectionButtonOptions. Setting tandem is the responsibility of the group, so it is omitted here.

Type LevelSelectionButtonGroupOptions¶

import type { LevelSelectionButtonGroupOptions } from 'scenerystack/vegas';

• levelSelectionButtonOptions?: StrictOmit<LevelSelectionButtonOptions, "tandem" | "buttonHeight" | "buttonWidth">
  Options for all LevelSelectionButton instances in the group. These can be overridden for specific button(s) via LevelSelectionButtonGroupItem.options.
• flowBoxOptions?: StrictOmit<FlowBoxOptions, "children">
  Options for the default layout, which is a FlowBox. Ignored if createLayoutNode is provided.
• createLayoutNode?: ( buttons: LevelSelectionButton[] ) => LayoutNode<NodeLayoutConstraint>
  Creates the Node that handles layout of the buttons. Use this option if you have a custom layout that cannot be achieved using the default FlowBox.
• gameLevels: number[]
  Game levels whose buttons should be visible. Levels are numbered starting from 1. Set this to the value of the gameLevels query parameter, a required query parameter. See getGameLevelsSchema.ts and example use in FMWQueryParameters.
• groupButtonHeight?: number
• groupButtonWidth?: number
• & StrictOmit<NodeOptions, "children"> & PickRequired<NodeOptions, "tandem">

Source Code¶

See the source for LevelSelectionButtonGroup.ts in the vegas repository.