Chessboard vue component to load positions, create positions and see threats
- It uses chess.js for chess movements and validations
- It uses chessground for chessboard UI chessground
Check live examples: http://vitomd.com/vue-chessboard-examples/
npm install --save vue-chessboard import {chessboard} from 'vue-chessboard' import 'vue-chessboard/dist/vue-chessboard.css'Then use it in your template
<chessboard/><div id="app"> <chessboard></chessboard> </div> <link rel="stylesheet" href="vue-chessboard/dist/vue-chessboard.css"/> <script src="vue.js"></script> <script src="vue-chessboard/dist/vue-chessboard.browser.js"></script> <script> new Vue({ el: '#app', components: { VueChessboard } }); </script>Check live examples: http://vitomd.com/vue-chessboard-examples/
Check live examples repository: https://github.com/vitogit/vue-chessboard-examples
Check full application using the component: Chess Guardian
<chessboard/> <chessboard :free="true"/> <chessboard orientation="black"/> <chessboard :showThreats="true"/> <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.
It also returns the fen and the history data.
<chessboard @onMove="showInfo"/> <div> {{this.positionInfo}} </div>showInfo(data) { this.positionInfo = data }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 }You can extend the chessboard component to add new methods
// newboard.vue <script> import { chessboard } from 'vue-chessboard' export default { name: 'newboard', extends: chessboard, methods: { 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()} }, }) } } </script>Check My projects for a full detailed list.
GPL-3.0