Search code examples
meteormeteor-blazechesschessboard.js

How to use Chessboard.js and Chess.js together in MeteorJS using BlazeJS?

I have a fresh MeteorJS project and I have only installed chessboardjs and chessjs as follows

meteor npm install --save chessboardjs
meteor npm install --save chess.js

In my client main.js I have also imported the above packages as follows;

import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';

According to chessboardjs documentation, the way to display a board is as follows;

For html

<div id="board1" style="width: 400px"></div>

and for JS

var board1 = Chessboard('board1', 'start')

My question is how do I get to display this in MeteorJS and how do I get the two chess npm packages to work together?

Any working examples will be highly appreciated.

Maybe I should also mention that the whole purpose is to have a two player game.

Solution

  • There are three issues here.

    1. Imports typo
    2. importing css
    3. Rendering

    First your imports and the function you call need to be the same. You imports are

    import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';

    but they should be

    import Chessboard from 'chessboardjs';
import Chessjs from 'chess.js';

    Second, the npm package import usually not automatically imports the css as well. You need to actively locate it's path within the node_modules/chessboardjs folder and import it:

    import 'chessboardjs/www/css/chessboard.css'

    Finally, the Chessboard function can't inject code into the DOM, if the target element (the div with id board1) has not been rendered, yet.

    To fix this you need to call it within onRendered:

    Template.myTemplate.onRendered(function () {
  var board1 = Chessboard('board1', 'start')
})

    It won't work in onCreated, because the onCreated callback is called before the first time the Template has been rendered.

    See http://blazejs.org/api/templates.html#Template-onRendered