vue-chess-tactics

├── .browserslistrc ├── src ├── bus.js ├── main.js ├── editor.vue ├── newboard.vue └── App.vue ├── docs ├── favicon.png ├── index.html ├── js │ ├── app.89c1025a.js │ ├── app.89c1025a.js.map │ └── chunk-vendors.81e07bfc.js └── css │ └── chunk-vendors.23408e99.css ├── public ├── favicon.png └── index.html ├── babel.config.js ├── vue.config.js ├── index.html ├── .gitignore ├── package.json └── README.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /src/bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | export default new Vue() 3 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitogit/vue-chessboard-examples/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitogit/vue-chessboard-examples/HEAD/public/favicon.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' 3 | ? '/vue-chessboard-examples/' 4 | : '/' 5 | } 6 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | /* eslint-disable no-new */ 5 | window.vm = new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-chess-tactics 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/editor.vue: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vue Chess Examples 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-chessboard-examples", 3 | "description": "Simple examples for vue-chessboard component", 4 | "version": "1.1.0", 5 | "author": "vitogit ", 6 | "license": "MIT", 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint", 11 | "deploy": "yarn build && rm -rf docs; cp -r dist docs" 12 | }, 13 | "dependencies": { 14 | "core-js": "^3.6.4", 15 | "vue": "^2.6.11", 16 | "vue-chessboard": "^0.6.6" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "~4.2.0", 20 | "@vue/cli-service": "~4.2.0", 21 | "vue-template-compiler": "^2.6.11" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Vue Chess Examples

-------------------------------------------------------------------------------- /src/newboard.vue: -------------------------------------------------------------------------------- 1 | 2 | 55 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 92 | -------------------------------------------------------------------------------- /docs/js/app.89c1025a.js: -------------------------------------------------------------------------------- 1 | (function(e){function o(o){for(var n,a,i=o[0],u=o[1],c=o[2],d=0,h=[];d 14 | ``` 15 | #### Simple Chessboard with free moves 16 | ```html 17 | 18 | ``` 19 | 20 | #### Simple Chessboard that shows threats for current position and player 21 | ```html 22 | 23 | ``` 24 | 25 | #### Fen binded to the chessboard (load position when click on a new position) 26 | ```html 27 | 28 | 31 | ``` 32 | 33 | #### Chessboard with onmove callback. Returns positional info { "legal_black": 20, "checks_black": 0, "threat_black": 0, "turn": "black" } after each move. 34 | ```html 35 | 36 |

37 | {{this.positionInfo}} 38 |

39 | ``` 40 | ```js 41 | showInfo(data) { 42 | this.positionInfo = data 43 | } 44 | ``` 45 | 46 | #### Chessboard with onpromote callback 47 | 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 48 | ```html 49 | 50 | ``` 51 | ```js 52 | promote() { 53 | return 'r' // This will promote to a rook 54 | } 55 | ``` 56 | 57 | #### Multiple Chessboards with different fens. 58 | ```html 59 |

60 | 61 |

62 | ``` 63 | 64 | #### Extended Component (Play vs random AI with undo button). 65 |

You can extend the chessboard component to add new methods

66 |

Also you can undo a move using Vue events

67 | 68 | ```html 69 | // newboard.vue 70 | 71 | 124 | ``` 125 | ```html 126 | // bus.js 127 | import Vue from 'vue' 128 | export default new Vue() 129 | ``` 130 | ```html 131 | //App.vue - emit the events 132 | 133 | 134 | .... 135 | methods: { 136 | undo() { 137 | bus.$emit('undo') 138 | } 139 | } 140 | ``` 141 | 142 | #### Extended Component (Simple board editor). 143 |

Move any piece to anywhere. You can extend the chessboard component to use all chessgrounds configurations

Simple Chessboard with legal moves

Simple Chessboard with free moves

Simple Chessboard that shows threats for current position and player

Fen binded to the chessboard (load position when click on a new position)

Chessboard with binded onmove method. Shows threats on text area

Chessboard with onpromote callback.

Multiple Chessboards with different fens.

Extended Component (Play vs random AI with undos).

Fully free piece movement.