Leaderboard

Introduction

Descending sort scores, using firebase-firestore.

  • Author: Rex

Usage

Sample code

Install plugin

Load minify file

  • Add Firebase SDKs
    <body>
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
        <script src="/__/firebase/7.7.0/firebase-app.js"></script>
        <!-- Add Firebase products that you want to use -->
        <script src="/__/firebase/7.7.0/firebase-firestore.js"></script>
    </body>    
    
  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);
    
  • Initialize firebase application.
    firebase.initializeApp({
       apiKey: '...',
       authDomain: '...',
       databaseURL: '...',
       projectId: '...',
       storageBucket: '...',
       messagingSenderId: '...'
    })
    
  • Add leader-board object
    var leaderBoard = scene.plugins.get('rexfirebaseplugin').add.leaderBoard(config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Add Firebase SDKs
    <body>
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
        <script src="/__/firebase/7.7.0/firebase-app.js"></script>
        <!-- Add Firebase products that you want to use -->
        <script src="/__/firebase/7.7.0/firebase-firestore.js"></script>
    </body>    
    
  • Install plugin in configuration of game
    import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexFirebase',
                plugin: FirebasePlugin,
                start: true
            }]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Initialize firebase application.
    firebase.initializeApp({
       apiKey: '...',
       authDomain: '...',
       databaseURL: '...',
       projectId: '...',
       storageBucket: '...',
       messagingSenderId: '...'
    })
    
  • Add leader-board object
    var leaderBoard = scene.plugins.get('rexFirebase').add.leaderBoard(config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Add Firebase SDKs
    <body>
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
        <script src="/__/firebase/7.7.0/firebase-app.js"></script>
        <!-- Add Firebase products that you want to use -->
        <script src="/__/firebase/7.7.0/firebase-database.js"></script>
    </body>    
    
  • Initialize firebase application.
    firebase.initializeApp({
       apiKey: '...',
       authDomain: '...',
       databaseURL: '...',
       projectId: '...',
       storageBucket: '...',
       messagingSenderId: '...'
    })
    
  • Import class
    import { LeaderBoard } from 'phaser3-rex-plugins/plugins/firebase-components.js';
    
  • Add leader-board object
    var leaderBoard = new LeaderBoard(config);
    

Create instance

var leaderBoard = scene.plugins.get('rexFirebase').add.leaderBoard({
    root: '',
    // timeFilters: false,
    // timeFilterType: 'year',
    // pageItemCount: 100,
    // boardID: undefined,
    // tag: undefined
});
  • root : Collection name of this leaderboard.
  • timeFilters : Time filter of day/week/month/year.
    • false : Don't use any time filter.
    • true : Enable all time filters.
    • JSON object, enable some time filters.
      {
          day: true,
          week: true,
          month: true,
          year: true
      }
      
  • timeFilterType : Type of time filter.
    • 'day', or 'd' : Filter scores by current day.
    • 'week', or 'w' : Filter scores by current week.
    • 'month', 'm' : Filter scores by current month.
    • 'year', 'y' : Filter scores by current year. Default value.
  • pageItemCount : Item count of a page, default value is 100
  • boardID : Board ID, optional.
  • tag : Custom tag, optional.

Time filter enabled

Add indexes if time filter is enabled.
- tagD(ascending), scoreD(descending), boardID(ascending), tag(ascending)
- tagW(ascending), scoreW(descending), boardID(ascending), tag(ascending)
- tagM(ascending), scoreM(descending), boardID(ascending), tag(ascending)
- tagY(ascending), scoreY(descending), boardID(ascending), tag(ascending)

Post score

  1. Set user.
    leaderBoard.setUser(userID, userName);
    
    or
    leaderBoard.setUser({
        userID: userID,
        userName: userName
    });
    
    • userID : User ID.
    • userName : Display name of user, optional.
  2. Set board property, optional.
    • Board ID
      leaderBoard.setBoardID(boardID);
      
    • Custom tag
      leaderBoard.setTag(tag);
      
  3. Post score
    leaderBoard.post(score)
    // leaderBoard.post(score, extraData)
    // leaderBoard.post(score, extraData, timestamp)
        .then(function(record) { })
        .catch(function(error) { })
    
    • score : A number, scores will be sorted descend.
    • extraData : Extra data in JSON format.
    • timestamp : Timestamp of posting.
      • undefined : Current time.
      • A number : For debug usage

Get my score

leaderBoard.getScore()
// leaderBoard.getScore(userID)
    .then(function(score) { })
    .catch(function(error) { })
  • userID : User ID, optional.
    • undefined : Current user ID.
  • score : Score object.
    • Time filter enabled : {userID, scoreD, scoreW, scoreM, scoreY, tagD, tagW, tagM, tagY}
      • scoreD, scoreW, scoreM, scoreY : Score of day/week/month/year.
      • tagD, tagW, tagM, tagY : Time tag of day/week/month/year.
    • Time filter disabled : {userID, score}

Get my rank

leaderBoard.getRank()
// leaderBoard.getRank(userID)
    .then(function(rank) { })
    .catch(function(error) { })
  • userID : User ID, optional.
    • undefined : Current user ID.
  • rank : Rank object. {userID, rank}

Get scores

  1. Set board property, optional.
    • Board ID
      leaderBoard.setBoardID(boardID);
      
    • Custom tag
      leaderBoard.setTag(tag);
      
  2. Set time filter, optional.
    leaderBoard.setTimeFilterType(type);    
    
    • type :
      • 'day', or 'd' : Filter scores by current day.
      • 'week', or 'w' : Filter scores by current week.
      • 'month', 'm' : Filter scores by current month.
      • 'year', 'y' : Filter scores by current year.
  3. Load scores page by page.
    • Load first page.
      leaderBoard.loadFirstPage()
          .then(function(scores) { })
          .catch(function(error) { })
      
      • scores : An array of score object. Each score object is {userID, userName, socre}
    • Load next page.
      leaderBoard.loadNextPage()
          .then(function(scores) { })
          .catch(function(error) { })
      
      • scores : An array of score object. Each score object is {userID, userName, socre}
    • Load previous page.
      leaderBoard.loadPreviousPage()
          .then(function(scores) { })
          .catch(function(error) { })
      
      • scores : An array of score object. Each score object is {userID, userName, socre}
    • Reload current page.
      leaderBoard.loadCurrentPage()
          .then(function(scores) { })
          .catch(function(error) { })
      
      • scores : An array of score object. Each score object is {userID, userName, socre}

Page index

  • Current page index
    var pageIndex = leaderBoard.pageIndex;
    
  • Is first page
    var isFirstPage = leaderBoard.isFirstPage;
    
  • Is last page
    var isLastPage = leaderBoard.isLastPage;
    

Delete

  • Delete user
    leaderBoard.deleteUserScore(userID)
        .then(function(){ })
        .catch(function(){ })
    
  • Delete board
    leaderBoard.deleteBoard(boardID, tag)
        .then(function(){ })
        .catch(function(){ })