Scoreboard.js is a personal project that I finally got around to make the final touches to. It's now a Mootools plugin here on Github.
The main reason why I started working on Scoreboard.js was to learn Mootools (yes, Scoreboard.js i built with Mootools). Also I needed a scoreboard for a game that I'm currently coding on.
It's a…ehrm…HTML scoreboard widget. It's easy to create a theme, adding a sport and has a super simple api. Besides from being a widget that displays the score, time, etc…it also contains a notification thing that you can show when someone scored, got a red card or anything really.
First of all you need a template. Scoreboard.js makes use of declarative bindings to make it easy for every one to work with. So a scoreboard template is actually plain HTML with some data bindings like this:
<article class="scoreboard" id="scoreboard">
<div class="scores">
<span class="team" data-scoreboard-bind="homeTeamName"></span>
<span class="score">
<span data-scoreboard-bind="homeTeamGoals"></span>
-
<span data-scoreboard-bind="awayTeamGoals"></span>
</span>
<span class="team" data-scoreboard-bind="awayTeamName"></span>
</div>
<span class="time" data-scoreboard-bind="time"></span>
</article>With that exact markup you have the base for a fully working scoreboard with the default theme.
Next some javascript to create the scoreboard.
var scoreboard = new Scoreboard();Finally include the necessary files:
<!-- Inside <head> -->
<link rel="stylesheet" href="source/theme.css">
<!-- Before </body> -->
<script src="vendor/mootools.js"></script>
<script src="vendor/mootools-more.js"></script>
<script src="source/Scoreboard.js"></script>There is several useful API methods to call. Here is a full list:
scoreboard.set( what, value )
Set any option/setting to the given value. If the option doesn't exist, it creates it.
scoreboard.get( what )
Returns the value of the given option/setting.
scoreboard.startTime()
Starts the timer.
scoreboard.stopTime()
Stops the timer.
scoreboard.resetTimer()
Resets the timer to default.
scoreboard.increaseTime()
Adds one second to the timer.
scoreboard.decreaseTime()
Removes one second from the timer.
scoreboard.addGoal( team )
Adds 1 goal to the given team. team should be a string containing home or away.
scoreboard.removeGoal( team )
Removes 1 goal from the given team.
scoreboard.resetGoals( team )
Reset goals for the given team to the default.
scoreboard.toJSON()
If you need to save the current state of the scoreboard, you can call the toJSON() method. That will return all data stored in the scoreboard as JSON.
scoreboard.showMessage( id, data, position )
When you need to show a message/notification you will call this method. First parameter is a string with the ID of the template (more on this further down). The second parameter is a object containing the data for the template. The last parameter is the position where you want the message to appear, possible values is the same as for the scoreboard (default is bottomCenter).
scoreboard.hideMessage()
This method will simply hide the currently showing message. Note that the message will automatically dissapear after 3 seconds (or based on the option duration).
scoreboard.applyFilter( hook, function )
More on this further down.
Every method (except get) that you call fires a event. The event os prefixed with on and the method starts with a capital letter like this:
scoreboard.addEvent('onStartTime', function () {
alert('Time started!');
});Methods that you can pass parameters to returns those in the event. Take the set (that is also a bit different, the event is called change) method:
scoreboard.addEvent('change', function ( what, value ) {
alert('The option: ' + what + ' was changed to: ' + value);
});Another example is the addGoal method that is called onScore:
scoreboard.addEvent('onScore', function ( team ) {
alert(team + ' scored!');
});There is certain filters you can use to manipulate the values in some functions. A list of available filters and a example is displayed below:
addHomeTeamGoal
addAwayTeamGoal
removeHomeTeamGoal
removeAwayTeamGoal
increaseTime
decreaseTime
To filter a value you use the applyFilter (hook, function) method. The first parameter is the hook (from the list above) and the second one is the function. In the function you will be provided with the value generated from the function the filter lives in. Use it like this:
scoreboard.applyFilter('addHomeTeamGoal', function ( goal ) {
// Logic logic logic…
return goal + 2;
});The function you set should always return a value. In the example we add 2 extra goals to the home team.
There is several options that you can set. All options are optional though, so to get it up and running you don't need to do anything. Default value is in parentheses.
element (scoreboard)
This is the ID of the main element.
position (topCenter)
You can let Scoreboard.js absolute position your scoreboard with the this option. Position can be one of these: topLeft topCenter topRight middle bottomLeft bottomCenter bottomRight. You can also set it to null and no positioning will happen.
homeTeamName (Home)
The full home team name.
awayTeamName (Away)
The full away team name.
homeTeamLogo (null)
Path to the logo for the home team.
awayTeamLogo (null)
Path to the logo for the home team.
homeTeamShort (null)
Three letter version of the home team name. If set to null the three first letters of the full name will be used.
awayTeamShort (null)
Three letter version of the away team name. If set to null the three first letters of the full name will be used.
homeTeamGoals (0)
Default goals of the home team.
awayTeamGoals (0)
Default goals of the away team.
secondLength (1000)
If you want the time to go faster or slower than a second, you can set secondLength to what you want, in ms.
time (00:00)
Default time.
timeDirection (up)
The direction of the time. Set to down if you want to count down instead of the normal direction which is up.
animationSpeed (300)
Time in ms for the message animation when showing/hiding.
duration (3000)
How long (in ms) the message should be visible.
Messages uses a javascript tempting and I've provided 4 standard views for a message, they are: Status, Goal, Booking and Substitution. You can view them in the messages demo.
A template looks like this:
<script type="text/tim" id="myMessage">
<div class="myMessage">
<span class="scoreboardData">{{scoreboard.homeTeamName}}</span>
<span class="customData">{{fo}}</span>
</div>
</script>As you can see, data values is surrounded by double brackets. If you want to use data from the scoreboard prefix it with scoreboard like this: scoreboard.time.
To show the message, you need one line of javascript:
scoreboard.showMessage('myMessage', {fo: 'bar'}, 'bottomRight');Remember to watch the source.