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).
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.
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:
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.
The basic way to insert maxiGos in a web page is:
But we can also use:
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.
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 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).
See the plugin pages (for joomla or for wordpress) for more details.
See the BBCode page for more details.
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.
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.
The customization of makers can be done as for standalone viewers.
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.
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.
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.
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.
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">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 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"....
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:
| 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$ |
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 |
This component moves the stones from the corner of the goban to their final location.
| Parameter | Use | Description | Values | Default 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. |
Number | 1000 |
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 |
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 |
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 |
It does not have its own main box.
It contains a toolbar and a textarea to edit comments.
It doesn't have any parameters.
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.
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","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 |
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 |
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 |
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:
|
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:
|
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.
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 |
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 |
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.
This component displays in its own box an assistant and a bubble containing sgf comments.
It doesn't have any parameter.
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 |
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 | "" |
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 |
| 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" |
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 |
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:
|
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 |
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 |
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 |
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 |
| 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" |
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 |
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 |
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 |
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 |
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 |
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.
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.
Here is a list of tags that can be styled and the name of the associated classes.
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.
Warning: some components such as "animatedStone", "loop", ... have no box, and some other component boxes are displayed in dialogs (see below).
Below, Xxx can be Alert, EditColors, EditInfo, EditNumbering, EditOptions, EditSgf, New, Open, Save, Send, ShowAbout, ShowHeader, ShowHelp and ShowSgf.
It is possible to make your own viewer, using a "maker".
A maker is a php script that generates a javascript script.
It contains:
This is a php line that uses the header() function:
header("content-type:application/x-javascript;charset=UTF-8");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";if(!mxG.G.prototype.createCute)
{
mxG.G.prototype.createCute=function()
{
return "<div>Baduk Go Weiqi</div>";
};
}include "../_js/Cute.js";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";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.
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;Just add the following line:
mxG.D[mxG.K].start();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à!
Question: what is the minimum I have to do to include a maxiGos viewer in one of my web page using a standalone script?
<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>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>