Uncaught TypeError: Cannot read property 'drawHTMLToken' of undefined

class Game {
    constructor() {
        this.board = new Board();
        this.players = this.createPlayers();
        this.ready = false;
    }


    /**
     * Returns active player.
     * @return  {Object}    player - The active player.
     */
    get activePlayer() {
        return this.players.find(player => player.active);
    }


    /**
     * Creates two player objects
     * @return  {array}    An array of two player objects.
     */
    createPlayers() {
        const players = [new Player('Player 1', 1, '#e15258', true),
                         new Player('Player 2', 2, '#e59a13')];
        return players;
    }


    /**
     * Initializes game.
     */
    startGame(){
        this.board.drawHTMLBoard();
        this.activePlayer.activeToken.drawHTMLToken();
        this.ready = true;
    }
}

class Token {
    constructor(index, owner){
        this.owner = owner;
        this.id = `token-${index}-${owner.id}`;
        this.dropped = false;
    }

     get htmlToken() {
        return document.getElementById(this.id);
    }

     drawHTMLToken(){
        const token = document.createElement('div');
        document.getElementById('game-board-underlay').appendChild(token);
        token.setAttribute('id', this.id);
        token.setAttribute('class', 'token');
        token.style.backgroundColor = this.owner.color;
    }

}

class Space {
  constructor(x, y, id, token, diameter, radius)
  {
    this.x = x;
    this.y = y;
    this.id = `space-${x}-${y}`;
    this.token = null;
    this.diameter = 76;
    this.radius = this.diameter/2;
  }
  drawSVGSpace() {
    const svgSpace = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    svgSpace.setAttributeNS(null, "id", this.id);
svgSpace.setAttributeNS(null, "cx", (this.x * this.diameter) + this.radius);
svgSpace.setAttributeNS(null, "cy", (this.y * this.diameter) + this.radius);
svgSpace.setAttributeNS(null, "r", this.radius - 8);
svgSpace.setAttributeNS(null, "fill", "black");
svgSpace.setAttributeNS(null, "stroke", "none");
    document.getElementById("mask").appendChild(svgSpace); 
  }

}

class Board {
  constructor(rows, columns, spaces)
  {
    this.rows = 6;
    this.columns = 7;
    this.spaces = this.createSpaces();

  }
   createSpaces() {
     const spaces = [];
     for (let i = 0; i < this.columns.length; i++  )
     { const col = [];
       for (let j = 0; j < this.rows.length; j++)
      {
        let space = new Space(i, j);
    col.push(space);
    }
    spaces.push(col);
       }

    return spaces;
     }

     drawHTMLBoard(){
     for (let column of this.spaces)
     {for (let space of column) {

  space.drawSVGSpace();
         }
       }

     }
   }

class Player {
  constructor(name, id, colour, active = false){
    this.name = name;
    this.id = id;
    this.colour = colour;
    this.active = active;
    this.tokens = this.createTokens(21);
  }

   createTokens(num) {
      const tokens = [];
      for (let i; i < num; i++){
        let token = new Token(i, this);
    tokens.push(token);
    }
    return tokens;
}


 get unusedTokens(){
        return this.tokens.filter(token => !token.dropped);
    }


get activeToken(){
  return this.unusedTokens[0];
}
}