Tutoriel sur les balises BBcode pour les parties en ligne

[szass]

Ce topic sert de tutoriel pour les différentes fonctionnalités de l'éditeur de texte utilisées pour les parties en ligne.
Pour chaque balise, un exemple de code vous est présenté avec la démonstration.

Lanceur de dés

Seuls les admin, modo, MD et PJ peuvent lancer les dés, et uniquement dans les forums des parties en cours.
Pour lancer des dés, il faut aller dans l'éditeur avancé (on ne peut pas y accéder depuis la zone de réponse rapide).
En bas de la zone de texte, vous avez un onglet Lanceur de dés (à côté de l'onglet pièces jointes) :

Il vous suffit d'indiquer la syntaxe désirée (ex : 3d6, 4d8+5, etc.) et de cliquer sur le bouton lancer les dés. Une petite popup vous indiquera que les dés ont bien été lancés.
Ceci fait, vous verrez apparaître en dessous votre lancer :

Suivant les droits que vous avez, vous pourrez l'éditer ou le supprimer, sinon vous pourrez juste l'insérer dans la zone de texte à l'endroit où se situe votre curseur (même principe que les pièces jointes).
Vous envoyez ensuite votre message et le ou les lancers apparaîtront.
Vous avez un lien qui redirige vers la page de l'extension avec un tutoriel (en anglais) de toutes les syntaxes autorisées. Il y en a pas mal, certaines utiles, d'autres moins. Je vous laisse expérimenter tout ça.
https://rhea.phpbbstudio.com/dice#page-body

Parler, Penser, Discret, Chanter, HRP

Lorsque vous écrivez un message, ces balises servent à indiquer si votre personnage parle, pense, fais une action en douce ou si vous voulez dire quelque chose en dehors du roleplay.

Parler :

Code : Tout sélectionner

[parler]bla bla bla[/parler]

Ce qui donne : « bla bla bla »

Penser :

Code : Tout sélectionner

[penser]bla bla bla[/penser]

Ce qui donne : bla bla bla

Discret :

Code : Tout sélectionner

[discret]bla bla bla[/discret]

Ce qui donne : *bla bla bla*

Chanter :

Code : Tout sélectionner

[chanter]bla bla bla[/chanter]

Ce qui donne : ♫ bla bla bla ♫

HRP :

Code : Tout sélectionner

[hrp]bla bla bla[/hrp]

Ce qui donne : [HRP : bla bla bla]

Secret

Cette balise permet de divulguer un message que seul un ou plusieurs destinataires renseignés pourront lire.
Il suffit d'ajouter le ou les utilisateurs souhaités en les séparant d'une virgule (sans espace). Si je renseigne szass et troumad dans la balise, ça donnera :
Message secret pour szass,troumad
Ceux qui ne sont pas renseignés dans la balise verront qu'un message secret a été posté, mais ne verront pas le contenu.
La balise accepte les BBcode.
Les pseudos des membres peuvent être écris avec ou sans majuscule, mais s'il y a des accents il faut les mettre.
Si vous avez des droits pour éditer un message contenant un secret qui ne vous est pas destiné (si vous êtes modérateur ou administrateur ou MD), vous ne verrez rien du contenu, uniquement qu'un message secret a été écrit à untel.
Idem si vous faites une citation du message secret.
La balise accepte également une seconde syntaxe pour inverser les destinataires, au moyen du signe ! juste après le = comme ceci : secret=!szass,troumad

Jeton

Cette balise sert à afficher des mini feuilles de personnage avec le nom, une illustration et les PV.
La syntaxe est la suivante :

Code : Tout sélectionner

[jeton=block|none,url_img]Illithid:36/52[/jeton]

block affiche les valeurs en PV.
none ne les affiche pas, mais laisse tout de même la barre de progression.

Il suffit de mettre l'url d'une illustration comme ceci :

Code : Tout sélectionner

[jeton=block,https://www.donjondudragon.fr/phpBB3/images/avatars/gallery/Creatures/Autres/autre_3.jpg]Illithid:36/52[/jeton]

Ce qui donne :

Illithid

PV36/52

Un exemple plus parlant :

Magicien

PV25/32

Guerrier nain

PV45/56

Guerrier

PV45/50

Voleur

PV25/25

Illithid

PV45/78

Nécrophage

PV13/25

Gros matou

PV65/77

Dragon

PV150/165

La balise redimensionne les images à 100px de large.
Les jetons sont alignés à gauche les uns avec les autres. Si vous souhaitez passer à la ligne, il vous faut employer la balise separateur (voir ci-dessous).

Pour obtenir simplement des adresses url d'avatars déjà mis en place, vous avez un lien au-dessus des smileys qui ouvre une petite popup avec la galerie d'avatars du DDD.
En cliquant sur une des images, en maintenant le clic, et en glissant le curseur de la souris dans la zone de texte du forum, ça inscrit l'adresse de l'image dans la zone de texte. Vous pouvez ainsi récupérer facilement les url pour la balise jeton.
Le système est pour le moment très rudimentaire. L'idéal serait de cliquer sur une de ces images et que ça inscrive directement le BBcode dans la zone de texte. Mais ça dépasse mes compétences en php/phpbb.

Cette balise jeton peut aussi servir à afficher l'avatar et l'état de santé de votre ou vos personnages des parties en ligne, en vous rendant dans votre panneau d'utilisateur, ici : https://www.donjondudragon.fr/forum/use ... cp_profile
Le champ "Mini Feuille de perso" accepte les BBcodes et devra être uniquement utilisé pour afficher une mini feuille de votre ou vos personnages des parties en ligne, qui s'afficheront sous votre avatar, dans les sujets.
Ce champ ne doit pas servir à insérer une signature (la fonction signature sert à ça), ni de choses n'ayant rien à voir avec les parties en ligne.
Un exemple de ce qu'on peut mettre dans ce champ :

Code : Tout sélectionner

[jeton=block,https://www.donjondudragon.fr/phpBB3/images/avatars/gallery/Creatures/Morts-vivants/mort-vivant_7.jpg]Szass:50/60[/jeton]

Ce qui placera ce bloc sous votre avatar :

Szass

PV50/60

Il vous suffit de remplacer l'url de l'image et les PV par ceux de votre perso.
Vous pouvez afficher tous vos personnages si vous en avez plusieurs, mais dans ce cas, veuillez utiliser la balise spoil s'il vous plaît afin qu'il n'y ait pas 12000 jetons qui s'affichent.

Spoil

Place un contenu en spoiler, avec un bouton pour dévoiler ou masquer ce contenu.
La balise s'utilise de deux manières :

Code : Tout sélectionner

[spoil]Texte caché[/spoil]

Ce qui donne :

► Afficher le texte

Texte caché

Code : Tout sélectionner

[spoil=Titre du spoiler]Texte caché[/spoil]

Ce qui donne :

Titre du spoiler ► Afficher le texte

Texte caché

Music

Comme la balise Deezer ne fonctionne plus, je l'ai remplacée par une autre balise qui elle fonctionne, bien que différemment.
Il suffit de mettre l'url d'un fichier audio (mp3, ogg, mpg, mpeg ou ogm) entre les balises music. Url que vous pouvez récupérer sur le net, ou en hébergeant votre musique sur un serveur externe, ou sinon en l'uploadant sur le serveur du DDD.
Dans ce dernier cas, vous pouvez désormais ajouter des fichiers audio en pièces jointes (maximum 10 Mo) dans vos messages afin d'en obtenir une url.
Une fois le fichier uploadé, il vous suffit de faire clic droit sur le nom du fichier en lien et de "copier l'adresse du lien" que vous mettrez ensuite entre les balises music :

Code : Tout sélectionner

[music]https://www.donjondudragon.fr/phpBB3/download/file.php?mode=view&id=5954[/music]

Ce qui donne :

Note

Permet d'insérer une infobulle au survol d'un texte avec la souris.

Code : Tout sélectionner

[note=texte qui sert de lien]Contenu de l'infobulle[/note]

Ce qui donne : texte qui sert de lienContenu de l'infobulle
Si vous cliquez sur le lien, une petite croix rouge apparaît en haut à gauche de l'infobulle, et cette dernière reste ouverte un très bref laps de temps afin que vous puissiez y placer votre souris avant que l'infobulle ne se referme. C'est pratique si vous devez mettre un lien dans l'infobulle afin qu'on puisse cliquer dessus.

Cadre

Cette balise sert à encadrer un texte. La première valeur est la couleur de fond du cadre, à nommer en anglais (normes css), ou en hexadecimal avec le signe #, après le signe =
La seconde valeur est la largeur du cadre, en pixels.
La troisième valeur est l'alignement du cadre par rapport au contenu de la zone de texte : left (pour le mettre à gauche), right (pour le mettre à droite) ou none (pour ne pas l'aligner)

Code : Tout sélectionner

[cadre=#fff,300,left]cadre normal, fond blanc, largeur 300px, aligné à gauche[/cadre]

Ce qui donne :

cadre normal, fond blanc, largeur 300px, aligné à gauche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas cursus interdum ornare. Donec pellentesque, eros quis mollis condimentum, sem massa mattis ex, in varius sapien risus eu leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus neque ac placerat congue.

Code : Tout sélectionner

[cadre=#170d2b,500,right][color=#FFFFFF]cadre couleur hexadécimale (#170d2b), largeur 500px, aligné à droite[/color][/cadre]    >   La couleur du texte a aussi été mise en blanc
[cadre=lightblue,200,none]cadre couleur nom anglais (lightblue), largeur 200px, non aligné[/cadre]

Ce qui donne :

cadre couleur hexadécimale (#170d2b), largeur 500px, aligné à droite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas cursus interdum ornare. Donec pellentesque, eros quis mollis condimentum, sem massa mattis ex, in varius sapien risus eu leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus neque ac placerat congue.

cadre couleur nom anglais (lightblue), largeur 200px, non aligné

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas cursus interdum ornare. Donec pellentesque, eros quis mollis condimentum, sem massa mattis ex, in varius sapien risus eu leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus neque ac placerat congue.

Separateur

Insère un séparateur avec ou sans texte. Dans le second cas, affiche uniquement la bordure inférieure.

Code : Tout sélectionner

[separateur=100,#170d2b,red][color=#FFFFFF]Largeur 100%, fond #170d2b, bordure inférieure rouge[/color][/separateur]
[separateur=50,gray,blue]Largeur 50%, fond gris, bordure inférieure bleu[/separateur]
Ou sans texte entre les balises, en mettant une largeur de 50%, un fond transparent et une bordure grise :
[separateur=50,transparent,#a7a7a7][/separateur]

Ce qui donne :

Largeur 100%, fond #170d2b, bordure inférieure rouge

Largeur 50%, fond gris, bordure inférieure bleu

Ou sans texte entre les balises, en mettant une largeur de 50%, un fond transparent et une bordure grise :

Bar

Cette icône sert à afficher une barre de progression. La syntaxe est la suivante :

Code : Tout sélectionner

[bar=largeur en %,block|none]Intitulé:Numérateur/Dénominateur[/bar]

block : affiche les valeurs
none : masque les valeurs

Avec les valeurs affichées :

Code : Tout sélectionner

[bar=30,block]FOR:18/18[/bar]
[bar=30,block]DEX:12/18[/bar]
[bar=30,block]B&H:75/100[/bar]

Ce qui donne :

FOR18/18

DEX12/18

B&H75/100

Avec les valeurs masquées :

Code : Tout sélectionner

[bar=30,none]FOR:18/18[/bar]
[bar=30,none]DEX:12/18[/bar]
[bar=30,none]B&H:75/100[/bar]

Ce qui donne :

FOR18/18

DEX12/18

B&H75/100

Onglets

Permet de répartir le contenu dans différents onglets.

Code : Tout sélectionner

[tabmenu][tab=Onglet 1]contenu de l'onglet 1[/tab]
[tab=Onglet 2]contenu de l'onglet 2[/tab]
[tab=Onglet 3]contenu de l'onglet 3  :chin:[/tab][/tabmenu]

Ce qui donne :

Onglet 1

contenu de l'onglet 1

Onglet 2

contenu de l'onglet 2

Onglet 3

contenu de l'onglet 3

Tableau

Cet ensemble de balises permet de faire un joli tableau. La syntaxe n'est pas évidente du tout, à moins que vous sachiez déjà comment faire en html.
J'ai essayé de simplifier le plus possible.

Vous avez donc 4 icônes :

Tableau

Entête

Ligne

Cellule

Pour créer un tableau, il faut commencer par insérer la balise Tableau entre lesquelles vous mettrez vos balises de lignes, et entre lesquelles vous placerez vos cellules (ou colonnes). Et dans ces cellules, vous mettrez du texte. Les entêtes fonctionnent comme des cellules mais servent comme leur nom l'indique d'entêtes de colonnes (th au lieu de td). Vous pouvez bien évidemment mettre des entêtes en plein milieu du tableau pour créer un sous tableau.

Voici un exemple de tableau :

Titre

entete 1	entete 2	entete 3
cellule 1	cellule 2	cellule 3
cellule 4	cellule 5	cellule 6
cellule 7	cellule 8	cellule 9
cellule 10	cellule 11	cellule 12

Le code est comme ceci :

Code : Tout sélectionner

[tableau=Titre,500][ligne][entete=33]entete 1[/entete][entete=33]entete 2[/entete][entete=33]entete 3[/entete][/ligne][ligne][cellule]cellule 1[/cellule][cellule]cellule 2[/cellule][cellule]cellule 3[/cellule][/ligne][ligne][cellule]cellule 4[/cellule][cellule]cellule 5[/cellule][cellule]cellule 6[/cellule][/ligne][ligne][cellule]cellule 7[/cellule][cellule]cellule 8[/cellule][cellule]cellule 9[/cellule][/ligne][ligne][cellule]cellule 10[/cellule][cellule]cellule 11[/cellule][cellule]cellule 12[/cellule][/ligne][/tableau]

Détaillons juste deux points importants concernant la syntaxe :

Code : Tout sélectionner

[tableau=Titre,500]

"Titre" est bien évidemment le titre de votre tableau qui apparaît au-dessus, centré.
Le 500 est une valeur en px qui définit la largeur du tableau.

Code : Tout sélectionner

[entete=33]

La valeur 33 est cette fois-ci une valeur en % par rapport à la largeur du tableau précédemment renseignée (et non de la zone de texte).

Texte/image flottant

Permet d'enrober le texte autour d'une image plutôt qu'il soit placé en-dessous. Ça permet de faire de plus jolies présentations pour les textes des parties en ligne.
Par défaut, la balise affiche un float=left (l'image sera à gauche), mais vous pouvez remplacer par float=right pour la mettre à droite.

Code : Tout sélectionner

[float=left]le texte ou l'image[/float]
ou
[float=right]le texte ou l'image[/float]

Avec des images flottantes, ça donne ceci :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus magna, malesuada a placerat ut, tristique non ipsum. Morbi fringilla convallis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed convallis eros eros, quis tempor orci fermentum non. Phasellus sem ligula, dignissim eu leo nec, tincidunt vulputate magna. Pellentesque ultricies ornare risus. Sed ornare facilisis tortor, eget pharetra est pretium in. Aliquam id nunc et lectus ornare sagittis. Vestibulum non ligula vel elit facilisis venenatis non a est. Donec consectetur nec eros quis luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In condimentum sodales lacus sed semper.

Vivamus lectus lacus, aliquet vitae odio sodales, luctus vulputate nunc. Vivamus blandit ex non placerat bibendum. Suspendisse dictum condimentum justo ac pretium. Pellentesque porta imperdiet egestas. Duis porttitor ante vel mi bibendum, a malesuada quam egestas. Vestibulum ultricies maximus ligula ut porttitor. Curabitur orci lacus, imperdiet nec nisl eu, tristique iaculis leo. Praesent nec odio nibh. Nam condimentum tincidunt suscipit. Sed sodales in libero ut ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[LLyr]

Chouette merci pour tout ça ça va m'aider

[Toko]

C'est super toutes ces nouveautés !

[szass]

Mise à jour de la balise Cadre : j'ai ajouté une seconde variable pour la largeur du cadre (voir le tuto ci-dessus).
Si vous avez déjà utilisé cette balise ces derniers jours, il vous faudra éditer votre message pour ajouter la largeur donc, sinon le code merdouillera.

[Outsider]

Impressionnant ce que l'on peut faire avec les balises.

[szass]

Le BBcode peut sembler assez limité de base, mais on peut quand même faire plein de trucs avec.
Mais y a encore des fonctions sur lesquelles je galère pour les ajouter.

[szass]

Ajout d'une nouvelle balise "Bar", non pas pour se rendre dans votre endroit fétiche ( ), mais pour afficher une barre de progression (points de vie par exemple, ou toutes autres choses). Voir le tuto dans le premier message de ce topic.

Un petit exemple de mise en forme :

Description
Le grand méchant
est très méchant.

Possessions
sceptre aux 7 morceaux
oeil de Vecna

PV85/124

[/float]Grand Méchant
For : 16
Dex : 15
Con : 12
Int : 16
Sag : 9
Cha : 10

TACO : 8
CA : 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas cursus interdum ornare. Donec pellentesque, eros quis mollis condimentum, sem massa mattis ex, in varius sapien risus eu leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus neque ac placerat congue. Praesent nisi turpis, finibus ac sagittis ut, ullamcorper et nisi. Pellentesque vitae arcu lacus. Donec quis est id nisl placerat cursus. Aliquam erat volutpat. Ut sed finibus nibh.

[Toko]

Waow, ça claque !
Il a vraiment l'air très méchant ce grand méchant ! (Et blindé en pv, heureusement qu'il a une CA toute pourrie... )

[szass]

J'ai de nouveau mis à jour la balise Cadre, désolé pour les changements.
Elle accepte désormais une troisième valeur pour l'alignement du cadre : left (gauche), right (droite) ou none (aucun).

J'ai été obligé d'appliquer cette modif car la combinaison des balises Float + Cadre (pour mettre le cadre à gauche par exemple) donnait des résultats bizarres.
Si vous avez utilisé cette balise récemment donc, il vous faudra éditer votre message pour ajouter l'alignement (eh non, les alignements de D&D ne sont pas pris en compte ). Voir le tutoriel ci-dessus.

Et j'avais aussi oublié d'activer la balise Bar.

[Gaspard De La Nuit]

Ca va être bien utile tout ça, merci beaucoup !!