Code Monkey home page Code Monkey logo

pgnviewerjs-wp's Introduction

PgnViewerJS-WP

Integration of PgnViewerJS into WordPress. This is a small layer around the original PgnViewerJS, but is needed to use it in a WordPress installation. The plugin should provide the following interfaces:

Basic View

[pgnv]1. e4 e5 2. ...[/pgnv]

This is the PgnViewer (mostly needed): allows to play through a game (including variations), printing the comments, NAGs, ...

Edit Mode

 [pgne]1. e4 ...[/pgne]

Allows to edit and view a game. At the end, you may use the PGN button to display the notation, that then may be copied again in the WordPress post entry.

Single Position

 [pgnb fen=<a FEN string>][/pgnb]

Displays a board position only, no moves.

Print View

 [pgnp]1. e4 e5D 2. Nf3 Nc6D ...[/pgnp]

Allows to print a game in a format similar to magazines and books. For that purpose, the notation of PGN was expanded by the "D" at the end of a move, that stands for the diagram.

Build

The build is done with Grunt, so the package.json file helps how to install the necessary tools. After installation, do the following steps:

  • Go into the root directory (with node.js, npm and Grunt installed).
  • Run grunt without any arguments.
  • This will build the distribution currently named PgnViewerJS-WP.zip.
  • Go to your WordPress website (as administrator), and upload the plugin.
  • Activate the plugin in WordPress.
  • Build an example page with the following in it: [pgne]1. e4[/pgne]
  • Save the page, and open the URL to the page.

If everything works well, you will have now a page with a rendered chessboard in it, which is in edit mode, so you may now add moves that are shown in the section below. Read the documentation of PgnViewerJS what to do with the tool then.

Planned

  • Update the implementation to use the new box model. At the moment, users have to include classic boxes to have the chess games visualized.
  • Allow to have a default configuration, so that has not to be repeated all the time on each page.

Configuration

This will explain the configuration options that are directly supported. Details will be contained in the father implementation, so only the mapping in WordPress has to be explained. Here is a list of the relevant parameters:

  • position: Gives the FEN string of the start position of the game. Default is the inital position.
  • orientation: values are white (default) or black.
  • layout: values are top (default, board at the top, moves at the bottom) or left (board at the left, moves at the right).
  • size: the width of the column including everything, like 750px.
  • boardsize: the width of the board alone, like 400px.
  • locale: the locale to use for tooltips and the move SAN notation. Values are: en, de, fr, es and many more.
  • piecestyle: values are merida (default), wikipedia, alpha, uscf, case, condal, maya, leipzig, beyer and chesscom.
  • theme: values are zeit (default), green, chesscom, informator, sportverlag, beyer, falken, blue.

For other configuration parameters, see the online documentation of the configuration of the original viewer. Convention here is, that the parameters are all lowercase in WP, but converted then back for the call of PgnViewerJS.

A complete example looks like:

[pgnv position="r1bq1rk1/1p2nppp/1bp2n2/4p3/P1B1P3/B1P2N2/3N1PPP/R2QK2R b KQ - 3 13" 
orientation=black layout=left size=750px boardsize=400px locale=de ] 
13... Bxf2+!? 14. Kxf2 Ng4+ 15. Kg1? (15. Ke2 Qb6 16. Qg1) Qb6+! 16. Nd4 exd4 
17. Rb1 Qa7 18. Qf3 d3+ 19. Kf1 Ne3+ 20. Ke1 Bg4 21. Qg3 Nc2+ 22. Kf1 Be2# [/pgnv]

Reference

  • GitHub: Here is the original JavaScript implementation available.
  • PgnV Demo: Demonstration web site for the features that are currently inluded in PgnViewerJS, and may soon be integrated into the Wordpress plugin in a similar way.
  • Grunt: Grunt documentation

pgnviewerjs-wp's People

Contributors

dependabot[bot] avatar mliebelt avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

jminkler

pgnviewerjs-wp's Issues

Ensure that boolean values of parameters are not converted to strings

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.

Check all possible attributes and create issues for the ones not working

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.

wrong directory name for assets

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/

Add notation as parameter

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

Need more documentation, I cannot implement

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.

Provide block support for plugin

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

Ensure scrollbar when using theme "chesscom"

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.

Allow generation of ID if missing

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.

Correct wrong CSS in Wordpress

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;
}

Integrate PgnViewerJS as WordPress plugin

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).

No attribute not done correctly

The simplest example leads to a strange display.

[pgnv]e4 d5[/pgnv]

Result
image

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

image

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

Convert Ellipsis into 3 dots again

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.

Missing Fontawesome Icons on theme 2021

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.

Strange error when parsing

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 :-(

Wrong styling in theme 2020 (of Wordpress)

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

image

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.

Layout left|right without size not working correctly

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]

Add notationlayout as parameter

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).

Use a current version of PgnViewerJS (with the new layout)

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.

Test current version of Wordpress (5.6)

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.

Play button does not work as expected

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.

Ignore empty lines in PGN

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.

Upgrade PgnViewerJS version

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.