Skip to content

vitogit/vue-chessboard

Repository files navigation

vue-chessboard

npm npm vue2

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

http://g.recordit.co/40JDuy8tAk.gif

Check live examples: http://vitomd.com/vue-chessboard-examples/

Table of contents

Installation

npm install --save vue-chessboard

Default component import

import {chessboard} from 'vue-chessboard'
import 'vue-chessboard/dist/vue-chessboard.css'

Then use it in your template

    <chessboard/>

Browser

<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>

Examples

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

Simple Chessboard with legal moves

  <chessboard/>

Simple Chessboard with free moves

  <chessboard :free="true"/>

Simple Chessboard with black orientation. Default is white

  <chessboard orientation="black"/>

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.

It also returns the fen and the history data.

  <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
}

Extended Component (Play vs random AI).

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>

Want to see all my chess related projects?

Check My projects for a full detailed list.

License

GPL-3.0

About

Chessboard vue component to load positions, create positions and see threats

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy