Options
All
  • Public
  • Public/Protected
  • All
Menu

interface shell Shell

The Shell's prupose is to display the game intro / highscore and game over screens

It is basically all what is arround the game

This part does not need to be verified and as such you can use whatever suit you to make it

You need to provide / implement 2 methods : "preload" and "ready"

function Shell() {
  var self = this;

  self.preload = function(canvas,reportPreloadProgress){
    console.log("loading shell");

    reportPreloadProgress(1); //tell etherplay the minimum asset set is ready and the shell can show its own loading bar for the remaining asset
    //if there is no way to mention progress, -1 can be sent over until ready (where 1 need to be sent)
    //here we report straight away
    //On etherplay side, etherplay show a Etherplay logo for some time and will disapear only if that call is made with value >= 1
  };

  self.ready = function(session,canvas){

    //access the competition
    var competition = session.competition;

    //etherplay is now ready
    //the game might be still loading though.
    //competition.gameLoadingProgress() will give you how much loading have been done
    //competition.isGameReady() will tell you if the game is ready

    console.log("shell : ready to show");
    //can start to show the loading screen or itself if already ready

    var ctx = canvas.getContext('2d');

    var startTime = performance.now();
    function update(time){
      var elapsed = time - startTime;


      if(competition.gameLoadingProgress() >= 1){
        ctx.fillStyle="#FFFF00";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle="#000000";
        ctx.fillText("click to start",canvas.width/2,canvas.height/2);
      }else{
        ctx.fillStyle="#FFFF00";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle="#000000";
        ctx.fillText("game is loading ...",canvas.width/2,canvas.height/2);
        ctx.fillText("" + competition.gameLoadingProgress(),canvas.width/2,canvas.height* 5/8);
      }

      requestAnimationFrame(update);
    }
    requestAnimationFrame(update);

    var gameHandler = {
            onError:function(error){
        console.log("shell : error starting game", error);
      },
      onStart:function(){
        console.log("shell : game is going to start");
      },
      onFinish : function(result){
        console.log("shell : game has returned : " , result);
      }
    }

    canvas.onclick = function(){
      if(competition.isGameReady()){
        competition.startGame(gameHandler);  
      } 
    }

  }

}

var shell = new Shell();

Summary

Properties

Properties

preload

preload: function

preload will be given the canvas on which the game needs to be drawn on

reportProgress will need to be called with a number between 0 and 1

1 indicates the shell has preloaded and is ready to be displayed

Etherplay preloading screen that cover the canvas at the beginning will then disapear

Type declaration

    • (canvas: HTMLCanvasElement, reportProgress: function): void
    • Parameters

      • canvas: HTMLCanvasElement
      • reportProgress: function
          • (progress: number): void
          • Parameters

            • progress: number

            Returns void

      Returns void

ready

ready: function

ready will be called after preloading has been done and Etherplay has initialised itself

it gives back the session object allowing you to get information from the current competition and start a game

At that point the shell will be visible

Type declaration

    • (session: Session, canvas: HTMLCanvasElement): void
    • Parameters

      • session: Session
      • canvas: HTMLCanvasElement

      Returns void