{RPG_BOX} hover image - Suite

par Kaehlyth Ven 10 Juin 2022 - 8:54

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

grâce à l'aide de Toryudo qui a pu régler mon soucis premier, je suis confrontée à un second soucis en rapport avec l'appel de la fonction "RPG_BOX" en JS qui me permet d'avoir une image en hover sur l'avatar. En effet, ayant également un code JS qui me permet d'avoir plusieurs personnages sur un compte, j'aimerai savoir s'il est possible de modifier l'image de la feuille de personnage (RPG box donc) pour chaque "personnage" lié au compte.

> Voir astuce ici - Version 2 uniquement en JS <

D'après ce que je comprends; il faudrait aussi préciser quelle image doit aller avec quel personnage et ce serait une donnée qu'on doit donner au tableau "JS".

Le tableau JS permet de changer immédiatement les données comme suit :

Code:: // On met les donnes dans un tableau var personnages = [ ['Naeisia', 'Conteuse', 'https://i.servimg.com/u/f44/20/41/07/60/captur24.jpg', 'Rang', 'Image Rang', 'Champ 1', 'Champ 2'], ['Naeisia', 'Heressaeh Wyrvoglaq', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', 'Le rang', 'Lien image rang', 'Sorcière Noire', 'Chaotique neutre'], ['Naeisia', 'test monstres', 'https://pile.randimg.net/3/71/205358/MJa.png', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'], ['Linawhen', 'MJ Cthulhu', 'https://2img.net/u/3617/19/08/62/avatars/3-11.jpg', 'Le rang', 'Lien image rang', 'Sorcière Noire', 'Chaotique neutre'], ['Linawhen', 'Elora Chante-Brume', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', 'Le rang', 'Lien image rang', 'Sorcière Noire', 'Chaotique neutre'], ]; var nblignes = personnages.length; var nbcolones = personnages[0].length;

Ici, on va chercher le nom /u de l'utilisateur. Une fois trouvé on change son pseudonyme en créant dans une menu déroulant le choix de personnage "Elora Chante-brume" pour exemple. Ensuite on charge le nouvel avatar, puis le rang, son image, et deux champs personnalisés. Ces deux derniers ne fonctionnent pas car je n'ai pas compris ce qui est réellement appelé dans champ car cela peut être divers et variés.

${RPG_BOX} hover image - Suite Captur32$

Ci-dessous une partie du code explicative :

Code:: // 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); }

Il semblerait donc que

Code:: "<div class="multi_leschamps"></div>"

se mettent où l'on veut pour appeler les données et les changer. Je n'ai pas testé car mes données "FEUILLE DE PERSONNAGE" sont dans un bouton "profil" qui cache ou dévoile ces dites données.

J'ai donc remarqué qu'on créé une div qu'on appelle en JS pour créer ce changement en fonction du personnage mais je n'ai pas trouvé moi même malgré la donnée "RPG_BOX" de comment faire pour l'implémenter dans le code, en copier/collant un peu comment c'était fait, pour dire au code : j'aimerai que tu me trouves "RPG_BOX" qui est mon image de feuille de personnage et que tu la modifies en fonction de la sélection du personnage.

Sauriez-vous m'aider ?

Cordialement

par **Toryudo** Ven 10 Juin 2022 - 18:35

Bonjour bonjour !

Bon, du coup, je vais d'abord avoir quelques questions sur la manière dont vous allez gérer ces différents personnages, pour savoir ce qui sera le plus optimisé :

Est-ce que tous les membres pourront avoir plusieurs personnages, ou seulement quelques comptes ? Comme je comprends que vous passez par la méthode js plutôt que le Google Sheets, c'est peut-être pour quelque chose qui sera fixe... c'est pour ça que je demande, ça peut aider
J'imagine que pour l'instant, les gens passeraient par le formulaire de la fiche RPG pour ajouter l'image ou les images en question ? Est-ce que vous gérez le fait de mettre plusieurs images ? Est-ce que vous pourriez faire le test, pour voir ce que ça donne ici https://albastrya.bbactif.com/u1 ?
Enfin, est-ce que vous pourriez faire en sorte de mettre des posts avec 3 ou 4 personnages du même compte sur ce sujet https://albastrya.bbactif.com/t126-sujets-des-notifications ? Ça permettrait de voir comment le code réagit également !

4 personnages, 4 images, on pourra bien tester avec ça !
Pour l'instant, je partirais peut-être sur la création d'un nouveau élément dans le tableau "personnages", mais ça voudrait dire qu'il ne serait pas possible de le changer via le formulaire de la fiche RPG... c'est peut-être trop restrictif. Sinon, on ajoutera des scripts pour gérer ça autrement, ça ne pose pas trop de problèmes.

par Kaehlyth Ven 10 Juin 2022 - 18:58

Toryudo a écrit:
Est-ce que tous les membres pourront avoir plusieurs personnages, ou seulement quelques comptes ? Comme je comprends que vous passez par la méthode js plutôt que le Google Sheets, c'est peut-être pour quelque chose qui sera fixe... c'est pour ça que je demande, ça peut aider

Bonjour Toryudo !

Il se trouve que les joueurs auront deux personnages maximum. Le forum est actuellement sur un univers mais nous sommes plusieurs MJ et nous voudrions pouvoir avoir plusieurs personnages sur un compte (indépendamment de switcheroo) pour sélectionner plus rapidement le personnage en question.

Par exemple, avec switcheroo je suis sur le compte "PNJ dragon". Ce compte aura plusieurs personnages qui seront les différents PNJ, avec leur avatar ! Very Happy

La personne qui a le plus de personnage est moi-même car je suis le MJ actuel. Cela tend à l'être le temps de pouvoir écrire d'autres scénarios.
Le code JS est FACILEMENT modifliable. Je peux le changer quand je veux, ajouter ce que je souhaite, il le prend immédiatement en compte. thumright

Toryudo a écrit:[*]J'imagine que pour l'instant, les gens passeraient par le formulaire de la fiche RPG pour ajouter l'image ou les images en question ? Est-ce que vous gérez le fait de mettre plusieurs images ? Est-ce que vous pourriez faire le test, pour voir ce que ça donne ici https://albastrya.bbactif.com/u1 ?

[*]

Oui, j'ai mis un topic pour avertir mes joueurs de remplir leur feuille de personnage et d'ajouter l'image suite au rajout de l'image au survol qui permet de voir en plus grand le personnage !! C'est un ajout absolument génial ! Le code qui va chercher le BOX_RPG pour l'afficher est juste magnifique, et cela ne prend que quelque temps d'ajouter une URL d'image à sa feuille de personnage.

Forumactif ne permet pas d'avoir plusieurs images dans la feuille de personnage (donc BOX RPG). Il ne s'agit que d'une URL d'image à entrer et c'est tout. J'ai tenté et la seule chose que j'ai trouvé, c'est de créer un 'montage d'images' aléatoires qui permet de switcher ici : https://www.randimg.net , cela vous permet d'héberger des images, et MAGIE ! Cela créé une randomisation d'avatars cheers

. C'est donc un paliatif.

Toryudo a écrit:[*]Enfin, est-ce que vous pourriez faire en sorte de mettre des posts avec 3 ou 4 personnages du même compte sur ce sujet https://albastrya.bbactif.com/t126-sujets-des-notifications ? Ça permettrait de voir comment le code réagit également !

Bien sûr, cela vient d'être fait !

Merci de vous pencher sur la question. victoire

par **Toryudo** Ven 10 Juin 2022 - 22:01

Bon... je suis un peu circonspect pour l'instant, je pense qu'il y a des soucis dans le script de base.
Si je prends le tableau et le code :

Code:: var personnages = [ ['Naeisia', 'Conteuse', 'https://i.servimg.com/u/f44/20/41/07/60/captur24.jpg', 'Rang', 'Image Rang', 'Champ 1', 'Champ 2'], ['Naeisia', 'Heressaeh Wyrvoglaq', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', 'Le rang', 'Lien image rang', 'Sorcière Noire', 'Chaotique neutre'], ['Naeisia', 'test monstres', 'https://pile.randimg.net/3/71/205358/MJa.png', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'], ['Linawhen', 'MJ Cthulhu', 'https://2img.net/u/3617/19/08/62/avatars/3-11.jpg', 'Le rang', 'Lien image rang', 'Sorcière Noire', 'Chaotique neutre'], ['Linawhen', 'Elora Chante-Brume', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', 'Le rang', 'Lien image rang', 'Sorcière Noire', 'Chaotique neutre'], ];

personnages[i][0] => Naeisia => c'est le pseudo, c'est bon
personnages[i][1] => Conteuse => c'est le nom du personnage qui remplace le pseudo, c'est bon
personnages[i][2] => https://i.servimg.com/u/f44/20/41/07/60/captur24.jpg => c'est le lien vers l'avatar, c'est bon
personnages[i][3] => Rang => ici, ce serait normalement la couleur du nom du personnage
personnages[i][4] => Image Rang => ici, ce serait normalement le rang
personnages[i][5] => Champ 1 => ici, ce serait normalement l'image du rang
Et toutes les valeurs suivantes, ce serait les valeurs dans .multi_leschamps

Du coup, d'après ce que je vois dans la page, vous avez choisi de ne pas utiliser les rangs et images de rangs, on va récupérer les emplacements pour mettre les images correspondantes aux personnages présentes dans https://albastrya.bbactif.com/u1
Commençons par transformer la tableau comme on veut :

Code:: var personnages = [ ['Naeisia', 'Conteuse', 'https://i.servimg.com/u/f44/20/41/07/60/captur24.jpg', '#8282F0', 'Lien image hoverbox', 'Champ 1', 'Champ 2'], ['Naeisia', 'Heressaeh Wyrvoglaq', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', '#8282F0', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', 'Sorcière Noire', 'Chaotique neutre'], ['Naeisia', 'test monstres', 'https://pile.randimg.net/3/71/205358/MJa.png', '#8282F0', 'Lien image hoverbox', 'Info du Champ1', 'Info du Champ 2'], ['Linawhen', 'MJ Cthulhu', 'https://2img.net/u/3617/19/08/62/avatars/3-11.jpg', '#8282F0', 'Lien image hoverbox', 'Sorcière Noire', 'Chaotique neutre'], ['Linawhen', 'Elora Chante-Brume', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', '#8282F0', 'Lien image hoverbox', 'Sorcière Noire', 'Chaotique neutre'], ];

Maintenant :
[0] : Nom du compte
[1] : Nom du personnage
[2] : Avatar
[3] : Couleur nom
[4] : Image de la page https://albastrya.bbactif.com/u1 qu'on souhaite associer au personnage
[5] et + : Informations .multi_leschamps

On a donc associé l'image https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg avec le personnage Heressaeh Wyrvoglaq.
Maintenant, on fait en sorte de mettre cette url au niveau d'un nouveau class="multi_hoveravatar". Vous pouvez remplacer ce passage entier dans votre script (tout ce if, et dans la boucle for, c'est i=5 au lieu de i=6) :

Code:: 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 l'image lorqu'on hover l'avatar du personnage if (personnages[labonneligne][4].length > 0) { multipost.find('.multi_hoveravatar').text(personnages[labonneligne][4]); } // On ajoute tous les autres champs for (i=5; 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); } } }

Ce que vous allez faire ensuite, dans le template viewtopic_body, c'est ajouter un <span class="multi_hoveravatar"></span> juste après le <span class="multi_avatar"></span>.
Ensuite, en CSS, vous faites en sorte de mettre le .multi_hoveravatar en display: none; pour ne pas afficher le lien. Il sert juste à "stocker l'information", pas besoin de l'afficher.

Maintenant, vous avez une image associée au personnage, lui-même associé au post.
Si on reprend le script que nous avions fait précédemment, on ne va plus aller récupérer l'image dans la page https://albastrya.bbactif.com/u1, mais directement dans le class="multi_hoveravatar" qu'on vient de créer. Le script devient donc :

Code:: $(function() { $('.englob').hover(function(){ $('#result').remove(); var idLink = $(this).find('.imgp a').attr('href'); var $result = $("<div id='result'></div>"); $result.html('<img src="' + $(this).find('.multi_hoveravatar').text() + '" alt="" />'); $("body").append($result); }, function(){ $('#result').remove(); }); });

Et normalement, si je n'ai pas fait de bêtise, ça fonctionne (pour le personnage Heressaeh Wyrvoglaq en tout cas, il n'y a rien pour les autres pour le moment)
Du coup, on a dissocié l'image qui apparait et l'image qui est ici https://albastrya.bbactif.com/u1 , mais c'est beaucoup plus simple comme ça !

par Kaehlyth Ven 10 Juin 2022 - 22:19

Bonsoir et merci de vos superbes explications !

j'ai du me tromper quelques part car aucun hover ne s'affichent pas même sur Heressaeh... me serais-je trompée dans le template ?
Les informations sont très fournies, j'ai peut être dû me tromper dans mes codes !

Je m'excuse d'avance si je suis une boulette... Embarassed

EDIT 22:23 : Ouah, ça fonctionne !!! Shocked

Il y a juste un soucis, comment faire pour les comptes qui n'ont qu'un personnage ait aussi leur image RPG box qui s'affiche, indépendamment du JS (parce que forcément s'ils veulent jouer qu'un personnage...) ?

Je prends le cas d'un joueur du compte "Vlasta", il ne veut jouer que ce personnage. J'ai donc quand même créé son personnage dans le code JS mais s'il ne change pas TOUS ses messages par la sélection de personnage, il n'a pas d'hover.

Comment pouvons nous faire ?

Est-il possible que si la donnée est : 0, elle charge la BOX RPG ?

Ceci semble propre ?

Code:: // On met l'image lorqu'on hover l'avatar du personnage n'a rien par défaut if (personnages[labonneligne][4].length < 0) { multipost.find('.boxRPG').text(personnages[labonneligne][4]); }

Merci encore, c'est génialissime !

par **Toryudo** Ven 10 Juin 2022 - 23:06

On va plutôt modifier le script :

Code:: $(function() { $('.englob').hover(function(){ $('#result').remove(); var idLink = $(this).find('.imgp a').attr('href'); var $result = $("<div id='result'></div>"); if ($(this).find('.multi_hoveravatar').text().length > 0){ $result.html('<img src="' + $(this).find('.multi_hoveravatar').text() + '" alt="" />'); } else { $result.load(idLink + ' .boxRPG ', function (){ $result.html($result.find('img')[0]); }); } $("body").append($result); }, function(){ $('#result').remove(); }); });

S'il n'y a aucune url dans .multi_hoveravatar (cas d'un compte qui ne serait pas dans le tableau), alors on va chercher l'image dans le profil comme avant.

par Kaehlyth Ven 10 Juin 2022 - 23:13

Ah oui la fonction "Si... Sinon..." !

Merci beaucoup Toryudo ! Embarassed

Le codage reste de la magie, je suis heureuse. Angel

.

EDIT : Juste une dernière demande peut être, il semble que la première ligne créée pour le personnage, seul le pseudonyme change, mais l'avatar ne change pas. Embarassed

)

par **Toryudo** Sam 11 Juin 2022 - 16:50

Bonjour !
Je vois, il y a encore un problème dans le script original.
On va modifier deux choses pour être tranquille :

Code:: var personnages = [ [], ['Naeisia', 'Conteuse', 'https://i.servimg.com/u/f44/20/41/07/60/captur24.jpg', '#8282F0', 'https://i.servimg.com/u/f44/20/41/07/60/f6d10f10.jpg', 'Champ 1', 'Champ 2'], ['Naeisia', 'Heressaeh Wyrvoglaq', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', '#8282F0', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', 'Sorcière Noire', 'Chaotique neutre'], ['Naeisia', 'test monstres', 'https://pile.randimg.net/3/71/205358/MJa.png', '#8282F0', 'https://pile.randimg.net/3/71/205358/MJa.png', 'Info du Champ1', 'Info du Champ 2'], ['Linawhen', 'MJ Cthulhu', 'https://2img.net/u/3617/19/08/62/avatars/3-11.jpg', '#8282F0', 'Lien image hoverbox', 'Info du Champ 1', 'Info du Champ 2'], ['Linawhen', 'Elora Chante-Brume', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', '#8282F0', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', 'Info du Champ 1', 'Info du Champ 2'], ];

Ici, on ajoute juste une ligne en première position, en se contentant d'écrire [],
Le premier élément d'un tableau porte toujours l'indice [0], et le test "if (labonneligne > 0) {" nous embête sur le compte Conteuse à cause de ça. Du coup, en rajoutant un nouvel élément 0 vide, Conteuse devient l'élément 1 et le test devient juste : le script entrera bien dans le bloc et changera l'avatar comme il faut.

Et ensuite, on va remodifier la boucle for :

Code:: // On ajoute tous les autres champs for (i=5; i < nbcolones; i++) { if (personnages[labonneligne][i].length > 0) { var classchamp = personnages[labonneligne][i].replace(" ", ""); classchamp = "multi_" + classchamp; var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[labonneligne][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>'; multipost.find('.multi_leschamps:first').append(champajout); } }

Il y a des personnages[0] qui trainent sans raison, on les remplace juste par personnages[labonneligne] pour être tranquille derrière !

par Kaehlyth Sam 11 Juin 2022 - 17:06

Toryudo a écrit:Bonjour !
Je vois, il y a encore un problème dans le script original.
On va modifier deux choses pour être tranquille :

Code:
var personnages = [ [], ['Naeisia', 'Conteuse', 'https://i.servimg.com/u/f44/20/41/07/60/captur24.jpg', '#8282F0', 'https://i.servimg.com/u/f44/20/41/07/60/f6d10f10.jpg', 'Champ 1', 'Champ 2'], ['Naeisia', 'Heressaeh Wyrvoglaq', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', '#8282F0', 'https://i.servimg.com/u/f44/20/41/07/60/tumblr10.jpg', 'Sorcière Noire', 'Chaotique neutre'], ['Naeisia', 'test monstres', 'https://pile.randimg.net/3/71/205358/MJa.png', '#8282F0', 'https://pile.randimg.net/3/71/205358/MJa.png', 'Info du Champ1', 'Info du Champ 2'], ['Linawhen', 'MJ Cthulhu', 'https://2img.net/u/3617/19/08/62/avatars/3-11.jpg', '#8282F0', 'Lien image hoverbox', 'Info du Champ 1', 'Info du Champ 2'], ['Linawhen', 'Elora Chante-Brume', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', '#8282F0', 'https://i.pinimg.com/564x/df/80/97/df809779bc8410278728fbcba7b8d713.jpg', 'Info du Champ 1', 'Info du Champ 2'], ];

Ici, on ajoute juste une ligne en première position, en se contentant d'écrire [],
Le premier élément d'un tableau porte toujours l'indice [0], et le test "if (labonneligne > 0) {" nous embête sur le compte Conteuse à cause de ça. Du coup, en rajoutant un nouvel élément 0 vide, Conteuse devient l'élément 1 et le test devient juste : le script entrera bien dans le bloc et changera l'avatar comme il faut.

Et ensuite, on va remodifier la boucle for :
Code:
// On ajoute tous les autres champs for (i=5; i < nbcolones; i++) { if (personnages[labonneligne][i].length > 0) { var classchamp = personnages[labonneligne][i].replace(" ", ""); classchamp = "multi_" + classchamp; var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[labonneligne][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>'; multipost.find('.multi_leschamps:first').append(champajout); } }

Il y a des personnages[0] qui trainent sans raison, on les remplace juste par personnages[labonneligne] pour être tranquille derrière !