Wikipedia:WikiProject Chess/Interactive chess boards

Add links
From Wikipedia, the free encyclopedia

Basic idea[edit]

An interactive chessboard feature to include in chess-related articles. At its most basic, it would display the board and pieces, and allow a user to click backward/forward through a game.

Past discussions[edit]

Most of these threads have been based on general interest or on קיפודנחש's PGN viewer in particular, which has been operational on the Hebrew Wikipedia for a few years now. Importantly, the 2016 May VPP thread includes a survey gauging support for the idea of an interactive chess board in general. It has received 9 supports and 0 opposes as of 2016 May 28.

Kipod's PGN viewer[edit]

קיפודנחש (Kipod) developed a MediaWiki PGN viewer, which is loaded by default on hewiki since 2013. Sample pages in various forms - single game, multiple games per viewer, multiple viewers on the same page, with and without collapse, etc.

Kipod's description of the testing version[edit]

enwiki deployment recipe
  1. add a hidden gadget. this adds the script and the css to RL, but does not actually load it for any user, so there is practically no extra load/bloat for pages not containing chess games
  2. add 2 lines to common.js, such that after a page finish loading, it checks if the page contains games (by testing for some specific CSS class), and loads the viewer if needed
  3. (maybe) add a couple of lines to common.css and/or to mediawiki:noscript.css, to support correct display for readers with and without JS.
  4. create a template that displays the viewer for readers with JS enabled, or the PGN for readers with no/disabled JS. preliminary version: Template:Pgnviewer.
viewer features / behavior
  • it is purely a game viewer: it is not meant to, and cannot, be used to play chess. it shows previously played games using the games' PGN
  • like any one of the many available JS pgn viewers, it has forward, backward, jump to a move, and animate ("autoplay") buttons.
  • a single viewer can display any number of games, using HTML selector, and multiple viewers can exist on one page. an example can be seen on this page on hewiki, which contains every single game from Tata Steel Chess Tournament of 2013 - one viewer per round, containing all the round's games (note that the games are contained in collapsed elements - expand to see the viewer).
  • it supports FEN for initial position, so in addition to traditional games, it can be used, e.g,, for chess problems, or for Chess960
  • the source is about 900 lines of JS and 40 lines of CSS, weighs about 29 KB (not minified - with RL, it's expected to be around 19KB). it can be seen here: he:Mediawiki:Gadget-pgnviewer.js. Compared with any other PGN viewer I could find, it's very compact: other open source viewers typically use multiple files and several thousands lines of JS code.
Answers to questions
  1. Will this be an opt-in preference or gadget?
    • The goal is for it to be enabled by default. Opt-in features make sense for interface and behavior, not for content. There is a quasi-opt-in because a user must enable javascript for it to function. This is similar to other content-related behaviors, such as collapsible elements, or sortable tables.
  2. What, if anything, would be displayed for a user with javascript disabled?
    • Users with no/disabled javascript see the raw PGN. We currently display raw PGN in many chess-related articles, so there will be no change for users not running javascript.
  3. Will the javacript be added to MediaWiki:Common.js or must a user add it to their own common.js?
  4. If necessary, would it work as a script enabled on an individual user basis?
    • This is possible, but is not the goal. It can be added to your own javascript page for demonstration purposes. Currently, it requires some work setting this up and testing it on enwiki. A local demo (which will require loading a personal script) may be made sometime soon.
Demo parts
  1. the pgn viewer script in my userspace (~ 27K of non-minified JS)
  2. a small CSS in my userspace
  3. a small "wrapper" script to load the previous two, also in my userspace
  4. a template that accepts order-based parameters, each of which is a game using the PGN notation
  5. a sample page using this template. interested users will be able to try it on any (non article-space) page
  6. an instruction page explaining what need to be done to add the whole shebang to enwiki. to implement the system, a local sysadmin will have to follow the instructions.

to review the demo, one will have to add the wrapper script to their personal js.

i am not 100% confident the demo will work for no-javascript viewers: this may require adding a line to Mediawiki:Noscript.css.

Demo of Kipod's PGN viewer[edit]

  1. add to your personal JS page the line importScript('User:קיפודנחש/pgnwrapper.js');
  2. view User:קיפודנחש/pgn viewer demo. (notice the "flicker" when opening the page, where you see the raw PGN before it disappears and replaced by the viewer. this will not happen once all the right pieces are in place).
  3. to test it yourself, create a page and add to it
{{Pgnviewer
| 1 = pgn of game 1
| 2 = pgn of game 2
| ... up to 30 games 
}}

and open the page. the viewer is a bit restrictive about comments: comments can't be nested, and should only use { .... }, not ( ... ). if the pgn contains comments, an extra button is added, to hide/reveal the comments.

update[edit]

  1. The template now allows the editor to select size (similar to {{Chess diagram}}, the editor defines the square size), between 20 and 60 pixels, defaulting to 45. It also supports "collapsible" and "collapsible collapsed" modes, and it can be styled to left, right, or center alignments.
  2. To accommodate Algebraic Notation in addition to PGN, it can accept 0-0 and 0-0-0 for castling (PGN standard mandates O-O and O-O-O, i.e., capital-letter O, not digit zero)
  3. viewer now fully supports Chess960.

Fred Gandt's viewer[edit]

Fred Gandt is working on another interactive game viewer intending to be a lightweight alternative. It does not use PGN, which may be both an advantage and disadvantage, depending on priorities.

Development is in progress paused.

See also[edit]

Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:WikiProject_Chess/Interactive_chess_boards&oldid=908016916"