Awesome
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).
<p> You can extend the chessboard component to add new methods</p> <p> Also you can undo a move using Vue events</p> // 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).
<p> Move any piece to anywhere. You can extend the chessboard component to use all <a href='https://github.com/ornicar/chessground/blob/master/src/config.ts'>chessgrounds configurations</a></p> // 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