Extension:ChessBrowser

From mediawiki.org
MediaWiki extensions manual
OOjs UI icon advanced.svg
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>
Translate the ChessBrowser extension if it is available at translatewiki.net

Check usage and version matrix.

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 place the file(s) in a directory called ChessBrowser in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
    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 Ic skip previous 48px.svg

.pgn-button-toend is the button taking readers to the last move of the game. By default it is Ic skip next 48px.svg

.pgn-button-advance is the button taking readers to the next move of the game. By default it is Ic keyboard arrow right 48px.svg

.pgn-button-retreat is the button taking readers to the previous move of the game. By default it is Ic keyboard arrow left 48px.svg

.pgn-button-flip is the button which changes the perspective of the game. By default it is Yin and Yang symbol.svg

.pgn-button-play is the button which start autoplay of the moves. By default it is Ic play arrow 48px.svg

.pgn-button-faster is the button which makes the autoplay advance each move more quickly. By default it is Ic directions bike 48px.svg

.pgn-button-slower is the button which makes the autoplay advance each move more slowly. By default it is Ic directions walk 48px.svg

.pgn-button-play.pgn-image-button-on is the class denoting the play button when the autoplay is paused. By default it is Ic pause 48px.svg

.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 Chess plt45.svg

.pgn-ptype-color-pd By default it is Chess pdt45.svg

.pgn-ptype-color-rl By default it is Chess rlt45.svg

.pgn-ptype-color-rd By default it is Chess rdt45.svg

.pgn-ptype-color-nl By default it is Chess nlt45.svg

.pgn-ptype-color-nd By default it is Chess ndt45.svg

.pgn-ptype-color-bl By default it is Chess blt45.svg

.pgn-ptype-color-bd By default it is Chess bdt45.svg

.pgn-ptype-color-ql By default it is Chess qlt45.svg

.pgn-ptype-color-qd By default it is Chess qdt45.svg

.pgn-ptype-color-kl By default it is Chess klt45.svg

.pgn-ptype-color-kd By default it is Chess kdt45.svg

See also[edit]