• status : complete
• version : 7.x

VisualRound is a widget to display information about the current round and stage as well as total number of rounds and stages in various ways.

VisualRound provides a constructor which accepts an options object.

The options object can have the following attributes:

• displayMode: Array of strings which determines the information displayed (see next section for details)

• stageOffset: The value for current stage is reduced by stageOffset

• totStageOffset: The value for total number of stages is reduced by totStageOffset (if not set, it is equal to stageOffset)

• flexibleMode: Set true, if number of rounds and/or stages can change dynamically

• curStage: When (re)starting in flexibleMode, sets the current stage

• curRound: When (re)starting in flexibleMode, sets the current round

• totStage: When (re)starting in flexibleMode, sets the total number of stages

• totRound: When (re)starting in flexibleMode, sets the total number of rounds

• oldStageId: When (re)starting in flexibleMode, sets the id of the current stage

• preprocess (v7.1.1+): a function that alters information about steps, rounds and stages before they are displayed; its context of execution is the current widget and it receives the following object to modify:

  // Assuming we are in stage 1.1.1, and there are 5 stages in total, // and the current stage has 2 steps and 1 round. { totRound: 1, totStep: 2, totStage: 5, curStep: 1, curStage: 1, curRound: 1 }

  For instance, to remove the second step of stage "tutorial" from the count:

  this.visualRound = node.widgets.append('VisualRound', header, { displayModeNames: [ 'COUNT_UP_STEPS_TO_TOTAL', 'COUNT_UP_STAGES_TO_TOTAL' ], preprocess: function(info) { if (node.game.isStage('tutorial')) { info.totStep--; if (info.curStep > 1) { info.curStep--; } } } });

Available modes for the displayMode array:

• COUNT_UP_STAGES: Displays only current stage number.
• COUNT_UP_ROUNDS: Displays only current round number.
• COUNT_UP_STAGES_TO_TOTAL: Displays current and total stage number.
• COUNT_UP_ROUNDS_TO_TOTAL: Displays current and total round number.
• COUNT_DOWN_STAGES: Displays number of stages left to play.
• COUNT_DOWN_ROUNDS: Displays number of rounds left in this stage.
• COUNT_UP_ROUNDS_IFNOT1: Displays current round number, only if the stage has more than one round.
• COUNT_UP_ROUNDS_TO_TOTAL_IFNOT1: Displays current and total round number, only if the stage has more than one round.

In flexibleMode the total stage and round number is unknown wherefore it is represented by a question mark.

After construction of a VisualRounds object the display mode can be changed by using VisualRound.setDisplayMode which accepts an array of display mode names such as the displayModeNames option of the constructor.

/*  * Create and add a widget to the root which displays the   * current and total stage numbers minus one.  */ var root = W.getElementById('myRoot'); var visualRound = node.widgets.append('VisualRound', root, { displayModeNames: ['COUNT_UP_STAGES_TO_TOTAL'], stageOffset: 1 }); // ... // Start displaying round information as well. visualRound.setDisplayMode(['COUNT_UP_STAGES_TO_TOTAL', 'COUNT_UP_ROUNDS_TO_TOTAL']);

• Source Code
• List of Widgets