MaxiGos est un ensemble de lecteurs sgf permettant d'afficher des diagrammes, parties ou problèmes de go dans une page web.
Vous pouvez utiliser maxiGos gratuitement pour votre site (licence de type BSD).
Le navigateur de l'utilisateur final doit pouvoir interpréter du HTML5, et doit avoir javascript activé.
Si on utilise uniquement les lecteurs autonomes de maxiGos (qui sont en javascript), il n'y a aucun prérequis en ce qui concerne le serveur sur lequel ils sont installés.
Si on utilise la version complète de maxiGos (qui utilise javascript, css et php), le serveur sur lequel il est installé doit disposer de php.
Allez à la page des téléchargements et téléchargez l'un des lecteurs maxiGos, par exemple maxigos-neo-classic-game.js.
Copiez-le n'importe où sur votre site.
En supposant que vous voulez afficher le contenu d'un fichier sgf nommé blood-vomit-fr.sgf, insérez dans la partie <body> d'une page html (à l'endroit où vous voulez que le lecteur s'affiche) un code du genre :
<script
src="ppp/maxigos-neo-classic-game.js"
data-maxigos-sgf="qqq/blood-vomit-fr.sgf">
</script>Remplacez "ppp/" par un chemin relatif entre la page html concernée et le script maxiGos maxigos-neo-classic-game.js.
Remplacez "qqq/" par un chemin relatif entre la page html concernée et le fichier sgf blood-vomit-fr.sgf.
On doit alors obtenir le résultat ci-dessous :
Il existe plusieurs configurations différentes de maxiGos, déclinées en plusieurs thèmes.
Configurations principales :
Thèmes principaux :
Dans de nombreux cas, ces lecteurs suffiront.
Par ailleurs, il existe d'autres configurations secondaires qui ne sont pas disponibles pour tous les thèmes, et aussi d'autres thèmes élaborés pour des besoins spécifiques :
Quelques configurations secondaires (thème Minimalist) :
Quelques thèmes secondaires :
On peut aussi créer ses propres configurations et ses propres thèmes.
On peut ajouter autant de lecteurs maxiGos que l'on veut dans une page. On n'est limité que par les possibilités du serveur web et celles de la machine de l'utilisateur.
Rendez-vous à la page de téléchargement, téléchargez l'archive contenant maxiGos, décompressez-la et copiez l'ensemble des dossiers et fichiers n'importe où sur votre site. Aucune base de données n'est nécessaire.
Pour vérifier que cela fonctionne, consultez cette page d'exemples.
L'utilisateur final n'a rien à installer sur sa machine. Il lui suffit d'un navigateur avec javascript activé.
La méthode principale pour insérer un lecteur maxiGos dans une page web consiste à utiliser :
Mais on peut aussi éventuellement utiliser :
On utilisera un lecteur autonome dans les cas où on souhaite faire simple.
Un lecteur autonome est un lecteur maxiGos dont tout le code est dans un fichier javascript unique.
Ces lecteurs sont stockés dans le dossier "_alone" de chaque exemple fourni avec maxiGos. Ces exemples sont dans le dossier "_sample".
On insère un couple de balises <script> et </script> dans la page à l'endroit où doit s'afficher le lecteur sgf, avec comme valeur de l'attribut src le script de l'un des lecteurs autonomes fournis avec maxiGos.
Pour le sgf, on peut insérer un nom de fichier sgf ou un texte représentant du sgf ou éventuellement une url générant du sgf (par exemple dans le cas d'un forum phpBB) comme valeur de l'attribut data-maxigos-sgf, ou éventuellement entre les balises <script> et </script>. Cette deuxième méthode est conservée pour des raisons historiques (les versions précédentes de maxiGos l'utilisaient), mais la première méthode est à privilégier car elle est plus orthodoxe du point de vue des standards du web.
Si on insère un nom de fichier sgf comme valeur de l'attribut data-maxigos-sgf, le code est par exemple :
<script
src="xxx/maxigos-neo-classic-problem.js"
data-maxigos-sgf="yyy/p2-fr.sgf">
</script>On obtient :
Si on insère un nom de fichier sgf entre les balises <script> et </script>, le code est par exemple :
<script src="xxx/maxigos-neo-classic-problem.js">
yyy/p2-fr.sgf
</script>Il faut évidemment adapter le chemin (ici "xxx") préfixant le script maxigos-problem.js, en fonction de l'endroit où vous l'avez copié sur votre site, et de l'endroit où se trouve votre page. Il s'agit du chemin relatif entre votre page et le script javascript du lecteur autonome.
Il faut aussi adapter le chemin (ici "yyy") préfixant le fichier sgf, en fonction de l'endroit où vous l'avez copié sur votre site, et de l'endroit où se trouve votre page. Il s'agit du chemin relatif entre votre page et le fichier sgf.
Si on insère un texte représentant du sgf comme valeur de l'attribut data-maxigos-sgf, le code est par exemple :
<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>On obtient :
Si on insère un texte représentant du sgf entre les balises <script> et </script>, cela donne par exemple :
<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 : lorsqu'on insère directement un texte représentant du sgf dans la page comme dans les deux exemples ci-dessus, la propriété sgf CA est inutile et ignorée même si elle est présente car l'encodage du texte inséré est forcément le même que celui de la page (voir le chapitre Encodage pour plus de détails).
Si on insère une url générant du sgf, il est nécessaire d'ajouter l'attribut data-maxigos-source-filter avec comme valeur une expression régulière qui vérifie si l'url est valide. Par exemple :
<script
src="xxx/maxigos-problem.js"
data-maxigos-sgf="/download/file.php?id=23"
data-maxigos-source-filter="/download/file\.php\?id=[0-9]+$">
</script>L'url doit respecter le principe de "même origine" que la page dans laquelle on l'insère (même protocole, même domaine, même port). Elle ne peut donc pas être une url d'un autre site.
Note 1 : pour faire fonctionner les lecteurs autonomes, on n'a pas besoin d'installer l'ensemble de maxiGos sur le serveur. Il suffit d'y copier le script du lecteur choisi tant qu'on n'utilise que le français ou l'anglais. Si on utilise une langue autre que le français ou l'anglais, on aura aussi besoin d'inclure dans la page le script d'internationalisation de cette langue (l'un de ceux qui sont dans le dossier "_i18n"). Voir le chapitre Internationalisation pour plus de détails.
Note 2 : en théorie, un lecteur autonome n'utilise pas de ressources externes. Ces ressources (principalement des images) sont intégrées dans le code du lecteur, via des "urls de données" (data base64).
La personnalisation de ces lecteurs peut être faite en utilisant des attributs de la balise <script>.
Le nom de ces attributs est de la forme data-maxigos-xxx avec "xxx" le nom d'un paramètre de maxiGos (voir le chapitre Paramétrage pour en savoir plus sur ces paramètres).
Du fait que seuls les lettres en minuscule sont permises dans le nom des attributs, on remplace les majuscules des noms des paramètres maxiGos par leurs équivalents en minuscule précédés d'un "-". Par exemple, l'attribut correspondant au paramètre maxiGos in3dOn sera data-maxigos-in3d-on.
Beaucoup de choses peuvent être modifiées en utilisant les attributs. Par exemple, pour afficher un diagramme sans effet 3D avec un lecteur NeoClassic qui est à l'origine avec effet 3d, on peut utiliser :
<script
src="../../_sample/neo-classic/_alone/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]LB[ef:a][gg:素晴らしい]TR[ee])">
</script>On obtient :
Il est aussi possible de modifier l'aspect du lecteur via des feuilles de style, comme par exemple la couleur du fond du goban, la couleur des lignes, mais aussi beaucoup d'autres caractéristiques (voir le chapitre Balises et classes css utilisées par maxiGos pour plus de détails).
Par exemple, avec le lecteur maxigos-minimalist-diagram.js qui est initialement en noir et blanc et en 2d, on peut utiliser le code :
<figure class="BordeauxSample">
<script
src="../../_sample/minimalist/_alone/maxigos-minimalist-diagram.js"
data-maxigos-in3d-on="1"
data-maxigos-sgf="(;FF[4]GM[1]SZ[19]VW[aa:ii]FG[1]AW[ee]AB[de][fe][ed]LB[ef:a][gg:素晴らしい]TR[ee])">
</script>
</figure>Et en ajoutant les styles :
.BordeauxSample
{
background:#ddd;
padding:1em;
}
.BordeauxSample .mxMinimalistTheme .mxGobanContent svg
{
background:#a72926;
}
.BordeauxSample .mxMinimalistTheme .mxGobanLines
{
stroke:#fff;
}
.BordeauxSample .mxMinimalistTheme .mxStars
{
stroke:#fff;
fill:#fff;
stroke-width:5px;
}
.BordeauxSample .mxMinimalistTheme .mxMark.mxOnEmpty:not(.mxPointBackground)
{
fill:none;
stroke:#fff;
}
.BordeauxSample .mxMinimalistTheme text.mxOnEmpty
{
fill:#fff;
stroke:none;
}On obtient :
Voir les pages des plugins (pour Joomla et pour Wordpress) pour plus de détails.
Voir la page des BBCodes pour plus de détails.
Il s'agit d'une méthode plus sophistiquée que celle utilisant les lecteurs autonomes, permettant une personnalisation plus lourde.
Un générateur est un script php qui va fabriquer "à la volée" le code javascript du lecteur en fonction d'informations de configuration qu'il contient.
Chaque lecteur autonome qui est dans le dossier "_alone" des exemples fournis avec maxiGos possède son générateur qui lui est dans le dossier "_maker" des exemples.
On inclut à l'endroit où doit s'afficher maxiGos dans la page web une ligne du genre :
<script
src="xxx/classic/_maker/basic.php"
data-maxigos-sgf="yyy/myFirstSgf.sgf">
</script>Il faut évidemment adapter le chemin (ici "xxx/") préfixant le script classic/_maker/basic.php qui est le générateur, en fonction de l'endroit où vous avez installé maxiGos sur votre site, et de l'endroit où se trouve votre page. Il s'agit du chemin relatif entre votre page et le script php du générateur.
En fait, on peut utiliser le même genre de ligne que pour les lecteurs autonomes, la seule différence étant qu'on remplace le nom du script autonome (par exemple classic/_alone/maxigos-classic-basic.js) par le nom de son générateur (par exemple classic/_maker/basic.php).
Comme pour les lecteurs autonomes, on peut personnaliser un lecteur inséré par un générateur en utilisant des attributs de la forme data-maxigos-xxx dans la balise où s'affiche ce lecteur, et modifier l'aspect du lecteur via des feuilles de style (voir le chapitre Personnalisation des lecteurs autonomes pour plus de détails).
Mais on peut en plus modifier le code du générateur, ce qui donne encore plus de possibilités de personnalisation.
Cette méthode permet de ne pas avoir à insérer le code de maxiGos à chaque endroit de la page où doit s'afficher un lecteur, mais seulement le code du chargeur une fois en fin de page. Elle est par contre sensiblement plus lente que les précédentes. Il est conseillé de ne l'utiliser que si aucune des méthodes précédentes n'est possible.
Un chargeur est un script javascript qui recherche dans la page toutes les balises où un lecteur doit être affiché et qui charge à la volée pour chacune de ces balises le script javascript d'un lecteur maxiGos.
En pratique, on insère dans la page web aux endroits où l'on souhaite afficher un lecteur des balises comme <div> et </div> dont l'un des attributs est data-maxigos. La valeur de cet attribut est le nom de la configuration de maxiGos à employer, suivi d'une virgule, suivi du thème maxiGos à employer.
On insère ensuite le nom d'un fichier sgf ou un texte représentant du sgf ou une url pouvant générer du sgf entre ces balises.
On insère enfin le script mgosLoader.js (qui est le chargeur fourni avec maxiGos) après toutes les balises de la page dont l'un des attributs est data-maxigos.
Par exemple :
<div data-maxigos="Problem,Classic">
(;FF[4]GM[1]SZ[19]VW[aa:lh]
EV[N° 1 .|. Niveau 1]
FG[1]ST[2]
AW[ab][bb][cb][db][da]
AB[bc][cc][dc][ec][eb][gb][be]
C[À Noir de jouer]
;B[ba]C[Correct !])
</div>
<div data-maxigos="Problem,Classic">
(;FF[4]GM[1]SZ[19]VW[aa:lh]
EV[N° 2 .|. Niveau : 1]
AW[da][ea][fb][dc][ec][fc][ad][bd][cd]
AB[ba][cb][db][eb][ac][bc][cc]
C[À Noir de jouer]
;B[ab]C[Correct !])
</div>
<script src="ppp/_js/mgosLoader.js"></script>Il faut évidemment adapter le chemin (ici "ppp") préfixant le script mgosLoader.js, en fonction de l'endroit où vous avez installé maxiGos sur votre site, et de l'endroit où se trouve votre page.
Comme pour les lecteurs autonomes, on peut personnaliser un lecteur inséré par un chargeur en utilisant des attributs de la forme data-maxigos-xxx dans la balise où s'affiche ce lecteur, et modifier l'aspect du lecteur via des feuilles de style (voir le chapitre Personnalisation des lecteurs autonomes pour plus de détails).
Il est possible d'indiquer à MaxiGos dans quelle langue il doit afficher ses textes.
Il s'agit principalement des messages, des boutons, des menus, et éventuellement des textes générés par maxiGos à partir des informations contenues dans les sgf (titre, date, résultat, etc.).
Par contre, les commentaires contenus dans les sgf ne sont pas traduits.
Cinq langues sont pour l'instant disponibles (entre parenthèse les codes langues correspondants) : l'anglais ("en"), le français ("fr"), le japonais ("ja"), le chinois simplifié ("zh-hans") et le chinois traditionel ("zh-hant").
Pour déterminer quelle langue doit être utilisée, maxiGos recherche le code langue correspondant selon la procédure suivante :
En pratique, le plus simple est de spécifier l'attribut lang de la balise <html> de la page, ou, si la langue de la page est différente de l'une des langues disponibles pour maxiGos, de spécifier l'attribut lang de la balise de maxiGos (ou de la balise dans laquelle doit s'afficher le lecteur ou l'une de ses balises parentes en cas d'utilisation d'un chargeur).
Par exemple :
<script
src="ppp/maxigos-neo-classic-game.js"
lang="en"
data-maxigos-sgf="qqq/blood-vomit-en.sgf">
</script>Pour une autre langue que le français et l'anglais, il faut en plus inclure avant tout appel à maxiGos un script d'internationalisation pour cette autre langue. Par exemple, pour le japonais, il faut inclure le script maxigos-i18n-ja.js qui se trouve dans le dossier "_i18n/" :
<script src="rrr/maxigos-i18n-ja.js"></script>
<script
src="ppp/maxigos-neo-classic-game.js"
lang="ja"
data-maxigos-sgf="qqq/blood-vomit-ja.sgf">
</script>Il faut bien sûr remplacer "rrr" par un chemin relatif entre la page web et le dossier où se trouve le script d'internationalisation.
Si vous ne pouvez pas ou ne souhaitez pas à avoir à insérer cette ligne dans chacune de vos pages, vous pouvez simplement ajouter le code contenu dans le script d'internationalisation correspondant à la langue choisie au début du code des lecteurs maxiGos que vous utilisez.
Tous les scripts d'internationalisation fournis avec maxiGos sont dans le dossier "_i18n". Si le script d'internationalisation dont vous avez besoin n'existe pas encore, vous pouvez essayer de le créer (inspirez-vous de celui du japonais).
Note : si vous créez un script d'internationalisation, c'est une bonne pratique de choisir un code langue qui soit ISO 639 (par exemple "ja" pour japonais et non pas "jp").
L'internationalisation et l'encodage sont deux notions différentes.
De préférence, il vaut mieux avoir des pages et des fichiers sgf encodés en "UTF-8". Mais maxiGos peut fonctionner avec des pages qui ne sont pas en "UTF-8", et lire des sgf qui de même ne sont pas en "UTF-8" (voir le chapitre Encodage pour plus de détails).
MaxiGos fait tout en UTF-8, mais la page dans laquelle est inséré un lecteur maxiGos peut être dans n'importe quel encodage.
Si la page dans laquelle est inséré un script maxiGos n'est pas en UTF-8, il suffit d'ajouter dans sa balise <script> l'attribut charset avec la valeur "UTF-8". Ainsi, le navigateur pourra transformer de manière appropriée le contenu de ces scripts dans l'encodage de la page.
Il est à noter que lorsqu'on insère directement du sgf dans la page (sans utiliser de fichier sgf donc), maxigos ignore la propriété CA de ce sgf puisque de facto, ce sgf a le même encodage que la page et non l'encodage indiqué dans sa propriété CA. A priori, on n'a rien de spécial faire dans ce cas, car quand on copie du sgf à l'aide d'un logiciel de traitement de texte dans le code d'une page html/php, c'est le logiciel de traitement de texte qui fait la conversion appropriée.
Il faut tout de même que l'encodage réel de la page corresponde à l'encodage spécifié pour cette page d'une manière ou d'une autre.
Par exemple, si la page a été enregistrée en Shift_JIS, il est souhaitable qu'elle contienne dans sa partie <head> la ligne :
<meta charset="Shift_JIS">Et le code dans la partie <body> appelant un script maxiGos pourrait être dans ce cas :
<script src="rrr/maxigos-i18n-ja.js"
charset="UTF-8">
</script>
<script src="ppp/maxigos-neo-classic-game.js"
lang="ja"
charset="UTF-8"
data-maxigos-sgf="qqq/blood-vomit-ja.sgf">
</script>Il existe d'autres manières de spécifier l'encodage d'une page (par exemple via php ou via la configuration du serveur). L'important est que la spécification corresponde bien à l'encodage réel de la page.
L'encodage d'un fichier sgf doit être indiqué dans sa propriété CA. Et par défaut, quand un fichier sgf n'a pas de propriété "CA", cela signifie qu'il doit être encodé en ISO-8859-1. Si la propriété CA est présente dans le fichier sgf, l'encodage réel du fichier doit correspondre à la valeur de la propriété CA.
MaxiGos utilise cette propriété CA pour déterminer l'encodage du fichier sgf, et transforme tout en UTF-8 (il sera donc toujours un peu plus rapide d'utiliser des fichiers sgf en UTF-8). Il est de ce fait possible d'utiliser des fichiers sgf d'encodages variés au sein d'une même page.
Quand l'affichage n'est pas celui attendu, c'est le plus souvent dû au fait que le fichier a un encodage réel différent de celui qui a été spécifié dans sa propriété CA (faute malheureusement extrêmement courante dans les fichiers sgf d'origine asiatique). Pour corriger ce problème, il faut soit modifier la propriété CA du fichier sgf pour que sa valeur corresponde à son encodage réel, soit ré-enregistrer le fichier dans l'encodage spécifié dans sa propriété CA (on peut faire tout ça avec la plupart des éditeurs de texte, le plus difficile étant de déterminer quel est l'encodage réel du fichier).
Ceci étant, bien qu'en théorie maxiGos peut fonctionner dans une page qui n'est pas en "UTF-8", et lire des fichiers qui ne sont pas en "UTF-8", il vaut mieux quand on le peut tout faire en UTF-8.
Encodage et internationalisation sont deux choses différentes. "UTF-8" est adapté pour toute(?) langue, aussi c'est le meilleur choix quand on peut l'utiliser. Quand cela n'est pas possible, attention, car certains encodages peuvent ne pas afficher certains caractères de certaines langues. Par exemple, les mots en japonais d'un fichier sgf en Shift-JIS ne pourront pas être transformés automatiquement et s'afficher correctement dans une page en "ISO-8859-1". Par contre, ils pourront être transformés automatiquement et s'afficher correctement dans une page en 'UTF-8".
N'utilisez pas des noms d'encodage tels que "UTF-8", "ISO-8859-1", "Shift-JIS", "Big5", "GB18030" comme valeur des attributs lang et data-maxigos-l. Utilisez un code langue comme "en", "fr", "ja", zh-hans" ou "zh-hant".
Si le fichier sgf n'a pas de propriété CA, et si en ouvrant le fichier avec un éditeur de texte, celui-ci détecte un autre encodage que "ISO-8859-1", et si l'affichage du contenu dans l'éditeur semble bon (pas de caractère illisble ou douteux), il devrait suffire d'ajouter dans le fichier sgf après le premier ";" la propriété CA avec comme valeur le nom de l'encodage détecté par l'éditeur (par exemple CA[UTF-8]).
Si le fichier sgf n'a pas de propriété CA, et si l'encodage détecté par l'éditeur est "ISO-8859-1", et si l'affichage dans l'éditeur semble mauvais (caractères illisibles ou douteux), alors le problème vient bien du fichier sgf. Le fichier a probablement mal été enregistré par son auteur et retrouver le bon encodage sera plus ou moins facile : si l'on arrive à retrouver le bon encodage il faudra transformer (la méthode dépend de ce que l'auteur a fait) le fichier et l'enregistrer dans cet encodage, en n'oubliant pas de donner aussi à la propriété CA du fichier sgf le nom de cet encodage.
Si le fichier sgf n'a pas de propriété CA, et si l'encodage détecté par l'éditeur est "ISO-8859-1", et si l'affichage dans l'éditeur semble bon, alors le problème ne vient probablement pas du fichier sgf.
Si le fichier sgf a une propriété CA, et si en ouvrant le fichier avec un éditeur de texte, celui-ci détecte un autre encodage que celui indiqué par la propriété CA, et si l'affichage du contenu dans l'éditeur semble bon (pas de caractère illisible ou douteux) il devrait suffire de remplacer la valeur de la propriété CA par le nom de l'encodage détecté par l'éditeur.
Si le fichier sgf a une propriété CA, et si l'encodage détecté par l'éditeur correspond à celui indiqué dans la propriété CA du fichier sgf, et si l'affichage dans l'éditeur semble mauvais (caractères illisibles ou douteux), alors le problème vient bien du fichier sgf. Le fichier a probablement mal été enregistré par son auteur et retrouver le bon encodage sera plus ou moins facile : si l'on arrive à retrouver le bon encodage il faudra transformer (la méthode dépend de ce que l'auteur a fait) le fichier et l'enregistrer dans cet encodage, en n'oubliant pas de donner aussi à la propriété CA du fichier sgf le nom de cet encodage.
Si le fichier sgf a une propriété CA, et si l'encodage détecté par l'éditeur correspond à celui indiqué dans la propriété CA du fichier sgf, et si l'affichage dans l'éditeur semble bon, alors le problème ne vient probablement pas du fichier sgf.
Si la page n'est pas encodée en "UTF-8", vérifiez que l'encodage employé dans le fichier sgf peut effectivement être transformé et affichée avec l'encodage de la page.
Si la page n'est pas encodée en "UTF-8", vérifiez que vous avez bien un charset="UTF-8" dans la balise <script> du lecteur, et éventuellement dans la balise <script> d'un script d'internationalisation de maxiGos.
Si vous avez créé un composant, ou modifié un composant de maxiGos, vérifiez que vous l'avez bien enregistré en "UTF-8" (attention au copier-coller d'un code source affiché par un navigateur : les caractères non latin peuvent y être mal codés).
Sinon, le problème vient probablement d'ailleurs.
Un lecteur maxiGos est constitué d'un ensemble de composants, comme par exemple le goban, la barre de navigation, la boite à commentaires, etc.
Le comportement du lecteur et de chacun de ses composants peut être modifié par des paramètres.
À chaque paramètre correspond un attribut qui peut être ajouté à la balise du lecteur maxiGos concerné (ou de la balise dans laquelle doit s'afficher le lecteur en cas d'utilisation d'un chargeur).
Des exemples sont donnés dans le chapitre Personnalisation des lecteurs autonomes.
Les paramètres de maxiGos sont regroupés par composant.
Les composants prédéfinis sont :
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| allowFileAsSource | data-maxigos-allow-file-as-source | S'il vaut 1, maxiGos, maxiGos accepte les fichiers sgf comme source de données. | (0,1) | 1 |
| allowStringAsSource | data-maxigos-allow-string-as-source | S'il vaut 1, maxiGos, maxiGos accepte les chaines de caractères contenant du sgf comme source de données. | (0,1) | 1 |
| initMethod | data-maxigos-init-method | Action initiale de maxiGos : aller au début du Sgf ("first"), aller à la fin de la variante principale du Sgf ("last"), parcourir en boucle le Sgf ("loop") ou avancer de n noeuds dans l'arbre des coups. On ne peut utiliser "loop" que si le composant Loop est aussi utilisé par le lecteur. | ("first","loop","last" ou un entier) | "first" |
| sgfLoadCoreOnly | data-maxigos-sgf-load-core-only | S'il vaut 1, on ne garde que les informations essentielles sur la partie (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) lors du décodage du sgf. | (0,1) | 0 |
| sgfLoadMainOnly | data-maxigos-sgf-load-main-only | S'il vaut 1, on ne garde que la variante principale lors du décodage du sgf. | (0,1) | 0 |
| sgfSaveCoreOnly | data-maxigos-sgf-save-core-only | S'il vaut 1, on ne garde que les informations essentielles sur la partie (EV, RO, DT, PC, PB, PW, BR, BW, BT, BW, RU, TM, OT, HA, KM, RE) lors de l'encodage du sgf. | (0,1) | 0 |
| sgfSaveMainOnly | data-maxigos-sgf-load-main-only | S'il vaut 1, on ne garde que la variante principale lors de l'encodage du sgf. | (0,1) | 0 |
| sourceFilter | data-maxigos-source-filter | Une chaine représentant une expression régulière que doit respecter le nom de la source sgf. Ce paramètre est utile par exemple pour rejeter une source indésirable insérée par un utilisateur dans un forum. | Une regex | ^[^?]+\\.sgf$ |
Ce composant affiche un bouton permettant d'afficher une boite "À propos", qui contient des informations sur le lecteur (un lien vers le code source, le thème, la configuration, la licence utilisée, le copyright).
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| aboutAlias | data-maxigos-about-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "About". S'il vaut null, maxiGos affiche par défaut "À propos" sur le bouton "About". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| aboutBtnOn | data-maxigos-about-btn-on | S'il vaut 1, maxiGos affiche le bouton "About". | (0,1) | 0 |
Ce composant déplace les pierres depuis les coins du goban vers les intersections où elles sont jouées.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| animatedStoneOn | data-maxigos-animated-stone-on | S'il vaut 1, maxiGos déplace les pierres depuis les coins du goban vers les intersections où elles sont jouées. | (0,1) | 0 |
| animatedStoneTime | data-maxigos-animated-stone-time | Temps de réference (en milliseconde) utilisé pour calculer le temps que mettra
une pierre pour aller du bol de pierres à son emplacement sur le goban. Le temps réel dépend de la distance entre le point de début et le point de fin de la translation. Sa valeur par défaut est celle du paramètre loopTime si le composant Loop est utilisé, 1000 ms sinon. |
Un nombre réel positif | 1000 |
Ce composant affiche un bouton permettant à un utilisateur ayant essayé quelques variantes de revenir au coup le plus proche dans la variation principale du sgf de départ.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| backToGameAlias | data-maxigos-back-to-game-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "BackToGame". S'il vaut null, maxiGos affiche par défaut "Revenir au sgf" sur le bouton "BackToGame". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| backToGameBtnOn | data-maxigos-back-to-game-btn-on | S'il vaut 1, maxiGos affiche le bouton "BackToGame". | (0,1) | 0 |
Ce composant affiche un cartouche pour chaque joueur pouvant contenir selon son paramétrage une pierre indiquant la couleur du joueur, son nom, son niveau, le nombre de ses prisonniers et son bol de pierres.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| bowlOn | data-maxigos-bowl-on | S'il vaut 1, maxiGos affiche dans le cartouche les bols de pierres. | (0,1) | 1 |
| cartoucheBoxOn | data-maxigos-cartouche-box-on | S'il vaut 1, maxiGos affiche un cartouche pour chaque joueur. | (0,1) | 0 |
| prisonersOn | data-maxigos-prisoners-on | S'il vaut 1, maxiGos affiche dans le cartouche le nombre de prisonniers de chaque joueur. | (0,1) | 1 |
| shortHeaderOn | data-maxigos-short-header-on | S'il vaut 1, maxiGos affiche dans le cartouche une courte entête contenant pour chaque joueur une pierre indiquant sa couleur, son nom et son niveau. | (0,1) | 1 |
Ce composant affiche une boite contenant les commentaires se trouvant dans le sgf.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| allInComment | data-maxigos-all-in-comment | S'il vaut 1, la boite à commentaires contient tous les commentaires depuis le début du sgf jusqu'au noeud courant, au lieu de ne contenir que le commentaire pour le noeud courant. | (0,1) | 0 |
| headerInComment | data-maxigos-header-in-comment | S'il vaut 1, maxiGos ajoute au commentaire une entête contenant
les informations du sgf (propriétés EV, DT, PC, PB, PW, BR, WR, etc.) Pour que ce paramètre ait un effet, il faut que le composant Header soit lui aussi présent. |
(0,1) | 0 |
Il contient deux sous-composants : "EditToolBar" et "EditCommentTool".
Ce composant permet de modifier un sgf. Il affiche une barre d'outils et un éditeur de commentaire.
Il n'a pas de paramètre.
Ce composant affiche un menu de gestion de fichier ("Nouveau", "Ouvrir", "Enregistrer", etc.)
Il s'utilise avec le composant Menu.
Il n'a pas de paramètre.
Ce composant affiche le goban. C'est le seul composant qui doit être obligatoirement présent.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| asInBookOn | data-maxigos-as-in-book-on | S'il vaut 1, maxiGos affiche les pierres comme dans les livres
(c'est à dire qu'il laisse les prisonniers en place sur le goban).
S'il vaut 0, maxiGos retire les prisonniers du goban.
S'il vaut null, maxiGos recherche dans les propriétés FG du sgf
s'il faut ou non retirer les prisonniers. Cette propriété est essentielle quand on veut afficher des diagrammes ou des kifus. |
(0,1,null) | null |
| eraseGridUnder | data-maxigos-erase-grid-under | S'il vaut 1, maxiGos efface les lignes de la grille sous les marques et étiquettes. | (0,1) | 0 |
| gridMargin | data-maxigos-grid-margin | Nombre de pixels à ajouter à l'extérieur de la grille. | Un nombre réel | 0 |
| gridPadding | data-maxigos-grid-padding | Nombre de pixels à ajouter entre le bord de la grille et son contenu. | Un nombre réel | 0 |
| gobanMargin | data-maxigos-goban-margin | Nombre de pixels à ajouter entre le bord du goban et son conteneur. | Un nombre réel | 0 |
| gobanPadding | data-maxigos-goban-padding | Nombre de pixels à ajouter entre le bord du goban et la grille du goban. | Un nombre réel | 0 |
| in3dOn | data-maxigos-in3d-on | S'il vaut 1, maxiGos affiche les pierres et
éventuellement le goban avec un effet 3d. Bien que ce paramètre soit principalement utilisé dans le composant Goban, il est aussi utilisé par d'autres composants comme Cartouche, MoveInfo et NotSeen. |
(0,1) | 1 |
| indicesOn | data-maxigos-indices-on | S'il vaut 1, maxiGos affiche les indices autour du goban. S'il vaut 0, maxiGos cache les indices autour du goban. S'il vaut null, maxiGos recherche dans les propriétés FG du sgf s'il faut ou non afficher les indices. | (0,1,null) | null |
| japaneseIndicesOn | data-maxigos-japanese-indices-on | S'il vaut 1, maxiGos affiche les indices autour
du goban façon japonaise (système dit "iroha"). Pour que ce paramètre ait un effet, il faut que indicesOn valle 1. |
(0,1) | 0 |
| marksAndLabelsOn | data-maxigos-marks-and-labels-on | S'il vaut 1, maxiGos affiche les marques et étiquettes sur le goban. | (0,1) | 0 |
| markOnLastOn | data-maxigos-mark-on-last-on | S'il vaut 1, maxiGos affiche une marque sur le dernier coup placé sur le goban. | (0,1) | 0 |
| numAsMarkOnLastOn | data-maxigos-num-as-mark-on-last-on | S'il vaut 1, maxiGos affiche un numéro comme marque
sur le dernier coup placé sur le goban. Pour que ce paramètre ait un effet, il faut que markOnLastOn valle 1. |
(0,1) | 0 |
| numberingOn | data-maxigos-numbering-on | S'il vaut 2, maxiGos affiche la numérotation des pierres modulo 100. S'il vaut 1, maxiGos affiche la numérotation des pierres. S'il vaut 0, maxiGos cache la numérotation des pierres. S'il vaut null, maxiGos recherche dans les propriétés FG, MN et PM du sgf comment il faut afficher la numérotation des pierres. | (0,1,2,null) | null |
| oldJapaneseIndicesOn | data-maxigos-old-japanese-indices-on | S'il vaut 1, maxiGos affiche les indices autour
du goban façon japonaise ancienne (avec des kanjis). Pour que ce paramètre ait un effet, il faut que indicesOn valle 1. |
(0,1) | 0 |
| oldJapaneseNumberingOn | data-maxigos-old-japanese-numbering-on | S'il vaut 1, maxiGos affiche la numérotation des pierres de façon japonaise ancienne (avec des kanjis). Pour que ce paramètre ait un effet, il faut que numberingOn valle 1. |
(0,1) | 0 |
| specialStoneOn | data-maxigos-special-stone-on | S'il vaut 1, maxiGos affiche des lignes grises courbes
sur les pierres blanches (imitant les pierres en coquillage)
et un reflet différent sur les pierres noires
(imitant les pierres en ardoise). Cet affichage est significativement plus lent que l'affichage normal. Pour que ce paramètre ait un effet, il faut que in3dOn valle 1. |
(0,1) | 0 |
| stoneShadowOn | data-maxigos-stone-shadow-on | S'il vaut 1, maxiGos ajoute une ombre aux pierres. | (0,1) | 0 |
| stretching | data-maxigos-stretching | Indique combien de pixels on doit ajouter autour des pierres.
1er nombre : pixels (en coordonnées svg) à ajouter horizontalement pour un goban en 3d. 2e nombre : pixels (en coordonnées svg) à ajouter verticalement pour un goban en 3d. 3e nombre : pixels (en coordonnées svg) à ajouter horizontalement pour un goban en 2d. 4e nombre : pixels (en coordonnées svg) à ajouter verticalement pour un goban en 2d. |
liste de 4 nombres réels | "0,0,1,1" |
| territoryMark | data-maxigos-territory-mark | Indique quel type de marque on emploie pour marquer les territoires
(ces marques sont spécifiées par les propriétés sgf TB et TW) :
|
("MA","MS") | "MS" |
| yaOn | data-maxigos-ya-on | S'il vaut 1, maxiGos remplace les disques sur les hoshis par des marques dites "ya" (utilisées dans l'ancienne Chine). | (0,1) | 0 |
Ce composant affiche une barre coulissante permettant de se déplacer rapidement dans l'arbre des coups.
Ce composant fournit également pour la barre de navigation un champ de saisie d'un numéro de coup où l'on souhaite se rendre. Pour insérer ce champ de saisie dans la barre de navigation, ajouter simplement "Goto" à la valeur du paramètre navigations.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| gotoBoxOn | data-maxigos-goto-box-on | S'il vaut 1, maxiGos affiche une barre coulissante permettant une avance ou un recul rapide dans l'arbre des coups. | (0,1) | 0 |
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| guessBoxOn | data-maxigos-guess-box-on | S'il vaut 1, maxiGos affiche une barre indiquant si l'utilisateur est proche ou pas de deviner l'un des coups suivants. | (0,1) | 0 |
| canPlaceGuess | data-maxigos-can-place-guess | S'il vaut 1, maxiGos place un coup sur une intersection où
l'utilisateur vient de cliquer uniquement s'il est dans le sgf.
S'il vaut 0 et que le paramètre canPlaceVariation
vaut 1, il place un coup sur une intersection où
l'utilisateur vient de cliquer
que ce coup soit ou non dans le sgf. Si ces deux paramètres
vallent 0, maxiGos ne place rien sur le goban
suite à un clic de l'utilisateur. Ce paramètre est ignoré si canPlaceVariation vaut 1. |
(0,1) | 0 |
Ce composant affiche un bouton, ou la boite d'entête dans laquelle s'affiche le contenu des propriétés sgf EV, RO, PB, PW, BR, WR, DT, PC, RU, TM, KM, HA, RE, GC, etc.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| concatInHeader | data-maxigos-hide-in-header | Ensemble de paires d'éléments à concaténer éventuellement. Les paires possible sont :
|
Ensemble de chaines (séparées par des virgules) | "" |
| headerAlias | data-maxigos-header-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Header". S'il vaut null, maxiGos affiche par défaut "Entête" sur le bouton "Header". Il est souhaitable que la valeur contienne un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| headerBoxOn | data-maxigos-header-box-on | S'il vaut 1, maxiGos affiche l'entête du sgf dans la boite du composant
(contenu des propriétés sgf EV, RO, etc.) S'il vaut 0, l'entête peut quand même être affichée soit dans un dialogue via un click sur le bouton "Informations" qui s'affiche dans la boite du composant si headerBtnOn vaut 1, soit dans la boite à commentaire si headerInComment vaut 1. |
(0,1) | 0 |
| headerBtnOn | data-maxigos-header-btn-on | S'il vaut 1, maxiGos affiche un bouton "Informations" dans la boite du composant au lieu d'y afficher l'entête elle-même. Un click sur ce bouton affiche l'entête dans un dialogue. Ce paramètre est sans effet si headerBoxOn vaut 1. | (0,1) | 0 |
| hideInHeader | data-maxigos-hide-in-header | Ensemble d'éléments de l'entête à cacher éventuellement. Les éléments possibles sont :
|
Ensemble de chaines (séparées par des virgules) | "" |
| translateTitleOn | data-maxigos-translate-title-on | S'il vaut 1, maxiGos essaie de traduire le titre,
en utilisant les fonctions se trouvant dans les scripts des composants (pour le français)
ou les scripts d'internationalisation du dossier "_i18n" (pour les autres langues). Le titre est déduit des propriétés sgf EV et RO. Pour que la traduction soit efficace, EV doit être de la forme "x t" avec x de la forme "1st" ou "2nd" ou "3rd" ou "nth", n étant un nombre, et t le nom d'un titre comme "Honinbo", "Meijin", "Ing Cup", ... RO doit être de la forme "n" ou "n (s)" ou "(s)", n étant un nombre, et s une chaine parmi "final", "semi-final", "quarter-final", "playoff", "round" ou "game". |
(0,1) | 0 |
Note 1 : si headerBoxOn et headerBtnOn vallent tous les deux 0, maxiGos n'affiche pas la boite du composant Header. Mais il pourra toujours afficher le contenu du composant ailleurs comme par exemple dans la boite du composant Comment si headerInComment vaut 1.
Note 2 : la différence entre le composant Header et le composant Info est que le composant Header ne fait qu'afficher les informations tandis que le composant Info permet de les modifier.
Ce composant affiche un bouton permettant d'afficher l'aide de l'éditeur sgf.
Il a été conçu pour s'utiliser avec le composant Edit.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| helpBtnOn | data-maxigos-help-btn-on | S'il vaut 1, maxiGos affiche le bouton "Help". | (0,1) | 0 |
| helpAlias | data-maxigos-help-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Help". S'il vaut null, maxiGos affiche par défaut "Aide" sur le bouton "Help". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
Ce composant contient deux sous-composants, qui affichent chacun un bouton permettant de fabriquer et afficher une image de la position courante du goban au format PNG pour l'un et SVG pour l'autre.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| pngAlias | data-maxigos-png-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Png". S'il vaut null, maxiGos affiche par défaut "PNG" sur le bouton "Png". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| pngBtnOn | data-maxigos-png-btn-on | S'il vaut 1, maxiGos affiche le bouton "Png". | (0,1) | 0 |
| svgAlias | data-maxigos-svg-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Svg". S'il vaut null, maxiGos affiche par défaut "SVG" sur le bouton "Svg". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| svgBtnOn | data-maxigos-svg-btn-on | S'il vaut 1, maxiGos affiche le bouton "Svg". | (0,1) | 0 |
Ce composant affiche une boite d'édition des propriétés d'information du sgf comme EV, RO, DT, PC, PB, PW, etc.
Il a été conçu pour s'utiliser avec le composant Edit.
Il n'a pas de paramètre.
Ce composant affiche un "assistant" qui affiche les commentaires dans une bulle.
Il n'a pas de paramètre.
Ce composant permet un affichage en boucle des coups.
Il fournit également des boutons "Auto" et "Pause" pour la barre de navigation démarrant ou arrêtant l'affichage en boucle. Pour insérer ces boutons dans la barre de navigation, ajouter simplement "Loop" à la valeur du paramètre navigations.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| loopTime | data-maxigos-loop-time | Temps de référence en milliseconde servant à calculer le temps d'attente entre deux coups lors d'un affichage en boucle. Le temps d'attente T est allongé en cas d'affichage d'un éventuel commentaire de longueur L et se calcule selon la formule suivante : T=(L/20+1)*loopTime. | Un entier positif | 1000 |
| initialLoopTime | data-maxigos-loop-time | Temps servant à calculer la durée d'affichage de la position initiale.
La durée d'affichage de cette position se calcule par la formule suivante :
T=initialLoopTime*loopTime/1000. Si ce paramètre est indéfini, on calcule la durée d'affichage de la position initiale comme pour n'importe quelle autre position. |
Un entier positif | 0 |
| finalLoopTime | data-maxigos-loop-time | Temps servant à calculer la durée d'affichage de la position finale.
La durée d'affichage de cette position se calcule par la formule suivante :
T=finalLoopTime*loopTime/1000. Si ce paramètre est indéfini, on calcule la durée d'affichage de la position initiale comme pour n'importe quelle autre position. |
Un entier positif | 0 |
Ce composant affiche une liste de menus.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| menus | data-maxigos-menus | Liste des menus affichés par le composant Menu. Les menus disponibles sont "File" (requiert la présence du composant File), "Edit" (requiert la présence du composant Edit), "View" (requiert la présence du composant View) et "Windows". |
Une liste de chaines | "" |
Ce composant affiche dans sa boite le numéro du coup courant et ses coordonnées.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| onlyMoveNumber | data-maxigos-only-move-number | S'il vaut 1, seul le numéro de coup est affiché. | (0,1) | 0 |
Ce composant affiche une barre de navigation.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| navigations | data-maxigos-navigations | Ensemble de boutons ou d'input affichés par
le composant Navigation. Les boutons possibles sont "First", "TenPred", "Pred", "Next, "TenNext", "Last", "Auto" et "Pause", l'input étant "Goto" "Auto" et "Pause" requiert la présence du composant Loop. "Goto" requiert la présence du composant Goto. |
Ensemble de chaines (séparées par des virgules) | "First,TenPred,Pred,Next,TenNext,Last" |
Ce composant affiche la liste des coups joués non visibles sur le goban.
Il est utile quand le paramètre asInBookOn vaut 1.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| notSeenTwinStonesOn | data-maxigos-not-seen-twin-stones-on | S'il vaut 1, maxiGos affiche dans la boite du composant sur quelle pierre un coup non visible est joué si la pierre a un numéro, une étiquette ou une marque, sinon il affiche les coordonnées du coup. S'il vaut 0, il affiche systématiquement les coordonnées du coup. | (0,1) | 1 |
Ce composant affiche un bouton ou une boite permettant de modifier des options.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| hideInOptions | data-maxigos-hide-in-options | Ensemble d'options à cacher éventuellement. Les options possibles sont :
|
Ensemble de chaines (séparées par des virgules) | "" |
| optionsAlias | data-maxigos-options-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Options". S'il vaut null, maxiGos affiche par défaut "Options" sur le bouton "Options". Il est souhaitable que la valeur contienne un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| optionsBoxOn | data-maxigos-options-box-on | S'il vaut 1, maxiGos affiche les options dans la boite du composant. S'il vaut 0, les options peuvent quand même être affichées dans un dialogue via un click sur le bouton "Options" qui s'affiche dans la boite du composant si optionsBtnOn vaut 1. |
(0,1) | 0 |
| optionsBtnOn | data-maxigos-options-btn-on | S'il vaut 1, maxiGos affiche un bouton "Options" dans la boite du composant au lieu d'y afficher les options. Un click sur ce bouton affiche les options dans un dialogue. Ce paramètre est sans effet si optionsBoxOn vaut 1. | (0,1) | 0 |
Ce composant affiche le bouton "Pass".
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| canPassOnlyIfPassInSgf | data-maxigos-can-pass-only-if-in-sgf | S'il vaut 1, maxiGos n'active le bouton "Pass" que si l'un des coups suivants dans le sgf est un passe. | (0,1) | 0 |
| passAlias | data-maxigos-pass-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Pass". S'il vaut null, maxiGos affiche par défaut "Passe" sur le bouton "Pass". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| passBtnOn | data-maxigos-pass-btn-on | S'il vaut 1, maxiGos affiche le bouton "Pass". | (0,1) | 0 |
Ce composant affiche un bouton permettant de couper l'arbre sgf à partir du noeud courant.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| removeAlias | data-maxigos-remove-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Remove". S'il vaut null, maxiGos affiche par défaut "Couper" sur le bouton "Remove". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| removeBtnOn | data-maxigos-remove-btn-on | S'il vaut 1, maxiGos affiche le bouton "Remove". | (0,1) | 0 |
Note : le bouton ne s'appelle pas "Cut" pour éviter une éventuelle confusion avec l'outil "Cut" du composant Edit.
Ce composant affiche un bouton "Score".
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| ephemeralScore | data-maxigos-ephemeral-score | S'il vaut 1, maxiGos n'enregistre pas dans le SGF les marques TB ou TW ajoutées via le composant Score. | (0,1) | 0 |
| scoreAlias | data-maxigos-score-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Score". S'il vaut null, maxiGos affiche par défaut "Score" sur le bouton "Score". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| scoreBtnOn | data-maxigos-score-btn-on | S'il vaut 1, maxiGos affiche le bouton "Score". | (0,1) | 0 |
| scoreDefaultRules | data-maxigos-score-default-rules | Règle par défaut si aucune règle n'est trouvée dans le Sgf. | Une chaine (AGA, Chinese, Japanese, etc.) | null |
| scoreMethod | data-maxigos-score-method | Indique quelle méthode est employée pour ajouter/retirer les marques TB et TW : trivial : un clic sur une pierre y place ou retire un TB ou un TW de couleur opposée à celle de la pierre. Un clic sur une intersection inoccupée y ajoute, permute ou retire un TB ou un TW. counting : un clic sur une pierre y place ou retire un TB ou un TW de couleur opposée à celle de la pierre, ainsi que sur toutes les intersections inoccupées ou occupées par une pierre de même couleur voisines de proche en proche de cette pierre. Un clic sur une intersection inoccupée y place ou retire un TB ou TW ainsi que sur toutes les intersections inoccupées voisines de proche en proche de cette intersection, si ces intersections sont entourées par des pierres de même couleur. |
("trivial","counting") | "trivial" |
| scoreInComment | data-maxigos-score-in-comment | S'il vaut 1, maxiGos affiche le score dans une boite de commentaire s'il y en a une. | (0,1) | 0 |
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| sgfAction | data-maxigos-sgf-action | Action à effectuer lorsque l'on clique sur le bouton "Sgf". S'il vaut "Show", le sgf est affiché dans une boite par dessus le goban. S'il vaut "Download", il est téléchargé (si toutefois c'est possible avec la machine utilisée). | "Show" ou "Download" | "Show" |
| sgfAlias | data-maxigos-sgf-alias | Indique dans quel élément du tableau de traduction
il faut rechercher ce qui sera affiché sur le bouton "Sgf". S'il vaut null, maxiGos affiche par défaut "SGF" sur le bouton "Sgf". Il est souhaitable que la valeur contienne au moins un "_". Et si la valeur ne contient que "_", cela signifie afficher une chaine vide. |
Une chaine | null |
| sgfBtnOn | data-maxigos-sgf-btn-on | S'il vaut 1, maxiGos affiche le bouton "Sgf". | (0,1) | 0 |
| toCharset | data-maxigos-to-charset | Ce paramètre a comme valeur le code d'un encodage ("UTF-8", "Big5", "GB18030", "Shift_JIS" ...). Il sert uniquement à indiquer dans quel encodage les fichiers sgf seront enregistrés par maxiGos (sa valeur remplaçant la valeur de la propriété CA initiale du sgf). Il ne sert pas lors de la lecture ou l'affichage d'un sgf et peut être différent de l'encodage de la page. En pratique, il est conseillé que sa valeur soit "UTF-8" ou éventuellement identique à l'encodage de la page. | Une chaine | "UTF-8" |
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| canPlaceSolve | data-maxigos-can-place-solve | S'il vaut 1, maxiGos place le coup de l'utilisateur s'il est dans le sgf et répond à ce coup. | (0,1) | 0 |
| oldSolveBtnOn | data-maxigos-old-solve-btn-on | S'il vaut 1, maxiGos affiche le bouton "Retry" comme le bouton "First", le bouton "Undo" comme le bouton "Pred", et le bouton "Hint" comme le bouton "Next". | (0,1) | 0 |
| solves | data-maxigos-solves | Ensemble de boutons à afficher pour ce composant. 4 boutons sont possibles : "Retry", "Undo", "Pass" et "Hint". |
Ensemble de chaines (séparées par des virgules) | "Retry,Undo" |
| specialMoveMatch | data-maxigos-special-move-match | En théorie, pour représenter un coup joué "ailleurs" (c.a.d. un "tenuki"),
on insère deux coups consécutifs de la couleur opposée dans le sgf.
Cependant, pour des raisons historiques, certains fichiers sgf utilisent
d'autres méthodes pour faire cela, comme insérer un passe,
un coup joué dans la partie invisble du goban,
ou un coup joué en dehors du goban.
Ce paramètre a pour but de gérer cela. S'il vaut 0, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf. S'il vaut 1, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf ou si les coordonnées d'une continuation correspond à un coup à l'extérieur du goban (comme B[zz] ou W[zz] pour un 19x19 par exemple). S'il vaut 2, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf ou si les coordonnées d'une continuation correspond à un coup à l'extérieur du goban (comme B[zz] ou W[zz] pour un 19x19 par exemple) ou à un coup dans la partie invisible du goban (quand une propriété VW est présente). S'il vaut 3, maxiGos place un coup de l'utilisateur s'il correspond à une continuation du sgf ou si deux coups consécutifs de la couleur opposée sont trouvés dans le sgf ou si les coordonnées d'une continuation correspond à un coup à l'extérieur du goban (comme B[zz] ou W[zz] pour un 19x19 par exemple) ou à un coup dans la partie invisible du goban (quand une propriété VW est présente) ou à un passe. |
(0,1,2,3) | 0 |
Ce composant affiche une barre de réglage pour modifier la vitesse de placement des coups lors d'un affichage en boucle.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| loopTimeMax | data-maxigos-loop-time-max | Temps d'affichage (en milliseconde) le plus lent entre deux coups. | Un nombre réel positif | 10000 |
Ce composant affiche l'arbre des coups dans sa boite.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| hideTreeNumbering | data-maxigos-hide-tree-numbering | S'il vaut 1, maxiGos cache les numéros des coups dans l'arbre des coups. | (0,1) | 1 |
| markCommentOnTree | data-maxigos-mark-comment-on-tree | S'il vaut 1, maxiGos remplace le numéro des coups commentés par un "?" dans l'arbre des coups. | (0,1) | 1 |
Ce composant permet d'afficher les variations.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| canPlaceVariation | data-maxigos-can-place-variation | S'il vaut 1, maxiGos place un coup sur l'intersection où vient de clicker l'utilisateur, que ce coup soit ou non dans le sgf. S'il vaut 0 et que le paramètre canPlaceGuess vaut 1, il place un coup sur l'intersection où vient de clicker l'utilisateur uniquement s'il est dans le sgf. Si ces deux paramètres vallent 0, maxiGos ne place rien sur le goban suite à un clic de l'utilisateur. | (0,1) | 0 |
| hideSingleVariationMarkOn | data-maxigos-hide-single-variation-marks-on | S'il vaut 1, maxiGos n'affiche les marques de variation
que s'il y en a au moins deux. Les marques de variation permettent à l'utilisateur de pouvoir choisir la variation qu'il veut suivre en cliquant sur l'intersection où elle se trouve. S'il n'y a qu'une seule variation, la marque est moins nécessaire, car on est sûr de pouvoir aller au coup suivant à l'aide des boutons de navigation. |
(0,1) | 0 |
| siblingsOn | data-maxigos-siblings-on | S'il vaut 1, maxiGos affiche les alternatives au coup courant. S'il vaut 0, il affiche les variations du coup suivant. S'il vaut null, il utilise la valeur ST du sgf pour déterminer ce qu'il doit afficher. | (0,1,null) | null |
| variationBoxOn | data-maxigos-variation-box-on | S'il vaut 1, maxiGos affiche une boite avec une liste de boutons permettant de sélectionner une variation. | (0,1) | 0 |
| variationMarkSeed | data-maxigos-variation-mark-seed | Par défaut, maxiGos génère automatiquement une marque sur les variations
en commençant par "1".
L'utilisation de nombres permet d'éviter de confondre ces marques
avec les marques explicitement placés par les commentateurs
qui sont en général des lettres.
Pour remplacer ces marques par autre chose,
on peut donner un ensemble de chaines comme valeur de ce paramètre. Par exemple, pour utiliser des hiraganas comme marques, on peut donner à ce paramètre la valeur "あ,い,う,え,お,か,き,く,け,こ,た,ち,つ,て,と,さ,し,す,せ,そ". Quelque soit la valeur de ce paramètre, si le commentateur a explicitement placé une marque sur l'intersection concernée, c'est cette marque qui sera affichée et non pas la marque générée automatiquement par maxiGos. Enfin, pour que ces marques soient effectivement affichées, il faut bien évidemment que la valeur de la propriété ST dans les fichiers sgf ou la valeur des paramètres variationMarksOn et hideSingleVariationMarkOn le permettent. |
Ensemble de chaines (séparées par des virgules) | "" |
| variationMarksOn | data-maxigos-variation-marks-on | S'il vaut 1, maxiGos affiche une marque (par défaut un numéro de variante) sur les intersections où une variation est présente dans le sgf. S'il vaut 0, il n'en n'affiche pas. Et s'il vaut null, il utilise la valeur de la propriété sgf ST pour déterminer s'il doit ou pas afficher ces marques. | (0,1,null) | null |
Ce composant affiche la version de maxiGos dans sa boite.
| Paramètre | Attribut | Description | Valeurs possibles | Valeur par défaut |
|---|---|---|---|---|
| versionBoxOn | data-maxigos-version-box-on | S'il vaut 1, la version de maxiGos est affichée dans la boite du composant. | (0,1) | 0 |
Ce composant affiche un menu de modification de l'affichage ("2d/3d", "Étirement", "Ombre", "Couleurs", "Épaisseurs", "Agrandir", "Normal", "Réduire").
Il s'utilise avec le composant Menu.
Il n'a pas de paramètre.
Chaque thème a sa feuille de style qui se trouve dans le dossier "_css" des exemples.
Cette feuille de style est inclue automatiquement dans la page par maxiGos.
Dans le cas des lecteurs autonomes, elle est déjà incluse dans le code des lecteurs (on n'a donc pas besoin de la télécharger puis de la téléverser dans le site en ligne), tandis que dans le cas des générateurs, elle est incluse dans le code des lecteurs à la volée (on a donc besoin de l'avoir téléchargée puis de la téléverser dans le site en ligne).
Dans tous les cas, on n'a pas besoin de la déclarer explicitement dans la partie <head> de la page (puisque c'est maxiGos qui s'en charge). Par contre, on peut si on le souhaite faire des modifications de style en rajoutant dans les feuilles de style de la page les instructions css appropriées.
La plupart des balises html de maxiGos ont été définies avec une classe et un id. Cela permet de facilement modifier leur style.
On a comme balises :
Chaque lecteur a un identifiant qui commence par "d" suivi d'un nombre (1 pour le 1er lecteur maxiGos apparaissant dans une page, 2 pour le 2e, etc.)
Chaque identifiant de balise encapsulant un composant est préfixé par l'identifiant de son lecteur, suivi du nom du composant, et suffixé par le nom de la balise ou "Box". Par exemple, l'identifiant pour le <div> encapsulant le composant Goban du troisième lecteur maxiGos apparaissant dans une page est "d3GobanBox".
Chaque classe est préfixée par "mx" au lieu de l'identifiant du lecteur. Par exemple, la classe du <div> encapsulant le composant Goban est "mxGobanBox".
Le <div> global a pour nom "Global". Son identifiant est l'identifiant du lecteur suivi de "Global". Sa classe est "mxGlobal". Pour le 3e lecteur maxiGos apparaissant dans une page, le lecteur produira donc comme html :
<div class="mxGlobal" id="d3Global">...</div>Le lecteur ajoute éventuellement d'autres classes selon les besoins.
Les <div> des boites de regroupement n'ont pas d'identifiant. Par contre, elles ont plusieurs classes de la forme "mx" + nom d'un composant + ("Parent" ou "GrandParent" ou "GreatGrandParent" ou "GreatGreatGrandParent" etc.) (autant de classes qu'elles contiennent de composants).
À l'intérieur de certains composants, on a d'autres balises dont beaucoup ont aussi des classes ou des ids, mais c'est moins systématique
Voici à titre indicatif une liste de balises que l'on peut styler et le nom des classes associées.
MaxiGos ajoute les variables css --gobanIntrinsicWidth et --gobanIntrinsicHeight qui contiennent les largeurs et hauteurs en unité "svg" du svg contenant le goban aux styles de la boite globale.
Si le composant MoveInfo est présent, MaxiGos ajoute les variables css --moveInfoIntrinsicWidth et --moveInfoIntrinsicHeight qui contiennent les largeurs et hauteurs en unité "svg" du svg du composant aux styles de la boite globale.
Si le composant Tree est présent, MaxiGos ajoute les variables css --treeIntrinsicWidth et --treeIntrinsicHeight qui contiennent les largeurs et hauteurs en unité "svg" des svgs du composant aux styles de la boite globale.
Attention : certains composants (AnimatedStone, Edit, File, Image, Info, Loop, View, etc.) n'ont pas de boite, et certains peuvent s'afficher dans des dialogues (voir ci-dessous).
Ci-dessous, Xxx peut être Alert, EditColors, EditInfo, EditNumbering, EditOptions, EditSgf, New, Open, Save, Send, ShowAbout, ShowHeader, ShowHelp and ShowSgf.
Certains composants ont des fonctionnements particuliers qui nécessitent de prendre quelques précautions d'emploi.
Il n'a pas de boite principale.
Il contient une boite div.mxEditToolbar (boite de la barre d'outils), et un textarea (pour la saisie des commentaires).
La boite div.mxEditToolbar contient des balises button (contenant un svg) ou input. Suivant qu'ils sont ou pas sélectionnés par l'utilisateur, maxiGos donne à ces balises la classe .mxUnselectedEditTool, la classe .mxSelectedEditTool et éventuellement la classe .mxSuperSelectedEditTool si l'outil permet de changer la valeur d'une propriété sgf pouvant avoir trois valeurs.
Sa boite principale div.mxGobanBox contient une boite interne div.mxGobanContent qui contient un svg dans lequel est dessiné le goban. Ce svg doit toujours avoir exactement la taille de la boite div.mxGobanContent qui le contient.
Comme une valeur d'attribut modifiée via css sur un élément svg a la priorité sur les valeurs des attributs des balises des éléments svg, on peut modifier beaucoup de ces valeurs dans le css.
Il n'a pas de boite principale.
Il contient deux sous-composants : "PNG" et "SVG" (tous deux constitués uniquement d'un bouton).
Il affiche un dialogue dialog.mxEditInfoDialog.
Ce dialogue contient une série de label+champ. Chaque label a une classe ayant pour nom ".m" suivi du nom de la propriété sgf à laquelle ils correspondent (par exemple, .mxEV pour la propriété sgf EV). Chaque champ dans le cas général est un input text qui a une classe ayant pour nom ".m" suivi du nom de la propriété sgf à laquelle ils correspondent (par exemple, .mxEV pour la propriété sgf EV). Pour la propriété RE (le résultat de la partie), on a trois champs au lieu d'un seul qui ont pour classe .mxWN (champ de type select pour choisir le gagnant), .mxHW (champ de type select pour choisir le type de victoire) et .mxSC (input text pour le score). Pour la propriété GC, le champ est un textarea.
Si maxiGos juge que la saisie dans l'un des champs du dialogue dialog.mxEditInfoDialog est incorrecte, il ajoute à ce champ la classe .mxBadInput (ces vérifications faites par maxiGos sont très rudimentaires).
Sa boite principale div.mxLessonBox contient une balise <div> pour la bulle à commentaire, et une balise <img> pour l'assistant.
MaxiGos modifie la valeur de l'attribut src de la balise <img> selon que l'assistant est en train de dire quelque chose ou pas.
Si le noeud de l'arbre des coups contient une des propriétés BM, DO, IT ou TE, maxiGos ajoute à la boite div.mxLessonBox l'une des classes mxBM, mxDO, mxIT ou mxTE.
Sa boite principale menu.mxMenuBox contient une liste de menus (li.mxOneMenu). Chaque li.mxOneMenu contient un bouton qui contient le nom du menu, et une boite menu.mxSubMenu qui contient une liste de boutons, chaque bouton correspondant à un choix possible du menu.
Quand l'utilisateur clique sur un bouton li.mxOneMenu button, le menu.mxSubMenu correspondant reçoit la classe mxSubMenuOpen.
La boite menu.mxSubMenu perdra la classe mxSubMenuOpen si l'utilisateur clique sur le bouton li.mxOneMenu button associé, ou si l'utilisateur clique ailleurs.
Dans le css, il suffira de donner aux éléments n'ayant pas la classe mxSubMenuOpen la propriété display:none afin de pouvoir cacher ou afficher les sous-menus.
Les éléments de ce composant sont des balises <button> contenant chacun un svg.
Maxigos rend inactif un bouton de ce composant en lui ajoutant l'attribut disabled quand l'action de ce bouton est impossible.
Il ne contient qu'un bouton.
Ce bouton a en plus des classes .mxBtn et .mxPassBtn d'autres classes que maxiGos lui ajoute en fonction des circonstances :
Gràce à ce mécanisme, on peut définir dans le css quel aspect devra avoir le bouton en fonction de la situation.
Les éléments de ce composant sont des balises <button> contenant chacun un svg.
Maxigos rend inactif un bouton de ce composant en lui ajoutant l'attribut disabled quand l'action de ce bouton est impossible.
Lorsque ce composant est utilisé avec le composant Comment, il peut générer automatiquement des messages en fonction de la situation :
Texte affiché dans la boite de commentaire s'il n'y a pas de propriété C dans le sgf pour le noeud courant et si c'est la position initiale qui est affichée.
Texte affiché dans la fenêtre de commentaire si l'utilisateur clique sur une intersection et qu'aucun coup n'y est prévu dans le sgf.
Texte affiché dans la fenêtre de commentaire si l'utilisateur clique sur le goban alors qu'il n'y a pas de suite prévue dans le sgf.
Texte affiché dans la fenêtre de commentaire si l'utilisateur essaie de jouer un coup interdit par la règle (intersection déjà occupée, suicide et simple ko uniquement).
Texte affiché dans la fenêtre de commentaire s'il n'y a pas de propriété C dans le sgf pour le noeud courant et si le coup joué est le dernier de sa branche et de la couleur jouée par maxiGos. Si pour une raison ou une autre, on ne souhaite pas voir ce message pour un coup donné, il suffit d'ajouter dans le sgf un commentaire pour ce coup.
Texte affiché dans la fenêtre de commentaire s'il n'y a pas de propriété C dans le sgf pour le noeud courant et si le coup joué est le dernier de sa branche et de la couleur jouée par l'utilisateur. Si pour une raison ou une autre, on ne souhaite pas voir ce message pour un coup donné, il suffit d'ajouter dans le sgf un commentaire pour ce coup.
Pour connaitre les libellés de ces messages pour l'anglais et le français, voir le début du script "mgosSolve.js".
Pour les autres langues, voir les scripts d'internationalisation dans le dossier "_i18n".
Il contient la boite div.mxTreeContent. La boite div.mxTreeContent contient une liste de svgs, chaque svg représentant une portion de l'arbre. Afin de limiter le nombre d'éléments html présents dans la page, on n'y laisse que les éléments visibles par l'internaute, et on rajoute ou retire les éléments appropriés à la volée quand l'internaute se déplace dans l'arbre des coups.
Voici en résumé la liste des styles et classes que maxiGos modifie ou impose via des instructions javascript.
On peut se fabriquer son propre lecteur autonome. Ce n'est pas très difficile si on connait un peu php et javascript.
Un générateur est un script php qui permet de fabriquer le code javascript d'un lecteur autonome maxiGos. En utilisant un autre script php, on peut enregistrer le code généré dans un fichier javascript. On obtient ainsi un lecteur autonome. C'est ce que fait par exemple le script makeAllAlone.php qui se trouve dans le dossier "_php" des exemples de maxiGos.
Un générateur peut aussi servir à afficher un lecteur maxiGos dans une page : il suffit d'insérer une balise <script> dans la page à afficher, et d'y mettre comme valeur de l'attribut "src" le nom du script php du générateur au lieu du nom du script javascript d'un lecteur autonome maxiGos.
Un certain nombre de générateurs sont disponibles dans les exemples maxiGos. Ils sont dans le dossier "_maker" de ces exemples. Ce sont ces générateurs qui ont servi à fabriquer les lecteurs autonomes de maxiGos.
Le suite du code d'un générateur contient plusieurs parties :
Tout d'abord, le script php du générateur ayant pour but de fabriquer un script javascript, on l'indique en ajoutant au tout début du code du générateur la ligne :
header("content-type:application/x-javascript;charset=UTF-8");Un lecteur maxiGos est un assemblage de composants, chaque composant correspondant à une fonctionnalité ou une partie du lecteur. Par exemple le goban, la boite à commentaire, ou la barre de navigation sont des composants.
Les scripts javascript de ces composants se trouvent dans le dossier "_js" du dossier "_maxigos".
On n'est pas obligé d'utiliser tous les composants. Seuls sont obligatoires les scripts "mgos_lib.js" (fonctions utilitaires diverses), "mgos_rls.js" (gestion de la règle du go), "mgos_prs.js" (analyseur de sgf), "mgos_scr.js" (fabrication de svg), "mgos.js" (corps principal du lecteur) et "mgosGoban.js" (composant Goban).
En utilisant uniquement les composants dont on a vraiment besoin, on diminue parfois considérablement la taille et la complexité du code qui sera téléchargé sur la machine de l'utilisateur, et donc le temps que mettra maxiGos à démarrer.
Pour inclure un composant dans le code d'un générateur, il suffit d'une ligne de php utilisant la fonction "include". Par exemple, pour inclure le composant Goban qui a pour script "mgosGoban.js", on utilise la ligne suivante :
include "../../../_js/mgosGoban.js";On peut aussi créer ses propres composants qu'il faut alors définir dans un fichier javascript du même genre que pour les composants prédéfinis.
Dans ce fichier il suffira de définir les fonctions "createNomDuComposant()", appelée par maxiGos lors du chargement de la page, "initNomDuComposant()" appelée par maxiGos juste après le chargement de la page, et "updateNomDuComposant()" appelée par maxiGos après chaque action de l'utilisateur. Il faut déclarer ces fonctions en tant que prototype pour la classe "mxG.G" (qui est définie par ailleurs dans "mgos.js"). Par exemple, si l'on souhaite créer un composant appelé "Cute" dont l'unique action est d'afficher lors du chargement de la page la phrase "Baduk Go Weiqi", le code correspondant sera :
if(!mxG.G.prototype.createCute)
{mxG.G.prototype.createCute=function()
{
return "<div>Baduk Go Weiqi</div>";
};
}La définition de "createNomDuComposant()" est obligatoire, mais la définition des autres fonctions est facultative.
Le nom du fichier contenant le composant peut être n'importe quel nom. Il n'a pas besoin d'être préfixé par "mgos" ni même de contenir le nom du composant.
Les fichiers javascript des composants prédéfinis sont dans le dossier "_js". Mais un fichier javascript définissant un composant peut être n'importe où dans l'arborescence du site. Il suffira de le préfixer par un chemin relatif approprié pour pouvoir l'inclure.
Un fichier javascript peut éventuellement contenir la définition de plusieurs composants.
Important : ne pas oublier d'ajouter dans tous les cas les fichiers "mgos_lib.js", "mgos_rls.js", "mgos_prs.js", "mgos_scr.js" et "mgos.js".
Le code javascript de création d'un lecteur dans une page doit incrémenter le compteur de lecteurs maxiGos présents dans la page, lister les boites à utiliser, créer une instance de lecteur, lui donner un nom de thème et un nom de configuration.
Par exemple :
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";Le nom des boites à utiliser est tout simplement le nom du composant auquel elles correspondent. On affecte à mxG.B la liste de ces boites sous forme d'un tableau. On peut regrouper certaines boites dans un sous-tableau si on le souhaite. Chaque regroupement donnera lieu à la création par le lecteur (lors de son exécution dans la page) d'une boite de regroupement (c'est à dire une balise <div> qui englobe les composants contenus dans ce regroupement). Eventuellement, on peut n'avoir qu'un seul composant dans une boite de regroupement, et on peut aussi faire des regroupements de regroupements. Cela donne plus de possibilités pour composer et styler le lecteur.
Le thème et la configuration sont utilisées par les lecteurs maxiGos (lors de leur exécution dans la page) pour donner à la boite globale des lecteurs la classe "mx"+nom du thème+"Theme" et la classe "mx"+nom de la configuration+"Config". Ainsi, on pourra styler les lecteurs en fonction du nom du thème et du nom de la configuration en utilisant ces classes.
Le nom du thème et le nom de la configuration doivent être de préférence une chaine alphanumérique (sans espace) commençant par une majuscule.
Cette inclusion est effectuée dans le code php du générateur par l'instruction php suivante :
include "../../_php/insertCss.php";Le fichier css à insérer est supposé s'appeler "_common.css", et être dans un dossier s'appelant "_css", frère du dossier "_maker" où se trouve le générateur.
Le script insertCss.php fabrique une instruction javascript qui permettra ensuite au lecteur maxiGos (lors de son exécution dans la page) d'insérer la feuille de style dans la page où devra s'afficher le lecteur.
Pour donner une valeur à un paramètre, la ligne de code javascript à placer dans un générateur php est de la forme "mxG.D[mxG.K].a."+"NomDuParametre"="ValeurDuParametre"; Par exemple, pour donner la valeur 1 au paramètre in3dOn, on écrira :
mxG.D[mxG.K].a.in3dOn=1;Il faut bien faire attention aux majuscules et minuscules, et ne pas oublier les guillemets quand la valeur du paramètre est une chaine.
Voir le chapitre Paramétrage pour plus d'informations sur les paramètres que l'on peut utiliser.
Le code d'un générateur finit par une ligne de javascript démarrant le lecteur après son chargement dans une page. Cette ligne est :
mxG.D[mxG.K].start();On commence par créer un sous-dossier dans le dossier "_sample" de maxiGos, et on l'appelle par exemple "ephemeral".
On crée dans le dossier "ephemeral" les sous-dossiers "_css", "_js" et "_maker".
On crée un fichier "ephemeral.php" (que l'on enregistrera dans le dossier _maker") et qui contient :
<?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=[["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();On crée un fichier "_common.css" (que l'on enregistrera dans le dossier _css") et qui contient :
.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;
}On crée un fichier "cute.js" (que l'on enregistrera dans le dossier _js") et qui contient :
if(!mxG.G.prototype.createCute)
{
mxG.G.prototype.createCute=function()
{
return "<div>Baduk Go Weiqi</div>";
};
}On a notre générateur prêt à l'emploi. Pour le tester, on crée la page index.html suivante (que l'on enregistre directement dans le dossier "ephemeral") :
<!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>Il suffit ensuite d'afficher cette page dans un navigateur.
Et voilà !
Question : en partant de rien, que dois-je faire au minimum pour insérer un lecteur autonome maxiGos dans l'une de mes pages ?
<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 : avec quels navigateurs maxiGos fonctionne-t-il ?
Bien que maxiGos ait plus de 20 ans, il a beaucoup évolué. Il fonctionne bien avec les navigateurs soucieux de respecter les standards (la plupart des navigateurs dont Chrome, Firefox, Safari et Edge), mais pas avec des navigateurs comme Internet Explorer. Parfois, seules certaines fonctionnalités peuvent ne pas être disponibles (en particulier quand on utilise l'éditeur qui a besoin de pouvoir lire et enregistrer des fichiers).
Question : maxiGos n'affiche rien. Comment faire le diagnostic ?
Vérifiez que vous avez bien copié le dossier "_maxigos" ou le ou les lecteurs que vous envisagez d'utiliser à l'endroit approprié sur le serveur.
Suspectez les chemins préfixant les scripts d'appel à maxiGos dans les lignes qui appellent maxiGos dans votre page.
Affichez le code source de la page, et si votre navigateur sait faire ça, cliquez sur une ligne qui appelle maxiGos dans votre page. Si vous avez un message du genre "The requested URL ... was not found on this server" le chemin devant le lecteur maxiGos n'est pas bon. Si par contre il n'y a pas de message d'erreur, cliquez dans le code source sur la ligne qui appelle maxiGos. Cela affiche en général le code javascript correspondant à cette ligne. Si une page blanche apparait, c'est probablement que l'un des scripts de maxiGos a été modifié et contient une erreur de syntaxe. Sinon, si du code javascript apparait, il s'agit probablement d'un bug dans le code de maxiGos.
Question : maxiGos affiche le goban mais pas le contenu du fichier sgf. Comment faire le diagnostic ?
Vérifiez si le fichier sgf est bien à l'endroit approprié sur le serveur.
Si c'est bien le cas, suspectez alors le chemin préfixant le nom du fichier sgf ou le nom du fichier dans la ligne qui insère maxiGos dans votre page.
Il est aussi possible que maxiGos n'ait pas eu le droit d'ouvrir le fichier sgf. Il faut dans ce cas placer vos fichiers sgf dans un autre endroit, ou changer les droits d'accès à ces fichiers (le droit en écriture dans ces fichiers sgf n'est cependant jamais nécessaire, seul le droit en lecture l'est).
Question: comment changer la taille du goban ?
Il y a plusieurs méthodes pour faire cela. Avec les lecteurs maxiGos fournis avec les exemples de maxiGos, le goban est aussi large que possible à l'intérieur de son conteneur. Le plus simple est donc en général de le mettre dans un conteneur plus petit ou plus grand.
Cependant on notera que les gobans des lecteurs maxiGos fournis avec maxiGos ont en général une largeur maximale spécifiée dans leur feuille de style via la variable css "--gobanMaxWidth". On peut donc aussi essayer de modifier la valeur de cette variable css "--gobanMaxWidth".
Par exemple, si l'on veut que tous les gobans ne fassent pas plus de 20em de large, on peut ajouter dans la feuille de style de la page :
div.mxGlobal
{
--gobanMaxWidth:20em;
}Question: comment changer le fond du goban ?
Ceci peut se faire de différentes manières en ajoutant un style dans votre feuille de style.
Par exemple, pour donner au goban d'un lecteur du thème Minimalist une couleur bleue clair, on peut ajouter dans la feuille de style de la page un background au svg qui dessine le goban :
div.mxMinimalistTheme .mxGobanBox svg
{
background-color:#9cf;
}On peut aussi utiliser d'autres balises, comme par exemple le rectangle svg de classe .mxWholeRect, et dans ce cas, on modifie la propriété css fill au lieu de background-color :
div.mxMinimalistTheme .mxWholeRect
{
fill:#9cf;
}Il faut évidemment vérifier qu'il n'y a pas dans le css existant d'autres règles css qui empêcheraient ces modifications de fonctionner.
Question : comment afficher maxiGos dans une page s'adaptant aux mobiles ("responsive design") ?
Normalement, maxiGos s'occupe de tout ! Il s'adapte à la taille de son conteneur, tout en essayant de conserver au mieux la lisibilité des textes qu'il affiche.
Mais afin de forcer la page à s'ajuster à la taille de l'écran d'un mobile, n'oubliez pas d'ajouter dans la partie <head> de la page une ligne du genre :
<meta name="viewport" content="width=device-width,initial-scale=1.0">Question : j'utilise un lecteur autonome maxiGos mais il s'affiche en français, et je souhaite qu'il s'affiche en une autre langue. Que puis-je faire ?
Relisez le chapitre Internationalisation.
Si la langue que vous souhaitez utiliser n'a pas encore de script d'internationalisation dans "_maxigos/_i18n/", voir la question suivante.
Question : je voudrais traduire maxiGos en une autre langue. Comment procéder ?
Dupliquez "_maxigos/_i18n/maxigos-i18n-ja.js" et renommez le fichier en remplaçant les deux dernières lettres par le code de cette nouvelle langue (de préférence un code ISO 639). Remplacez les "ja" par le code de la nouvelle langue. Remplacez tous les textes qui sont en japonais par leur traduction dans la nouvelle langue (ils sont précédés par leurs équivalents en anglais) et supprimez ou éventuellement ré-écrivez ou créez si nécessaire les fonctions dont le nom commence par "build" ou "transalte" (ces fonctions sont "buildDate", "buildRank", "buildMove", "buildNumOfMoves", "buildRules", "buildTimeLimits", "buildKomi", "buildResult" et "transalteTitle"). Si l'une de ces fonctions est absente, maxiGos utilise des fonctions par défaut pour produire un résultat acceptable. Aussi, vous pouvez laisser de côté la réécriture de ces fonctions si cela vous semble trop compliqué. Enfin, enregistrez le fichier en UTF-8.
Question : j'utilise maxiGos dans une page qui n'est pas en UTF-8. Comment faire cela ?
Si vous utilisez un lecteur autonome, ajoutez charset="UTF-8" à vos balises contenant le code de maxiGos. Par exemple :
<script
charset="UTF-8"
src="_alone/maxigos-minimal-basic.js"
data-maxigos-sgf="../_sgf/game/blood-vomit.sgf">
</script>