mliebelt / pgnviewerjs-wp Goto Github PK

I noticed that the fontawesome icons were missing when I was using the theme 2021. Not used by myself, but who knows. Perhaps this is something that others will notice as well.

See mliebelt/pgn-viewer#271 (comment) for the context.

Tasks to do

• Check the current license set: GPL2 ==> GPL3
• Make a new release

I've seen your good job about this and I'm very interesting to use it on my new website but I get a message in the browser console as following:

Local path: http://www.ajedrez.life/wp-content/plugins/pgnviewerjs-wp/
pgnvjs.js:3 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ pgnvjs.js:3
pgnvjs.js:7 Local path: http://www.ajedrez.life/wp-content/plugins/pgnviewerjs-wp/
pgnvjs.js?ver=4.7.5:5 Uncaught TypeError: $ is not a function
at y (pgnvjs.js?ver=4.7.5:5)
at A (pgnvjs.js?ver=4.7.5:5)
at Object.vb.position (pgnvjs.js?ver=4.7.5:5)
at E (pgnvjs.js?ver=4.7.5:8)
at f (pgnvjs.js?ver=4.7.5:8)
at HTMLElement. (pgnvjs.js?ver=4.7.5:8)
at HTMLElement.dispatch (pgnvjs.js?ver=4.7.5:2)
at HTMLElement.q.handle (pgnvjs.js?ver=4.7.5:2)

Can you help me with this? Thanks in advance.

I have currently the problem, that even with a current version of PgnViewerJS (including all features and bug fixes), there is one strange bug that does not goes away.

Here is how to construct it:

1. Create a new page.
2. Create a classic paragraph.
3. Insert into that paragraph the following text: [pgnv]  1. e4 e5 2. Nf3 Nc6 3. Bb5 [/pgnv].
4. You don't see the right notation, but an error that states:

Offset: 0
PGN:   1. e4 e5 2. Nf3 Nc6 3. Bb5
Expected "*", "0-1", "0:1", "1-0", "1/2-1/2", "1:0", "O-O", "O-O-O", "[", "x", "{", [RNBQKP], [a-h], end of input, or integer but " " found.

There are 2 spaces in the pgn string at the beginning. The same pgn string works with the parser with the same version, and the pgn-reader (same version).

The same is the case, if the pgn string ends with 2 (or more) spaces. And only in the WP version of course :-(

The current version of PgnViewerJS has notationLayout with the current values inline (default) and list. Add this to the allowed parameters then (in the usual way it is written in PHP).

The simplest example leads to a strange display.

[pgnv]e4 d5[/pgnv]

Result

So the height of the viewer is not set correctly, in the developer tools, I see the following rectangle.

This is not reproducable from PgnViewerJS, perhaps it has to do with the wrong set of width by empty string.

When I have a pgnv with the following code, it works mostly, but the play button gives me an error.
[pgnv locale=fr piecestyle=uscf orientation=black theme=zeit size=500]1. e4 e5 2. Nf3 Nc6[/pgnv]

The stacktrace looks like that:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#4DrHq3paW8,#4DrHq3paW8Moves' is not a valid selector.
at e (http://192.168.0.37/wp-content/plugins/PgnViewerJS-WP/js/pgnvjs.js?ver=4.7.4:8:2919)
at v (http://192.168.0.37/wp-content/plugins/PgnViewerJS-WP/js/pgnvjs.js?ver=4.7.4:8:5450)

When adding an id, it works as expected, something with the ID generation seems to be wrong.

The current implementation should be much better than the one used in the past (version 0.9.8), so it should be possible to update it. Those are the constraints:

• Don't change the API to use, so upgrades should be possible easily.
• Ensure that all layout options for PgnView are tried out before releasing.
• PgnBoard and PgnPrint should work as well, but edit is not so essential.

The player should be more robust when the PGN contains empty lines at the beginning or at the end. Currently, the notation is not readable.

Currently the position or fen parameter does not work. However, in PgnViewerJS it works well.

the block editor in Wordpress is now the standard, and it should be easy to support it enough, so that not the classic editor has to be used for PbnViewerJS. The following should be supported:

• Provide PGN and optional FEN in the editor itself.
• Provide in the sidebar all relevant settings: layout, orientation, showCoords, boardWidth, width, ...

There are tutorials available how to do it. See

• block tutorial
• sidebar tutorial

Just that I have a task I can work on. The following should be provided as minimum:

• Provide all 4 modes: pgnView, pgnEdit, pgnBoard and pgnPrint
• Provide reasonable defaults
• Ensure that exceptions are handled properly

It should be possible to create a new distribution just by using the Grund build (if the relevant grunt plugins, and node.js and npm are installed).

the parameter notation of PgnViewerJS allows the values short (default) or long. Add this as parameter as well.

I have used the theme "chesscom" on our web site for the chess club, and this looks most of the time nice. However, if there are a lot of comments, variations, ... the notation window is too small.

The implementation PgnViewerJS has the option 'scrollbar = true' for such cases, this should be enabled here as well.

When copy / pasting PGN, it happens sometimes, that the 3 dots after the move in a variant e.g. are converted to the ellipsis character of that character set.

1. e4 e5 (1… d5 2. exd5)

The correct PGN should be

1. e4 e5 (1... d5 2. exd5)

which looks very similar, but is different.

The following parameters are number values, and should be treated like that.

• coordsfactor
• timertime (missing)

After upgrading PgnViewerJS, copy some of the pages of your local chess club, and ensure that those pages are all working well without any change. Ensure to have the usual set of plugins installed, and that all features of the plugin are used in the tests.

I have developed with a wp-env version 5.7 alpha, but this was not really tested.

When setting layout to left or right, without the size of the div, then the layout seems not to work correctly. I will try to reproduce that with PgnViewerJS, and decide then how to fix it.

Works not correct:
[pgnv layout=left]e4 e5 Nf3 Nc6 Bc4 Nf6[/pgnv]

Works correct:
[pgnv layout=left size=600px]e4 e5 Nf3 Nc6 Bc4 Nf6[/pgnv]

If set, will overwrite coordsfactor.

When I use the PgnViewerJS on a normal HTML page, the CSS works different to the one displayed on a Wordpress site. Here are the differences:

• The moves are highlighted as links in HTML, even if the CSS tells that text-decoration should be none.
• In mode print, the notation is shown (which is not helpful), which is hidden normally in HTML.

I will add here additional glitches when I find them.

I use the theme twenty-sixteen, btw.

First reason was the following rule:

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, 
.comment-content a, .pingback .comment-body > a, .textwidget a, 
.entry-footer a:hover, .site-info a:hover {
    box-shadow: 0 1px 0 0 currentColor;
}

If you include more than one game on a wordpress page, you have to use the parameter id to ensure that the Javascript implementation has a way to find the right HTML div to render things in. It would be nice if the ID would be generated automatically if missing. The ID is only needed internally, so it could be ugly, and no one will notice.

The following parameters should have boolean values, and they must keep that when constructing the call to PgnViewerJS.

• headers
• show_notation
• coordsinner
• showfen (missing, should be added in a different ticket)
• hidemovesbefore (missing, should be added in a different ticket)
• showresult

A parameter like PGNV.pgnView('idNIUdTVYPMQ', {showNotation: 'false'} leads to the wrong display then.

If set to true, ensure that FEN of the current position is shown.

There were many changes lately in PgnViewerJS, and I am not sure, that all are compatible with the (not changed) PgnViewerJS-WP. There are signs that some of the attributes are needed, because without them, the viewer is not working correctly any more (like setting boardsize).

For each finding, create a separate ticket then.

The style sets here (by accident) the padding of .comment elements, which leads to strange displays.

So the classes for PgnViewerJS should be adjusted to ensure that this does not happen (by accident). As workaround, the style should be set for that case, to ensure padding is not so bad.

This parameter is missing, the default value is 700 (which is 700 ms). Allow to set the parameter.

The directory for the plugin is translated to lowercase, so when installing it (as it should be) by using the wordpress plugin installation dialogs, the path is wrong.

• It is currently: /wp-content/plugins/PgnViewerJS-WP/js/
• But should be: /wp-content/plugins/pgnviewerjs-wp/js/

Allow the parameter hideMovesBefore of the PgnViewerJS, to suppress moves before in combination with startPlay.

The latest changes were severe, but with them, it is much easier to deploy then. So I should try at least to upgrade, and to see, if everything is working. If necessary / possible, I can upgrade as well now working parameters.