VisualRound Widget v7

• status : complete
• version : 7.x

Illustration

Appearance of the VisualRound widget when configured to count up the rounds and stages to their respective totals.

Introduction

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.

Construction

VisualRound provides a constructor which accepts an options object.

Options

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--;
                  }
              }
          }
      });

Display Modes

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.

Setting the display mode

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.

Usecase

/*
 * 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']);

Links

• Source Code
• List of Widgets