Insert a variable instead of plain chess notation into the pgn viewer.

[andreaperrone87]

Hello @mliebelt,

I am Andrea from Italy.

I am writing a website for the chess club of my town, and embedding the PgnViewerJS is an elegant way to show some games.

I have to say, first of all, that my programming experience is almost... null

After linking the stylesheet and the script in the header and inserting the <div id="board"/>, let's say that I have a <div id="chess"> with some chess notations (formatted in a correct way e.g. <div id="chess">'1 e4 e5 2 Nf3 Nc6' </div>) and I would like to insert that text as a variable into the pgn viewer and not manually the notations, via javascript function (that works onclick) like this:

var notation = document.getElementById("chess").innerHTML; var newScript = document.createElement('script'); newScript.text(PGNV.pgnView('board', {pgn: notation, width:400px}); document.getElementById("chessboard").appendChild(newScript)

Is this solution correct? Actually, I tried it in the browser and partially it works: it creates me a new board into that div with the id "chessboard", but does not show the notation.

How can I resolve this?

Thank you for your work

Greetings from Italy!

[mliebelt]

Let me rephrase what you try to do, just to understand:

• You have the notation already somehow in your context as a variable.
• This notation is known, when the PgnViewerJS is built.

Why not just embed it in that way. Code could look like:

var notation = document.getElementById("chess").innerHTML;
PGNV.pgnView('chessboard', { pgn: notation, width: 400px }));

That is similar to your code, but without the extra redirection (creating text for a script, embedding it). If you want to set the notation for the viewer at runtime, that is a complete different story. There should be an API (I have to look that up, and create then an example for it) to set the notation in an empty player at runtime.

Or is the above code already a solution for you?

[andreaperrone87]

Hi and thanks for your reply.

That you suggest me is good for me.

But I will try to explain myself better:

In the html page I have put some buttons with some hidden paragraphs attached e.g. <li><button class="game" onclick="maketitle()">GAME ONE</button><p style="display:none"> ' 1 e4 e5 ' </p></li>

Now, I have that function maketitle() that displays the game name in a main div but furthermore, exploiting the fact that the p follows directly the button, I wrote into that same function var notation = this.nextSibling.innerHTML to create the variable "notation" i.e. ' 1 e4 e5 '.

But now if I pass the variable to the property (is that a property?) pgn: into the string PGNV.pgnView nothing happens and the script creates a chessboard in start position with no notations.

How have I to link the two things?

Thanks again!

[andreaperrone87]

@mliebelt

Well, re-reading now I understand that maybe mine is an Off Topic question... You have been already exhaustive and I thank you again. Actually the solution works and is more linear than the previous made by me. I will write you when I ll find the solution! :)

[mliebelt]

I think the problem is, that the only API that is currently working is to create a complete board including notation that is then replacing the content of a DIV element (given as ID). For the future, it may be possible to have variants, that allow you to

• Create the board independent.
• Select a game from a list and show that game then in the viewer.

The current solution for that is, that you use the API in such a way to give all games to the viewer, and have a select box to switch between them. The following links show you the source code of some examples (HTML pages):

• Many games (left example): https://github.com/mliebelt/PgnViewerJS/blob/master/modules/pgn-viewer/examples/configuration/input/many-games-top.html
• Many games from external file: https://github.com/mliebelt/PgnViewerJS/blob/master/modules/pgn-viewer/examples/configuration/input/2_pgnFileExternal.html
• Many games from internal file: https://github.com/mliebelt/PgnViewerJS/blob/master/modules/pgn-viewer/examples/configuration/input/3_many-games-left.html

[andreaperrone87]

HELLO again @mliebelt

I found the solution for that thing that I was asking you! It was a issue of sintax if the solution did not work. Now i have a page with a list of games and by clicking on one of them....... tadàààà the chessboard with the relative notation appears!

I answer only now because is all the afternoon that i search for the solution.

By the way I have to ask you last thing, have patience.

what about locale : 'it' ? how can I make it work? Should I download something? It seems not working because when I set up it I receive this red message Offset: 11 PGN: 1. e4 c5 2.Cf3 * Expected ".", "O-O", "O-O-O", "x", [R,N,B,Q,K,P], [a-h], or whitespace but "C" found.

(C stands for 'Cavallo' that is the Knight)

Thank you very much, I will show you the url of the website when it will be finished :D

Bye! Andrea from Italy

[mliebelt]

Locale it should work. But not as an input, only as output. PGN is a standard that defines that the input (SAN == Standard Algebraic Notation) has to be in English only. So if the input follows that, the notation should work. By selecting then as locale: "it", you will then the game displayed in italic.

When you use that, you will notice that the italian locale is not complete. Compare the italian file with the english which is the default.

[andreaperrone87]

Thank you, now I understand. Yes it is perfect. Thank you again, I will show you the website when it is online so you can see, if you like! I salute you! :)

[andreaperrone87]

one further thing @mliebelt sorry, is there a way to highlight the current move like happens in the examples on the documentation page?

[mliebelt]

What do you mean by highlight?

The corresponding rule is this one.

.pgnvjs .moves move san.yellow {
    /*background-color: rgba(255, 255, 153, 1.0);*/
    color: var(--gray-800);
    background-color: var(--highlight);
}

Is that not working for you? Have a look at https://mliebelt.github.io/PgnViewerJS/examples.html#1001 to see it working live.

[andreaperrone87]

no it does not work!

[andreaperrone87]

ah ok now i control the rule

EDIT maybe I did not understand what to do :D

[andreaperrone87]

@mliebelt no sorry does not work!

[andreaperrone87]

I forked your project for error, sorry!
And I would like to ask you if I can write in the source html code the github adress of pgnviewerjs.

[mliebelt]

No problem, I would like it to be referenced. Hopefully others like it as well, and use it then.

[andreaperrone87]

thanks!

[andreaperrone87]

Sorry @mliebelt if you have seen that I forked your project but it was by accident! :)

[andreaperrone87]

@mliebelt sir i promise this is the last message from me :D but help me please to understand about the highlighting of the current move.

I call in the head jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> and the pgnv.js script
<script src="./CHESSBOARD/package/lib/pgnv.js" type="text/javascript" ></script> I don't insert the link to any stylesheet (when I made npm install @mliebelt/pgn-viewer I obtained the package folder in which there is a lib with only .js file into it).

Where I make the mistake?

Thanks for the patience!

[mliebelt]

It would be easier to diagnose if I could look at something online. Textual description of a fault is not sufficient. Please find a way to make it online, and then show it. Sorry, but I cannot speculate what is wrong in your context. The example given above is working ...

[andreaperrone87]

ok, so I will write you again when it is online! Thank you, you are very kind. Bye! :)

[andreaperrone87]

Hi @mliebelt, sorry if I disturbed you many times, I would like to tell you that all works fine I dont know where I made the mistake in the code. Thank you for all.

Andrea

[mliebelt]

I have found a difference in your version to mine (the current version). See #262 for details. This was fixed ~15th of June 2021, so I think you have to upgrade your version. This should be fixed in version 1.5.11, the current available version (from NPM) is 1.5.12.

The styling had changed, so instead of using an a element, I use now a san element for the moves text.

[andreaperrone87]

What have I to do to get the latest version? I just have to write in terminal npm upgrade @mliebelt/pgnviewer?

[mliebelt]

Depends on where you are using it:

• Part of a JavaScript / Web project with a file package.json? ==> There should be the dependency, upgrade that to 1.5.12.
• Used standalone: npm install @mliebelt/pgn-viewer, that gives you a directory node_modules/@mliebelt/pgn-viewer/lib locally with the different flavors of the library. You need just one file to run it.

I hope that helps getting the current version.

[andreaperrone87]

It works @mliebelt thank you for your patience very much thank you

http://provalupiae.altervista.org/partite.html

let me know if I should write something different or more in the source code to quote your work.

[mliebelt]

Nice to hear that, great! I am glad that I could help you.