- Notifications
You must be signed in to change notification settings - Fork50
Chessboard vue component to load positions, create positions and see threats
License
NotificationsYou must be signed in to change notification settings
vitogit/vue-chessboard
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Chessboard vue component to load positions, create positions and see threats
- It useschess.js for chess movements and validations
- It uses chessground for chessboard UIchessground
Check live examples:http://vitomd.com/vue-chessboard-examples/
npm install --save vue-chessboardimport{chessboard}from'vue-chessboard'import'vue-chessboard/dist/vue-chessboard.css'
Then use it in your template
<chessboard/>
<divid="app"><chessboard></chessboard></div><linkrel="stylesheet"href="vue-chessboard/dist/vue-chessboard.css"/><scriptsrc="vue.js"></script><scriptsrc="vue-chessboard/dist/vue-chessboard.browser.js"></script><script>newVue({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"/>
<chessboardorientation="black"/>
<chessboard:showThreats="true"/>
<chessboard:fen="currentFen"/><buttonclass="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'exportdefault{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 simplicitythis.board.set({fen:this.game.fen()})this.calculatePromotions()this.aiNextMove()};},aiNextMove(){letmoves=this.game.moves({verbose:true})letrandomMove=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>
CheckMy projects for a full detailed list.
GPL-3.0