vue-chessboard-examples

This repo contain several examples for the vue-chessboard component

Live examples: http://vitomd.com/vue-chessboard-examples/

Examples

Simple Chessboard with legal moves

  <chessboard/>

Simple Chessboard with free moves

  <chessboard :free="true"/>

Simple Chessboard that shows threats for current position and player

  <chessboard :showThreats="true"/>

Fen binded to the chessboard (load position when click on a new position)

  <chessboard :fen="currentFen"/>
  <button class="button is-light" @click="loadFen(fen)" v-for="fen in fens">
    {{fen}}
  </button>

Chessboard with onmove callback. Returns positional info { "legal_black": 20, "checks_black": 0, "threat_black": 0, "turn": "black" } after each move.

  <chessboard @onMove="showInfo"/>
  <div>
    {{this.positionInfo}}
  </div>

showInfo(data) {
  this.positionInfo = data
}

Chessboard with onpromote callback

When there is a promotion it will execute the callback. Just return the first letter of the piece: q:Queen, r:Rook, k:Knight, b:Bishop

  <chessboard :onPromotion="promote"/>

promote() {
  return 'r' // This will promote to a rook
}

Multiple Chessboards with different fens.

  <div v-for="fen in fens">
     <chessboard :fen="fen" />
  </div>

Extended Component (Play vs random AI with undo button).

You can extend the chessboard component to add new methods

Also you can undo a move using Vue events

  // newboard.vue

  <script>
  import { chessboard }  from 'vue-chessboard'
  import bus from './bus.js'

  export default {
    name: 'newboard',
    extends: chessboard,
    methods: {
      undo() {
        this.game.undo()
        this.board.set({fen: this.game.fen()})
      },
      userPlay() {
        return (orig, dest) => {
          if (this.isPromotion(orig, dest)) {
            this.promoteTo = this.onPromotion()
          }
          this.game.move({from: orig, to: dest, promotion: this.promoteTo}) // promote to queen for simplicity
          this.board.set({
            fen: this.game.fen()
          })
          this.calculatePromotions()
          this.aiNextMove()
        };
      },
      aiNextMove() {
        let moves = this.game.moves({verbose: true})
        let randomMove = moves[Math.floor(Math.random() * moves.length)]
        this.game.move(randomMove)

        this.board.set({
          fen: this.game.fen(),
          turnColor: this.toColor(),
          movable: {
            color: this.toColor(),
            dests: this.possibleMoves(),
            events: { after: this.userPlay()},
          }
        });
      },
    },
    mounted() {
      this.board.set({
        movable: { events: { after: this.userPlay()} },
      })
    },
    created() {
      bus.$on('undo', () => {
        this.undo()
      })
    }
  }
  </script>

  // bus.js
  import Vue from 'vue'
  export default new Vue()

  //App.vue - emit the events
  <button class="button is-light" @click="undo()">UNDO</button>

  ....
  methods: {
    undo() {
      bus.$emit('undo')
    }
  }

Extended Component (Simple board editor).

Move any piece to anywhere. You can extend the chessboard component to use all chessgrounds configurations

  // editor.vue
  <script>
  import { chessboard }  from 'vue-chessboard'

  export default {
    name: 'editor',
    extends: chessboard,
    mounted() {
      this.board.set({
        movable: {
          color: 'both',
          free: true,
          events: { after: undefined }
        }
      })
    }
  }
  </script>

Full application

Here is a full application using the component: Chess Guardian

Build Setup

# install dependencies
yarn install

# serve with hot reload at localhost:8081
yarn serve

# build for production with minification
npm build