Chessboard vue component to load positions, create positions and see threats
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="https://github.com/vitogit/vue-chessboard/blob/master/vue-chessboard/dist/vue-chessboard.css"/>
<script src="https://github.com/vitogit/vue-chessboard/raw/master/vue.js"></script>
<script src="https://github.com/vitogit/vue-chessboard/raw/master/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>
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