ressources pour rpgs à avatars illustrés

Le design de la v.4.5 s’appelle Poison, parce que dès le départ je voulais partir sur des éléments empoisonnés et/ou venimeux partout. Au final, y’a un peu moins d’éléments que je pensais donc jsp si c’est toujours si cohérent que ça, le nom, mais osef.

En tous cas pour le header j’ai dessiné une branche de belladone & des champignons, ainsi qu’une flaque bien toxique, là, miom. J’ai rajouté un peu de blobs animés pour dynamiser le tout !

Les blobs animés

C’était la première fois que je faisais des blobs, à coups de border-radius un peu plus poussés que d’habitude. J’ai utilisé ce générateur tout simple et après tout est affaire de @keyframes.

L’animation sur les blobs est assez lente, donc je pense qu’à l’œil ça va, mais j’ai toujours un peu peur que les vieux ordis souffrent — et j’ai un membre en particulier qui a beaucoup de mal à visualiser le design v.4.4 déjà — donc j’ai rajouté au dernier moment un petit bouton pause/play pour arrêter les animations si besoin. Elles répondent aussi aux paramètres de Windows (genre si la personne a désactivé les animations), grâce au media query prefers-reduced-motion.

Les couleurs

J’ai trouvé assez vite celles du dark mode, je savais que je voulais partir sur du bleu comme on a déjà eu bcp de violet par le passé et que je suis pas fan du noir/gris (idk c’est trop neutre pour PaB je trouve ?)

Bref, pour l’aspect poison j’ai aussi vite opté pour du vert pétant sur les flaques toxiques et tout, et je trouvais que ça faisait une chouette couleur d’accent — elle est un poil annulée dans le dégradé principal avec le bleu et c’est pas plus mal parce que j’avais peur que ça arrache trop les yeux… Hopefully ça va, du coup. ↓

Niveau light mode ça a été beaucoup plus compliqué ! J’ai essayé mille versions des couleurs… À un moment j’étais partie sur bleu et rouge (genre les champignons devaient être rouges comme des amanites quoi ça faisait sens) et j’avais avancé quelques pages déjà avant qu’on me dise que ça faisait un peu « bleu-blanc-rouge la FRONCE !!! » et là… can’t unsee it mdrrrrr.

Finalement on a décidé de transformer le rouge en rose pâle (j’avais vu notamment passer cet artwork de kun333r qui m’a grave parlé dans ses couleurs), et là, révélation, ça faisait les couleurs du drapeau trans ??? omg banger pour une màj prévue au mois de juin.

Au niveau du code j’ai un poil update notre script de switch de mode ; jusque là on mettait le forum en dark mode par défaut. J’avais envie d’améliorer l’accessibilité donc ce coup-ci, on prend en compte les paramètres de Windows et/ou du navigateur pour la vue par défaut.

Le header

En cours de route, j’ai aussi refait le header de A à Z. J’étais partie sur quelque chose de plus chargé et plus difficile pour moi à dessiner de façon convaincante, et j’aimais bof le résultat. Ça m’arrive souvent de pas trop aimer mes headers, généralement je les laisse un temps pendant mes pérégrinations sur figma et je finis par changer 💀 Là quand je revois le premier header je le déteste vraiment de fouuuuuuu. ↓

Ça m’était déjà arrivée sur la v.4.3 en particulier, avec les nuages qui s’écartaient au scroll, vous savez. J’ai refait au moins 6 fois les nuages mais j’étais finalement arrivée à quelque chose qui me plaisait et qui changeait pas tant que ça du premier jet. Pour la 4.5, c’est la première fois que je change complètement en cours de route…

La barre latérale

Next j’avais surtout en tête l’orga que je voulais pour la barre latérale, qui est maintenant partie intégrante de PaB mais qui ne trouve(ait ?) toujours pas une organisation optimale. C’est dû au fait que je veux pas mettre trop d’éléments en hauteur au risque de devoir en retirer sur les petits écrans. Mais du coup, y’a souvent du vide dedans et on m’en a parlé dans la consultation que j’ai faite auprès des membres.

Là, sur la v.4.5, j’ai fait plusieurs onglets pour pouvoir afficher plus d’infos en tout, mais jsp si les membres vont apprécier d’avoir un clic supplémentaire, on verra. Et puis, il y a toujours du vide en bas de la barre, du coup… Mais je vois vraiment pas comment pallier à ça sans devoir display: none des trucs pour les petites hauteurs d’écran, idk. Shiverstone a un exemple de barre latérale responsive qui marche bien, mais on aurait beaucoup + d’éléments à afficher donc jsp si ça marcherait vraiment pour PaB… à explorer pour un prochain design. Mais en tous cas c’est bien apprécié d’avoir une barre latérale où on trouve tout à portée de main facilement.

Mais la question, c’était — comme j’avais déplacé les quelques petits boutons de la barre du haut jusque dans la barre latérale — est-ce qu’on supprime la barre du haut, du coup ? (celle-là ↓)

J’ai posé la question dans la consultation des membres et j’ai été surprise de voir qu’iels y étaient vraiment attachés, notamment parce qu’elle contient un lien vers l’index visible en toutes circonstances. Le fait est que ma barre latérale contient aussi un lien vers l’index, mais qu’il y a un problème : celui-ci, contrairement à celui de la barre du haut, n’est plus accessible en dessous des 1280px de large une fois qu’on a scrollé un peu la page.

La solution que j’ai trouvée a été de faire apparaître la barre du haut en dessous de 1280px seulement, comme ça sur mobile et tablette ils ont quand même leur lien vers l’index, le switch de mode, le bouton pause des animations facilement accessibles sans avoir à rescroller tout en haut du forum.

Les profils

Sur PaB, les profils sont pas mal développés… pour ne pas dire super longs. Mais entre les inventaires, les différentes cases pour les animaux de compagnie, les poches, les badges personnage et irl, la partie irl… Bon, voilà, c’est beaucoup de choses à remplir mais globalement les gens en sont pas mal satisfaits, iels sont pas perdus en tous cas. Et bien figurez-vous que j’ai ENCORE rallongé jpp, j’avais envie que les profils soient un peu plus illustrés, donc j’ai rajouté pas moins de 4 espaces pour des images.

↑ Truc sur lequel j’ai le plus galéré, ça a été les nouvelles infobulles qui suivent la souris sur les inventaires et sur les badges. J’ai dû demander de l’aide (coucou mary) pour les maths sur le positionnement dynamique des <div>, mais le résultat est super beau !!!! Et j’ai voulu le faire sans jqueryui, que j’utilisais avant pour la facilité, mais qui entrait en conflit avec la version de jquery de forumactif. (Pitié FA mettez-la à jour !!!!!!)

En passant sachez que pour générer les contenus des infobulles j’utilise le plugin Bédédé de Poumon, qui est juste incroyab. Ça me permet désormais d’afficher les descriptions complètes des objets dans les inventaires, sans qu’elles soient présentes dans le champ de profil (sinon ça dépasserait de fou la limite de 15000 caractères des zones de texte).

C’était important pour moi de rajouter les descs directement dans l’inventaire, parce que je sais que sinon les membres doivent aller chercher la boutique ou le sujet récap des objets exclusifs pour voir ce que font les objets un peu originaux… Donc ce sera + facile maintenant.

La chatbox

La cb de PaB c’est spécial. C’est notre petit cocon donc j’essaie toujours de l’améliorer, et là, sur ces mots, arrive Ellie qui m’a filé un de ses vieux scripts pour la personnaliser… et me voilà à regarder de plus près les requêtes de la CB pour bidouiller des fonctionnalités de fou.

Déjà, avec le switch dark/light on galère toujours à trouver une couleur de message qui passe sur les deux modes, alors parfois on veut tout annuler, revenir à la couleur de base qui, elle, s’adapte au mode. Et bah désormais, ce sera super facile, il y aura juste à écrire la commande /couleur, et bim.

Ensuite, difficile de savoir qui est le dc de qui quand ça switche à tout va, donc j’ai rajouté aussi une commande /dcs qui va directement ouvrir le sujet listing des dcs pour éviter d’avoir à aller le chercher.

Sinon, le truc qu’Ellie a codé à l’époque, c’était un système de tags de noms d’utilisateurs dans la cb : je l’ai à peine retouché, et désormais on pourra mettre un message en valeur chez quelqu’un qu’on tag, ou chez tout le monde en taguant @/pabous. Pour faciliter la chose, j’ai modif un poil l’action qui met le nom d’utilisateur dans le message quand on clique dessus, pour qu’il y ait automatiquement une @ devant.

Enfin, il y a un son sur les nouveaux messages de la cb et certains n’aiment pas du tout. Jusqu’à présent, iels mutaient leur onglet, mais c’est effectivement un peu nul (comme on me l’a fait remarquer dans la consultation), donc j’ai implémenté moi-même un bouton dans la cb pour la mute. C’est fait à partir du code donné par FA qui utilisait le localstorage pour les options du son, donc il m’a suffit d’ajouter un bouton qui change le localstorage en mode on/off et voilà.

Au passage j’en ai profité pour refaire la fenêtre des commandes (bouton (?) de la cb) pour faire état de ces nouvelles commandes.

Les sujets

En vrai pas beaucoup de changements sur cette partie, mais on m’a réclamé une possibilité de faire des posts extra-larges qui prendraient tout l’espace du corps du forum (donc en virant le profil). C’est chose faite grâce à une toute petite class à ajouter quelque part dans son message.

C’est la géniale pseudo-class :has() qui permet de modifier l’affichage d’une div si elle contient une class précise. Je l’utilise à toute les sauces depuis qu’elle est baseline hihi. Mais par contre j’avais eu des soucis avec au départ, certains membres étaient sur des vieux PCs avec de vieux navigateurs qui ne géraient pas cette fonction du tout… Donc il avait fallu qu’ils aillent activer manuellement le :has() dans les options. 😔

Je l’utilisais aussi notamment pour attribuer des couleurs de groupe sur les différents posts, mais désormais forumactif a rajouté des classes propres aux groupes sur les posts ! Donc j’ai pu grandement simplifier mon CSS grâce à ça. Blessed. Malgré tout, ces classes ne sont pas (encore ?) présentes ailleurs genre dans les profils, donc j’ai encore besoin de mon super script des couleurs de groupe à cet endroit. Snirf.

La to-do list

Truc de fou que j’avais envie de faire depuis un bail, on avait brainsto ça sur @la-piscine-rpg, mais ouais une to-do list de rps a trouvé sa place dans la barre latérale de PaB. En gros, les membres ajoutent leurs rps dans la liste, ils cliquent sur le bouton s’ils ont répondu, et ça conserve les données. Gala avait donné sa version en LS sur le discord de la Piscine ; moi j’ai fait ma propre version qui conserve et récupère les données sous forme de json dans un champ de profil, donc ça produit une to-do list pour chaque compte, qui n’est pas perdue lorsqu’on vide son localstorage.

Ça m’a trop éclatée de coder ça dès lors que j’ai trouvé l’idée de comment faire, et j’ai eu un chouille d’aide de la part de Mary encore pour une fonctionnalité qui a pas vu le jour finalement mdrrrrr. À la base je voulais que le champ de profil s’update en direct à chaque ajout/clic sur sur un bouton mais en fait ça aurait été trop gourmand en ressources + c’était juste pas possible avec le fonctionnement de forumactif qui remplaçait pas correctement le contenu si on enregistrait deux fois de suite… Bref, j’ai finalement mis un bouton “sauvegarder” à cliquer dès qu’on a fini ses modifs sur la liste.

↑ Ça s’accompagne d’un bouton dans les sujets pour ajouter directement un sujet à la to-do list. Juste parce qu’on pouvait le faire. Et ouais.

Le guidebook

Pour finir je veux parler un peu de notre guidebook qui est un vrai banger !!! Et c’est toujours grâce à .1019 qui m’a filé son code pour faire la barre de recherche interne au guidebook, qu’on a ensuite brainstorm pour ajouter le surlignement du mot recherché et tout. Bref ça c’est là depuis la version précédente donc osef. (mais j’en parle quand même)

Le truc c’est qu’avec le fonctionnement de ce guidebook, les différentes pages s’affichent selon le hash de l’url. Du coup, les ancres internes au pages changent le hash et conduisent les membres à envoyer souvent des liens vers le guidebook qui ne fonctionnent pas. Et bien plus maintenant !! Désormais les ancres mèneront vers les pages concernées et scrolleront automatiquement vers le paragraphe souhaité !

C’était vraiment pas sorcier mais j’ai dû transformer mes ancres avec le hash de la page, un tiret, et le mot associé à l’ancre. Du coup, le script split le hash au niveau du tiret s’il y en a un, et si oui il affiche la page de la première partie du hash, puis scrollTo l’ancre correspondante dans la seconde partie. C’est un peu artisanal mais ça fonctionne !!!

-----