Version 1
Alors, le multicompte !
Cette version s'apparente plus à la méthode que j'ai vu sur Esquisse. Voilà ce que ce que cette version vous permettra de faire :
1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.
Bref, on fait un choix et la petite ligne de code magique s'ajoute à votre message.
Voir un exemple de choix de personnages.
Voir un exemple de ce qui ce passe une fois le choix fait.
Note : Ce LS semble incompatible avec le javascript du
Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.
2. Avoir les informations du personnage choisi qui remplacent les vôtres
Dans les sujets où vous avez choisi un personnage avant de poster, vous verrez votre avatar, votre pseudo, la couleur de votre groupe, votre rang et votre image de rang être remplacés par ceux du personnage.
Votre pseudo en tant que joueur sera déplacé ailleurs (en dessous du pseudo du personnage sur l'exemple), mais quand même là pour dire qui est le propriétaire de ce personnage.
Voir un exemple.
3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée
Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
Voir un exemple.
Note : Sur l'exemple, on ne voit pas les champs "normaux" du joueur parce que je ne voulais pas les voir en même temps que les champs personnalisés. Je les ai cachés pour qu'ils apparaissent seulement au survol de l'avatar. Il y a un tas de LS sur ça, je vous laisse fouiller si ça vous intéresse.
4. Avoir 2 profils distincts si vous préférez cette option
Disons que, à la place d'avoir les informations sur personnage qui remplace celles du joueur, vous préférez avoir un profil joueur et un profil personnage, puis voir les 2 apparaître en même temps, c'est aussi une option qui vous sera proposée.
Si les instructions mentionnent "2 profils distincts", cela s'adresse à vous.
Voir un exemple.
Par contre, ce LS est uniquement pour faire fonctionner le système et mettre en forme la partie personnage. Pour la partie profil du joueur, c'est à vous de le faire, quitte à aller voir les autres LS de profil.
Tout cela grâce à un javascript
sur lequel j'ai versé des larmes de sang qui fait tout (ou presque) le travail pour vous \o/
Vous avez 2 options pour ce qui est de comment le faire fonctionner.
1. En créant une base de données à l'aide de Google Sheet
Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes vos données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.
2. En créant une base de données directement dans le javascript
L'information est enregistrée directement dans le javascript lui-même pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que seuls les Admins pourront le modifier.
Le désavantage, c'est que seuls les Admins pourront le modifier (dépendamment du nombre de membres et de modifications à faire, cela peut rapidement devenir ardu).
Si vous n'aimez pas utiliser Google Sheet ou des sites externes, c'est une solution comme une autre.
Bref, allons y !
1. Créer la base de donnée sur Google Sheet
1.1 Créer une Google Sheet
Tapez "Google Sheet" sur google, le reste est assez intuitif u_u
1.2 Créer les colonnes
Il est très important de respecter quelques règles :
- Les colonnes commencent à la colonne A et la première ligne qui contient l'en-tête des colonnes doit être sur la ligne 1.
- La 1ère colonne est le nom du joueur nommée.
- La 2ème colonne est le nom du personnage joué par le joueur.
- La 3ème colonne est l'avatar du personnage nommée.
- La 4ème colonne est la couleur du groupe du personnage.
- La 5ème colonne est le le rang du personnage.
- La 6ème colonne est l'image de rang du personnage.
Ensuite, vous pouvez ajouter autant de champs personnalisés que vous le souhaitez.
Le nom dans l'entête des champs personnalisés doivent être différents les uns des autres.
Je vous en prie, ne mettez pas d'apostrophe ou de
" dans le titre de vos champs.
Voir un exempleOui, mais je veux que la couleur du groupe reste celle du joueur. Je n'ai pas de rang. J'ai un rang image, mais pas de rang texte ou l'inverse.
Vous devez quand même créer ces 6 colonnes dans cet ordre avec un nom d'en-tête. Si certaine colonnes ne sont pas utiles, ne mettez simplement pas d'information dans les lignes des
personnages.
Voir un exemple1.3 Remplir le tableau
Vous remplissez le tableau ligne par ligne.
Chaque personnage a sa propre ligne.
Si un joueur a 3
personnages, il y aura 3 lignes commençants par son pseudo, soit une pour chaque personnage.
Voir un exemplePour l'image de l'avatar et du rang, on vous demande de mettre l'url de l'image.
Par contre, si un de vos champs personnalisés contient une image, une infobulle ou autre, vous pouvez mettre directement le code html. Par exemple, si j'ai un champ qui est supposé contenir des badges, j'y mettrais :
- Code:
<img src="url 1er badge" /><img src="url 2e badge" /><img src="url 3e badge" />
Vous pouvez donc mettre pas mal n'importe quoi.
1.4 Publier le Google Sheet
Vous cliquez sur "Ficher", puis sur "Publier sur le web".
On vous donnera un lien, mais vous ne l'utiliserez pas.
1.5 Partager la Google Sheet
Vous cliquez sur "Partager", sur "Avancé", puis vous sélectionnez "Accès en écriture à toute personne disposant du lien".
Vous pouvez donner le lien à vos membres validés pour qu'ils puissent l'utiliser.
1.6 Protéger la feuille
Vous devez protéger votre feuille pour s'assurer que certains ne fassent pas de bêtises.
Pour protéger votre feuille, vous cliquez simplement sur "Données", puis sur "Feuilles et plages protégées".
On vous donnera le choix de protéger une plage de données ou une feuille. Vous choisissez "Feuille" et vous choisissez la feuille active.
Puis, vous cochez "Exclure certaines cellules". On choisit d'exclure la plage que les membres pourront modifier.
Dans cet exemple, je choisis d'exclure la plage C2:J5 puisque je ne veux pas que les joueurs puissent modifier leurs noms (colonne A et B) et je ne veux pas qu'ils puissent modifier l'en-tête (ligne 1).
Normalement, à chaque fois que vous rajoutez une ligne (donc un nouveau personnage validé), il faudra revenir modifier la plage pour rajouter la ligne du personnage (ici, cela deviendrait C2:J6) par exemple.
Puis, vous cliquez sur "Définir les autorisations". Vous aurez
cette fenêtre qui apparaîtra.
Vous cliquez sur "Vous uniquement" et vous choisissez l'option "Personnaliser..."
Cela vous donnera
cette fenêtre (le gris flou, c'est mon nom et mon adresse email que j'ai cachés) et vous pouvez ajouter les utilisateurs qui ont le droit de modifier en dehors des plages (généralement, nous ajoutez vos Admins).
Si vous pensez que certains membres ne savent pas toucher à un clavier sans le faire exploser ou que certains membres mal intentionnés pourraient modifier les données d'un autre joueur, vous pouvez aussi rajouter des protections sur des plages.
Par exemple, disons que je voudrais que seulement moi, les Admins et Joueur X puisse modifier les
personnages de Joueur X, je pourrais protéger ses données de la même façon que plus haut, mais en sélectionnant "Plage" à la place de "Feuille".
C'est sûr que cela pourrait être long à installer si vous avez beaucoup de joueurs, mais cela peut en valoir la peine parfois. C'est vous qui décidez ^^
2. Installer le javascript
2.1 Javascript pour ceux qui veulent utiliser une Google Sheet
On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
- Code:
// lacle EST LA SEULE CHOSE À MODIFIER.
var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";
var lienatelecharger = "https://docs.google.com/spreadsheets/d/" + lacle + "/pubhtml";
// Validation pour savoir si la suite est nécessaire ou pas
if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
$(function(){
var ifpostpositif = 0;
var ifsujetpositif = 0;
if (_userdata.user_id > -1) {
if ($('#text_editor_textarea').length > 0) {
ifpostpositif = ifpostpositif + 1;
}
}
if (window.location.pathname.indexOf("/t") > -1) {
if ($('.multicompte').length > 0) {
ifsujetpositif = ifsujetpositif + 1;
}
}
// Autre validation pour savoir si la suite est nécessaire ou pas
if (ifpostpositif > 0 || ifsujetpositif > 0) {
// On met les donnes dans un tableau
$.get(lienatelecharger, function (data) {
var ledata = $(".waffle:first tbody:first", data);
var nblignes = ledata.find('tr').length;
var nbcolones = ledata.find('tr:first td').length;
var personnages = new Array();
for (var i=0; i < nblignes; i++) {
personnages[i] = new Array();
for(var j=0; j < nbcolones; j++) {
personnages[i][j] = ledata.find('tr:eq('+i+')').find('td:eq('+j+')').text();
}
}
// On entre dans la partie pour selectionner les personnages quand on poste
if (ifpostpositif > 0) {
// Si on a un personnage
var sipseudo = 0;
for (i=0; i < personnages.length; i++) {
if (personnages[i][0] == _userdata.username) {
sipseudo = sipseudo + 1;
}
}
if (sipseudo > 0) {
// On crée la balise select
var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
$('input[name="post"]').after(labaliseamettre);
//On ajoute les options dans la balise
for (i=0; i < nblignes; i++) {
if (personnages[i][0] == _userdata.username) {
var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
$('#selectmulticompte').append(optionajout);
}
}
// On ajoute le code dans le message à poster
$('#selectmulticompte').change(function() {
var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
var codemulticompte = '<div class="multicompte" data-perso="'+optionchoisie+'"></div>';
var lemessage = $('#text_editor_textarea').sceditor('instance').val();
if (optionchoisie != "Non") {
if (lemessage.search('data-perso') > -1) {
var nomdejala = lemessage.split('"', 4);
lemessage = lemessage.replace(nomdejala[3], optionchoisie);
}
else {
lemessage = codemulticompte + lemessage;
}
$('#text_editor_textarea').sceditor('instance').val(lemessage);
}
else {
if (lemessage.search('data-perso') > -1) {
var nomdejala = lemessage.split('"', 4);
var machinaenlever = '<div class="multicompte" data-perso="'+nomdejala[3]+'"></div>';
lemessage = lemessage.replace(machinaenlever, '');
$('#text_editor_textarea').sceditor('instance').val(lemessage);
}
}
});
}
}
// On entre dans la partie pour mettre les informations dans le profil
if (ifsujetpositif > 0) {
// Pour chaque code de multicompte
$('.multicompte').each(function() {
// On regarde la ligne qui contient le profil et le message
var multipost = $(this).closest('.multi_post');
// On sélectionne l'endroit où est le pseudo du joueur
var pseudopost = multipost.find('.multi_pseudo:first a:first');
// On prend le pseudo du joueur
var pseudoposttext = pseudopost.text();
// On sélectionne l'avatar du joueur
var avatarpost = multipost.find('.multi_avatar:first img:first');
// On prend l'avatar du personnage si il a été mis manuellement
var avatarmess = $(this).data('avatar');
// On trouve le nom du personnage
var lenomduperso = $(this).data('perso');
// On met le nom du personnage à la place du nom du joueur
pseudopost.find('strong:first').html(lenomduperso);
// On met le pseudo du joueur en bas de l'avatar
multipost.find('.multi_pseudoplayer:first').prepend(pseudoposttext);
// On regarde si le nom du personnage est dans la banque de données
var labonneligne;
for (i=0; i < nblignes; i++) {
if (personnages[i][1] == lenomduperso) {
labonneligne = i;
}
}
if (labonneligne > 0) {
// On met l'image du personnage à la place de l'avatar
if (personnages[labonneligne][2].length > 0) {
avatarpost.attr('src', personnages[labonneligne][2]);
}
// On met la couleur du personnage sur le nom du personnage
if (personnages[labonneligne][3].length > 0) {
pseudopost.find('span:first').css('color', personnages[labonneligne][3]);
}
// On met le rang du personnage à la place du rang
if (personnages[labonneligne][4].length > 0) {
multipost.find('.multi_rang:first').text(personnages[labonneligne][4]);
}
// On met l'image de rang du personnage à la place de l'image de rang
if (personnages[labonneligne][5].length > 0) {
multipost.find('.multi_rangimg:first img:first').attr('src', personnages[labonneligne][5]);
}
// On ajoute tous les autres champs
for (i=6; i < nbcolones; i++) {
if (personnages[labonneligne][i].length > 0) {
var classchamp = personnages[0][i].replace(" ", "");
classchamp = "multi_" + classchamp;
var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[0][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>';
multipost.find('.multi_leschamps:first').append(champajout);
}
}
}
// Si le personnage a mis un avatar dans la balise on le met à la place de l'avatar
if (avatarmess) {
avatarpost.attr('src', avatarmess);
}
});
}
});
}
});
}
Au tout début, on a ceci :
- Code:
var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";
C'est la seule chose à modifier.
Pour obtenir la clé, vous devez tout d'abord prendre le lien de partage de la page Google Sheet mentionné plus haut. Il ressemble à ceci :
- Code:
https://docs.google.com/spreadsheets/d/1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI/edit?usp=sharing
ou des fois :
https://docs.google.com/spreadsheets/d/e/1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI/edit?usp=sharing
La clé correspond à ce qui est entre :
- Code:
https://docs.google.com/spreadsheets/d/
et
/edit?upscharing
ou parfois
https://docs.google.com/spreadsheets/d/e/
et
/edit?upscharing
Bref, dans mon cas d'exemple, il s'agirait du :
- Code:
1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI
C'est votre clé, vous pouvez la mettre dans le javascript, ce qui donnerait quelque chose comme ceci :
- Code:
var lacle = "1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI";
2.1.1 Javascript pour ceux qui veulent 2 profils distinctsOn utilise Google Sheet également, donc vous avez déjà les instructions. La seule différence, c'est que le javascript change un peu.
On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
- Code:
// lacle EST LA SEULE CHOSE À MODIFIER.
var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";
var lienatelecharger = "https://docs.google.com/spreadsheets/d/" + lacle + "/pubhtml";
// Validation pour savoir si la suite est nécessaire ou pas
if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
$(function(){
var ifpostpositif = 0;
var ifsujetpositif = 0;
if (_userdata.user_id > -1) {
if ($('#text_editor_textarea').length > 0) {
ifpostpositif = ifpostpositif + 1;
}
}
if (window.location.pathname.indexOf("/t") > -1) {
if ($('.multicompte').length > 0) {
ifsujetpositif = ifsujetpositif + 1;
}
}
// Autre validation pour savoir si la suite est nécessaire ou pas
if (ifpostpositif > 0 || ifsujetpositif > 0) {
// On met les donnes dans un tableau
$.get(lienatelecharger, function (data) {
var ledata = $(".waffle:first tbody:first", data);
var nblignes = ledata.find('tr').length;
var nbcolones = ledata.find('tr:first td').length;
var personnages = new Array();
for (var i=0; i < nblignes; i++) {
personnages[i] = new Array();
for(var j=0; j < nbcolones; j++) {
personnages[i][j] = ledata.find('tr:eq('+i+')').find('td:eq('+j+')').text();
}
}
// On entre dans la partie pour selectionner les personnages quand on poste
if (ifpostpositif > 0) {
// Si on a un personnage
var sipseudo = 0;
for (i=0; i < personnages.length; i++) {
if (personnages[i][0] == _userdata.username) {
sipseudo = sipseudo + 1;
}
}
if (sipseudo > 0) {
// On crée la balise select
var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
$('input[name="post"]').after(labaliseamettre);
//On ajoute les options dans la balise
for (i=0; i < nblignes; i++) {
if (personnages[i][0] == _userdata.username) {
var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
$('#selectmulticompte').append(optionajout);
}
}
// On ajoute le code dans le message à poster
$('#selectmulticompte').change(function() {
var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
var codemulticompte = '<div class="multicompte" data-perso="'+optionchoisie+'"></div>';
var lemessage = $('#text_editor_textarea').sceditor('instance').val();
if (optionchoisie != "Non") {
if (lemessage.search('data-perso') > -1) {
var nomdejala = lemessage.split('"', 4);
lemessage = lemessage.replace(nomdejala[3], optionchoisie);
}
else {
lemessage = codemulticompte + lemessage;
}
$('#text_editor_textarea').sceditor('instance').val(lemessage);
}
else {
if (lemessage.search('data-perso') > -1) {
var nomdejala = lemessage.split('"', 4);
var machinaenlever = '<div class="multicompte" data-perso="'+nomdejala[3]+'"></div>';
lemessage = lemessage.replace(machinaenlever, '');
$('#text_editor_textarea').sceditor('instance').val(lemessage);
}
}
});
}
}
// On entre dans la partie pour mettre les informations dans le profil
if (ifsujetpositif > 0) {
// Pour chaque code de multicompte
$('.multicompte').each(function() {
// On regarde la ligne qui contient le profil et le message
var multipost = $(this).closest('.multi_post');
// On prend l'avatar du personnage si il a été mis manuellement
var avatarmess = $(this).data('avatar');
// On trouve le nom du personnage
var lenomduperso = $(this).data('perso');
// On met le nom du personnage
multipost.find('.multi_pseudo:first').append(lenomduperso);
// On regarde si le nom du personnage est dans la banque de données
var labonneligne;
for (i=0; i < nblignes; i++) {
if (personnages[i][1] == lenomduperso) {
labonneligne = i;
}
}
if (labonneligne > 0) {
// On met l'avatar du personnage
if (personnages[labonneligne][2].length > 0) {
multipost.find('.multi_avatar:first').append('<img src="'+personnages[labonneligne][2]+'" />');
}
// On met la couleur du personnage sur le nom du personnage
if (personnages[labonneligne][3].length > 0) {
multipost.find('.multi_pseudo:first').css('color', personnages[labonneligne][3]);
}
// On met le rang du personnage
if (personnages[labonneligne][4].length > 0) {
multipost.find('.multi_rang:first').text(personnages[labonneligne][4]);
}
// On met l'image de rang du personnage
if (personnages[labonneligne][5].length > 0) {
multipost.find('.multi_rangimg:first').append('<img src="'+personnages[labonneligne][5]+'" />');
}
// On ajoute tous les autres champs
for (i=6; i < nbcolones; i++) {
if (personnages[labonneligne][i].length > 0) {
var classchamp = personnages[0][i].replace(" ", "");
classchamp = "multi_" + classchamp;
var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[0][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>';
multipost.find('.multi_leschamps:first').append(champajout);
}
}
}
// Si le personnage a mis un avatar dans la balise on le met à la place de l'avatar
if (avatarmess) {
avatarpost.attr('src', avatarmess);
}
});
}
});
}
});
}
2.2 Javascript pour ceux qui veulent sauvegarder leurs informations dans le javascript
On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
- Code:
// Validation pour savoir si la suite est nécessaire ou pas
if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
$(function(){
var ifpostpositif = 0;
var ifsujetpositif = 0;
if (_userdata.user_id > -1) {
if ($('#text_editor_textarea').length > 0) {
ifpostpositif = ifpostpositif + 1;
}
}
if (window.location.pathname.indexOf("/t") > -1) {
if ($('.multicompte').length > 0) {
ifsujetpositif = ifsujetpositif + 1;
}
}
// Autre validation pour savoir si la suite est nécessaire ou pas
if (ifpostpositif > 0 || ifsujetpositif > 0) {
// On met les donnes dans un tableau
var personnages = [
['Nom du joueur', 'Nom du personnage', 'Avatar', 'Rang', 'Image Rang', 'Champ 1', 'Champ 2'],
['Joueur 1', 'Perso1 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
['Joueur 1', 'Perso2 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
['Joueur 2', 'Perso1 de Joueur2', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
['Joueur 3', 'Perso1 de Joueur3', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
];
var nblignes = personnages.length;
var nbcolones = personnages[0].length;
// On entre dans la partie pour selectionner les personnages quand on poste
if (ifpostpositif > 0) {
// Si on a un personnage
var sipseudo = 0;
for (i=0; i < personnages.length; i++) {
if (personnages[i][0] == _userdata.username) {
sipseudo = sipseudo + 1;
}
}
if (sipseudo > 0) {
// On crée la balise select
var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
$('input[name="post"]').after(labaliseamettre);
//On ajoute les options dans la balise
for (i=0; i < nblignes; i++) {
if (personnages[i][0] == _userdata.username) {
var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
$('#selectmulticompte').append(optionajout);
}
}
// On ajoute le code dans le message à poster
$('#selectmulticompte').change(function() {
var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
var codemulticompte = '<div class="multicompte" data-perso="'+optionchoisie+'"></div>';
var lemessage = $('#text_editor_textarea').sceditor('instance').val();
if (optionchoisie != "Non") {
if (lemessage.search('data-perso') > -1) {
var nomdejala = lemessage.split('"', 4);
lemessage = lemessage.replace(nomdejala[3], optionchoisie);
}
else {
lemessage = codemulticompte + lemessage;
}
$('#text_editor_textarea').sceditor('instance').val(lemessage);
}
else {
if (lemessage.search('data-perso') > -1) {
var nomdejala = lemessage.split('"', 4);
var machinaenlever = '<div class="multicompte" data-perso="'+nomdejala[3]+'"></div>';
lemessage = lemessage.replace(machinaenlever, '');
$('#text_editor_textarea').sceditor('instance').val(lemessage);
}
}
});
}
}
// On entre dans la partie pour mettre les informations dans le profil
if (ifsujetpositif > 0) {
// Pour chaque code de multicompte
$('.multicompte').each(function() {
// On regarde la ligne qui contient le profil et le message
var multipost = $(this).closest('.multi_post');
// On sélectionne l'endroit où est le pseudo du joueur
var pseudopost = multipost.find('.multi_pseudo:first a:first');
// On prend le pseudo du joueur
var pseudoposttext = pseudopost.text();
// On sélectionne l'avatar du joueur
var avatarpost = multipost.find('.multi_avatar:first img:first');
// On prend l'avatar du personnage si il a été mis manuellement
var avatarmess = $(this).data('avatar');
// On trouve le nom du personnage
var lenomduperso = $(this).data('perso');
// On met le nom du personnage à la place du nom du joueur
pseudopost.find('strong:first').html(lenomduperso);
// On met le pseudo du joueur en bas de l'avatar
multipost.find('.multi_pseudoplayer:first').prepend(pseudoposttext);
// On regarde si le nom du personnage est dans la banque de données
var labonneligne;
for (i=0; i < nblignes; i++) {
if (personnages[i][1] == lenomduperso) {
labonneligne = i;
}
}
if (labonneligne > 0) {
// On met l'image du personnage à la place de l'avatar
if (personnages[labonneligne][2].length > 0) {
avatarpost.attr('src', personnages[labonneligne][2]);
}
// On met la couleur du personnage sur le nom du personnage
if (personnages[labonneligne][3].length > 0) {
pseudopost.find('span:first').css('color', personnages[labonneligne][3]);
}
// On met le rang du personnage à la place du rang
if (personnages[labonneligne][4].length > 0) {
multipost.find('.multi_rang:first').text(personnages[labonneligne][4]);
}
// On met l'image de rang du personnage à la place de l'image de rang
if (personnages[labonneligne][5].length > 0) {
multipost.find('.multi_rangimg:first img:first').attr('src', personnages[labonneligne][5]);
}
// On ajoute tous les autres champs
for (i=6; i < nbcolones; i++) {
if (personnages[labonneligne][i].length > 0) {
var classchamp = personnages[0][i].replace(" ", "");
classchamp = "multi_" + classchamp;
var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[0][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>';
multipost.find('.multi_leschamps:first').append(champajout);
}
}
}
// Si le personnage a mis un avatar dans la balise on le met à la place de l'avatar
if (avatarmess) {
avatarpost.attr('src', avatarmess);
}
});
}
}
});
}
Pour rajouter/modifier les informations, c'est dans la partie :
- Code:
// On met les donnes dans un tableau
var personnages = [
['Nom du joueur', 'Nom du personnage', 'Avatar', 'Rang', 'Image Rang', 'Champ 1', 'Champ 2'],
['Joueur 1', 'Perso1 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
['Joueur 1', 'Perso2 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
['Joueur 2', 'Perso1 de Joueur2', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
['Joueur 3', 'Perso1 de Joueur3', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
];
Je trouve que c'est assez explicatif... Attention, une virgule manquante, un apostrophe de trop ou un truc qui cloche et le code part en fumée ! (Bref, c'est définitivement pas mon choix XD)
3. Modifications dans les templates
Maintenant, vous allez dans le template viewtopic_body.
3.1 Sélectionner la ligne qui contient à la fois le message et le profil
On trouve la ligne qui contient le message et le profil.
Avec phpBB2, c'est une balise "tr". Avec d'autres versions, c'est parfois une balise "div" ou "p".
Généralement, on y trouve une class qui ressemble à ceci :
- Code:
post post--{postrow.displayed.U_POST_ID}
Ce qu'on fait, c'est qu'on ajoute la classe "multi_post" avec ce qu'il y a déjà dans la class.
Avec phpBB2, on cela passerait donc de ceci:
- Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
À cela :
- Code:
<tr class="multi_post post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
3.2 Pour remplacer le pseudo par le nom du personnage
On retrouve ceci :
- Code:
{postrow.displayed.POSTER_NAME}
Qu'on remplace par cela :
- Code:
<span class="multi_pseudo">{postrow.displayed.POSTER_NAME}</span>
3.2.1 Si vous avez l'intention d'avoir 2 profils complètement distinctsVous ajoutez simplement ceci là où vous voulez voir le pseudo du personnage :
- Code:
<span class="multi_pseudo"></span>
3.3 Pour remplacer votre avatar par l'avatar du personnage
On retrouve ceci :
- Code:
{postrow.displayed.POSTER_AVATAR}
Qu'on remplace par cela :
- Code:
<span class="multi_avatar">{postrow.displayed.POSTER_AVATAR}</span>
3.3.1 Si vous avez l'intention d'avoir 2 profils complètement distinctsVous ajoutez simplement ceci là où vous voulez voir l'avatar du personnage :
- Code:
<span class="multi_avatar"></span>
3.4 Pour remplacer votre rang par le rang du personnage (sautez l'étape si vous n'avez pas de rang)
On retrouve ceci :
- Code:
{postrow.displayed.POSTER_RANK}
Qu'on remplace par cela :
- Code:
<span class="multi_rang">{postrow.displayed.POSTER_RANK}</span>
3.4.1 Si vous avez l'intention d'avoir 2 profils complètement distinctsVous ajoutez simplement ceci là où vous voulez voir le rang du personnage :
- Code:
<span class="multi_rang"></span>
3.5 Pour remplacer votre l'image de rang par l'image de rang du personnage (sautez l'étape si vous n'avez pas d'image de rang)
On retrouve ceci :
- Code:
{postrow.displayed.RANK_IMAGE}
Qu'on remplace par cela :
- Code:
<span class="multi_rangimg">{postrow.displayed.RANK_IMAGE}</span>
3.5.1 Si vous avez l'intention d'avoir 2 profils complètement distinctsVous ajoutez simplement ceci là où vous voulez voir l'image de rang du personnage :
- Code:
<span class="multi_rangimg"></span>
3.6 Pour que votre pseudo apparaisse et qu'on sache que le personnage vous appartient
On ajoute ceci où on le veut le code pour le pseudo du joueur (que j'ai tendance à mettre directement après le pseudo du personnage)
- Code:
<div class="multi_pseudoplayer"></div>
3.6.1 Si vous avez l'intention d'avoir 2 profils complètement distinctsNe faites pas cette étape.
3.6 Pour tous les autres champs personnalisés
On ajoute ceci où on le veut le bloc des autres champs (bref, tout ce qu'il y a après l'image du rang dans votre tableau/Google Sheet) :
- Code:
<div class="multi_leschamps"></div>
4. Mise en forme
4.1 Mise en forme pour le choix du personnage
On va ajouter ceci dans votre CSS, juste pour que le choix du personnage soit un peu plus joli :
- Code:
/*Bloc pour choisir le personnage*/
.choisirmulticomptebloc {
margin: 5px auto;
}
/*Le texte avant la balise select*/
.choisirmulticomptebloc > span {
font-size: 12px;
}
/*La balise select pour choisir le personnage*/
#selectmulticompte {
}
4.2 Mise en forme pour le profil
On ajoute ceci au CSS :
- Code:
/*Pseudo du personnage*/
.multi_pseudo {
}
/*Votre pseudo*/
.multi_pseudoplayer {
font-style: italic;
}
/*Avatar du personnage*/
.multi_avatar img {
}
/*Rang du personnage*/
.multi_rang {
}
/*Image du rang du personnage*/
.multi_rangimg img {
}
4.2 Mise en forme pour les champs personnalisés
On ajoute ceci au CSS :
- Code:
/*Bloc qui contient tous les champs personnalisés*/
.multi_leschamps {
}
/*Titre de champ personnalisé*/
.multi_label {
}
/*Séparation entre le titre de le contenu du champ personnalisé*/
.multi_sep {
}
/*Contenu du champ personnalisé*/
.multi_content {
}
Si vous vous demandez ce qu'est la séparation entre le titre de le contenu du champ personnalisé, il s'agit tout simplement du " : " entre le nom du champ et le contenu du champ. Si vous ne le voulez pas, un petit display:none fait l'affaire.
Il est également possible de mettre en forme un champ personnalisé précis.
Pour cela, chaque champ personnalisé à sa propre class, soit "multi_" associé au titre de l'en-tête du champ. Comme on ne peut pas avoir d'espace dans une classe, c'est tout collé.
Le champ "Inventaire" aurait donc la class "multi_Inventaire".
Le champ "Champ 1" aurait donc la class "multi_Champ1"
Exemple :
- Code:
/*Le champ inventaire*/
.multi_Inventaire {
}
/*Le titre du champ inventaire*/
.multi_Inventaire .multi_label {
}
/*La séparation du champ inventaire*/
.multi_Inventaire .multi_sep {
}
/*Le contenu du champ inventaire*/
.multi_Inventaire .multi_content {
}
5. Autres informations
Pour ceux sont veulent un tantinet plus d'explications :
En gros, le script regarde votre pseudo et vous propose les choix de
personnages sur les lignes qui commencent par votre pseudo dans le tableau de données (Google Sheet ou javascript).
Ensuite, quand on choisit un personnage, il ajoute une ligne de code dans le message qui va permettre de changer l'affichage sur le profil dans les messages.
La ligne de code ressemble à ceci :
- Code:
<div class="multicompte" data-perso="Nom du personnage"></div>
Dans les messages, le script regarde s'il y a la ligne de code mentionnée si haut et si oui, il regarde à quel personnage cela correspond dans le tableau. Puis, il prend les données sur la même ligne du tableau qui contient le personnage et il remplace les informations du joueur par les informations du personnage sur le profil.
Il y a la possibilité de modifier manuellement l'avatar pour un message précis en modifiant la ligne de code magique comme ceci après avoir sélectionné votre personnage :
- Code:
<div class="multicompte" data-perso="Nom du personnage" data-avatar="Url de l'avatar"></div>
Je viens de modifier la page Google Sheet et mon avatar ne s'est pas mis à jour à la seconde près sur le forum!?
C'est normal. La page publiée qu'on utilise se met à jour aux 5 minutes, donc faites quelque chose d'autre et retournez-y, vous verrez que cela a fonctionné.
Ça ne fonctionne pas.
Si vous utilisez la
Sauvegarde des messages en cours de Manumanu, sachez que c'est incompatible avec ce LS, désolée.
Si ce n'est pas à cause de cela, c'est très probable que vous avez sauté une étape en lisant le LS, je vous conseille de le relire.
Si vous êtes sûr de tout avoir bien fait, vous pouvez poster dans
Problème avec mon code, quelqu'un se penchera sur le problème.
Pfiou ! C'était tout un projet, mais je suis assez fière du résultat final.
)
