Match setup

setupMatch.js

function setupMatch(opts) {
  $("#waiter").remove();
  initMatch(opts);
  performCountdown(3, startGame);
};

// Initial setup of the match state 
function initMatch(opts) {
  pongR.game = new Game(opts.PlayRoomId, opts.Player1, opts.Player2, opts.BallDirection);

  // Set the canvas dimensions
  pongR.canvas = document.getElementById("viewport");
  pongR.canvas.width = pongR.settings.viewport.width;
  pongR.canvas.height = pongR.settings.viewport.height;
  // Get the 2d context to draw on the canvas
  // getContext() returns an object that provides methods and properties for drawing on the canvas.
  pongR.canvasContext = pongR.canvas.getContext("2d");
  pongR.me = pongR.pongRHub.username === pongR.game.player1.user.username() ? pongR.game.player1 : pongR.game.player2;
  pongR.other = pongR.me.user.username() === pongR.game.player1.user.username() ? pongR.game.player2 : pongR.game.player1;
  ko.applyBindings(pongR.game);                
  // Initialise keyboard handler
  keyboard = new THREEx.KeyboardState();
  //A list of recent server updates
  pongR.serverUpdates = [];
  // Draw initial scene
  drawScene();
  pongR.deltaTime = 0.015; // default at 66 fps
};

function performCountdown(counter, callback) {
  if (counter > 0) {
    drawText(counter);
    setTimeout(function () { performCountdown(--counter, callback) }, 1000);
  }
  else { // Countdown expired. If we have a callback, invoke it
      keyboard.reset(); // during the countdown the user may have pressed some keys
      pongR.me.inputs = [];
      if (callback) {
          callback();
      }
  }
};