@boardzilla/core

Classes

• Action
• AdjacencySpace
• ConnectedSpaceMap
• ElementCollection
• GameElement
• FixedGrid
• Game
• HexGrid
• PieceGrid
• Piece
• Space
• SquareGrid
• Stack
• D6
• GameManager
• PlayerCollection
• Player

Actions

Argument

Ƭ Argument: SingleArgument | SingleArgument[]

An argument that can be added to an Action. Each value is chosen by player or in some cases passed from a previous action. Arguments can be:

• a number
• a string
• a boolean
• a GameElement
• a Player
• an array of one these in the case of a multi-choice selection

Defined in

boardzilla-core/src/action/action.ts:29

---

ActionStub

Ƭ ActionStub: Object

A follow-up action

Type declaration

Name	Type	Description
name	string	The name of the action, as defined in {@link Game#defineactions}.
player?	Player	The player to take this action, if different than the current player
prompt?	string	Action prompt. If specified, overrides the action.prompt in {@link Game#defineactions}.
description?	string	Description of taking the action from a 3rd person perspective, e.g. "choosing a card". The string will be automatically prefixed with the player name and appropriate verb ("is/are"). If specified, this will be used to convey to non-acting players what actions are happening.
args?	Record<string, Argument>	An object containing arguments to be passed to the follow-up action. This is useful if there are multiple ways to trigger this follow-up that have variations.

Defined in

boardzilla-core/src/action/action.ts:35

---

Board

Sorter

Ƭ Sorter<T>: keyof T | (e: T) => number | string

Either the name of a property of the object that can be lexically sorted, or a function that will be called with the object to sort and must return a lexically sortable value.

Type parameters

Name
T

Defined in

boardzilla-core/src/board/element-collection.ts:16

---

ElementFinder

Ƭ ElementFinder<T>: (e: T) => boolean | ElementAttributes<T> & { mine?: boolean ; owner?: T["player"] ; empty?: boolean } | string

A query filter can be one of 3 different forms:

• string: will match elements with this name
• function: A function that accept an element as its argument and returns a boolean indicating whether it is a match, similar to Array#filter.
• object: will match elements whose properties match the provided properties. For example, deck.all(Card, {suit: 'H'}) would match all Card elements in deck with a suit property equal to "H". There are some special property names allowed here:
  • mine: true/false whether this element belongs to the player in whose context the query is made
  • empty true/false whether this element is empty
  • adjacent true/false whether this element is adjacent by a connection to the element on which the query method was called. E.g. france.other(Country, {adjacent: true}) will match Country elements that are connected to france by Space#connectTo
  • withinDistance Similar to adjacent but uses the provided number to determine if a connection is possible between elements whose cost is not greater than the provided value

Type parameters

Name	Type
T	extends GameElement = GameElement

Defined in

boardzilla-core/src/board/element-collection.ts:42

---

Core

createGame

▸ createGame<G>(playerClass, gameClass, gameCreator): SetupFunction<G>

Create your game

Type parameters

Name	Type
G	extends Game<BaseGame, BasePlayer>

Parameters

Name	Type	Description
playerClass	Object	Your player class. This must extend Player. If you do not need any custom Player attributes or behaviour, simply put Player here. This becomes the P type generic used throughout Boardzilla.
gameClass	ElementClass<G>	Your game class. This must extend Game. If you do not need any custom Game attributes or behaviour, simply put Game here. This becomes the B type generic used throughout Boardzilla.
gameCreator	(game: G) => void	-

Returns

SetupFunction<G>

Defined in

boardzilla-core/src/game-creator.ts:32

---

Flow

union

▸ union<T>(...queries): ElementCollection<T>

Returns an ElementCollection by combining a list of GameElement's or ElementCollection's,

Type parameters

Name	Type
T	extends GameElement<BaseGame, BasePlayer>

Parameters

Name	Type
...queries	(undefined | T | ElementCollection<T>)[]

Returns

ElementCollection<T>

Defined in

boardzilla-core/src/board/index.ts:24

---

Do

• Const Do: Object

Functions for interrupting flows

These functions all interrupt the flow in some. Upon calling one, the flow will complete its current step and then proceed with whatever type of interrupt was provided.

Three of these functions are for interrupting loops: Do.break, Do.repeat, and Do.continue. They can be called from anywhere inside a looping flow (loop, whileLoop, forLoop, forEach, eachPlayer) to interrupt the flow, with each one resuming the flow differently.

Do.subflow can be called anywhere and causes the flow to jump to another subflow. When that subflow completes, the game flow will return to the current flow, at the step immediately after the one that called Do.subflow.

Do.break causes the flow to exit loop and resume after the loop, like the break keyword in Javascript.

Do.continue causes the flow to skip the rest of the current loop iteration and restart the loop at the next iteration, like the continue keyword in Javascript.

Do.repeat causes the flow to skip the rest of the current loop iteration and restart the same iteration of the loop.

Example

// each player can shout as many times as they like
eachPlayer({ name: 'player', do: (
  playerActions({ actions: [
    { name: 'shout', do: Do.repeat },
    'pass'
  ]}),
]});

// each player can decide to shout, and if so, may subsequently apologize
eachPlayer({ name: 'player', do: [
  playerActions({ actions: [
    { name: 'shout', do: Do.continue },  // if shouting, skip to the next player
    'pass'
  ]}),
  playerActions({ actions: [ 'apologize', 'pass' ] }),
]});

// each player can take a card but if the card is a match, it ends this round
eachPlayer({ name: 'player', do: (
  playerActions({ actions: [
    { name: 'takeCard', do: ({ takeCard }) => if (takeCard.card.isMatch()) Do.break() },
    'pass'
  ]}),
]});

Type declaration

Name	Type
repeat	(loop?: string | Record<string, any>) => void
continue	(loop?: string | Record<string, any>) => void
break	(loop?: string | Record<string, any>) => void
subflow	(flow: string, args?: Record<string, any>) => void

Defined in

boardzilla-core/src/flow/enums.ts:56

---

FlowArguments

Ƭ FlowArguments: Record<string, any>

Several flow methods accept an argument of this type. This is an object containing the current values of any loops or actions that the game is in the middle of. Functions that can add these values are forLoop, forEach, switchCase and playerActions. The name given to these functions will be the key used in the FlowArguments and its value will be the value of the current loop for loops, or the test value for switchCase, or the arguments to the action taken for playerActions.

Example

forLoop({
  name: 'x', // x is declared here
  initial: 0,
  next: x => x + 1,
  while: x => x < 3,
  do: forLoop({
    name: 'y', // y is declared here
    initial: 0,
    next: y => y + 1,
    while: y => y < 2,
    do: ({ x, y }) => {
      // x is available here as the value of the outer loop
      // and y will be the value of the inner loop
    }
  })
})

Defined in

boardzilla-core/src/flow/flow.ts:45

---

FlowStep

Ƭ FlowStep: Flow | (args: FlowArguments) => any

FlowStep's are provided to the game and to all flow function to provide further flow logic inside the given flow. Any of the follow qualifies:

• a plain function that accepts FlowArguments
• one of the Game#flowCommands

Defined in

boardzilla-core/src/flow/flow.ts:54

---

FlowDefinition

Ƭ FlowDefinition: FlowStep | FlowStep[]

FlowDefinition's are provided to the game and to all flow function to provide further flow logic inside the given flow. Any of the follow qualifies:

• a plain function that accepts FlowArguments
• one of the Game#flowCommands
• an array of any combination of the above

Defined in

boardzilla-core/src/flow/flow.ts:64

---

playerActions

▸ playerActions(options): default

Stop the flow and wait for a player to act.

Parameters

Name	Type	Description
options	Object	-
options.name?	string	A unique name for this player action. If provided, this can be used for the UI to determine placement of messages for this action in Game#layoutStep.
options.players?	Player<BaseGame, BasePlayer>[] | (args: Record<string, any>) => Player<BaseGame, BasePlayer>[]	Which players can perform this action, if multiple.
options.player?	Player<BaseGame, BasePlayer> | (args: Record<string, any>) => Player<BaseGame, BasePlayer>	Which player can perform this action. If not provided, this defaults to the current player
options.actions	(string | { name: string ; prompt?: string | (args: Record<string, any>) => string ; args?: Record<string, Argument> | (args: Record<string, any>) => Record<string, Argument> ; do?: FlowDefinition })[]	An array of possible actions. Each action can be either a string or on object. If a string, it is the name of the action as defined in Game#defineActions. If an object, it consists of the following keys: name: the name of the action do: a further FlowDefintion for the game to run if this action is taken. This can contain any number of nested Flow functions. args: args to pass to the action, or function returning those args. If provided this pre-selects arguments to the action that the player does not select themselves. Also see game#action and game#followUp. prompt: a string prompt, or function returning a string. If provided this overrides the prompt defined in the action. This can be useful if the same action should prompt differently at different points in the game
options.prompt?	string | (args: Record<string, any>) => string	A prompting message for the player to decide between multiple actions that involve clicking on the board. For example, if a player can choose between playing a card from hand, or drawing from the deck, this text can contain a single prompt that indicates this. This is used only if multiple such selections are available and replaces the individual action prompts. May be a string or a function accepting FlowArguments.
options.condition?	(args: Record<string, any>) => boolean	-
options.continueIfImpossible?	boolean	Include this option to make this action automatically skip if none of the actions are possible, either due to the action.condition or due to no valid selections being current available in the game.
options.repeatUntil?	string | (args: Record<string, any>) => string	Include this option to make this action repeatable until the player passes. The pass prompt will be the supplied string, similar to optional
options.description?	string	A description of this step from a 3rd person perspective, e.g. "choosing a card". The string will be automatically prefixed with the player name and verb. If specified, will be used to convey to non-acting players what step is happening.
options.optional?	string | (args: Record<string, any>) => string	If a string is passed, this becomes a prompt players can use to 'pass' this step, performing no action and letting the flow proceed. May be a string or a function accepting FlowArguments
options.skipIf?	"always" | "never" | "only-one"	One of 'always', 'never' or 'only-one' (Default 'always'). only-one: If there is only valid choice in the choices given, the game will skip this choice, prompting the player for subsequent choices, if any, or completing the action otherwise. always: Rather than present this choice directly, the player will be prompted with choices from the next choice in each action here, essentially expanding the choices ahead of time to save the player a step. never: Always present this choice, even if the choice is forced

Returns

default

Defined in

boardzilla-core/src/flow/index.ts:100

---

whileLoop

▸ whileLoop(options): default

Create a loop that continues until some condition is true. This functions like a standard while loop.

Parameters

Name	Type	Description
options	Object	-
options.while	(a: FlowArguments) => boolean	Either a simple boolean value or a condition function that must return true for the loop to continue. If this evaluates to false when the loop begins, it will be skipped entirely. The condition will be evaluated at the start of each loop to determine whether it should continue.
options.do	FlowDefinition	The part that gets repeated. This can contain any type of FlowDefintion, a list of functions, or more Flow commands. The functions Do.repeat, Do.break or Do|Do.continue, can also be used here to cause the current loop to be interupted.

Returns

default

Example

whileLoop({ while: () => !bag.isEmpty(), do: (
  playerActions({ actions: {
    takeOneFromBag: null,
  }}),
)});

Defined in

boardzilla-core/src/flow/index.ts:126

---

loop

▸ loop(...block): default

Create a loop that continues until Do.break is called

Parameters

Name	Type
...block	FlowStep[]

Returns

default

Example

loop(playerActions({ actions: [
  'takeOneFromBag',
  { name: 'done', do: Do.break }
]}));

Defined in

boardzilla-core/src/flow/index.ts:145

---

forLoop

▸ forLoop<T>(options): default<T>

Create a loop that sets a value and continues until that value meets some condition. This functions like a standard for loop.

Type parameters

Name	Type
T	Serializable

Parameters

Name	Type	Description
options	Object	-
options.name	string	The current value of the loop variable will be added to the FlowArguments under a key with this name.
options.initial	T | (a: FlowArguments) => T	The initial value of the loop variable
options.next	(a: T) => T	A function that will be run on each loop and must return the new value of the loop variable
options.while	(a: T) => boolean	A condition function that must return true for the loop to continue. If this evaluates to false when the loop begins, it will be skipped entirely. The condition will be evaluates at the start of each loop to determine whether it should continue.
options.do	FlowDefinition	The part that gets repeated. This can contain any type of FlowDefintion, a list of functions, or more Flow commands. The functions Do.repeat, Do.break or Do|Do.continue, can also be used here to cause the current loop to be interupted.

Returns

default<T>

Example

forLoop({
  name: 'x',
  initial: 0,
  next: x => x + 1,
  while: x => x < 3,
  do: ({ x }) => {
    // do something 3 times
  }
})

Defined in

boardzilla-core/src/flow/index.ts:183

---

forEach

▸ forEach<T>(options): default<T>

Create a loop that iterates over an array. This functions like a standard Array#forEach method.

Type parameters

Name	Type
T	extends Serializable

Parameters

Name	Type	Description
options	Object	-
options.name	string	The current value of collection will be added to the FlowArguments under a key with this name.
options.collection	T[] | (a: FlowArguments) => T[]	A collection of values to loop over. This can be declared as an array or as a method that accept the FlowArguments used up to this point in the flow and return the collection Array. This expression is evaluated only once at the start of the loop.
options.do	FlowDefinition	The part that gets repeated. This can contain any type of FlowDefintion, a list of functions, or more Flow commands. The functions Do.repeat, Do.break or Do|Do.continue, can also be used here to cause the current loop to be interupted.

Returns

default<T>

Example

forEach({ name: 'card', collection: () => deck.all(Card), do: [
  // show each card from the deck to player in turn
  ({ card }) => card.showTo(player),
  playerActions({ actions: [
    'chooseCard',
    'pass',
  ]}),
]});

Defined in

boardzilla-core/src/flow/index.ts:215

---

eachPlayer

▸ eachPlayer(options): default<Player<BaseGame, BasePlayer>>

Create a loop that iterates over each player. This is the same as forEach with the additional behaviour of setting the current player on each iteration of the loop.

Parameters

Name	Type	Description
options	Object	-
options.name	string	The current player will be added to the FlowArguments under a key with this name.
options.startingPlayer?	Player<BaseGame, BasePlayer> | (a: FlowArguments) => Player<BaseGame, BasePlayer>	Declare the player to start the loop. If not specified, this will be the first player in turn order.
options.nextPlayer?	(p: Player<BaseGame, BasePlayer>) => Player<BaseGame, BasePlayer>	Declare a method to select the next player. If not specified this will follow turn order. See PlayerCollection#sortby for more information.
options.turns?	number	If specified, loop through each play this many times. Default is 1.
options.continueUntil?	(p: Player<BaseGame, BasePlayer>) => boolean	If specified, rather than loop through each player for a certain number of turns, the loop will continue until the provided condition is true. This function accepts the player for the current loop as its only argument.
options.do	FlowDefinition	The part that gets repeated for each player. This can contain any type of FlowDefintion, a list of functions, or more Flow commands. The functions Do.repeat, Do.break or Do|Do.continue, can also be used here to cause the current loop to be interupted.

Returns

default<Player<BaseGame, BasePlayer>>

Example

eachPlayer({ name: 'biddingPlayer', do: // each player in turn has a chance to bid
  playerActions({ actions: [ 'bid', 'pass' ] })
});

Defined in

boardzilla-core/src/flow/index.ts:253

---

ifElse

▸ ifElse(options): default

Provides a branching flow on a condition. This operates like a standard if... else

Parameters

Name	Type	Description
options	Object	-
options.name?	string	-
options.if	(r: Record<any, any>) => boolean	Condition to test for true/false. This function accepts all FlowArguments.
options.do	FlowDefinition	The part that gets run if the condition is true. This can contain any type of FlowDefintion, a list of functions, or more Flow commands. The functions Do.repeat, Do.break or Do|Do.continue, can also be used here to cause the current loop to be interupted.
options.else?	FlowDefinition	As do, but runs if the condition is false. Optional.

Returns

default

Defined in

boardzilla-core/src/flow/index.ts:272

---

switchCase

▸ switchCase<T>(options): default<T>

Provides a branching flow on a condition with multiple outcomes. This operates like a standard switch... case

Type parameters

Name	Type
T	extends Serializable

Parameters

Name	Type	Description
options	Object	-
options.name?	string	If a name is provided, the value that results from evaluating switch will be added to the FlowArguments under a key with this name.
options.switch	T | (a: FlowArguments) => T	Expression to evaluate for determining which case should run. This function accepts all FlowArguments.
options.cases	SwitchCaseCases<T>	An array of conditions that will test whether they meet the conditions based on the evaluated switch and execute their do block. The case block can contain an eq which will test for equality with a provided value, or test which will test the value using a provided function that must return a boolean. Only the first one that meets the condition will run. The do can contain any type of FlowDefintion.
options.default?	FlowDefinition	If no case qualifies, a default case can be provided.

Returns

default<T>

Example

switchCase({
  name: 'switch',
  switch: () => deck.top(Card)?.suit,
  cases: [
    { eq: 'D', do: () => { /* ... diamonds */ } },
    { eq: 'H', do: () => { /* ... hearts */ } },
    { eq: 'S', do: () => { /* ... spades */ } },
    { eq: 'C', do: () => { /* ... clubs */ } },
  ],
  default: () => { /* ... there is no card */ }
})

Defined in

boardzilla-core/src/flow/index.ts:310

---

everyPlayer

▸ everyPlayer(options): default<Player<BaseGame, BasePlayer>>

Create a flow for a set of players that can be done by all players simulataneously in any order. This is similiar to eachPlayer except that the players can act in any order.

Parameters

Name	Type	Description
options	Object	-
options.players?	Player<BaseGame, BasePlayer>[]	Declare the players to perform this do. If not specified, this will be all players.
options.do	FlowDefinition	The part that each player can perform. This can contain any type of FlowDefintion, a list of functions, or more Flow commands. Each player will go through the defined flows individually and may be at difference stages. The flow will complete when all players have completed this flow. If Do.repeat, Do.break or Do|Do.continue is called, the current loop can be interupted, regardless of what the other players have done.
options.name?	string	The player acting will be added to the FlowArguments under a key with this name for flows within this do.

Returns

default<Player<BaseGame, BasePlayer>>

Example

everyPlayer({ name: 'passCardPlayer', do: ( // each player selects a card from hand or passes
  playerActions({ actions: [ 'selectCard', 'pass' ]}),
]});

Defined in

boardzilla-core/src/flow/index.ts:338

Other

Flippable

▸ Flippable(«destructured»): Element

A Piece with two sides: front and back. When the Piece is hidden, the back is shown. When visible, the front is shown. When the visibility changes, the CSS animates a 3d flip.

Parameters

Name	Type
«destructured»	Object
› children?	ReactNode

Returns

Element

Example

import { Flippable } from '@boardzilla/core/components';
...
  Piece.appearance({
    render: piece => (
      <Flippable>
        <Flippable.Front>{piece.name}</Flippable.Front>
        <Flippable.Back></Flippable.Back>
      </Flippable>
    );
  });
// The DOM structure inside the Piece element will be:
  <div class="bz-flippable">
    <div class="front">{piece.name}</div>
    <div class="back"></div>
  </div>

Defined in

boardzilla-core/src/components/flippable/Flippable.tsx:27

UI

Box

Ƭ Box: Object

A Box size and position relative to a container

Type declaration

Name	Type
left	number
top	number
width	number
height	number

Defined in

boardzilla-core/src/board/element.ts:55

---

Vector

Ƭ Vector: Object

An (x, y) Vector

Type declaration

Name	Type
x	number
y	number

Defined in

boardzilla-core/src/board/element.ts:60

---

LayoutAttributes

Ƭ LayoutAttributes: Object

List of attributes used to create a new layout in GameElement#layout.

Type declaration

Name	Type	Description
margin?	number | { top: number ; bottom: number ; left: number ; right: number }	Instead of providing area, providing a margin defines the bounding box in terms of a margin around the edges of this element. This value is an absolute percentage of the board's size so that margins specified on different layouts with the same value will exactly match.
area?	Box	A box defining the layout's bounds within this element. Unless size is set too large, no elements will ever overflow this area. If unspecified, the entire area is used, i.e. { left: 0, top: 0, width: 100, height: 100 }
rows?	number | { min: number ; max?: number } | { min?: number ; max: number }	The number of rows to allot for placing elements in this layout. If a number is provided, this is fixed. If min/max values are provided, the layout will allot at least min and up to max as needed. If min is omitted, a minimum of 1 is implied. If max is omitted, as many are used as needed. Default is no limits on either.
columns?	number | { min: number ; max?: number } | { min?: number ; max: number }	Columns, as per rows
slots?	Box[]	If supplied, this overrides all other attributes to define a set of strictly defined boxes for placing each element. Any elements that exceed the number of slots provided are not displayed.
size?	{ width: number ; height: number }	Size alloted for each element placed in this layout. Overrides scaling and all defined aspect ratios for these elements, fixing the size for each element at the specified size.
size.width	number	-
size.height	number	-
aspectRatio?	number	Aspect ratio for each element placed in this layout. This value is a ratio of width over height. Elements will adhere to this ratio unless they have their own specified aspectRatio in their GameElement#appearance. This value is ignored if size is provided.
scaling?	"fit" | "fill"	Scaling strategy for the elements placed in this layout. - fit: Elements scale up or down to fit within the area alloted without squshing - fill: Elements scale up or down to completely fill the area, squishing themselves together as needed along one dimension.
gap?	number | { x: number ; y: number }	If provided, this places a gap between elements. If scaling is 'fill', this is considered a maximum but may shrink or even become negative in order to fill the area. This value is an absolute percentage of the board's size so that gaps specified on different layouts with the same value will exactly match
alignment	"top" | "bottom" | "left" | "right" | "top left" | "bottom left" | "top right" | "bottom right" | "center"	If more room is provided than needed, this determines how the elements will align themselves within the area.
offsetColumn?	Vector | number	Instead of gap, providing an offsetColumn/offsetRow specifies that the contained elements must offset one another by a specified amount as a percentage of the elements size, i.e. offsetColumn=100 is equivalent to a gap of 0. This allows non-orthogonal grids like hex or diamond. If one of offsetColumn/offsetRow is provided but not the other, the unspecified one will be 90° to the one specified. Like gap, if scaling is set to fill, these offsets may squish to fill space.
offsetRow?	Vector | number	As offsetColumn
direction	"square" | "ltr" | "rtl" | "rtl-btt" | "ltr-btt" | "ttb" | "ttb-rtl" | "btt" | "btt-rtl"	Specifies the direction in which elements placed here should fill up the rows and columns of the layout. Rows or columns will increase to their specified maximum as needed. Therefore if, for example, direction is "ltr" and columns has no maximum, there will never be a second row added. Values are: - square: fill rows and columns equally to maintain as square a grid as possible (default) - ltr: fill columns left to right, then rows top to bottom once maximum columns reached - rtl: fill columns right to left, then rows top to bottom once maximum columns reached - ltr-btt: fill columns left to right, then rows bottom to top once maximum columns reached - rtl-btt: fill columns right to left, then rows bottom to top once maximum columns reached - ttb: fill rows top to bottom, then columns left to right once maximum rows reached - btt: fill rows bottom to top, then columns left to right once maximum rows reached - ttb-rtl: fill rows top to bottom, then columns right to left once maximum rows reached - btt-rtl: fill rows bottom to top, then columns right to left once maximum rows reached
limit?	number	If specified, no more than limit items will be visible. This is useful for displaying e.g. decks of cards where showing only 2 or 3 cards provides a deck-like appearance without needed to render more cards underneath that aren't visible.
maxOverlap?	number	If scaling is "fill", this will limit the total amount of overlap if elements are squished together in their space before they will start to shrink to fit. This is useful for e.g. cards that can overlap but that must leave a certain amount visible to clearly identify the card.
haphazardly?	number	A number specifying an amount of randomness added to the layout to provide a more natural looking placement
sticky?	boolean	Set to true to prevent these elements from automatically changing position within the container grid.
showBoundingBox?	string | boolean	Set to true for debugging. Creates a visible box on screen around the defined area, tagged with the provided string.
__container__?	{ type: "drawer" | "popout" | "tabs" ; attributes: Record<string, any> ; id?: string ; key?: string }	-
__container__.type	"drawer" | "popout" | "tabs"	-
__container__.attributes	Record<string, any>	-
__container__.id?	string	-
__container__.key?	string	-

Defined in

boardzilla-core/src/board/element.ts:93

---

ActionLayout

Ƭ ActionLayout: Object

Type for layout of player controls

Type declaration

Name	Type	Description
element	GameElement	The element to which the controls will anchor themselves
width?	number	Maximum width of the controls as a percentage of the anchor element
height?	number	Maximum height of the controls as a percentage of the anchor element
noAnchor?	string[]	Boardzilla will automatically anchor the controls to GameElement's selected as part of the action. Include the name of the selection here to prevent that behaviour.
position?	"inset" | "beside" | "stack"	Position of the controls inset: Inside the element beside: To the left or right of the element stack: Above or below the element
left?	number	Distance from the left edge of the anchor element as a percentage of the element's width
right?	number	Distance from the right edge of the anchor element as a percentage of the element's width
center?	number	Distance from the top edge of the anchor element as a percentage of the element's height
top?	number	Distance from the left edge of the anchor element to the center of the controls as a percentage of the element's width
bottom?	number	Distance from the bottom edge of the anchor element as a percentage of the element's height
gap?	number	For 'beside' or 'stack', gap is the distance between the controls and the element as a percentage of the entire board's size.

Defined in

boardzilla-core/src/board/game.ts:35

---

ProfileBadge

▸ ProfileBadge(«destructured»): Element

Component for rendering a Player's name and avatar in their color. Also capture online status and displays (as className "online") and flashes when the player is the current player (className "current").

Parameters

Name	Type
«destructured»	Object
› player	Player<BaseGame, BasePlayer>

Returns

Element

Defined in

boardzilla-core/src/ui/game/components/ProfileBadge.tsx:14

---

render

▸ render<G>(setup, options): void

The core function called to customize the game's UI.

Type parameters

Name	Type
G	extends Game<BaseGame, BasePlayer>

Parameters

Name	Type	Description
setup	SetupFunction<G>	-
options	Object
options.settings?	Record<string, (p: SetupComponentProps) => Element>	Define your game's settings that the host can customize. This is an object consisting of custom settings. The key is a name for this setting that can be used in Game#setting to retrieve the setting's value for this game. The object is the result of calling one of the setting functions toggleSetting, numberSetting, textSetting or choiceSetting.
options.boardSizes?	BoardSizeMatcher[]	An array of possible boardsizes depending on the device type and viewport of the player. Each item in the list is a possible board size and must include at least a unique name and an aspectRatio. When a player joins, or resizes their screen, a layout will be chosen that meets the conditions given and is the closest fit. name: A unique name used to identify this board size. The name of the layout chosen for the player will be passed to the layout function below. aspectRatio: The aspect ratio for this board size. Either a number (width / height), or an object with keys min and max with numbers that give a a possible range of aspect ratios. If providing a range, any aspect ratio within the range could be selected if it's a match for the player's viewport. You must ensure your game layout looks correct for the entire range provided. mobile: If true, this layout will only be used for mobile devices. If false, this layout will not be used for mobile devices. If blank, it may be used in any case. desktop: If true, this layout will only be used for desktop screens. If false, this layout will not be used for desktop. If blank, it may be used in any case. orientation: If supplied, the layout will match a mobile screen size if either orientation matches the aspect ratio. if chosen as the best match board size, the player's screen will be locked to the given orientation. scaling: Specifies how the screen should fit the board if it is not a perfect fit for the aspect ratio. If 'fit' the board size will be fit within the screen, with blank space on the sides or top and bottom. If 'scroll', the board will be fit to maximize it's space and scroll vertically or horizontally.
options.layout?	(game: G, player: NonNullable<G["player"]>, boardSize: string) => void	A function for declaring all UI customization in the game. The function will receives 3 arguments: game: The Game instance. player: The Player who is viewing. boardSize: The name of the selected boardSize from above. Typically this will include calls to GameElement#layout, GameElement#appearance, Game#layoutStep and Game#layoutAction.
options.announcements?	Record<string, (game: G) => Element>	A list of announcements. Each is a function that accepts the Game object and returns the JSX of the announcement. These can be called from Game#announce or Game#finish.
options.infoModals?	{ title: string ; modal: (game: G) => Element }[]	A list of informational panels that appear in the info sidebar. Each is an object with: title: The title shown in the sidebar modal: a function that accepts the Game object and returns the JSX of the modal. condition: An optional condition function that accepts the Game object and returns as a boolean whether the modal should be currently available

Returns

void

Defined in

boardzilla-core/src/ui/index.tsx:91

---

toggleSetting

▸ toggleSetting(label, initial?): (__namedParameters: SetupComponentProps) => Element

Provide a game setting that can be turned on or off.

Parameters

Name	Type	Default value	Description
label	string	undefined	Text label to appear next to the toggle
initial	boolean	false	The default toggle state

Returns

fn

▸ («destructured»): Element

Parameters

Name	Type
«destructured»	SetupComponentProps

Returns

Element

Defined in

boardzilla-core/src/ui/setup/components/settingComponents.tsx:18

---

choiceSetting

▸ choiceSetting(label, choices, initial?): (__namedParameters: SetupComponentProps) => Element

Provide a game setting that can be selected from a list of options.

Parameters

Name	Type	Description
label	string	Text label to appear next to the option list
choices	Record<string, string>	List of choices as key-value pairs, where the value will be the text choice for the host and the key will the result of calling Game#setting
initial?	string	The key of preselected choice

Returns

fn

▸ («destructured»): Element

Parameters

Name	Type
«destructured»	SetupComponentProps

Returns

Element

Defined in

boardzilla-core/src/ui/setup/components/settingComponents.tsx:40

---

textSetting

▸ textSetting(label, initial?): (__namedParameters: SetupComponentProps) => Element

Provide a game setting that can be entered as text.

Parameters

Name	Type	Default value	Description
label	string	undefined	Text label to appear next to the text box
initial	string	""	The initial text to appear by default

Returns

fn

▸ («destructured»): Element

Parameters

Name	Type
«destructured»	SetupComponentProps

Returns

Element

Defined in

boardzilla-core/src/ui/setup/components/settingComponents.tsx:62

---

numberSetting

▸ numberSetting(label, min, max, iniital?): (__namedParameters: SetupComponentProps) => Element

Provide a game setting that can be selected as a number.

Parameters

Name	Type	Description
label	string	Text label to appear next to the number select
min	number	The minimum number allowed
max	number	The maximum number allowed
iniital?	number	-

Returns

fn

▸ («destructured»): Element

Parameters

Name	Type
«destructured»	SetupComponentProps

Returns

Element

Defined in

boardzilla-core/src/ui/setup/components/settingComponents.tsx:83