Lets do components

[viktor-yakubiv]

The basic idea of OOP is decoupling of business logic into separate parts, each one of what solves own problem.

On the web we have a similar approach, called 'component-based'. The idea is to write as small components (functions, classes, files) as possible which can be combined to more big components, which on the next step can be combined to, and so on. In the end we get the whole application.

For all this 'wise' things we have a lot of funny names like DRY and SOLID. I suggest to start from single responsibility principle, sometimes called SRP.

In short, idea is to split big class with mixed responsibilities to more small ones. Lets do it like this:

class Card {
  constructor(name, options) { ... }

  get element() {
    // return rendered element
  }

  get opened() {
    // returns actual opened
  }

  toggle() {
    // changes current card state: opend to closed and vice versa
  }

  render() {
    // renders HTMLElement according to the parameters from constructor
  }
}

class MemoryPairGame {
  constructor(element, options) { ... }

  toggleCard(card) {
    const { opened } = card

    // card state change event listener
    // checks card's opened state and calls game logic methods to handle it
  }

  start() { ... }

  render() {
    // renders cards and mounts it into element
  }
}

Also think about other methods and class APIs like event subscription, methods for hiding cards, dealing with animation.