AccueilDernières imagesRechercherS'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.


2 résultats trouvés pour multicompte

Monomer

Switcheroo v1.2.0 - Gestionnaire de multicomptes - Dim 17 Jan 2021 - 6:43



Introduction


Bonjour à tous !

J'en conviens que le LS que je propose aujourd'hui n'est pas très conventionnel, mais j'espère tout de même qu'il vous sera tout aussi utile qu'à vos membres. Il y a un peu plus d'une semaine déjà, j'écrivais un sujet ici pour teaser le plugin sur lequel je travaillais. Il est maintenant terminé et je ne suis pas peu fier d'enfin pouvoir le partager !
Switcheroo est un plugin inspiré par le visuel de Discord qui vous permet d'enregistrer tous vos comptes d'un même forum sur une barre latérale et d'en changer au besoin, d'un simple clique. Il fonctionne sur toutes les versions (en théorie) et ne demande que très peu de manœuvres pour être installé. Vous pouvez trouver ici un forum d'exemple sur lequel il est installé : les identifiants de deux comptes invité sont fournis sur la page d'accueil pour les curieux.


Si vous êtes intéressés, je vous invite à lire la suite pour savoir comment Switcheroo fonctionne et comment l'installer sur vos forums !


Prérequis


Switcheroo nécessite quelques modifications de votre part avant d'être installer et je vais expliquer comment tout bien préparer :

  1. Tout d'abord, il vous faudra autoriser les formulaires non-officiel à poster leurs données sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et suivez ce chemin Général > Forum > Sécurité. Il faudra décocher l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" et sauvegarder les changements (image). Cette modification permettra au formulaire de Switcheroo de fonctionner avec Fetch, une API de Javascript.
  2. Ensuite, vous devrez vous assurez que la Toolbar de ForumActif est activée. Si ce n'est pas le cas, faites-le en suivant ce chemin : Module > Toolbar > Configuration (image). Si elle était désactivée parce que vous ne l'utilisiez pas, je proposerai plus bas une façon de la rendre invisible, ne vous en faites pas. Cette modification nous permettra de récupérer facilement l'ID d'un membre ainsi que son avatar et de savoir s'il est connecté ou non.
  3. En dernier, la barre de navigation principale de votre forum (celle qui permet de faire une recherche, de se connecter, de s'inscrire et de se déconnecter) devra être présente quelque part sur toutes les pages. Si vous l'avez retiré de vos templates, assurez-vous de l'ajouter quelque part, dans un <div> quelconque et de la cacher avec un style="display: none;". C'est avec cette barre que nous récupérons l'ID temporaire de votre session, qui permettra de changer de compte instantanément.


Installation


Le plugin en lui-même est très simple à installer. Il comprend deux fichiers Javascript hébergés sur dropbox – ce qui me permettra de pouvoir patcher directement les scripts en cas de besoin. Le premier, monomer_core.js, est un outil où je centralise toutes les fonctions utilitaires dont je me sers. Notamment, c'est grâce à ce script que le formulaire de connexion du plugin est appelé en popup. Le deuxième fichier, c'est le plugin : switcheroo.js.

Voici le code qui permet de tout mettre en place d'un seul coup :
Code:
<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>

<script>
(function() {
      new Switcheroo('#switcheroo');
})();
</script>

Il faudra ajouter ce code à la fin de votre template "Fin du bas de page" : Template > Général > overall_footer_end, juste avant la fermeture de </body>. Comme ceci :
Et juste avec ça, le plugin est installé et fonctionnel... bien que tout moche et écrasé dans le bas de votre forum. En même temps c'est normal, il nous manque le CSS pour que tout soit beau. Mais pour l'instant, concentrons-nous sur les options disponibles.


Options


Switcheroo vient avec quelques options qu'il vous est possible de modifier facilement. Elles doivent être ajouter à l'initialisation du plugin pour fonctionner. Celles ci-dessous sont lest options par défaut.
Code:
(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
        updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
        customButtons: [], /* boutons personnalisés, explication plus bas */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();


Pour vous donner l'exemple du forum test qui permet d'afficher un logo vers l'accueil, j'ai ajouter une image à l'option "logo" :
Code:
<script>
(function() {

    new Switcheroo('#switcheroo', {
        logo: '<img src="https://i.imgur.com/C01GNxF.png" />'
    });

})();
</script>


Boutons Customisés


Explication des custom-buttons:



Apparence


Pour ce qui est du CSS maintenant, vous devez l'installer sur votre forum dans sa totalité. Il est complet et vient avec quelques variables pour vous permettre de modifier les couleurs facilement. Celles par défaut vous donneront le même visuel que celui présenté tout en haut de ce sujet (ou sur le forum d'exemple) :
CSS:

Pour ce qui est de personnaliser le reste, faites-le à vos risques et périls (surtout si vous ne connaissez pas flexbox, héhé) !
Sachez également que ce CSS fonctionne, en théorie, sur toutes les versions de forumactif, mais il n'est pas impossible de rencontrer quelques problèmes de compatibilité qui écraseraient l'apparence de certains éléments. Si c'est le cas, n'hésitez pas à venir chercher de l'aide ici !


Variantes visuelles


Le CSS vient également avec certaines variantes qui vous permettent, par exemple, de changer l'orientation de la barre (verticale ou horizontale), sa position et son comportement.
Si nous reprenons le HTML installé dans le template "Fin du bas de page" : Template > Général > overall_footer_end, vous remarquerez sans doute certaines valeurs :
Code:
<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

  • id="switcheroo" Il s'agit de l'identifiant de la balise, qui permet entre autres au JS de fonctionner.
  • class="switcheroo" La classe sert surtout pour le style général de la barre. Je vous déconseille de la changer sans également modifier le CSS.
  • theme="discord" Une option qui permettra, éventuellement, de changer le thème de switcheroo (lorsque j'en aurai ajouté d'autres). Pour l'instant, "discord" est le seul présent et celui à utiliser par défaut.
  • direction="vertical" Permet de changer la direction de la barre, soit "vertical" (par défaut, voir l'exemple plus haut) ou "horizontal".
  • position="top" Après révision (et en écrivant ces lignes), je réalise que cette fonction n'était pas très bien réfléchie. Pour l'instant, n'y touchez pas.


Masquer la toolbar moche


Comme promis, ce petit bout de CSS vous débarrassera de la toolbar sans la désactiver, permettant ainsi au plugin de fonctionner incognito. Si jamais elle a ajouté un espace indésirable en haut de votre forum, assurez-vous qu'elle ne soit pas fixée à l'écran : comme ceci.
Code:
#fa_toolbar, #fa_toolbar_hidden {
    display: none!important;
}



Conclusion


Voilà. Je pense que c'est tout bon. Si jamais vous avez des questions ou des suggestions pour améliorer ce petit plugin, n'hésitez pas à m'en faire part ! Je suis ouvert à publier des mises à jour et ajouter de nouvelles fonctionnalités si j'en vois l'utilité. Je travaille déjà sur une deuxième version qui devrait ajouter quelques fonctionnalités sympathiques et j'ai d'autres idées potentielles sur lesquelles j'hésite encore. Et qui sait, si vous les proposez vous-même, peut-être que j'y réfléchirai plus sérieusement.

Si vous rencontrez un problème lors de l'installation, quoique ce soit, n'hésitez pas à venir me le dire et je m'empresserai de vous aider !

Et, sur ce... enjoyez bien. ♥

FAQ



Sécurité


Pour reprendre ce que j'ai expliqué à 'Christa, je ne suis clairement pas un expert sur le sujet, mais voici comment est abordée la sécurité de Switcheroo :
  • Les identifiants sont enregistrés en LocalStorage (un peu comme les sessions sont enregistrés par FA quand vous cochez "se souvenir de moi" en vous connectant sur un forum).
  • Ces données sont encryptées, au-moins pour les protéger s'il y a plusieurs membres d'une même famille qui sont sur un forum (auquel cas, ils peuvent quand même se servir du plugin s'ils sont d'accord, mais n'auront pas accès aux mots de passe directement, même en allant fouiller l'inspecteur).
  • L'utilisation de scripts par les membres d'un forum étant limitée, ils ne peuvent accéder qu'à leurs identifiants même en utilisant la console.
  • Un administrateur mal intentionné, Switcheroo ou non, pourrait très bien récupérer les identifiants de ses membres avec n'importe quel script JS actif sur n'importe quel formulaire de connexion (ou même changer leurs mot de passe dans son panneau d'administration), donc ce côté là ne change pas.
  • Switcheroo ne stocke aucunes informations sur une base de données externe.


Changelog



Version 1.1.0


  • Une nouvelle option customButtons permet d'ajouter d'autres boutons à la barre.
  • L'option updateAvatar (activée par défaut) permet de rafraîchir l'avatar du compte connecté au clique droit de la souris.
  • L'option enableReorder (activée par défaut) permet de changer l'ordre des comptes enregistrés (drag & drop support).

Version 1.0.1


  • Amélioration du visuel et ajout d'un mode horizontal. Mise place des thèmes.

Un seul compte, plusieurs personnages : Choix déroulant (2 versions) - Dim 21 Avr 2019 - 16:46

Un seul compte, plusieurs personnages : Choix déroulant




Alors, le multicompte !

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

Puis, j'ai découvert 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.


De ce que j'ai pu voir, les principales oppositions à l'idée de Okhmhaka étaient les suivantes :
- Il va falloir que je change des choses
- Oui, logique, un changement implique des changements. Si cela complique la vis des gens, cela passe très mal. Si cela leur facilite la vie, cela passe très bien. On va essayer d'être dans la deuxième catégorie ^^

- Le codage est trop compliqué pour certains de mes membres.
Plus maintenant ! La seule chose que votre membre aura besoin de faire, c'est de sélectionner son personnage, rien d'autre. Le membre n'a pas à toucher à une miette de code ^^

- Les gens doivent toujours copier/coller leur fiche rp, c'est frustrant.
Nope ! Les gens n'auront qu'à sélectionner leur personnage dans un choix déroulant et la magie s'opérera. Leur fiche rp personnalisée apparaîtra comme par magie et leur rp se met lui-même au bon endroit. Il ne reste plus qu'à poster ^^

- C'est louche... Ça fonctionne comment exactement?
Oui, oui, ça s'en vient XD Allez, je vous présente les deux versions.


Version 1


1. Choisir dans un menu déroulant le personnage souhaité lorsque vous postez votre RP.


Le javascript vous propose vos personnages dans un choix déroulant.
Voir un exemple de choix de personnages.

Une fois le choix fait, un petite ligne de code magique qui fait tout fonctionner s'ajoute à votre message.
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 seront 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 restera quand même là pour dire qui est le propriétaire de ce personnage.
Voir un exemple de plusieurs personnages.

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. 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 (qui est 100% compatible, je m'en suis assurée :ange:)

5. Modifier les données des personnages avec une Google Sheet


Vous pouvez utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les 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.

6. Modifier les données des personnages directement dans le javascript


Disons que vous avez une haine profonde de Google Sheet et que vous voulez une autre option pour où mettre les données des personnages, cette option est pour vous.
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.


Version 2


Contrairement à la Version 1, 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, tel que vu dans l'exemple précédent (l'inventaire était différents des autres champs).

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.

5. Modifier les données des personnages avec une Google Sheet


Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les 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.


Donc en gros


La Version 1 est plutôt pour ceux d'entre vous qui auraient des profils assez stables qui ne changent pas beaucoup. Ou, si les informations changent, il faut qu'elles changent partout sur le forum.
La mise en place se fait assez facilement et cela ne dérange pas du tout le codage de votre forum. Vous pourriez avoir un profil ou un message totalement codé et quand même installer ce système sans difficultés.

La Version 2 est plutôt pour ceux d'entre vous qui auraient des profils personnages dont les informations changeraient beaucoup et/ou qui préféreraient suivre la progression du personnage à travers le RP. Par exemple, s'il y a une barre d'expérience, une barre de vie, un inventaire, etc., cette version est plus pour vous.
La mise en place se met relativement facilement, mais je suggère que vous ayez quelques connaissances en codage pour mieux personnaliser la fiche de RP.

Dans les 2 cas, l'action à poser par le membre est extrêmement simple, il suffit de sélectionner son personnage et de mettre à jour la Google Sheet si c'est nécessaire.


Je peux mettre quoi comme champ personnalisé exactement?

N'importe quoi. Littéralement.

Vous voulez mettre des badges?
On mettrait ceci dans la Google Sheet dans le champ "Badges" :
Code:
<img src="lien Badge1" /><img src="lien Badge2" /><img src="lien Badge3" />


Vous voulez mettre des pokéballs avec des infobulles? Pourquoi pas !
On mettrait ceci dans la Google Sheet dans le champ "Pokéballs" :
Code:
<span class="infobulle_poke"><img src="image pokéball 1" /><span class="poke">Pikachu</span></span> <span class="infobulle_poke"><img src="image pokéball 2" /><span class="poke">Rattata</span></span>

Et un petit CSS pour faire fonctionner l'infobulle.

Vous voulez une barre de vie?
On mettrait ceci dans la Google Sheet dans le champ "PV" :
Code:
<span class="barrepv"><span class="width: 43%;"></span></span> 43/100

Et on mettrait ceci dans le CSS :
Code:
/*La barre de vie*/
.barrepv {
  display: inline-block;
  width: 100px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 2px;
}
/*La partie remplie de la barre de vie*/
.barrepv > span {
  display: inline-block;
  background-color: red;
}


Tant que vous avez de l'imagination, vous devriez vous débrouiller Razz

Sur ce, je vous présente les Version 1 et Version 2 dans les deux prochains messages Wink

Enjoy \o/


Revenir en haut

La date/heure actuelle est Ven 29 Mar 2024 - 1:33