A-Frame Com­pon­ent

To add lead­er­boards to an A-Frame game, make sure you have a lead­er­board id.

Down­load

lead­er­board com­pon­ent (right-click > “Save As…”).

You can add a lead­er­board eas­ily to your scene with the fol­low­ing snip­pet:

<!-- in the head -->
<script src="<path-to-the-leaderboard-component.js>"></script>

<!-- in the a-scene -->
<a-entity
   ca-leaderboard="leaderboardId: <your-id>; title: 'Leaderboard'; debug: true">
</a-entity>

Be­fore re­leas­ing your game, re­move the debug: true flag, which fills the lead­er­board with dummy data for loc­al de­vel­op­ment.

Ori­gin-Lock

Con­struct Ar­cade Lead­er­board serv­ers may only be ac­cessed from the con­structarca.de do­main.

cas­dk.pur­cha­seItem(gameId, itemId, price)

re­turns a prom­ise con­tain­ing re­sponse.suc­cess or re­sponse.er­ror

• gameId is the ID of the game, which is provided by us
• itemId is the in­tern­al name of the item
• price is the price which has to be stored on the serv­er as well

Ex­ample:

AFRAME.registerComponent('ca-purchase', {
  schema: {
    itemId: { type: 'string', default: ''},
    gameId: { type: 'string', default: ''}
  },
  init: function() {
    this.el.addEventListener('click', this.onClick.bind(this));
    this.clicked = false;
    this.bought = false;
    this.buying = false;
    document.querySelector('a-scene').addEventListener("gameover", this.onReset.bind(this));
  },
  onReset: function() {
    this.el.setAttribute('text', { value: ''})
    this.clicked = false;
    this.bought = false;
  },
  onClick: function(e) {
    if(state == STATE_GAME)
      return;
    if(!this.clicked) {
      this.el.setAttribute('text', { value: 'Click again to confirm purchase.'})
      this.clicked = true;
      return;
    }
    if(this.bought || this.buying) return;
    this.buying = true;
    if (!('casdk' in window)) {
      this.el.setAttribute('text', { value: 'Error: casdk missing'});
      console.error('ca-purchase-component: CASDK missing.');
      return;
    }
    if(!this.price) {
      this.buying = false;
      this.el.setAttribute('text', { value: 'A network error has occured'})
    }
    this.el.setAttribute('text', { value: 'Confirming purchase...'})
    casdk.purchaseItem(this.data.gameId, this.data.itemId, this.price).then(
      (response) => {
        this.buying = false;
        if(response) {
          console.log(response);
          if(response.success) {
            this.el.sceneEl.components.game.checkUnlockedItems(true);
            this.el.setAttribute('text', { value: 'unlocked'});
            this.el.setAttribute('class', '');
            this.bought = true;
          } else {
            this.el.setAttribute('text', { value: 'Not enough funds.'});
          }
        } else {
          this.el.setAttribute('text', { value: ''});
          this.el.sceneEl.exitVR();
          casdk.loginButtonPressed();
        }
      }
    );
  },
});

cas­dk.get­In­vent­ory()

re­turns a prom­ise con­tain­ing the re­sponse:

• false if the user is not logged in
• oth­er­wise con­tains the in­vent­ory of the user as an ar­ray of ob­jects: {inventory: [{itemId: <string>}, ...]}

cas­dk.get­Amount­Cur­rency()

re­turns a prom­ise con­tain­ing the amount of coins a user owns in the re­sponse: {currency: <number>}, or false if the user is not logged in.

This func­tion is called on pa­ge­load and dis­patches a casdk-currency-updated event on window.

cas­dk.get­Cata­log(gameId)

re­turns a prom­ise con­tain­ing the cata­log of game items

This cata­log needs to be set up by us.

This func­tion does not re­quire the user to be logged in.

The cata­log is re­turned as an ar­ray of game items:

{catalog:[{
  itemId: <string>,
  displayName: <string>,
  description: <string>,
  price: <number>
},...]}