1.1.0 • Published 4 years ago
vue-chessboard-examples v1.1.0
vue-chessboard-examples
Examples for the vue-chessboard component
Examples
Check live examples: http://vitomd.com/vue-chessboard-examples/
Check full application using the component: Chess Guardian
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>
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8081
npm run dev
# build for production with minification
npm run build
1.1.0
4 years ago