How to add board mechanics?

[inooid]

First implementation (not looking at any code styling, just raw implementation):

class Board {
  constructor() {
    this.board = [null, null, null, 'card', null, null, null];
  }

  addCard(card, index) {
    let emptyIndex;
    const center = 3;

    if (this.board[center] === null) { return this.board[center] = card; }
    if (index < center) {
      emptyIndex = this._findEmptySpotIndex(2, true);
      if (emptyIndex !== -1) {
        return this.board[emptyIndex] = card;
      }
    }
    emptyIndex = this._findEmptySpotIndex(4);
    if (emptyIndex !== -1) {
      return this.board[emptyIndex] = card;
    }
  }

  _findEmptySpotIndex(start, backwards = false) {
    if (backwards) {
      for(let i = start; i >= 0; i--) {
        if (this.board[i] === null) {
          return i;
        }
      }
    } else {
      for(let i = start; i < 7; i++) {
        if (this.board[i] === null) {
          return i;
        }
      }
    }
    return -1;
  }
}

const board = new Board;
board.addCard('card2', 0);
board.board
=> [null, null, 'card2', 'card', null, null, null]

[inooid]

This seems unnecessary now, due to a different implementation. The implementation is now something along the lines of this:

class Board {
  constructor() {
    this._board = ['card'];
  }

  get state() {
    return this._board;
  }

  addCard(card, index) {
    this._board.splice(index, 0, card);
  }
}

var board = new Board();
board.addCard('card2', 0);
board.state
=> ["card2", "card"]

We'll leave the centering of the board to the CSS rendering. This will make things less complex.