Generating chessboards without using the shortcode

[yo35]

RNunez67 said:

Hi. I have been experimenting with your plugin. Really like the features. Sure would be nice to have the ability to drag the pieces with the mouse and touch for interactive puzzles.

Anyway, I'm somewhat new to WordPress but very impressed with its capabilities. I realized the plugin works only with pages that are created within the dashboard. The plugin is generating all the supporting code in the background as the page is displayed. It doesn't work with non-WordPress pages.

I'm a java programmer by trade. I assume that the short code is creating an object somewhere and using the pgn input to generate the chessboard.

Is there a way to execute the code without the shortcode from within a non-WordPress page? I imagine that I would somehow need to inject the pgn text into the object.

This would allow me a lot of flexibility in being able to create multiple chess lessons for my students.

Thanks in advance for your response. And thank you for your great work!

[yo35]

Hi,

The plugin is mostly based on JavaScript code, that is possible to re-use out of the WordPress environment. However, this JavaScript code is not as documented as a true standalone library should be (I have no time for that), but as a programmer you may be able to find out a way to make it work for what you want. Here are some entry points:

To create a chess diagram, you need:

• js/uichess-chessboard.js and the JS libs mentioned in the header of this file,
• css/uichess-chessboard.css
• css/sprite/*.png

Then you can insert a diagram in your page as follows:

$('#someDiv').chessboard({
    position: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
    squareSize: 40
});

To create a full chess game, you need in addition:

• js/uichess-chessgame.js and the JS libs mentioned in the header of this file,
• css/uichess-chessgame.css

Then you can insert a diagram in your page as follows:

$('#someOtherDiv').chessgame({
    pgn: 'the PGN text that encodes your game',
    navigationBoard: 'frame'
});

These examples do not present in a comprehensive manner what is possible to do. You may find several other display options by looking at the JavaScript code itself.

[richiwalt]

Cool.

(Yo35 ... Looks like you're a very busy person. This one should be closed as well )