VisualTimer Widget v7

• status : complete
• version : 6.x

Illustration

Appearance of the VisualTimer widget before and after waiting has started.

Introduction

VisualTimer displays a countdown timer (less than one hour) and can periodically trigger events.

It is responsive to PAUSE and RESUME events.

Main Options

• startOnPlaying: if TRUE, at every new step (more precisely, at every new PLAYING event), the step property timer is read and timer restarted.
• stopOnDone: if TRUE, when node.done() is called the timer is stopped.
• waitBoxOptions: an option object to be passed to TimerBox.
• mainBoxOptions: an option object to be passed to TimerBox.

Any options that can be passed to a GameTimer object is available. In particular:

• milliseconds: total number of milliseconds for countdown; if undefined the wait timer will start with the current time left.
• timeup: a function to call, or an event to fire when the timer expires.

Main Methods

• startTiming(opts): starts the timer and changes appearance to a regular countdown. The mainBox will be unstriked and set active, the waitBox will be hidden. The options object is passed to VisualTimer.restart.
• startWaiting(opts): stops the timer and changes the appearance to a max. wait timer. The mainBox will be striked out, the waitBox set active and unhidden. This function call accepts an options object. The options object is passed to VisualTimer.restart.
• switchActiveBoxTo: accepts a TimerBox as argument, stores gameTimer.timeLeft into activeBox and then switches activeBox the argument.
• setToZero: stops the timer, sets it to zero, and strikes it.

Listeners

The following list shows the events that a VisualTimer listens to and how it reacts.

• PLAYING: if the startOnPlaying option is true, VisualTimer.startTiming is called.
• REALLY_DONE: if the stopOnDone option is true, the timer is stopped.

Nested Classes

• TimerBox: wrapper class containing the div where the timer is displayed. Available options:

• hideTitle: Flag which indicates whether to hide the title by default.

• hideBody: Flag which indicates whether to hide the body by default.

• hideBox: Flag which indicates whether to hide the title by default.

• title: Title of the TimerBox.

• classNameTitle: Class name of the title div.

• classNameBody: Class name of the body div.

• timeLeft: Time left initially.

Usecase

Create the widget

var root = W.getHeader() || document.body;
node.game.visualTimer = node.widgets.append('VisualTimer', root);

Add a hook to the timer to display the timer in an additional location

The hook is a function executed at every update (default: every second).

// Element must exist.
var startsIn = W.getElementById('game-starts-in');
// We access the nested Timer object and add a hook.
node.game.visualTimer.gameTimer.addHook({
   hook: function() {
       startsIn.innerHTML = 'Game starts in ' + Math.floor(this.timeLeft/1000) + ' seconds';
   },
   ctx: node.game.visualTimer.gameTimer,
   name: 'extraTimer'
});

To remove the hook:

node.game.visualTimer.gameTimer.removeHook('extraTimer');

Links

• Source Code
• Source Code for Timer
• List of Widgets