How to use chessground - 10 common examples

}
          } else {
            // go through the move:try flow to decide whether to accept the move
            const cjs = new Chess(this.cjs.fen())
            const moveObj = cjs.move({ from: from as Square, to: to as Square })
            dispatch('move:try', moveObj)
          }
        }
      },
    }
    if (options.orientation) {
      cgOptions.orientation = options.orientation
    } else if (options.fen) {
      cgOptions.orientation = options.fen?.includes(' w ') ? 'black' : 'white' as Color
    }
    this.chessground = Chessground(document.querySelector(selector), cgOptions);

    new PiecePromoModal()

    subscribe({
      'board:flipped': shouldBeFlipped => {
        this.chessground.set({ orientation: shouldBeFlipped ? 'black' : 'white' })
      },

      'fen:set': (fen: FEN, lastMove?: [Square, Square]) => {
        console.log(`chessground_board - fen:set - ${fen}`)
        this.cjs.load(fen)
        const turnColor = this.cjs.turn() === 'w' ? 'white' : 'black'
        this.chessground.set({
          fen,
          lastMove: lastMove || [],
          movable: {

setTimeout(function () {
      this.ground = Chessground(document.getElementById('puzzleBoard'), options)
      var Width = document.getElementById('puzzleBoard').clientWidth
      document.getElementById('puzzleBoard').style.height = Width + 'px'
      document.getElementById('puzzleBoard').style.width = Width + 'px'
      // getFromLocalStorage
      console.log('cargando board')
      this.loadPuzzle()
    }.bind(this), 10)
  },

loadPosition () { // set a default value for the configuration object itself to allow call to loadPosition()
      this.game.load(this.fen)
      this.board = Chessground(this.$refs.board, {
        fen: this.game.fen(),
        turnColor: this.toColor(),
        movable: {
          color: this.toColor(),
          free: this.free,
          dests: this.possibleMoves(),
        },
        orientation: this.orientation,
      })
      this.board.set({
        movable: { events: { after: this.changeTurn() } },
      })
      this.afterMove()
    },
  },

oncreate: function(vNode) {

      // This lifecycle event tells us that the DOM is ready. That means we
      // can attach chessground to our chessground container element that was
      // prepared for it during the 'view' lifecycle method.

      var config = summaryToChessgroundConfig(summary);

      var dom = vNode.dom;
      var chessGroundParent = dom.querySelector(".ssb-chessground-container");
      chessground = Chessground(chessGroundParent, config);

      // Listen for game updates
      var gameSummaryObservable = gameCtrl.getSituationSummaryObservable(summary.gameId);
      var obs = gameSummaryObservable(newSummary => {
        var newConfig = summaryToChessgroundConfig(newSummary);
        chessground.set(newConfig);
      });

      observables.push(obs);
    },
    onremove: function() {

oncreate(vNode) {
      // This lifecycle event tells us that the DOM is ready. That means we
      // can attach chessground to our chessground container element that was
      // prepared for it during the 'view' lifecycle method.

      const config = summaryToChessgroundConfig(summary);

      const { dom } = vNode;
      const chessGroundParent = dom.querySelector('.ssb-chessground-container');
      chessground = Chessground(chessGroundParent, config);

      // Listen for game updates

      const situationObs = gameSummaryObservable((newSummary) => {
        const newConfig = summaryToChessgroundConfig(newSummary);
        chessground.set(newConfig);
        lastActivityTimestamp = newSummary.lastUpdateTime;
      });

      observables.push(situationObs);
    },
    onremove() {

setTimeout(function () {
      this.ground = Chessground(document.getElementById('frontBoardVisor'), options)
      var Width = document.getElementById('frontBoardVisor').clientWidth
      document.getElementById('frontBoardVisor').style.height = Width + 'px'
      document.getElementById('frontBoardVisor').style.width = Width + 'px'
      // getFromLocalStorage
      this.loadDataGame(this.board)
    }.bind(this), 10)
  }

run(el) {
    const chess = new Chess();
    const cg = chessground(el, {
      movable: {
        color: 'white',
        free: false,
        dests: toDests(chess)
      }
    });
    cg.set({
      // draggable: {
      //   showGhost: false
      // },
      movable: {
        events: {
          after(orig, dest) {
            chess.move({from: orig, to: dest});
            cg.set({
              turnColor: toColor(chess),

loadFen(fen) {
      this.game = new Chess(fen);

      this.board = Chessground(this.$refs.board, {
        fen: fen,
        turnColor: this.toColor(),
        movable: {
          color: this.toColor(),
          free: false,
          dests: this.possibleMoves()
        }
      })
      this.board.set({
        movable: { events: { after: this.changeTurn() } }
      });
    }
  },

constructor(
      boardEl: HTMLElement,
      boardHandler: BoardHandler,
      soundPlayer: SoundPlayer,
      viewOnly: boolean) {
    this.chessBoardElement_ = boardEl;
    this.soundPlayer_ = soundPlayer;
    this.chessBoard_ = Chessground(boardEl, {
      movable: { free: false },
      viewOnly: viewOnly,
      events: {
        move: (from, to) => boardHandler.onMove(from, to),
        change: () => boardHandler.onChange()
      }
    });
    boardEl.onwheel = e => boardHandler.onScroll(e);
    window.addEventListener('resize', () => this.redraw());
  }

oncreate(vNode) {
      const gameId = atob(vNode.attrs.gameId);
      const boardDom = document.getElementById(gameId);
      const chatDom = document.getElementById(`chat-${gameId}`);

      const originalSituation = situationObservable();

      const config = situationToChessgroundConfig(originalSituation, 'live', {});
      chessGround = Chessground(boardDom, config);
      chessGroundObservable.set(chessGround);

      this.embeddedChat = makeEmbeddedChat(originalSituation);
      chatDom.appendChild(this.embeddedChat.getChatboxElement());

      const validMovesObservable = gameCtrl.getMovesFinderCtrl()
        .validMovesForSituationObs(situationObservable);

      this.removeWatches = watchAll([situationObservable,
        gameHistory.getMoveSelectedObservable(), validMovesObservable],
      (newSituation, moveSelected, validMoves) => {
        const newConfig = situationToChessgroundConfig(newSituation, moveSelected, validMoves);

        if (settings.getPlaySounds()) {
          playMoveSound(newSituation, newConfig, chessGround, moveSelected);
        }