Le Deal du moment :
Xiaomi Mi True Wireless 2S – Écouteurs ...
Voir le deal
49 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

[JS] Modifier les textes par défaut des lancés de dés  Empty [JS] Modifier les textes par défaut des lancés de dés

Jeu 9 Mai 2019 - 10:57

Modifier les textes par défaut des lancés de dés

Bonjour à toi ! Smile

Si tu es ici, c'est que modifier les textes par défaut des lancés de dés t'intéresse. On va donc voir cela ensemble.

Idea Tu dois être administrateur de ton forum
Idea Tout se passe en javascript, tu ne dois pas en être effrayé  Smile

Tout au long de ce tutoriel, tu peux tester le rendu par ici ou sur ton forum en utilisant la console de ton navigateur (clique droit sur ta page, examiner l'élément, console ) :
[JS] Modifier les textes par défaut des lancés de dés  Consol10

Première partie : on repère les lancés de dés

Notre première étape va être de repérer les messages où le dé est lancé. Pour cela, on va se placer dans chaque corps de messages : par défaut ils ont la class "postbody" :
Code:
$('.postbody').each(function(){

});
Ensuite, on va chercher la phrase "robotique" par défaut et on va se baser sur ce qui ne varie pas :
a effectué l'action suivante : Lancer de dés
Puis, on va dire à notre code que "SI il trouve ce bout de phrase, il va travailler" :
Code:
$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){
   //les instructions
   }
});
Idea On oublie pas d'échapper l'apostrophe
Maintenant, on a repéré nos messages contenant un lancé de dé. On va pouvoir récupérer nos variables.

Deuxième partie : on récupère les données "variables"

Ici, on va avoir besoin de récupérer :
• le nom du dé ;
• le pseudo du membre ;
• le résultat du dé.

On va commencer par se créer ces trois variable :
Spoiler:

Code:
var nomDes;
var resultatDes;
var pseudo;

$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){
   //les instructions
   }
});

Puis on va créer 3 fonctions : recupererPseudo, recupererDes, resupererResultat.
Spoiler:

Code:
var nomDes;
var resultatDes;
var pseudo;

function recupererPseudo(TableauPseudo){

}
function recupererDes(TableauDes){

}
function recupererResultat(TableauResult){

}

$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){
   //les instructions
   }
});

Récupération du pseudo

Dans notre code par défaut, on peut observer via l'inspecteur que le pseudo est entouré par
Code:
<strong> </strong>
on va donc se baser là-dessus on créant un tableau qui va couper notre phrase au < strong>.
Dans notre code principal, on va créer un tableau via un "split" comme ceci :
Code:
pseudoTab=$(this)[0].innerHTML.split("<strong>");
puis on va appeler notre fonction de récupération de pseudo :
Code:
recupererPseudo(pseudoTab);
On a donc :
Code:
var nomDes;
var resultatDes;
var pseudo;
var pseudoTab;

function recupererPseudo(TableauPseudo){

}
function recupererDes(TableauDes){

}
function recupererResultat(TableauResult){

}

$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){
    pseudoTab=$(this)[0].innerHTML.split("<strong>");
    recupererPseudo(pseudoTab);
   }
});

Maintenant on s'attaque à la fonction de récupération du pseudo : dans le tableau qu'on récupère précédemment on a ceci
[JS] Modifier les textes par défaut des lancés de dés  Pseudo10
Le pseudo est dans la case numéroté "1" mais il n'est pas seul. Dans notre fonction on va donc parcourir le tableau en entrée, repérer où est fermé le strong et, par le même procédé que juste avant, on va couper au < /strong>.
Notre pseudo sera la première case du tableau retourné : on le renvoie.
Code:
function recupererPseudo(TableauPseudo){
  for(i=0;i<TableauPseudo.length;i++){
    if(TableauPseudo[i].indexOf("</strong>")>-1){
      TableauPseudo=TableauPseudo[i].split("</strong>");
      pseudo=TableauPseudo[0];
      return pseudo;
    }
  }
}

Récupération du nom du dé

Exclamation Deux cas se présentent ici : si le résultat est une image et si le résulat est un chiffre. On va devoir faire 2 variantes :

On utilise le même procédé que pour la fonction de récupération de pseudo, sauf qu'en regardant la console on voit que le nom du dé est délimité par
Code:
 <hr>
puis
Code:
 : <br>
[JS] Modifier les textes par défaut des lancés de dés  Nom_dz10
quand le résultat est une image mais qu'il n'y a pas de "br" quand il s'agit d'un chiffre.

Dans notre code principal on va créer le premier tableau :
Code:
   desTab=$(this)[0].innerHTML.split("<hr>");
Puis dans la fonction on refait le split grâce au : < br>
Code:
function recupererDes(TableauDes){
  for(i=0;i<TableauDes.length;i++){
    if(TableauDes[i].indexOf(":<br>")>-1){
      TableauDes=TableauDes[i].split(":<br>");
      nomDes=TableauDes[0];
      return nomDes;
    }
  }
}

Et si on a pas de br on split par " :"
Code:
else if(TableauDes[i].indexOf("\' :")>-1){
      TableauDes=TableauDes[i].split(":");
      nomDes=TableauDes[0];
      return nomDes;
  }

Si on reprend, pour le moment on en est ici :
Spoiler:

Code:
var pseudoTab;
var pseudo;
var desTab;
var nomDes;
var resultatDes;


function recupererPseudo(TableauPseudo){
  for(i=0;i<TableauPseudo.length;i++){
    if(TableauPseudo[i].indexOf("</strong>")>-1){
      TableauPseudo=TableauPseudo[i].split("</strong>");
      pseudo=TableauPseudo[0];
      return pseudo;
    }
  }
}
function recupererDes(TableauDes){
  for(i=0;i<TableauDes.length;i++){
    if(TableauDes[i].indexOf(":<br>")>-1){
      TableauDes=TableauDes[i].split(":<br>");
    }else if(TableauDes[i].indexOf("\' :")>-1){
      TableauDes=TableauDes[i].split(":");
    }
  }
nomDes=TableauDes[0];
return nomDes;
}
function recupererResultat(TableauResult){
}
$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){
    pseudoTab=$(this)[0].innerHTML.split("<strong>");
    desTab=$(this)[0].innerHTML.split("<hr>");
    recupererPseudo(pseudoTab);
    recupererDes(desTab);
  }

});

Récupération du résultat du dé

En observant la console et le résultat sur split qu'on a fait pour récupérer le nom du dé, on s'aperçoit qu'on va devoir faire les 2 mêmes premiers split que pour ce dernier.
On va donc modifier notre fonction de récupération de dé pour qu'elle renvoie tout le tableau du dernier split :
Code:
function recupererDes(TableauDes){
    for(i=0;i<TableauDes.length;i++){
      if(TableauDes[i].indexOf(":<br>")>-1){
        TableauDes=TableauDes[i].split(":<br>");
      }else if(TableauDes[i].indexOf("\' :")>-1){
        TableauDes=TableauDes[i].split(":");
      }
    }
  return TableauDes;
  }
Et dans notre code principal, pour ne pas perdre notre nom du dé on va y remettre la récupération :
Code:
recupTabDes=recupererDes(desTab);
    nomDes=recupTabDes[0];
Maintenant, pour récupérer le résultat du dé, on va devoir faire un split. Si on affiche notre tableau retourné par la fonction :
[JS] Modifier les textes par défaut des lancés de dés  Result12
on remarque que notre résultat de dé est dans la case numérotée 1, mais qu'il n'est pas seul. On veut se débarrasser de tout ce qu'il y a à partir de la première
Code:
</div>

C'est donc ce qu'on va faire dans notre fonction :
Code:
function recupererResultat(TableauResult){
  for(i=0;i<TableauResult.length;i++){
    if(TableauResult[i].indexOf("</div>")>-1){
      TableauResult=TableauResult[i].split("</div>");
      resultatDes=TableauResult[0];
      return resultatDes;
    }
  }
}

On appelle notre fonction dans notre code principal, on en est donc là :
Code:
var pseudoTab;
var pseudo;
var desTab;
var nomDes;
var resultatDes;
var recupTabDes;

function recupererPseudo(TableauPseudo){
  for(i=0;i<TableauPseudo.length;i++){
    if(TableauPseudo[i].indexOf("</strong>")>-1){
      TableauPseudo=TableauPseudo[i].split("</strong>");
      pseudo=TableauPseudo[0];
      return pseudo;

    }
  }
}
function recupererDes(TableauDes){
    for(i=0;i<TableauDes.length;i++){
      if(TableauDes[i].indexOf(":<br>")>-1){
        TableauDes=TableauDes[i].split(":<br>");
      }else if(TableauDes[i].indexOf("\' :")>-1){
        TableauDes=TableauDes[i].split(":");
      }
    }
  return TableauDes;
  }
function recupererResultat(TableauResult){
  for(i=0;i<TableauResult.length;i++){
    if(TableauResult[i].indexOf("</div>")>-1){
      TableauResult=TableauResult[i].split("</div>");
      resultatDes=TableauResult[0];
  
      return resultatDes;
    }
  }
}
$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){
    pseudoTab=$(this)[0].innerHTML.split("<strong>");
    desTab=$(this)[0].innerHTML.split("<hr>");
    recupererPseudo(pseudoTab);
    recupTabDes=recupererDes(desTab);
    nomDes=recupTabDes[0];
    recupererResultat(recupTabDes);
  }

});

Si on visualise notre retour avec un console.log on obtient :
[JS] Modifier les textes par défaut des lancés de dés  Consol11

Ca y est ! On a toutes nos variables !

Troisième partie : on ré-écrit le texte

Maintenant qu'on a récupéré nos variables, on peut ré-écrire notre texte.
Pour cela, on va écrire en HTML dans une variable notre phrase :
Code:
    HTMLText="Le dé <strong><em>"+nomDes+"</em></strong> a été lancé par "+pseudo+". Et son résultat est.... <br /> "+resultatDes;

Et dans notre code principal, on va dire qu'on remplace ce qui existe par ce HTML-ci :
Code:
$(this)[0].innerHTML=HTMLText;

Je te redonne le javascript en entier :
Code:
/* Déclaration des variables */
var pseudoTab;
var pseudo;
var desTab;
var nomDes;
var resultatDes;
var recupTabDes;
var HTMLText;

/* Fonction de récupération du pseudo */
function recupererPseudo(TableauPseudo){
  for(i=0;i<TableauPseudo.length;i++){ // on parcourt le tableau où se trouve le pseudo
    if(TableauPseudo[i].indexOf("</strong>")>-1){ // s'il y a la balise, on isole le pseudo
      TableauPseudo=TableauPseudo[i].split("</strong>");
      pseudo=TableauPseudo[0]; // on récupère le pseudo
      return pseudo; //on renvoi le pseudo

    }
  }
}
/* Fonction de récupération du dé */
function recupererDes(TableauDes){
    for(i=0;i<TableauDes.length;i++){ // On parcourt le tableau où se trouve le nom du dé et le résultat
      if(TableauDes[i].indexOf(":<br>")>-1){
        TableauDes=TableauDes[i].split(":<br>");// On isole le nom du dé si le résultat est une image
      }else if(TableauDes[i].indexOf("\' :")>-1){
        TableauDes=TableauDes[i].split(":");// On isole le nom du dé si le résultat est un texte
      }
    }
  return TableauDes; // on revoi le tableau contenant le nom du dé isolé
  }
  /* Fonction de récupération du résultat du dé */

function recupererResultat(TableauResult){
  for(i=0;i<TableauResult.length;i++){ // On parcourt le tableau où se trouve le nom du dé et le résultat
    if(TableauResult[i].indexOf("</div>")>-1){
      TableauResult=TableauResult[i].split("</div>"); //on isole le résultat du dé
      resultatDes=TableauResult[0];
  
      return resultatDes; // on renvoi le résultat du dé
    }
  }
}
/* Code principal */
$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){ // Si le message est un résultat de lancé de dés
    pseudoTab=$(this)[0].innerHTML.split("<strong>"); // On isole la partie où il ya le pseudo
    desTab=$(this)[0].innerHTML.split("<hr>"); // on isole la partie avec le nom du dé et le résultat
    recupererPseudo(pseudoTab); // on appelle la fonction de récupération du pseudo
    recupTabDes=recupererDes(desTab);// on appelle la fonction de récupération du nom du dé
    nomDes=recupTabDes[0]; //on récupère le nom du dé
    recupererResultat(recupTabDes);// on appelle la fonction de récupération du résultat du dé

 HTMLText="Le dé <strong><em>"+nomDes+"</em></strong> a été lancé par "+pseudo+". Et son résultat est.... <br /> "+resultatDes;
 $(this)[0].innerHTML=HTMLText; //on ré-écrit le HTML
  }

});
});

Si tu teste dans la console, tu verras que tout est nickel Smile
Oui, mais ce qu'on veut c'est que ça s'applique automatiquement...
Quatrième partie : on installe sur le forum

Pour l'installer sur ton forum, on va entourer tout notre code par ceci, qui veut dire "dès que la page est chargée" :
Code:
$(function(){

});

Et on va aller installer cela dans le
On crée un nouveau javascript, qu'on nomme et qu'on applique aux sujets. On colle notre code complet :
Code:
$(function(){
/* Déclaration des variables */
var pseudoTab;
var pseudo;
var desTab;
var nomDes;
var resultatDes;
var recupTabDes;
var HTMLText;

/* Fonction de récupération du pseudo */
function recupererPseudo(TableauPseudo){
  for(i=0;i<TableauPseudo.length;i++){ // on parcourt le tableau où se trouve le pseudo
    if(TableauPseudo[i].indexOf("</strong>")>-1){ // s'il y a la balise, on isole le pseudo
      TableauPseudo=TableauPseudo[i].split("</strong>");
      pseudo=TableauPseudo[0]; // on récupère le pseudo
      return pseudo; //on renvoi le pseudo

    }
  }
}
/* Fonction de récupération du dé */
function recupererDes(TableauDes){
    for(i=0;i<TableauDes.length;i++){ // On parcourt le tableau où se trouve le nom du dé et le résultat
      if(TableauDes[i].indexOf(":<br>")>-1){
        TableauDes=TableauDes[i].split(":<br>");// On isole le nom du dé si le résultat est une image
      }else if(TableauDes[i].indexOf("\' :")>-1){
        TableauDes=TableauDes[i].split(":");// On isole le nom du dé si le résultat est un texte
      }
    }
  return TableauDes; // on revoi le tableau contenant le nom du dé isolé
  }
  /* Fonction de récupération du résultat du dé */

function recupererResultat(TableauResult){
  for(i=0;i<TableauResult.length;i++){ // On parcourt le tableau où se trouve le nom du dé et le résultat
    if(TableauResult[i].indexOf("</div>")>-1){
      TableauResult=TableauResult[i].split("</div>"); //on isole le résultat du dé
      resultatDes=TableauResult[0];
  
      return resultatDes; // on renvoi le résultat du dé
    }
  }
}
/* Code principal */
$('.postbody').each(function(){
  if($(this).text().indexOf('a effectué l\'action suivante : Lancer de dés')> -1){ // Si le message est un résultat de lancé de dés
    pseudoTab=$(this)[0].innerHTML.split("<strong>"); // On isole la partie où il ya le pseudo
    desTab=$(this)[0].innerHTML.split("<hr>"); // on isole la partie avec le nom du dé et le résultat
    recupererPseudo(pseudoTab); // on appelle la fonction de récupération du pseudo
    recupTabDes=recupererDes(desTab);// on appelle la fonction de récupération du nom du dé
    nomDes=recupTabDes[0]; //on récupère le nom du dé
    recupererResultat(recupTabDes);// on appelle la fonction de récupération du résultat du dé

      HTMLText="Le dé <strong><em>"+nomDes+"</em></strong> a été lancé par "+pseudo+". Et son résultat est.... <br /> "+resultatDes;
 $(this)[0].innerHTML=HTMLText; //on ré-écrit le HTML
  }
  });


});

Et on enregistre : le tour est joué !
Idea N'oublie pas de vérifier que le javascript est bien activé sur ton forum Very Happy



Si tu as la moindre question, n'hésite surtout pas à la poser.

Avalanche
Avalanche
Messages : 10
https://lilotperdu.forumactif.com/

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Mer 9 Juin 2021 - 3:48
Hello,

tu n'aurais pas une idée de comment modifier la taille du résultat des dés?
Par exemple, lorsqu'on ne met aucune image et qu'il n'y a donc que des chiffres, ça s'affiche vraiment petit. Mes membres ont du mal à voir correctement.

Merci de ton aide.
Avalanche
Avalanche
Messages : 10
https://lilotperdu.forumactif.com/

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Mer 9 Juin 2021 - 3:48
test
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Mer 9 Juin 2021 - 3:48
Le membre 'Avalanche' a effectué l'action suivante : Lancer de dés


'Bingo' : 14
Avalanche
Avalanche
Messages : 10
https://lilotperdu.forumactif.com/

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Mer 9 Juin 2021 - 3:49
Ah bah voilà, c'est pareil ici
Miettes
Miettes
Râleuse (Admin)
Informations :
► Présence aléatoire (Je passe quand je peux :p)
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2219
https://lectures-miettes.pvereecken.fr/

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Mer 9 Juin 2021 - 11:58
Tu parles de "'Bingo' : 14" ?

_________________
Avalanche
Avalanche
Messages : 10
https://lilotperdu.forumactif.com/

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Ven 11 Juin 2021 - 6:34
@Miettes a écrit:Tu parles de "'Bingo' : 14" ?
Le numéro surtout, car j'ai mis une image pour identifier le dé "Bingo", elle fait 25px de haut.
Mes membres sont assez âgés alors ils ont besoin d'une loupe pour voir le résultat lol

Ce serait super sympa de trouver une solution.
Miettes
Miettes
Râleuse (Admin)
Informations :
► Présence aléatoire (Je passe quand je peux :p)
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2219
https://lectures-miettes.pvereecken.fr/

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Ven 11 Juin 2021 - 12:18
Coucou @Avalanche

Tu aurais un lien où je peux voir un résultat ? ça devrait se faire assez facilement en CSS Smile

_________________
Contenu sponsorisé

[JS] Modifier les textes par défaut des lancés de dés  Empty Re: [JS] Modifier les textes par défaut des lancés de dés

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses