AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Un seul compte, plusieurs personnages : Choix déroulant

    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Jeu 18 Avr 2019 - 4:23

    Un seul compte, plusieurs personnages : Choix déroulant



    Il est parfois plutôt ennuyant de devoir toujours se déconnecter et se reconnecter pour changer de compte selon le personnage que vous incarnez lorsque vous avez plusieurs personnages. Et si ce n'était plus nécessaire?

    Okhmakala avait déjà pensé à cela et avait proposé une astuce juste ici.

    Puis, j'ai découvers Esquisse où j'ai réalisé qu'il y avait un système très intéressant où les joueurs ajoutaient une toute petite ligne de code (différente pour chaque personnage) sur leurs messages RP. Ensuite, un javascript repérait cette merveilleuse ligne de code et modifiait le pseudo et l'avatar du joueur pour ceux du personnage dans ce message.

    Je reprends ces deux idées et je vais un pas plus loin. Voilà ce que ce LS 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 : Cela ne fonctionne pas sur les réponses rapides. Il faut cliquer sur "Prévisualiser", puis choisir son personnage.
    Note 2 : 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.


    Pourquoi est-ce que je ne mets pas toute l'information dans un post sur mon forum à la place d'utiliser un Google Sheet ou de mettre l'information dans le javascript? Ce serait simple, non?
    Aller chercher les données sur une autre page de forum implique de charger la page actuelle ainsi que la page où sont enregistrées les donnés. C'est relativement rapide avec Google Sheet. Cela est généralement plus long pour charger une autre page de forum.
    De plus, si plusieurs membres modifient leurs informations en même temps, seulement les modifications du dernier qui a édité le message s’enregistreront.
    Enfin, le plus problématique. Ça parait facile de dire "aller chercher l'information dans X post". Ce qui est moins facile, c'est de modifier le javascript, selon votre version du forum et selon votre codage pour réussir à aller au bon endroit pour récupérer l'information.
    En gros, il faudrait personnaliser le javascript selon chacun de vos forums. Puisque ce sujet est un LS, ma priorité est que tout le monde puisse l'utiliser, donc ce n'est pas une option viable. Par contre, si vous voulez le faire et que vous vous y connaissez en javascript, libre à vous ^^


    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.
    Voir un exemple

    Oui, 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 exemple


    1.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 exemple

    Pour 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 (window.location.pathname == "/post") {
          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 distincts
    On 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 (window.location.pathname == "/post") {
          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.3 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 (window.location.pathname == "/post") {
          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 distincts
    Vous 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 distincts
    Vous 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 distincts
    Vous ajoutez simplement ceci là où vous voulez voir le rang du personnage :
    Code:
    <span class="multi_rang"></span>


    3.5 Pour remplacer votre rang par le 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 distincts
    Vous 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 distincts
    Ne 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) :
    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 laSauvegarde 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.
    N'hésitez pas à me laisser vos commentaires ou vos idées sur ce que je pourrais inclure si je faisais une version 1.2 ^^


    Dernière édition par Onyx le Sam 20 Avr 2019 - 21:27, édité 37 fois



    Amatis
    Amatis
    FémininAge : 21Messages : 35

    le Jeu 18 Avr 2019 - 12:45

    Ça a tellement de potentiel, super boulot et bon courage pour ton développement ! :aww:
    Euterpe
    Euterpe
    FémininAge : 33Messages : 326

    le Jeu 18 Avr 2019 - 13:09

    Han ça c'est franchement un code fantastique *-* je l'avais vu que sur du PHBB

    J'ai hâte de suivre ca
    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Jeu 18 Avr 2019 - 18:42

    Merci les gens !

    =====

    Hohohoho, j'ai une idée sur comment s'arranger pour que les utilisateurs puissent modifier leurs propres données et aussi pour avoir des tas d'autres champs, style base de donnée.
    https://docs.google.com/spreadsheets/d/e/2PACX-1vQjzZTRKSzWySSfuQFwusoDdxLmtMc6U9m0Lo7lxr8yAcXRgTVkzX-Jsj0F9N0tuUBGo1viI8IocpBG/pubhtml

    Ok, alors si vous regardez la page d'exemple ou demain, prévoyez des bugs parce que je ferai des tas de tests Razz

    En gros :
    Google nous permet de crééer un tableau dans une Sheet et de publier la Sheet (et le tableau) sur une page web.
    Alors le but sera de télécharger cette page web et d'en extraire les données à la place de le faire manuellement dans le javascript.
    Pourquoi se faire chier à faire cela?
    1. Pour avoir plus de champs possibles, comme un inventaire et des tonnes d'autres champs.
    2. Pour éviter du travail aux Admins qui doivent modifier le javascript à chaque modification.
    3. Pour que les membres puissent modifier eux-mêmes leurs données.

    Inconvénients >
    Si un membre troll veut modifier les trucs des autres, il le peut. Solution > Utiliser l’option de partage des cellules avec mot de passe pour qu'on puisse seulement modifier nos propres informations? Je suis pas sûre de si c'est possible, je vais regarder.

    Note : Je déplace dans Work in Progress à la place d'en LS.
    Note 2 : C'est horrible, mon efficience au travail est de 0, j'arrête pas d'avoir des idées de comment faire et d'oublier quoi dire à mes clients. Si ça continue, je vais me mettre à leur citer des variables silent



    Courage
    Courage
    FémininAge : 35Messages : 93

    le Jeu 18 Avr 2019 - 19:30

    Je laisse un petit message juste pour suivre l'avancé car je suis fan. ^^
    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Ven 19 Avr 2019 - 3:55

    Système de Google Sheet installé, il ne me reste plus qu'à jouer avec les détails maintenant ^^



    Amatis
    Amatis
    FémininAge : 21Messages : 35

    le Sam 20 Avr 2019 - 20:06

    J'ai testé sur mon forum, et tout fonctionne très bien (pour l'instant :siffle:) , c'est vraiment vraiment génial, très utile même pour simplement pouvoir poster avec différents avatars selon les situations ...
    Merci beaucoup pour tout ce job ! cheers

    Si j'ai des idées pour un "1.2", je n'hésiterais pas. :aww:
    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Sam 20 Avr 2019 - 21:26

    Pfiou, j'suis ravie que quelqu'un d'autre arrive à le faire marcher sans problème ^^

    Alors voilà, la première version, c'est celle qu'on voit plus haut et qui fonctionne comme cela :
    - Dans vos RP, vous choisissez votre personnage et une ligne de code s'ajoute à votre message.
    - Le javascript récupère les données et remplace les informations de votre profil par celles de votre personnage sur le message en question.
    - Les membres peuvent mettre eux-même les données de leur personnage à jour dans la Google Sheet s'ils le souhaitent.
    (Ce n'est pas obligatoire, si les seuls trucs du profil personnage est le pseudo, l'avatar, la couleur du groupe et un champ "Métier", on s'entend que c'est créé en même temps que le personnage et qu'on n'y touche plus après, à moins de changer de métier, ce qui n'arrive pas tous les jours.)
    - Quand on met à jour une donnée dans la Google Sheet, cela se met à jour partout où il y a la ligne de code.
    - Vous avez le choix entre avoir les informations du personnage qui remplace les vôtres ou avoir 2 profils distincts, soit un pour vous en tant que joueur et un en tant que personnage.

    Pour la deuxième version qui s'en vient, similaire pour l'utilisation, mais le résultat est différent.
    - Dans vos RP, vous choisissez votre personnage.
    - Le javascript récupère les données dans la base de données (Google Sheet). Puis, il crée une fiche RP avec les informations de votre personnage et y met votre message. Il ne vous reste plus qu'à poster !
    - Les informations dans le Google Sheet doivent être mises à jour dès qu'il y a un changement, sinon.
    - Quand on met à jour une donnée dans la Google Sheet, cela se met à jour pour les prochaines fois que vous posterez, mais les informations dans les messages déjà postés resteront identiques, ce qui vous permettra de voir la progression du personnage.
    - Le système de double profil est obligatoire pour bien le faire fonctionner.

    (J'avais aussi une version 1.2 qui fonctionnait comme la première façon, mais où on pouvait choisir si un champ devait être mis à jour partout ou s'il restait fixé à chaque message. Par contre, je ne suis pas sûre que ce serait très utilisé...)

    Version 1Version 2
    Banque de donnéesGoogle Sheet ou JavascriptGoogle Sheet
    2 profils distincts- Vous avez le choix entre :
    1. Les informations du personnage remplacent celles sur le profil.
    2. Avoir un profil joueur (style mini-bandeau de Okhmalaka) et un profil personnage.
    - Pas de choix, vous avez automatiquement un profil joueur. En réalité, le profil "personnage" est inclus dans le message.
    Actions des membres- Choix du personnage lorsqu'on poste un RP.
    - Mise à jour des informations dans la Google Sheet s'il y a des trucs à changer, mais rien ne presse.
    - Choix du personnage lorsqu'on poste un RP.
    - Il doit mettre les informations à jour dans la Google Sheet dès qu'elles changent. Sinon, les informations qui apparaîtront dans son message ne seront pas à jour et il devra le changer manuellement.
    Actions du Staff- Installation initiale du système, explications, etc.
    - Création de la Google Sheet et des champs.
    - Ajout d'une ligne dans la Google Sheet à chaque nouveau personnage validé.
    - Mise à jour de certains champs que vous voulez être les seuls à pouvoir modifier.
    - Installation initiale du système, explications, etc.
    - Création de la Google Sheet et des champs.
    - Modification du javascript pour donner un rendu différent si vous n'aimez pas le mien (facultatif). Je ne fais pas de personnalisations, donc c'est à vos risques et périls.
    - Ajout d'une ligne dans la Google Sheet à chaque nouveau personnage validé.
    - Mise à jour de certains champs que vous voulez être les seuls à pouvoir modifier.
    Mise en forme RPIl est possible d'utiliser une fiche RP, mais ce n'est pas obligatoire.La mise en forme est générée automatiquement par le système, donc c'est la même pour tout le monde.
    Connaissances en codage nécessaires.- Très rudimentaires pour le fondateur lors de l'installation.
    - 0 pour le membre.
    - Très rudimentaires pour le fondateur lors de l'installation.
    - Si le fondateur veut modifier la mise en forme proposée, il faut des connaissances avancées.
    - 0 pour le membre.


    Dernière édition par Onyx le Dim 21 Avr 2019 - 7:49, édité 1 fois



    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Dim 21 Avr 2019 - 6:14

    Un seul compte, plusieurs personnages : Version 2



    Il est parfois plutôt ennuyant de devoir toujours se déconnecter et se reconnecter pour changer de compte selon le personnage que vous incarnez lorsque vous avez plusieurs personnages. Et si ce n'était plus nécessaire?

    Okhmhaka avait déjà pensé à cela et avait proposé une astuce juste ici.

    Je reprends cette idée et je vais un pas plus loin.

    Contrairement à la Version 1 (bref, le message du dessus que j'imagine que vous avez dû lire au moins l'introduction è_é), il n'y a pas de ligne de code magique qui s'ajoute à votre message et les informations de votre personnage ne vont pas remplacer celles de votre profil.
    Le principe de cette version, c'est qu'on veut voir la progression du personnage dans le temps. Or, dans la Version 1, dès qu'on change une information dans la Google Sheet, les informations se modifient partout (bref, selon le même principe que les champs du profil FA habituels).

    Par conséquent, voilà 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, le javascript va regarder dans la base de données quels sont vos personnages et vous les propose.
    Voir un exemple de choix de personnages.
    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. Mettre toutes les informations de votre personnage dans une feuille RP avant de poster


    Lorsque vous choisissez un personnage, le javascript magique crée une feuille RP qui contient les informations de vos personnages et y glisse le message que vous venez d'écrire.
    Voir un exemple de ce qui se passe quand on choisit un personnage.
    Voir un exemple du résultat une fois le message posté.

    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 qui sont inclus dans la feuille rp et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
    Voir un exemple avec des champs et un inventaire.

    4. Apparence avec 2 profils


    Dans vos messages normaux, vous verrez votre profil joueur et votre message.
    Dans vos messages RP, vous verrez votre profil joueur, votre profil personnage et votre message.
    C'est un tout inclus !
    Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka.

    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/


    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.
    De plus, ils ne doivent pas contenir de " ou d'apostrophe.
    Voir un exemple

    Oui, mais 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 exemple


    1.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 exemple

    Pour 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



    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;
        if (_userdata.user_id > -1) {
          if ($('#text_editor_textarea').length > 0) {
            ifpostpositif = ifpostpositif + 1;
          }
        }

         
        // 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();
            }
          }
             
          // 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 lemessage = $('#text_editor_textarea').sceditor('instance').val();
             
              // Si on a choisi un personnage
              if (optionchoisie != "Non") {
               
                // On regarde quelle est la ligne du personnage
                var labonneligne;
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][1] == optionchoisie) {
                    labonneligne = i;
                  }
                }
               
               
                // Début feuille RP
                var lafeuillerp = '<div class="feuillerp"><div class="feuillerp_profil">';
               
               
                // Ajout du pseudo à la feuille RP
                lafeuillerp = lafeuillerp + '<div class="feuillerp_pseudo" style="color: '+personnages[labonneligne][3]+';">'+optionchoisie+'</div>';
               
                // Ajout de l'avatar à la feuille RP
                lafeuillerp = lafeuillerp + '<img class="feuillerp_avatar" src="'+personnages[labonneligne][2]+'" />';
               
                // Ajout du rang (s'il existe) à la feuille RP
                if (personnages[labonneligne][4].length > 0) {
                  lafeuillerp = lafeuillerp + '<div class="feuillerp_rang">'+personnages[labonneligne][4]+'</div>';
                }
               
                // Ajout du rang image (s'il existe) à la feuille RP
                if (personnages[labonneligne][5].length > 0) {
                  lafeuillerp = lafeuillerp + '<img class="feuillerp_rangimg" src="'+personnages[labonneligne][5]+'" />';
                }
               
                // Ajout du bloc des champs personnalisés à la feuille RP
                lafeuillerp = lafeuillerp + '<div class="feuillerp_leschamps">';
                // 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 = "feuillerp_" + classchamp;
                    var champajout = '<div class="feuillerp_champ '+classchamp+'"><span class="feuillerp_label">'+personnages[0][i]+'</span><span class="feuillerp_sep"> : </span><span class="feuillerp_content">'+personnages[labonneligne][i]+'</span></div>';
                    lafeuillerp = lafeuillerp + champajout;
                  }
                }
                lafeuillerp = lafeuillerp + '</div>';
               
               
                // On ferme la partie profil et on ouvre la partie message
                lafeuillerp = lafeuillerp + '</div><div class="feuillerp_message">';
               
               
               
                // S'il y a déjà une feuille de personnage dans le message
                if (lemessage.search('<div class="feuillerp_message">') > -1) {
                  // On enlève la feuille rp déjà là
                  var splitmess = lemessage.split('<div class="feuillerp_message">', 2);
                  // On ajoute le message dans la bonne feuille rp
                  lemessage = lafeuillerp + splitmess[1];
                }
               
                // Si 0 feuille rp, on ajoute le message dans la feuille rp
                else {
                  lemessage = lafeuillerp + lemessage + '</div><div class="feuillerp_clear"></div></div>';
                }
               
                // On remet le message modifié sous nos yeux ébahis
                $('#text_editor_textarea').sceditor('instance').val(lemessage);
              }
             
             
              // Si on n'a choisi aucun personnage et qu'il y a une feuille rp, on l'enlève
              else {
                if (lemessage.search('<div class="feuillerp_message">') > -1) {
                  var splitmess = lemessage.split('<div class="feuillerp_message">', 2);
                  var splitmessdeux = splitmess[1].split('</div><div class="feuillerp_clear"></div></div>');
                  lemessage = splitmessdeux[0];
                  $('#text_editor_textarea').sceditor('instance').val(lemessage);
                }
              }
             
            });
          }
        });
      });
    }

    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. Mise en forme


    2.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 {
    }


    2.2 Mise en forme pour la feuille de personnage


    Je tiens à préciser que je n'ai pas de mérite ici, j'ai repris la mise en forme d'une fiche de Okhmhaka que j'ai un peu adaptée. D'ailleurs, vous êtes totalement libre de modifier la mise en forme ^^

    Bref, on ajoute ceci au CSS :
    Code:
    /* FICHE PROFIL PERSONNAGE */
    /*Bloc qui contient le profil et le message*/
    .feuillerp {
      position: relative;
    }
    /*Bloc qui contient le profil du personnage*/
    .feuillerp_profil {
      position: relative;
      z-index: 2;
      width: 170px;
      min-height: 320px;
      background: #c5bdb1;
      border: 1px solid #9f9689;
      float: left;
      text-align: center;
    }
    /*La flèche entre le profil et le message*/
    .feuillerp_profil::after {
      content: '';
      position: absolute;
      display: block;
      z-index: 2;
      left: 170px;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 15px solid #1c1c1c;
    }
    /*Bloc qui contient le message*/
    .feuillerp_message {
      position: relative;
      z-index: 1;
      min-height: 320px;
      padding: 10px 20px;
      margin-left: 180px;
      background: #eeedeb;
      border: 1px solid #f4f3f0;
      box-shadow: 0px 0px 5px #c5bdb1;
      border-radius: 10px;
      color: #65615b;
      text-align: justify;
    }

    /*Machin à ne pas enlever pretty please*/
    .feuillerp_clear {
      clear: both;
    }

    /*Pseudo du personnage*/
    .feuillerp_pseudo {
      width: 100%;
      height: 30px;
      padding-top: 10px;
      background: #1c1c1c;
      color: #c5bdb1;
      text-shadow: 1px 1px 0px #000000;
      font-size: 20px;
      letter-spacing: -2px;
      text-align: center;
      font-family: lucida calligraphy, tahoma;
      font-weight: bold;
    }
    /*Avatar du personnage*/
    .feuillerp_avatar {
    }
    /*Rang du personnage*/
    .feuillerp_rang {
      position: relative;
      z-index: 2;
      width: 70%;
      height: 20px;
      margin: -15px auto 0 auto;
      background: #262626;
      text-transform: uppercase;
      color: #65615b;
      font-size: 11px;
      box-shadow: 0px 0px 2px #000000;
      text-align: center;
      padding-top: 3px;
    }
    /*Image du rang du personnage*/
    .feuillerp_rangimg {
      display: inline-block;
      margin: 5px auto;
    }
    /*Bloc qui contient tous les champs personnalisés*/
    .feuillerp_leschamps {
      width: 95%;
      margin: auto;
      font-size: 12px;
      color: #65615b;
      text-align: left;
    }
    /*Titre d'un champ personnalisé*/
    .feuillerp_label {
      font-family: arial black;
      color: #1c1c1c;
    }
    /*Séparation entre le titre et le contenu d'un champ personnalisé*/
    .feuillerp_sep {
      font-family: arial black;
      color: #1c1c1c;
    }
    /*Contenu d'un champ personnalisé*/
    .feuillerp_content {
    }


    2.3 Mise en forme pour les champs personnalisés


    Il est déjà dans le CSS précédent, il s'agit de cette partie :
    Code:
    /*Bloc qui contient tous les champs personnalisés*/
    .feuillerp_leschamps {
      width: 95%;
      margin: auto;
      font-size: 12px;
      color: #65615b;
      text-align: left;
    }
    /*Titre d'un champ personnalisé*/
    .feuillerp_label {
      font-family: arial black;
      color: #1c1c1c;
    }
    /*Séparation entre le titre et le contenu d'un champ personnalisé*/
    .feuillerp_sep {
      font-family: arial black;
      color: #1c1c1c;
    }
    /*Contenu d'un champ personnalisé*/
    .feuillerp_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 "feuillerp_" 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 "feuillerp_Inventaire".
    Le champ "Champ 1" aurait donc la class "feuillerp_Champ1"

    Exemple :
    Code:
    /*Le champ inventaire*/
    .feuillerp_Inventaire {
    }
    /*Le titre du champ inventaire*/
    .feuillerp_Inventaire .multi_label {
    }
    /*La séparation du champ inventaire*/
    .feuillerp_Inventaire .multi_sep {
    }
    /*Le contenu du champ inventaire*/
    .feuillerp_Inventaire .multi_content {
    }


    3. Autres informations


    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 laSauvegarde 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.


    Je n'ai... plus d'idées, donc je crois que je vais finir ce LS et m'arrêter là XD

    Les bons codes terminés ont été postés dans "Proposer un LS d'élément de forum".


    Dernière édition par Onyx le Mar 23 Avr 2019 - 0:26, édité 1 fois



    Amatis
    Amatis
    FémininAge : 21Messages : 35

    le Lun 22 Avr 2019 - 12:24

    J'aime bien l'idée mais je ne m'en servirais pas pour mon fofo actuel en tout cas, mais ça peut être bien inspirant pour un autre forum rpg. :aww:

    Sinon, j'ai eu une idée pour la version 1 (ou 2 aussi du coup), est-ce que ce serait possible de changer également le pseudo et l'avatar du dernier posteur dans les catégories selon le "personnage" qui a posté en dernier ?
    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Mar 23 Avr 2019 - 0:23

    Salut !

    J'ai déjà fait un code comme cela, donc oui c'est possible.
    Par contre, tout est dans le temps de chargement. Pour cela, il faudrait un javascript qui charge chacune des pages où il y a un dernier message pour valider quel est le personnage qui a posté et pour le remplacer sur les catégories.
    Même s'il a été relativement complexe à écrire le javascript présent est "court" d'un point de vu chargement puisque toutes les actions prennent seulement quelques millième de secondes. L'étape la plus longue est de charger la page Google Sheet et est plutôt rapide.
    Donc en reprenant le principe sur les catégories, on ne chargerait pas uniquement la Google Sheet, mais plusieurs autres pages en plus, ce qui ralentirait le chargement de la page.
    C'est faisable, mais je préfère ne pas aller dedans cela puisque je déteste les forums qui prennent des plombes à charger.

    Plus simple, je donnerais simplement comme consigne de mettre le nom des personnages dans le titre. Genre, mettre "(Mamie&Jasmine) Titre du sujet". On se complique moins la vie et on sait quand même parfaitement qui a posté.



    Amatis
    Amatis
    FémininAge : 21Messages : 35

    le Mar 23 Avr 2019 - 11:47

    D'acc, effectivement ça ne vaut pas le coup si on perd la fluidité du forum, mais c'est dommage j'aimais bien l'idée ! :joie:
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Juil 2019 - 8:32