Documentation for maxiGos v8

Copyright 1998-2024 - FM&SH

What is maxiGos?

MaxiGos is a set of sgf viewers to display go diagrams, games or problems in a web page.

You can use maxiGos free of charge on your website (BSD type license).

What are the pre-requisites?

The end user browser must be HTML5 compliant, with javascript enabled.

If you use only maxiGos standalone viewers (that are in javascript), there are no pre-requisite on the server where maxiGos is installed.

However, if you are using the full version of maxiGos (which uses javascript, css and php), it may be necessary to have php available on the server.

How to quick start?

Download one of the maxiGos viewers from this page, for instance "maxigos-neo-classic-game.js"

Move or copy it somewhere on your website.

If the sgf file you want to display is called "blood-vomit-en.sgf", insert in the <body> part of a html page where you want the viewer displays a code as:

<script
	src="ppp/maxigos-neo-classic-game.js"
	data-maxigos-sgf="qqq/blood-vomit-en.sgf">
</script>

Replace "ppp/" by a relative path between the html page and the "maxigos-neo-classic-game.js" maxiGos script.

Replace "qqq/" by a relative path between the html page and the "blood-vomit-en.sgf" sgf file.

You should get the result below:

More samples here!

How to install the full version of maxiGos?

To install the full version of maxiGos, download maxiGos archive, unzip and copy it anywhere in your web site. No database required.

If you don't want to install the full version of maxiGos, you can just download one standalone viewer. See Using a standalone viewer chapter for more details.

To test the full version, launch _maxigos/_sample/ page in a browser.

The end user has nothing to do on his device. He has just to let javascript enable in his browser.

How to use maxiGos?

The basic way to insert maxiGos in a web page is:

But we can also use:

Using a standalone viewer

Use a standalone viewer if you want to keep things simple.

A standalone viewer is a maxiGos viewer where all the code and ressources are in a single javascript file.

These files are stored in "_alone" folders of the samples provided with maxiGos. These samples can be found in the "_sample" folder.

The code to insert in your web page

Include in your web page where you want the viewer displays something <script> and </script> tags with the javascript file name of a standalone viewer as value of the "src" attribute, and a sgf file name or a sgf record or an url that generates a sgf record as value of the "data-maxigos-sgf" attribute.

If one uses a sgf file name, the code is for instance:

<script
	src="xxx/maxigos-neo-classic-problem.js"
	data-maxigos-sgf="yyy/myFirstSgf.sgf">
</script>

Another way is to place a sgf file name or a sgf record or an url that generates a sgf record between <script> and </script> tags. For instance:

<script
	src="xxx/maxigos-neo-classic-problem.js">
	yyy/myFirstSgf.sgf
</script>

Of course, you have to adapt the path (here "xxx") before "maxigos-problem.js" script which contains the code of a standalone viewer, taking into account where you stored it, and where your web page is. It's a relative path between your web page and the folder that contains the script file.

You have to adapt the path (here "yyy") before the sgf file name, taking into account where you stored it, and where your web page is. It's a relative path between your web page and the folder that contains the file.

If one uses a sgf record, the code is for instance:

<script
	src="xxx/maxigos-neo-classic-problem.js"
	data-maxigos-sgf="(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])">
</script>

Another way is:

<script
	src="xxx/maxigos-neo-classic-problem.js">
	(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])
</script>

Note: when one inserts directly a sgf record in a page as in above samples, the CA property is useless and ignored if present, since the sgf record charset is necessarily the same as the charset of the page.

If one uses the "data-maxigos-sgf" attribute, the code is for instance:

If one uses an url that generates a sgf record, one must add the "data-maxigos-source-filter" attribute which value is a regular expression that matches the url. The code is for instance:

<script
	src="xxx/maxigos-neo-classic-problem.js"
	data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$"
	data-maxigos-sgf="/download/file.php?id=23">
</script>

Another way is:

<script
	src="xxx/maxigos-neo-classic-problem.js"
	data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$">
	/download/file.php?id=23
</script>

The url must respect the "same origin" policy (i.e. same protocol, same domain, same port as the calling page).

Note 1: one doesn't need to install all maxiGos files on the server to use a standalone viewer. One just has to copy (anywhere) on the web server the viewer script file. If the language is not english or french, one also has to include the internationalization file of this language (one of those stored in "_i18n" folder).

Note 2: in theory, a standalone viewer should not use external resources (images, ...). If an external resource is required, maxiGos looks for it at the place where this ressource is in the full version.

Customization of standalone viewers

Customization of standalone viewers can be done by using "data-maxigos-xxx" attributes, where "xxx" is a maxiGos parameter (see the "Component parameters" chapter to learn more about maxiGos parameters). Because only lower case letters are allowed in attribute names, replace any upper case letter by its lower case form prefixed by "-". For instance the attribute name for "in3dOn" maxiGos parameter is "data-maxigos-in3d-on".

Many things can be changed using attributes. For instance, below is a way to display a diagram without 3D effects using a neo-classic viewer that initially displays with 3D effects:

<script
	src="xxx/maxigos-neo-classic-diagram.js"
	data-maxigos-in3d-on="0">
	data-maxigos-sgf="(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed])">
</script>

It is also possible to make some changes in the css file (as for goban background in the above sample).

Using a "plugin"

See the plugin pages (for joomla or for wordpress) for more details.

Using a "BBCode"

See the BBCode page for more details.

Using a "maker" in php

Use a maker when you need to heavily customize the viewer.

The maker is a php script that generates "on the fly" the javascript code of a maxiGos viewer, using data found in its code.

The line to insert in your web page

Include in your web page where you want the viewer displays something a line such as:

<script
	src="xxx/classic/_maker/basic.php"
	data-maxigos-sgf="yyy/myFirstSgf.sgf">
</script>

Of course, you have to adapt the path (here "ppp") before the php script (here "classic/_maker/basic.php") which is called a maker, taking into account where you installed maxiGos, and where your web page is. It's a relative path between the folder where your web page is and the folder where the maker script file is.

The sgf can be specified as for standalone viewers.

Customization of makers

The customization of makers can be done as for standalone viewers.

Using a "loader" in javascript

Use a loader when you need to insert sgf data between other html tag such as <div> and </div>. This method is notably slower than others.

The code to insert in your web page

Insert for instance in your web page several <div> and </div> tags with one attribute named "data-maxigos" which value is a maxiGos configuration name.

Insert a sgf file name or a sgf record or an url that can generate a sgf record between each of these tags.

Insert "mgosLoader.js" script in the web page after all these tags. This script will replace each <div> and </div> tags contents by a maxiGos viewer that displays those contents.

For instance:

<div data-maxigos="problem">
	(;FF[4]GM[1]SZ[19]VW[aa:lh]FG[1]AW[ee]AB[de][fe][ed];B[ef]C[Correct!])
</div>
<div data-maxigos="basic">
	(;FF[4]GM[1]SZ[19];B[qd])
</div>
<script src="ppp/_js/mgosLoader.js"></script>

Of course, you have to adapt the path (here "ppp/") before "_js/mgosLoader.js", taking into account where you installed maxiGos, and where your web page is. It's a relative path between your web page and the "loader" script file.

Customization of loaders

As for standalone players, customization of loaders can be done by adding "data-maxigos-xxx" attributes to the tag where the viewer displays, and where "xxx" is a maxiGos parameter.

Internationalization

The default language for maxiGos is the language of the tag where it displays (i.e. the language specified by the html "lang" attribute of the tag, or by the html lang attribute of one of the ancestors of the tag).

In practice, the lang attribute is often specified for the html tag itself.

If no lang attribute is specified, maxiGos tries to use the language of the navigator or english.

You can force the language to be english by adding data-maxigos-l="en" to each tag where a maxiGos viewer will display.

For instance:

<script
	src="ppp/maxigos-neo-classic-basic.js"
	data-maxigos-l="en"
	data-maxigos-sgf="qqq/myFirstSgf.sgf">
</script>

Note that maxiGos doesn't translate sgf content. It can just change the language of its own messages, button labels, …

To set another language, insert before the first call to maxiGos scripts an internationalization script for this other language. For instance, for japanese, you can insert the "maxigos-i18n-ja.js" script found in "_i18n" folder using something like (replace "ppp" by a relative path between your web page and "_i18n" folder):

<script src="ppp/_i18n/maxigos-i18n-ja.js"></script>

If you can't or don't want to insert this ligne each time in your web page, you can simply add the code which is inside the internationalization script of the desired language at the beginning of the script of the viewer you are using.

Then add data-maxigos-l="ja" to each tag where a maxiGos viewer will display such as:

<script data-maxigos-l="ja" src="ppp/maxigos-neo-classic-basic.js">qqq/myFirstSgf.sgf</script>

All internationalization scripts delivered with maxiGos are in "_i18n" folder. If the internationalization script for a language doesn't exist, you can try to create it (try to do it from the japanese one).

Note 1: if you create an internationalization file, it is a good pratice to choose a ISO 639 language code (for instance "ja" for japanese, not "jp").

Note 2: when using a "maker" (see the corresponding chapter) the easiest way is to use the "lang" parameter of the maker to change the language.

Encoding

Encoding of your page

MaxiGos works in "UTF-8", but can be included in a page which is not in "UTF-8".

When using a maxiGos standalone viewer script or an internationalization script in a page which is not in "UTF-8", just add charset="UTF-8" to any <script> tag that includes maxiGos scripts in your page.

For instance:

<script charset="UTF-8" src="/_maxigos/_alone/maxigos-basic.js">

Encoding of sgf files

MaxiGos can well display sgf files encoded in different charsets if the sgf CA property in these sgf files is properly set. In this case, maxiGos catches the value of the CA property then changes the encoding of the sgf file to "UTF-8". If a sgf file has no charset, maxiGos assumes that the charset is "ISO-8859-1" which is the defaut value of the CA property according to the sgf standard. Unfortunately, the CA property is often missing even when the actual charset of the file is not "ISO-8859-1", especially for sgf files encoded in asian charsets. And maxiGos doesn't (cannot?) try to guess what is the correct charset when there is no CA property in the sgf file. The only way for the moment to solve this problem is to use a text editor to add the correct CA property in the sgf file.

Note that when the actual charset of the sgf file is "UTF-8", the value of the CA property must be set "UTF-8" too (a missing CA property is not convenient in this case).

If one inserts some sgf record as is in the code of a page using a text editor, maxiGos assumes that the encoding of this record is the same as the encoding of the page (it is always the case in theory) and therefore ignores the CA property.

When maxiGos produces a sgf record, the result is always in UTF-8.

Even if in theory maxiGos can be included in a page which is not in "UTF-8" and read sgf files that are not in "UTF-8", the best is to use UTF-8 everywhere when possible.

Encoding and language

Encoding and language are different. "UTF-8" is convenient for any(?) language, so it is the best choice as encoding when you can use it. When it is not possible, take care since some encoding cannot display some caracters of some languages. For instance, japanese words of a sgf file in Shift-JIS cannot be transformed automatically and displayed in a page in "ISO-8859-1", but it can be transformed automatically and displayed in a page in "UTF-8".

Don't use charset names such as "UTF-8", "ISO-8859-1", "Shift-JIS", "Big5", "GB18030" as value of "lang" attribute or "data-maxigos-l" parameter. Use language codes instead, such as "en", "fr", "ja", zh-hans", "zh-hant"....

Advanced usage

Components

MaxiGos javascript code is split in several file scripts. Five of them, mgos_lib.js, mgos_rls.js, mgos_prs.js, mgos_src.js and mgos.js, share common functions. Other javascript scripts contain component codes (usually one component per file script). For instance, the goban, the navigation bar or the comment box are components.

The name of a component file starts with "mgos" followed by the component name and the ".js" extension.

Each component has parameters than can be set using "data-maxigos-xxx" attributes (where "xxx" is a parameter name).

The components are:

Global parameters

Parameter Attribute Description Possible values Default value
allowFileAsSource data-maxigos-allow-file-as-source If 1, maxiGos accepts sgf files as data input. (0,1)1
allowStringAsSource data-maxigos-allow-string-as-source If 1, maxiGos accepts sgf string records as data input. (0,1)1
initMethod data-maxigos-init-method Initial action: display the goban as it was before the "first" move, or after the "last" move, or "loop" (in this case, Loop component is required), or advance of n nodes in the game tree."first", "last", "loop" or an integer"first"
sgfLoadCoreOnly data-maxigos-sgf-load-core-only If 1, one keeps core information only on the game (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) when decoding sgf.(0,1)0
sgfLoadMainOnly data-maxigos-sgf-load-main-only If 1, one keeps main variation only when decoding sgf.(0,1)0
sgfSaveCoreOnly data-maxigos-sgf-save-core-only If 1, one keeps core information only on the game (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) when encoding sgf.(0,1)0
sgfSaveMainOnly data-maxigos-sgf-load-main-only If 1, one keeps main variation only when encoding sgf.(0,1)0
sourceFilter data-maxigos-source-filter A string representing a regular expression that the sgf source has to match when it is inserted between html tags where the sgf viewer displays. This parameter is useful for instance to discard unwanted data source inserted by a user on a forum. Regular expression^[^?]+\\.sgf$

About component

This component contains the "About" button in its box, which allows the user to display some information about the viewer.

Parameter Attribute Description Possible values Default value
aboutAlias data-maxigos-about-alias Specify what element of the translation array one has to use to display the label of the "About" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "About" on the button. A string null
aboutBtnOn data-maxigos-about-btn-on If 1, display the "About" button in its own component box. (0,1)0

AnimatedStone component

This component moves the stones from the corner of the goban to their final location.

ParameterUseDescriptionValuesDefault value
animatedStoneOn data-maxigos-animated-stone-on If 1, maxiGos animates the stone placement. (0,1)0
animatedStoneTime data-maxigos-animated-stone-time Reference time used to compute duration of stone translation when placing it on the goban. The actual translation time depends of the distance between the starting point and the ending point of the translation.

Its default value is the value of the "loopTime" parameter if the "Loop" component is in use, otherwise 1000 ms.
Number1000

BackToGame component

This component displays a button to allow the user to go back to the game after entering some variations.

Parameter Attribute Description Possible values Default value
backToGameAlias data-maxigos-back-to-game-alias Specify what element of the translation array one has to use to display the label of the "BackToGame" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Back to game" on the button. A string null
backToGameBtnOn data-maxigos-back-to-game-btn-on If 1, display the "BackToGame" button in its own component box. (0,1) 0

Cartouche component

This component displays a cartouche for each player, with his name, his rank, etc.

Parameter Attribute Description Possible values Default value
bowlOn data-maxigos-bowl-on If 1, maxiGos displays bowls in cartouches. (0,1) 1
cartoucheBoxOn data-maxigos-cartouche-box-on If 1, maxiGos displays cartouches. (0,1) 0
prisonersOn data-maxigos-prisoners-on If 1, maxiGos displays the number of prisoners of each players in cartouches. (0,1) 1
shortHeaderOn data-maxigos-short-header-on If 1, maxiGos displays in cartouches for each player a stone of his color, his name and his level. (0,1) 1

Comment component

This component displays sgf comments in its box.

Parameter Attribute Description Possible values Default value
allInComment data-maxigos-all-in-comment If 1, maxiGos concats all comment from game root to current move and displays it in the comment box. (0,1) 0
headerInComment data-maxigos-header-in-comment If 1, maxiGos displays the header in the comment box.

The Header component has to be in use too, otherwise this parameter has no effect.
(0,1) 0

Edit component

It does not have its own main box.

It contains a toolbar and a textarea to edit comments.

It doesn't have any parameters.

File component

This component displays a menu to manage files ("New", "Open", "Save", etc.)

It is used with the Menu component.

It doesn't have any parameters.

Goban component

This component displays the goban.

It is the only one mandatory component.

Parameter Attribute Description Possible values Default value
asInBookOn data-maxigos-as-in-book-on If 1, maxiGos displays stones as in books (i.e. prisoners are left on the goban). If 0, maxiGos removes prisoners from the goban. If null, maxiGos looks at sgf FG property to determine what to do.

This parameter is useful to display diagrams, figures and kifus.
(0,1,null) null
eraseGridUnder data-maxigos-erase-grid-under If 1, maxiGos erases grid under marks and labels. (0,1) 0
gridMargin data-maxigos-grid-margin Grid margin. A real integer 0
gridPadding data-maxigos-grid-padding Grid padding. A real number 0
gobanMargin data-maxigos-goban-margin Goban margin. A real number 0
gobanPadding data-maxigos-goban-padding Goban padding. A real number 0
in3dOn data-maxigos-in3d-on If 1, maxiGos displays stones with a 3d effect.

Even if this component is mainly used by Goban component, it is also used by Cartouche, MoveInfo and NotSeen components.
(0,1) 1
indicesOn data-maxigos-indices-on If 1, maxiGos displays indices. If 0, maxiGos hides indices. If null, maxiGos looks for sgf FG property to determine if indices have to be displayed. (0,1,null) null
japaneseIndicesOn data-maxigos-japanese-indices-on If 1, maxiGos displays "iroha" indices.

indicesOn should be set to 1.
(0,1) 0
marksAndLabelsOn data-maxigos-marks-and-labels-on If 1, maxiGos displays marks and labels. (0,1) 0
markOnLastOn data-maxigos-mark-on-last-on If 1, maxiGos displays a mark on the last played move. (0,1) 0
numAsMarkOnLastOn data-maxigos-num-as-mark-on-last-on If 1, maxiGos displays a number as mark on last played move.

markOnLastOn should be set to 1.
(0,1) 0
numberingOn data-maxigos-numbering-on If 2, maxiGos displays numbers on stones modulo 100. If 1, maxiGos displays numbers on stones. If 0, maxiGos hides numbers on stones. If null, maxiGos looks for FG, MN et PM sgf properties to determine how to display numbers on stones. (0,1,2,null) null
oldJapaneseIndicesOn data-maxigos-old-japanese-indices-on If 1, maxiGos uses kanjis to display indices.

indicesOn has to be set to 1.
(0,1) 0
oldJapaneseNumberingOn data-maxigos-old-japanese-numbering-on If 1, maxiGos uses kanjis to number stones.

numberingOn parameter should be set to 1.
(0,1) 0
specialStoneOn data-maxigos-special-stone-on If 1, maxiGos draws grey curves on white stones (to imitate shell stones) and a different glint on black stones (to imitate slate stones).

This is notably slower than the default display.

in3dOn parameter should be set to 1.
(0,1) 0
stoneShadowOn data-maxigos-stone-shadow-on If 1, maxiGos displays a shadow around the stones. (0,1) 0
stretching data-maxigos-stretching Specify how many pixels have to be added around the stones.

Number #1 : pixels (svg coordinates) to add horizontally if 3d is on.
Number #2 : pixels (svg coordinates) to add vertically if 3d is on.
Number #3 : pixels (svg coordinates) to add horizontally if 2d is on.
Number #4 : pixels (svg coordinates) to add vertically if 2d is on.
list of four real numbers "0,0,1,1"
territoryMark data-maxigos-territory-mark Territory mark shape (specified by sgf TB and TW properties):
  • "MA": cross
  • "MS": small stones
("MA","MS") "MS"
yaOn data-maxigos-ya-on If 1, maxiGos replaces the discs on the hoshis by "ya" marks (used in ancient China). (0,1) 0

Goto component

This component displays a slider in its own box to allow the user to move in the sgf tree.

It also provides a text input field for the navigation bar to displays the current move number and to allow the user to change the current move. To display this text input field in the navigation bar, just add "Goto" to the navigations parameter value.

Parameter Attribute Description Possible values Default value
gotoBoxOn data-maxigos-goto-box-on If 1, maxiGos displays a slider in the component box to move in the sgf tree. (0,1) 0

Guess component

This component allows the user to click on the goban and place a move if this move is in the sgf.

It can also display a guess meter in its own box that indicates the distance between the user last click and the nearest continuation move found in the sgf.

Parameter Attribute Description Possible values Default value
guessBoxOn data-maxigos-guess-box-on if 1, maxiGos displays a guess meter in the component box that indicates the distance between the user last click and the nearest continuation move found in the sgf. (0,1) 0
canPlaceGuess data-maxigos-can-place-guess If 1, maxiGos place a move after a click of the user on a point of the goban only if there is a move at this point in the sgf. If 0 and canPlaceVariation is 1, maxiGos place a move after a click of the user on a point of the goban even if there is no move at this point in the sgf. If both parameters are 0, maxiGos doesn't place anything on the goban.

This parameter is ignored if canPlaceVariation is 1.
(0,1) 0

Header component

This component displays a button or a box to display the sgf header.

Parameter Attribute Description Possible values Default value
concatInHeader data-maxigos-concat-in-header Set of element pairs to concatenate. The pairs can be:
  • DateToTitle: date after the title,
  • HandicapToResult: handicap after the result,
  • KomiToResult: komi after the result,
  • NumOfMovesToResult: number of moves after the result.
Set of chains (comma-separated) ""
headerAlias data-maxigos-header-alias Specify what element of the translation array one has to use to display the label of the "Header" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Header" on the button. A string null
headerBoxOn data-maxigos-header-box-on If 1, maxiGos displays the sgf header in the component box (values of sgf EV, RO, DT, PC etc. properties). (0,1) 0
headerBtnOn data-maxigos-header-btn-on If 1, maxiGos displays an "Informations" button in the component box instead of displaying the header itself. A click on this button displays the header in a dialog. This parameter is ignored if headerBoxOn is 1. (0,1) 0
hideInHeader data-maxigos-hide-in-header Set of header items to hide. The items can be:
  • Black (name and level of Black, PB and BR sgf properties)
  • Date (date, DT sgf property)
  • GeneralComment (general comment, GC sgf property)
  • Handicap (handicap, HA sgf property)
  • Komi (komi, KM sgf property)
  • NumOfMoves (number of moves of the main variation)
  • Place (place, PC sgf property)
  • Result (result, RE sgf property)
  • ResultLabel (the "Result:" string)
  • Rules (rules, RU sgf property)
  • TimeLimits (time limits, TM sgf property)
  • Title (title, EV and RO sgf properties)
  • White (name and level of White, PW and WR sgf properties)
Set of strings (comma-separated) ""
translateTitleOn data-maxigos-translate-title-on If 1, maxiGos tries to translate the title, using the functions found in the component scripts (for French) or the internationalization scripts of the "_i18n" folder (for other languages).

The title is built from sgf EV and RO properties. EV should be "x t" with x as "1st" or "2nd" or "3rd" or "nth", n a number, and t a title name such as "Honinbo", "Meijin", "Ing Cup", ... RO should be "n" or "n (s)" or "(s)", n a number, and s a string among "final", "semi-final", "quarter-final", "playoff", "round" or "game".
(0,1) 0

Note 1: if headerBoxOn and headerBtnOn are both 0, maxiGos doesn't display the "Header" component box. But it can still display the header in "Comment" component box if "headerInComment" is set to 1.

Note 2: the difference between the "Header" component and the "Info" component is that one can modify the content of the header using the "Info" component while the "Header" component simply displays its content.

Help component

This component displays a button in its own box to allows the user to display help in a dialog.

It is designed to be used in Edit configuration.

Parameter Attribute Description Possible values Default value
helpBtnOn data-maxigos-help-btn-on If 1, maxiGos displays the "Help" button. (0,1) 0
helpAlias data-maxigos-help-alias Specify what element of the translation array one has to use to display the label of the "Help" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Help" on the button. A string null

Image component

This component contains two sub-components: "Png" and "Svg".

Each of them can display a button in their own box to make a PNG image or a SVG image of the current state of the goban.

Parameter Attribute Description Possible values Default value
pngAlias data-maxigos-png-alias Specify what element of the translation array one has to use to display the label of the "Png" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "PNG" on the button. A string null
pngBtnOn data-maxigos-png-btn-on If 1, maxiGos displays the "Png" button. (0,1) 0
svgAlias data-maxigos-svg-alias Specify what element of the translation array one has to use to display the label of the "Svg" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "SVG" on the button. A string null
svgBtnOn data-maxigos-svg-btn-on If 1, maxiGos displays the "Svg" button. (0,1) 0

Info component

This component displays a form in a dialog to edit sgf properties such as EV, RO, DT, PC, PB, PW, etc.

It is designed to be used in Edit configuration.

It doesn't have any parameters.

Lesson component

This component displays in its own box an assistant and a bubble containing sgf comments.

It doesn't have any parameter.

Loop component

This component displays moves on a loop.

It also provides the "Auto" and "Pause" buttons for the navigation bar, to start or stop the display on a loop. To display these buttons in the navigation bar, just add "Loop" to the navigations parameter value.

Parameter Attribute Description Possible values Default value
loopTime data-maxigos-loop-time Reference time (in milliseconds) used to compute iddle time between the display of two sgf nodes. Iddle time T is longer when a comment of L bytes length is found in the node in order to let the user enough time to read the comment. T is computed by the following formula: T=(L/20+1)*loopTime. A positive integer 1000
initialLoopTime data-maxigos-loop-time Reference time (in milliseconds) to compute iddle time of the initial node. This iddle time is computed by the following formula: T=initialLoopTime*loopTime/1000. A positive integer 0
finalLoopTime data-maxigos-loop-time Reference time (in milliseconds) to compute iddle time of the final node. This iddle time is computed by the following formula: T=finalLoopTime*loopTime/1000. A positive integer 0

Menu component

This component displays a list of menus in its own box.

Parameter Attribute Description Possible values Default value
menus data-maxigos-menus List of menus displayed by Menu component.

Available menus are: "File" (require File component), "Edit" (require Edit component), "View" (require View component) and "Windows".
Comma-separated list of string ""

MoveInfo component

This component displays the current move number and its coordinates in its own box.

Parameter Attribute Description Possible values Default value
onlyMoveNumber data-maxigos-only-move-number if 1, maxiGos displays the move number only. (0,1) 0

Navigation component

Parameter Attribute Description Possible values Default value
navigations data-maxigos-navigations Set of buttons or input displayed by the Navigation component.

The set can contains: "First", "TenPred", "Pred", "Next, "TenNext", "Last", "Auto", "Pause" and "Goto".

"Auto" and "Pause" require the Loop component.

"Goto"requires the Goto component.
Set of strings (comma-separated) "First,TenPred,Pred,Next,TenNext,Last"

NotSeen component

This component displays the list of moves not visible on the goban.

This is useful when asInBookOn parameter is set to 1.

Parameter Attribute Description Possible values Default value
notSeenTwinStonesOn data-maxigos-not-seen-twin-stones-on If 1, maxiGos displays on what stone a move is played if the stone has a number, a label or a mark, else it displays the coordinates of the move. If 0, it always displays the coordinates of the move. (0,1) 1

Options component

This component displays a button or a box to change options.

Parameter Attribute Description Possible values Default value
hideInOptions data-maxigos-hide-in-options Set of options items to hide. The items can be:
  • AnimatedStoneOn,
  • AnimatedStoneTime,
  • AsInBookOn,
  • CanGuess,
  • CanVariation,
  • In3dOn,
  • IndicesOn,
  • LoopTime,
  • MarksAndLabelsOn,
  • MarkOnLastOn,
  • NumberingOn,
  • ScoreMethod,
  • SiblingsOn,
  • VariationMarksOn.
Set of strings (comma-separated) ""
optionsAlias data-maxigos-options-alias Specify what element of the translation array one has to use to display the label of the "Options" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Options" on the button. A string null
optionsBoxOn data-maxigos-options-box-on If 1, maxiGos displays options in the component box. (0,1) 0
optionsBtnOn data-maxigos-options-btn-on If 1, maxiGos displays the "Options" button in the component box. (0,1) 0

Pass component

This component displays the "Pass" button in its own box.

Parameter Attribute Description Possible values Default value
canPassOnlyIfPassInSgf data-maxigos-can-pass-only-if-in-sgf If 1, maxiGos enables the "Pass" button only if one of the next moves in the sgf is a pass. (0,1) 0
passAlias data-maxigos-pass-alias Specify what element of the translation array one has to use to display the label of the "Pass" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Pass" on the button. A string null
passBtnOn data-maxigos-pass-btn-on If 1, maxiGos displays the "Pass" button in the component box. (0,1) 0

Remove component

This component displays a button to allow the user to cut the curent variation.

Parameter Attribute Description Possible values Default value
removeAlias data-maxigos-remove-alias Specify what element of the translation array one has to use to display the label of the "Remove" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Remove" on the button. A string null
removeBtnOn data-maxigos-remove-btn-on If 1, display the "Remove" button in its own component box. (0,1) 0

Score component

This component displays the "Score" button in its own box.

Parameter Attribute Description Possible values Default value
ephemeralScore data-maxigos-ephemeral-score If 1, maxiGos doesn't register TB or TW added by Score component in the Sgf. (0,1) 0
scoreAlias data-maxigos-score-alias Specify what element of the translation array one has to use to display the label of the "Score" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Score" on the button. A string null
scoreBtnOn data-maxigos-score-btn-on If 1, maxiGos displays the "Score" button in the component box. (0,1) 0
scoreDefaultRules data-maxigos-score-default-rules Default rules if no rules found in the Sgf. A string (AGA, Chinese, Japanese, etc.) null
scoreMethod data-maxigos-score-method Specify the method to add/remove TB and TW.

Trivial: a click on a stone adds or removes a TB or a TW of the opposite color of that stone. A click on an empty point adds, swaps or removes a TB or a TW.

Counting: a click on a stone adds or removes a TB or a TW of the opposite color of that stone, as well as on all empty points and stones of the same color next to this stone. A click on an empty point adds or removes a TB or TW as well as on all empty points next to this point, if these points are surrounded by stones of the same color.
("trivial","counting") "trivial"
scoreInComment data-maxigos-score-in-comment If 1, maxiGos displays the score in a comment box if any. (0,1) 0

Sgf component

Parameter Attribute Description Possible values Default value
sgfAction data-maxigos-sgf-action Action when one clicks on the "Sgf" button. If "Show", the sgf is display in a box over the goban. If "Download", the sgf is downloaded (if it is possible with the device in use). "Show" or "Download" "Show"
sgfAlias data-maxigos-sgf-alias Specify what element of the translation array one has to use to display the label of the "Sgf" button. The string should contain a "_", and "_" alone means an empty string. If null, maxiGos displays "Sgf" on the button. A string null
sgfBtnOn data-maxigos-sgf-btn-on If 1, maxiGos displays the "Sgf" button in the component box. (0,1) 0
toCharset data-maxigos-to-charset This parameter takes the value of a charset ("UTF-8", "Big5", "GB18030", "Shift_JIS" ...). It specifies the charset used to encode sgf files (the value of the sgf CA property is replaced by the value of this parameter). It is not used when reading or displaying a sgf, and it can be different from the page charset. In practice, the best is to use "UTF-8" whenever possible or to use the charset of the page. A string which is a charset code "UTF-8"

Solve component

This component displays a list of buttons to retry, undo, show a hint or pass.

Parameter Attribute Description Possible values Default value
canPlaceSolve data-maxigos-can-place-solve If 1, maxiGos places the user move it is in the sgf, and answers this move. (0,1) 0
oldSolveBtnOn data-maxigos-old-solve-btn-on If 1, maxiGos displays the "Retry" button as "First" button, the "Undo" button as "Pred" button, and the "Hint" button as "Next" button. (0,1) 0
solves data-maxigos-solves Set of buttons to display in the component box among "Retry", "Undo", "Pass" and "Hint". Set of strings (comma-separated) "Retry,Undo"
specialMoveMatch data-maxigos-special-move-match In theory, the standard way to represent a move played elsewhere (i.e. a tenuki) is to put in the sgf two consecutive moves of the opposite color. However, for historical reasons, some sgf files use other methods to do that such as inserting pass moves, or moves played in the invisible part of the goban, or moves played outside the goban. This parameter is designed to address these cases.

If 0, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf.

If 1, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf or if one move in the sgf coordinates are outside the goban (such B[zz] or W[zz] on a 19x19 for instance).

If 2, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf or if one move in the sgf coordinates are outside the goban (such B[zz] or W[zz] on a 19x19 for instance) or in the invisble part of the goban (when a VW property is used).

If 3, maxiGos places the user move if it matches one of the continuation moves in the sgf or if two consecutive moves of the opposite color are found in the sgf or if one move in the sgf coordinates are outside the goban (such B[zz] or W[zz] on a 19x19 for instance) or in the invisble part of the goban (when a VW property is used) or is a pass.

(0,1,2,3) 0

Speed component

This component show a slider and two buttons to change the loop speed (i.e. loopTime parameter).

Parameter Attribute Description Possible values Default value
loopTimeMax data-maxigos-loop-time-max Maximal time (in millisecondes) between two moves. A positive real number 10000

Tree component

This component displays the moves tree.

Parameter Attribute Description Possible values Default value
hideTreeNumbering data-maxigos-hide-tree-numbering If 1, maxiGos hides numbers on tree stones. (0,1) 1
markCommentOnTree data-maxigos-mark-comment-on-tree If 1, maxiGos replaces numbers of commented moves by a "?" in the tree. (0,1) 1

Variations component

This component allows to display variations.

Parameter Attribute Description Possible values Default value
canPlaceVariation data-maxigos-can-place-variation If 1, maxiGos place a move on the point where the user just clicked, event if the move is not in the sgf. (0,1) 0
hideSingleVariationMarkOn data-maxigos-hide-single-variation-marks-on If 1, maxiGos displays variation marks only if there are at least two marks. (0,1) 0
siblingsOn data-maxigos-siblings-on If 1, maxiGos displays variations of current node, otherwise of the next node. If "null", maxiGos displays variations as specified by the sgf ST property. (0,1,null) null
variationBoxOn data-maxigos-variation-box-on If 1, maxiGos displays a list of variation buttons in the component box. (0,1) 0
variationMarkSeed data-maxigos-variation-mark-seed By default, maxiGos generates variation marks starting at "1". To use something else as variation marks, set this parameter to a set of characters (or strings). For instance, to use some hiraganas as mark, set this parameter to "あ,い,う,え,お,か,き,く,け,こ,た,ち,つ,て,と,さ,し,す,せ,そ". Set of strings (comma-separated) ""
variationMarksOn data-maxigos-variation-marks-on If 1, maxiGos displays mark on variation. If 0, it hides them. If "null", maxiGos displays mark on variation as specified by the sgf ST property. (0,1,null) null

Version component

This component displays maxiGos version in its box.

Parameter Attribute Description Possible values Default value
versionBoxOn data-maxigos-version-box-on If 1, maxiGos displays its version in component box. (0,1) 0

View component

This component displays a menu (used with the "Menu" component) to modify some display parameters such as the "in3dOn" parameter, the "shadowOn" parameter, etc.

It doesn't have any parameters.

Css classes and tags used by maxiGos

Overview

Each maxiGos theme has its own css style sheet stored in "_css" folder of the samples.

This style sheet is automatically included to the page by maxiGos.

It is not necessary to add it in the <head> tag of the page.

Most html tag of maxiGos have an id and a class.

Tags are:

Each viewer has an id starting by "d", followed by a number ("1" for the first viewer of the page, "2" for the second, etc.)

Each component tag id is prefixed by its viewer id and suffixed by its name and its tag name or "Box". For instance the goban component <div> id of the third viewer in the page is "d3GobanBox".

Each class is prefixed by "mx" instead of the id of the viewer.

The name of the global <div> is "Global". Its id is "dnGlobal", and its class is "mxGlobal".

As a result, the whole tags of the third viewer in a page are in:

<div class="mxGlobal" id="d3Global">...</div>

Some other classes can be added by maxiGos.

Class and tag list

Here is a list of tags that can be styled and the name of the associated classes.

Global box

MaxiGos adds CSS variables --gobanIntrinsicWidth and --gobanIntrinsicHeight to the style of the global box, which contain the width and height of the goban in units of "svg".

If the MoveInfo component is present, MaxiGos adds the css variables --moveInfoIntrinsicWidth and --moveInfoIntrinsicHeight which contain the widths and heights in "svg" units of the component's svg to the styles of the global box.

If the Tree component is present, MaxiGos adds the css variables --treeIntrinsicWidth and --treeIntrinsicHeight that contain the widths and heights in unit "svg" of the component's svgs to the styles of the global box.

Grouping boxes

Components

Warning: some components such as "animatedStone", "loop", ... have no box, and some other component boxes are displayed in dialogs (see below).

Dialogs

Below, Xxx can be Alert, EditColors, EditInfo, EditNumbering, EditOptions, EditSgf, New, Open, Save, Send, ShowAbout, ShowHeader, ShowHelp and ShowSgf.

Custom viewer

It is possible to make your own viewer, using a "maker".

What is a "maker"?

A maker is a php script that generates a javascript script.

It contains:

The line that specifies that the output is a javascript script

This is a php line that uses the header() function:

header("content-type:application/x-javascript;charset=UTF-8");

The part where one includes some maxiGos components

One has to include at least the following scripts: "mgos_lib.js" (utilities), "mgos_rls.js" (go rules management), "mgos_prs.js" (sgf parser), "mgos_scr.js" (svg builder), "mgos.js" (main code) and "mgosGoban.js" (goban code).

For instance, to include the goban, the php code is:

include "../../../_js/mgosGoban.js";
You can also create your own component. For instance, to create a component called "Cute" that just displays "Baduk Go Weiqi", make a javascript script that contains a code such as:
if(!mxG.G.prototype.createCute)
{
	mxG.G.prototype.createCute=function()
	{
		return "<div>Baduk Go Weiqi</div>";
	};
}
Save the code in a file called "Cute.js", then include it in the maker. For instance, if the maker is in a folder called "_maker", and "Cute.js" in a folder called "_js", and both "_maker" and "_js" folders are in the same folder, add the following code in the maker:
include "../_js/Cute.js";

The part where one inserts some javascript instructions to create a viewer object

In this part, one adds the javascript instructions to create the viewer object. First, one has to incremente the viewer counter mxG.K by one. Then one has to specify what are the boxes we want to display, in which order, and evenly if they have to be grouped together. Then one creates the object. Then one sets its theme and its configuration.

For instance, to create a viewer of the "Ephemeral" theme + "Simple" configuration, that has the cute component one just created, a goban, a navigation bar and allows variations, the code is:

mxG.K++;
mxG.B=[Cute,["Goban"],"Navigation","Variation"];
mxG.D[mxG.K]=new mxG.G(mxG.K,mxG.B);
mxG.D[mxG.K].theme="Ephemeral";
mxG.D[mxG.K].config="Simple";

The line that inserts the style sheet in the code of the viewer

This line is:

include "../../_php/insertCss.php";

The "insertCss.php" script expects that there is an existing css style sheet named "_common.css" in a folder called "_css" which is in the same folder where the parent directory of the maker is.

For instance, if the maker is in a folder called "_maker" and "_common.css" is in a folder called "_css", both "_maker" and "_css" folders have to be in the same folder.

The part where one sets some parameters

In this part, on sets the parameters of the components.

For instance, to set in3dOn parameter to 1, on adds in this part:

mxG.D[mxG.K].a.in3dOn=1;

The line to start the viewer

Just add the following line:

mxG.D[mxG.K].start();

Full sample

One creates a folder called "ephemeral" in the "_sample" folder of maxiGos.

The "maker" php code (stored in "ephemeral/_maker/ephemeral.php") is:

<?php
header("content-type:application/x-javascript;charset=UTF-8");
include "../../../_js/mgos_lib.js";
include "../../../_js/mgos_prs.js";
include "../../../_js/mgos_rls.js";
include "../../../_js/mgos_scr.js";
include "../../../_js/mgos.js";
include "../../../_js/mgosGoban.js";
include "../../../_js/mgosNavigation.js";
include "../../../_js/mgosVariation.js";
include "../_js/cute.js";
?>
mxG.K++;
mxG.B=["Cute",["Goban"],"Navigation","Variation"];
mxG.D[mxG.K]=new mxG.G(mxG.K,mxG.B);
mxG.D[mxG.K].theme="Ephemeral";
mxG.D[mxG.K].config="Simple";
<?php
include "../../_php/insertCss.php";
?>
mxG.D[mxG.K].a.eraseGridUnder=1;
mxG.D[mxG.K].a.in3dOn=1;
mxG.D[mxG.K].a.hideSingleVariationMarkOn=1;
mxG.D[mxG.K].a.canPlaceVariation=1;
mxG.D[mxG.K].a.initMethod="42";
mxG.D[mxG.K].start();

The css style sheet code (stored in "ephemeral/_css/_common.css") is:

.mxEphemeralTheme.mxSimpleConfig
{
	max-width:30em;
}
.mxEphemeralTheme.mxSimpleConfig svg
{
	display:block;
}
.mxEphemeralTheme.mxSimpleConfig .mxGobanBox svg
{
	background:#9cf;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationBox
{
	display:flex;
	justify-content:space-between;
	margin-top:0.5em;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationBox button
{
	border:0;
	background:none;
	padding:0;
	margin:0 5%;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationBox button svg
{
	width:100%;
	height:auto;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationBox button[disabled] svg
{
	fill:#0007;
}
.mxEphemeralTheme.mxSimpleConfig .mxNavigationBox button:focus:not([disabled]) svg,
.mxEphemeralTheme.mxSimpleConfig .mxNavigationBox button:hover:not([disabled]) svg
{
	fill:red;
}
.mxEphemeralTheme.mxSimpleConfig>div:first-of-type
{
	color:red;
	padding-bottom:0.5em;
}

The javascript code for the additional "Cute" component (stored in "ephemeral/_js/cute.js") is:

if(!mxG.G.prototype.createCute)
{
	mxG.G.prototype.createCute=function()
	{
		return "<div>Baduk Go Weiqi</div>";
	};
}

To test, just display the following html page in a browser (stored in "ephemeral/index.html"):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Ephemeral</title>
</head>
<body>
<h1>Ephemeral</h1>
<script
	src="_maker/ephemeral.php"
	data-maxigos.sgf="(;
		GM[1]
		FF[4]
		CA[UTF-8]
		SZ[19]
		EV[吐血の一局]
		DT[1835-07-27]
		PW[本因坊丈和]
		PB[赤星因徹]
		PC[日本]
		RU[Japanese]
		KM[0]
		RE[W+R]
		;B[cp];W[pq];B[qd];W[ed];B[oc];W[eq];B[qo];W[qk]
		;B[qi];W[op];B[iq];W[dn];B[ep];W[dp];B[do];W[dq]
		;B[co];W[eo];B[fp];W[cq];B[bq];W[br];B[cm];W[gr]
		;B[hp];W[en];B[bp];W[ck];B[dl];W[dk];B[el];W[gn]
		;B[cr];W[dr];B[bs];W[fq];B[go];W[ar];B[hn];W[gm]
		;B[hm];W[gl];B[ek];W[hl];B[di];W[io];B[ho];W[fo]
		;B[ch];W[cd];B[lq];W[pn];B[gc];W[qn];B[dc];W[cc]
		;B[ec];W[cf];B[il];W[gp];B[nq];W[ic];B[fd];W[lc]
		;B[bg];W[bf];B[af];W[bi];B[dj];W[eh];B[fj];W[qg]
		;B[oi];W[qe];B[pd];W[nf];B[ok];W[pk];B[ol];W[pj]
		;B[rn];W[rm];B[qq];W[qr];B[rr];W[qp];B[rq];W[pr]
		;B[rp];W[po];B[pp];W[mp];B[qm];W[pm];B[np];W[mq]
		;B[mo];W[lp];B[lo];W[kp];B[no];W[nr];B[or];W[qp]
		;B[mr];W[ro];B[pi];W[lr];B[ns];W[ip];B[jr];W[hq]
		;B[jn];W[ko];B[kq];W[kn];B[jm];W[km];B[ik];W[mk]
		;B[mm];W[ir];B[jq];W[kk];B[mi];W[nm];B[ml];W[ki]
		;B[lj];W[lk];B[kj];W[jj];B[kl];W[ll];B[lm];W[oj]
		;B[mg];W[jl];B[jk];W[nj];B[ni];W[im];B[in];W[jo]
		;B[kl];W[js];B[ks];W[jl];B[im];W[is];B[kl];W[ei]
		;B[ej];W[jl];B[hr];W[hs];B[kl];W[cn];B[bn];W[jl]
		;B[gs];W[fs];B[kl];W[hi];B[ij];W[jl];B[ls];W[ji]
		;B[hj];W[oe];B[kg];W[jg];B[gi];W[nc];B[jf];W[nb]
		;B[re];W[if];B[je];W[hd];B[fe];W[gf];B[ff];W[fg]
		;B[gg];W[gh];B[hg];W[fi];B[gj];W[ig];B[hh];W[hf]
		;B[ii];W[rf];B[pe];W[pf];B[le];W[kd];B[ad];W[kh]
		;B[qf];W[ef];B[de];W[qe];B[ld];W[lg];B[kc];W[jd]
		;B[qf];W[db];B[eb];W[qe];B[jb];W[od];B[ib];W[mf]
		;B[qf];W[jp];B[kr];W[qe];B[lf];W[kf];B[qf];W[hc]
		;B[qe];W[hb];B[pg];W[og];B[of];W[cg];B[bh];W[pf]
		;B[ph];W[bb];B[da];W[cb];B[fh];W[ac];B[eg];W[bd]
		;B[ob];W[oa];B[of];W[mh];B[rj];W[kl])">
</script>
</body>
</html>

Et voilà!

Annexes

Folders and files

Questions and answers

Question: what is the minimum I have to do to include a maxiGos viewer in one of my web page using a standalone script?

  1. Go to the dowload page.
  2. Download "maxigos-neo-classic-basic.js" standalone viewer.
  3. Create at the root of your website a "maxiGos" folder and copy "maxigos-neo-classic-basic.js to it.
  4. Insert in the page to the place where you want the viewer displays <script> and </script> tags with src value set to "/maxiGos/maxigos-neo-classic-basic.js", and insert between these tags a sgf record. For instance:
    <script
    	src="/maxiGos/maxigos-basic.js"
    	data-maxigos-sgf="(;FF[4]CA[UTF-8]GM[1]SZ[19];B[pd];W[dc];B[pp];W[fp];B[de];W[ee];B[ef];W[ed];B[dg];W[co])">
    </script>
  5. Et voilà!

Question: is maxiGos working with any browsers?

In theory, maxiGos works with most browsers, but not with internet explorer.

Question: maxiGos displays nothing. Why?

Verify if you well copied the "_maxigos" folder to the rigth place on the web server.

Verify paths in the lines where a call to maxiGos is done.

Question: maxiGos displays an empty goban. Why?

Verify that the sgf file is on the rigth place on the web server.

Otherwise the path of the sgf file is probably wrong.

It's also possible that maxiGos has not the right to open the sgf file. In this case, put your sgf files in another place or change their access rights. (however the writting right is never required).

Question: how can I change the goban size?

The width of a maxiGos viewer is the width of its container, so the easiest way is to change the width of the container!

However a maxiGos viewer has a maximal width set in its css, through the "--gobanMaxWidth" css variable. Changing the value of this variable is another way to consider.

Question: how can I change the goban background?

There are various ways to achieve this.

Th common way is to change the background of the svg that draws the goban, or one of its ancestor (if they have the same size) using css. For instance, for the minimalist theme:

div.mxMinimalistTheme .mxGobanBox svg
{
	background-color:#9cf;
}

Another way is to change the fill value of the .mxWholeRect svg rect. For instance, for the minimalist theme:

div.mxMinimalistTheme .mxWholeRect
{
	fill:#9cf;
}

Question: what about "responsive design"?

In theory, maxiGos does all the job.

But don't forget the magic <meta> tag:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Question: I use a maxiGos standalone script which displays all its texts in french and it is the latest thing I want. What can I do?

Read again the "Internationalization" chapter. Maybe you missed something.

If you need to use a language that has no internationalization file in "_i18n" folder, see next question.

Question: I want to translate maxiGos in another language. How can I process?

Duplicate "_maxigos/_i18n/maxigos-i18n-ja.js" and replace the two last letters of the file name by the code of the new language (if possible a ISO 639 language code). Replace all "ja" strings by the code of the new language at the beginning of the file. Translate all japanese texts of this file in the new language (their equivalents in english are in front of them), and rewrite or create or evenly remove functions whose name starts by "build" or "translate" (these functions are "buildDate", "buildRank", "buildMove", "buildNumOfMoves", "buildRules", "buildTimeLimits", "buildKomi", "buildResult" and "transalteTitle"). If one of these functions is missing, maxiGos uses default functions to produce an acceptable output so you can drop the rewritting of these functions if it appears too complicated. Finally, save the file in UTF-8.

Question: I want to use maxiGos in a page which is not in UTF-8. What is the correct way to insert it?

If you use a standalone viewer, add charset="UTF-8" to any maxiGos script tag.

For instance:

<script
	charset="UTF-8"
	src="_alone/maxigos-minimal-basic.js"
	data-maxigos-sgf="../_sgf/game/blood-vomit.sgf">
</script>
Aknowledgements to Adachi K., Alfredo Pernin, Chantal Gajdos, Julien Payrat, Lao Lilin, Mickaël Simon, Motoki Noguchi, Olivier Besson, Olivier Dulac, Patrice Fontaine, Tony Yamanaka and many others for their advices or contributions to this project!