lichess.org

Opening Trainer - Preparations

Software Development
Minimal chess GUI using vue-chessboard and chessops, working towards an Opening Trainer.

GUI using vue-chessboard and chessops

Motivation

My plan is to create an opening trainer of some sort. Probably randomly selecting a frequent opening position and ask the user to make the most played move in the position. Score is then based on how frequent move the user played.

Preparation, a GUI

First step in this direction is creating a GUI, that can do move input, history and show the lichess opening explorer book for any position.

Source

https://github.com/hyperchessbot/openingtrainer

Live

https://openingtrainer.netlify.app/

Assets

Vue-chessboard

A Vue wrapper around Chessground https://github.com/ornicar/chessground ( used for lichess board ).

https://github.com/vitogit/vue-chessboard

Chessops

For move generation in Javascript for all lichess variants.

https://github.com/niklasf/chessops

Design

The project is a Nuxt.js application. Uses Single page / Jamstack rendering, because server side rendering is not possible, due to Vue-chessboard using the window as the global object, which is not present in a Node.js environment.

Chessops needed to be bundled up and I created a thin utility layer with convenience functions, such as easy SAN and UCI conversions, FEN reporting, etc. For this I used rollup. The whole wrapper was developed independently of this project, so its source is absent from the repo, only the bundled file is available in mixins.

Pitfalls

Setting custom board size

I cannot set the board size. In theory it should fill up its immediate container, but the size of its container div has no effect on the board size, it remains the default size.

Reconnecting