Scoreboard Module

Scoreboard Module Click here for my 'Space Invasion!' game
Click here for my 'Breakout' game
Click here for my 'Fun with portals' code
Click here for my 'Emoji sniper' game

0

What is Scoreboard.js?

Follow the next steps for an easy installation:
(click underscored step to open)

Opening Firebase Project:

Project Configuration:

5) Click 'Authentication' (on the left navigation menu)

6) Click 'WEB SETUP' (top right corner)

7) Copy the configuration script (2nd one) to the bottom of your HTML page (just above </body> tag)

8) Close the 'WEB-SETUP' pop-up and click on 'SIGN-IN METHOD'

9) Click on 'Anonymous' and enable it

10) Click 'Database' (on the left navigation menu)

11) Click on 'RULES'

The database rules define the way you read/write data and who is allowed to.
Optional reading: Firebase Database Security Rules API
I have provided below a rules scheme which allows only to write data in the correct structure into the database.

12) Copy and paste the rules scheme shown below
(delete the old default rules)

Rules Scheme:

13) Click 'PUBLISH' to apply the rules

Scoreboard Module Usage:

First copy and paste the following scripts inside your HTML <head> tag

Required Scripts:

14) Creating a scoreboard:

To create the Scoreboard you need to first initialize it by running:

scoreboard = new Scoreboard(options);
(more about the options below)

It is highly recommended that you run this command ONLY AFTER the HTML page and included scripts are fully loaded.
You can either use <body onload='onLoadFunc()'> or window.onload=onLoadFunc or the jQuery alternative $(document).ready(function() {...});

Make sure that the scoreboard variable is declared somewhere before and is accessible from all scopes where it is used (or just put var scoreboard = null; on the top of your script)

15) Scoreboard Methods:

I) showScoreBoard();
Opens the Scoreboard dialog.
Call this method when user clicked on button to show the scoreboard.

Usage example: 'btn_show' is the id of the button which shows the scoreboard

document.getElementById('#btn_show').onclick=function(){
scoreboard.showScoreBoard();
}

II) submitNewScoreDialog(score);
Opens submit new score dialog with given score value.
Call this method once the game ended.

Usage example: 'gameOver()' is the function being called on game over event

function gameOver(){
scoreboard.submitNewScoreDialog(score);
}

16) Options:

The options are just like any other CSS element: just add to the option you want a pair structured as "cssAttribute": "cssValue"

The options are later passed to $(element).css(option) which apply them.

All Available Options + example scoreboard options:

var options=

Using custom options:

Copy the options from above and paste in your code before the scoreboard initialization.
pass the options as a paramater:

$(document).ready(function() {
// recommended to load the scoreboard only when done loading the script!!!
scoreboard = new Scoreboard(options);
});

OR using default options (if no options were passed):

$(document).ready(function() {
// recommended to load the scoreboard only when done loading the script!!!
scoreboard = new Scoreboard();
});

Experiment with different options until you are happy with the results.

You can look in this JS code init() function for usage examples

That is all!!

Please comment if you are having any troubles and feel free to give any kind of feedback :)

Scoreboard.js + Tutorial