Display the PGN viewer on a responsive website

[programarivm]

Hello there,

I've just set up PgnViewerJS on my website and I love it! It looks great. I'm wondering how it could be setup on a responsive website.

Any help will be very much appreciated.

Thank you,

[mliebelt]

Could you explain what do you mean by "a responsive website"? What are the necessary features the viewer should have to be responsive? I remember, there should be an issue that addresses automatic change of configuration depending on the size of the screen used, I think that this is related here. I will search for the issue, and link to it.

Found it, it is #107 That issue contains at least some of the requirements that should be taken into consideration. Is anything missing there?

[programarivm]

Thank you @mliebelt for the response.

Sorry that I'm still not too sure about how to set up PgnViewerJS at https://chesscoach.me so that the chessboard size can change according to the viewport.

The opening.html.php file contains the code being used at the moment. The chessboard width and height are initialized with the default value being 320px.

...

    <script>
      const pgn = '<?php echo $movetext; ?>';
      PGNV.pgnView('board', {
        pgn: pgn,
        locale: 'en',
        pieceStyle: 'wikipedia',
        resizable: false,
        startPlay: pgn.split(' ').length,
        showFen: true
      });
    </script>

...

[mliebelt]

There is currently no way to setup the chessboard in a responsive way. I have linked the corresponding image, that has similar / same feature demand. The relevant attributes that are included in the configuration are:

• layout: top|left
  • top would be more for a portrait layout, because the moves go to the bottom
  • left would be for a landscape layout, moves go to the right
• width: denotes the width of the complete widget
• boardSize: denotes the size of the board alone

There are some more attributes that could be used here as well. See the PgnViewerJS Documentation for each of the attributes.

When you setup the script, you have to include the "right" attributes. There are some defaults, but the viewport of the screen that shows the page is never used.

Feel free to experiment with it, but at the moment, there is no easy solution possible that fits all situations.