Jump to content

Extension:ChessBrowser

From mediawiki.org
MediaWiki extensions manual
ChessBrowser
Release status: beta
Implementation Parser extension , Tag
Description Create interactive chess game viewer from PGN specified in XML tag
Author(s) Wugapodes and Kipod
Latest version 0.4.0 (2020-03-30)
Compatibility policy Master maintains backward compatibility.
MediaWiki 1.25+
License GNU General Public License 3.0 or later
Download
README
‎<pgn>...‎</pgn>
Quarterly downloads 2 (Ranked 138th)
Translate the ChessBrowser extension if it is available at translatewiki.net
Issues Open tasks · Report a bug

The ChessBrowser extension creates an interactive chess game viewer from w:Portable Game Notation. The client side implementation is based on Kipod's pgnViewer gadget in use on the Hebrew Wikipedia.

Installation

[edit]
  • Download and move the extracted ChessBrowser folder to your extensions/ directory.
    Developers and code contributors should install the extension from Git instead, using:cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/ChessBrowser
  • Add the following code at the bottom of your LocalSettings.php file:
    wfLoadExtension( 'ChessBrowser' );
    
  • Yes Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Documentation subpages

[edit]

Localisation

[edit]

Like many other MediaWiki extensions, ChessBrowser's user interface legends and messages can be translated at translatewiki.

A particular issue to look out for when localising ChessBrowser are rank and file notation and legends. Many world languages use European numbers (1–8) for rank, and Latin letters (a–h) for file. In some languages, use of different numerals or letters is common. If your language uses different characters, translate the extension with optional messages enabled. No need to do it for languages where common chess notation is the default (1-8 / a-h). This affects algebraic notation display, as well as board display rank and file legends.

CSS overrides

[edit]

Most of the board styling can be modified using CSS allowing both sitewide configuration (at MediaWiki:common.css) and by-user configuration (at Special:MyPage/common.css). The full range of classes can be found in the ext.chessViewer.css file, but some common styling overrides are listed below:

Button images and classes

The images used on interface buttons are defined in CSS. To change them, add a class styling like the following, but replace the url used below with the url of the image you wish to use.

To remove a button from the interface, set display: none; property.

These overrides can be added using TemplateStyles, than can be transcluded in pages using the <pgn> tag.

.pgn-button-* {
	background-image: url( //upload.wikimedia.org/wikipedia/commons/e/e9/Ic_skip_previous_48px.svg );
	/* add display: none; to remove this button from the interface */
}

.pgn-button-tostart is the button taking readers to the first move of the game. By default it is

.pgn-button-toend is the button taking readers to the last move of the game. By default it is

.pgn-button-advance is the button taking readers to the next move of the game. By default it is

.pgn-button-retreat is the button taking readers to the previous move of the game. By default it is

.pgn-button-flip is the button which changes the perspective of the game. By default it is

.pgn-button-play is the button which start autoplay of the moves. By default it is

.pgn-button-faster is the button which makes the autoplay advance each move more quickly. By default it is

.pgn-button-slower is the button which makes the autoplay advance each move more slowly. By default it is

.pgn-button-play.pgn-image-button-on is the class denoting the play button when the autoplay is paused. By default it is

.pgn-button-disabled sets the styling for buttons when they are unavailable. By default it makes the buttons slightly transparent.

Piece icons

The images used for pieces are defined in CSS. To change them, add a class styling like the following, but replace the url used below with the url of the image you wish to use.

.pgn-ptype-color-* {
	background-image: url( //upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg );
}

.pgn-ptype-color-pl By default it is

.pgn-ptype-color-pd By default it is

.pgn-ptype-color-rl By default it is

.pgn-ptype-color-rd By default it is

.pgn-ptype-color-nl By default it is

.pgn-ptype-color-nd By default it is

.pgn-ptype-color-bl By default it is

.pgn-ptype-color-bd By default it is

.pgn-ptype-color-ql By default it is

.pgn-ptype-color-qd By default it is

.pgn-ptype-color-kl By default it is

.pgn-ptype-color-kd By default it is

See also

[edit]