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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal
Le Deal du moment : -17%
Casque de réalité virtuelle Meta Quest 2 ...
Voir le deal
249.99 €

    [Nihil] [Profil/Messages] Système de succès

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Dim 10 Juil 2016 - 17:19

    Rappel du premier message :

    Ma demande



       Bonjour ! Je me décide à demander votre aide après quelques semaines de recherches infructueuses (ou mal conduites, à voir !). Je n'ai rien trouvé à ce sujet qui puisse m'aider à faire le code, donc dites-moi si j'ai mal regardé... ><
    Bref, en pleine création d'un RPG, je souhaiterai intégrer dans le profil (en dessous de l'avatar et des informations un profil) une partie pour afficher des succès (ou badges, d'après ce que j'ai pu voir un peu partout). J'emploie le mot succès car l'idée c'était comme lorsque je joue à la xbox et qu'on a des succès en jouant à des jeux... xD
    J'ai hésité à poster dans "Autres codages", mais comme techniquement ça se situe dans les profil et messages. Après ça reste un élément ajouté, donc dites-moi ._.
    J'ignore si ce codage relève uniquement du html et du css... C'est en partie pourquoi je viens vous solliciter ! Je vous remercie d'avance de votre aide, et si ça peut aider d'autres personnes qui veulent ce type de système, tant mieux.


       Schéma(s) et Eléments
       Schémas : Ce sont des captures de mon propre fo' test ; lisez les explications qui suivent parce que j'ai été incapable d'éditer... x)
    capture du profil - capture profil dans les messages
    Donc en dessous ou à la place de la feuille de personnage (dans les deux captures - elle sera probablement supprimée), j'aimerais pouvoir afficher un système de succès. Par exemple si joueur 1 obtient le succès numéro 1, il faudrait que cela s'affiche (manuellement apparemment, il semble que l'automatisme soit impossible). Ensuite, si un joueur obtient beaucoup de succès, ce serait peut-être beaucoup dans le profil des messages. Aussi, est-il possible qu'on puisse afficher mettons quatre succès et en dessous il y ait une sorte de bouton, on clique et boum les autres succès s'affichent (comme le système de base de la feuille de personnage quoi).
    Par ex (profil des messages) :
    S1 S2 S3 S4
    boutonafficherautressuccès
    Pour le profil en revanche, si tout pouvait s'afficher, ce serait l'idéal, à voir comment il est possible de tout arranger.
    Avez-vous besoin des templates ? (pour l'adaptation aux codés déjà affectés - quoique si je pouvais le faire moi-même ce serait super, histoire de commencer à maîtriser le truc).
    Désolé d'avance si c'est mal exprimé tout ça --'
       Tailles des éléments : Le tout est que cela tienne dans la largeur du profil tout en étant élégant.
       Effets voulus : Tout est expliqué au-dessus xD
       Version de votre forum : PHPBB2


       Ressources
       J'utilisais un petit icon trouvé sur le net (celui-ci : http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png ) pour faire les essayages, la taille paraissait pas mal...

       Autres précisions ?
       N'hésitez pas à me poser des questions ou quoi que ce soit, j'ignore si j'ai bien expliqué  Shocked Dans tous les cas merci d'avance !
       


    Dernière édition par Tsukasa le Dim 2 Avr 2017 - 10:36, édité 2 fois
    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Dim 4 Sep 2016 - 12:30

    Ah mince désolééééé XDD *rajoute des bêtises xD*
    Je viens de retourner voir, et étonnamment, il semble que tout se soit corrigé de lui-même :

    Code:
    <div class="p-badge-description">

    Pas de slash ou d'espace en trop !
    Ça fonctionne ? o/
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 6 Sep 2016 - 23:28

    Alors oui c'est bon comme ça, par contre je ne vois pas la modification sur la page (au cas où tu l'avais faite)

    Est ce que c'est revenu tout seul quand tu as modifié le code, et du coup tu n'as pas validé ? Si oui c'est possible que l'éditeur de FA ait corrigé la faute, mais il faut quand même validé pour sauvegarder :hum:

    J'ai toujours partout :
    Code:
    <div class="p-badge-description" />
             (le contenu ici)
          </div>

    Au pire, est ce que tu peux aussi me copier / coller en entier ton code HTML s'il te plait ? :)

    Le code JS à rajouter ressemblera à ça :
    PA > Modules > JS >Ajouter un JS => sur toutes les pages (je fais le chemin de tête ToT, sorry, je suis un peu en speed là :3)
    Code:
    /*
     * SYSTEME DE BADGE
     * LIBRE SERVICE NEVER UTOPIA
     */

    /* on vérifie si on est bien sur la page de profil */
    if (/^\/u\d+$/.test(document.location.pathname)) {
        var idPage = "1"; /* numéro de la page HTML */
        var idChamp = "field_id1"; /* ID du champ à modifier */


        $.get("/h" + idPage + "-", function (data) {
            /* on récupère le block des badges */
            var $badges = $(data).find(".badges-profil");
    console.log(data)
            /* on attend que notre page HTML soit prête */
            $(function () {
                /* on récupère la zone badge */
                var $profilBadges = $("#"+idChamp);

                if ($profilBadges.length > 0) {
                    /* selection des badges du membre */
                    var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

                    /* pour chaque badge, on ajoute la classe si besoin */
                    for (var i = 0, l = badgesUser.length; i < l; i++) {
    console.log($badges)
                        if (badgesUser[i].length > 0) {
                            $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                        }
                    }
                   
                    /* si la personne ne peut pas éditer le champ,
                    * on le retire la zone */
                    if ($profilBadges.find(".field_editable").length < 1) {
                        $profilBadges.next().andSelf().remove();
                    }
                }
               
                /* on ajoute le block dans le profil */
                $(".badges-page-profil").append($badges);
            });

        })
    }

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Mer 7 Sep 2016 - 10:10

    Étrange !
    J'y suis retourné, c'est toujours comme si FA avait remis les choses en l'ordre, j'ai validé une nouvelle fois.
    Voici le code au cas où :
    Code:
    <div class="badges-profil">
                    
       <div class="p-badge rose01">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Rose Rouge" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description ROSE 01 
          </div>
                       
       </div>
                    
       <div class="p-badge rose02">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Rose Blanche" /> 
          </div>
                             
          <div class="p-badge-description">
                                       Description description ROSE02           
          </div>
                       
       </div>
                    
       <div class="p-badge rose03">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Rose Bleue" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description ROSE03 
          </div>
                       
       </div>
                    
       <div class="p-badge prim01">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Primrose" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description prim01 
          </div>
                       
       </div>
                    
       <div class="p-badge prim02">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Primitive" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description prim02 
          </div>
                       
       </div>
                    
       <div class="p-badge harpe04">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Harpe" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description harpe04 
          </div>
                       
       </div>
                    
       <div class="p-badge viola05">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Viola" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description viola05 
          </div>
                       
       </div>
                    
       <div class="p-badge beat06">
                           
          <div class="p-badge-illu">
               <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Beat" /> 
          </div>
                           
          <div class="p-badge-description">
               Description description beat06 
          </div>
                       
       </div>
                
    </div>

    Sinon, page JS crée et ajoutée !
    Ne t'inquiète pas, merci :heart:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 7 Sep 2016 - 13:56

    Oups petite erreur de ma part, voici le bon JS :
    Code:
    /*
     * SYSTEME DE BADGE
     * LIBRE SERVICE NEVER UTOPIA
     */

    /* on vérifie si on est bien sur la page de profil */
    if (/^\/u\d+$/.test(document.location.pathname)) {
        var idPage = "1"; /* numéro de la page HTML */
        var idChamp = "field_id1"; /* ID du champ à modifier */


        $.get("/h" + idPage + "-", function (data) {
            /* on récupère le block des badges */
            var $badges = $(data).find(".badges-profil");

            /* on attend que notre page HTML soit prête */
            $(function () {
                /* on récupère la zone badge */
                var $profilBadges = $("#"+idChamp);

                if ($profilBadges.length > 0) {
                    /* selection des badges du membre */
                    var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

                    /* pour chaque badge, on ajoute la classe si besoin */
                    for (var i = 0, l = badgesUser.length; i < l; i++) {
                        if (badgesUser[i].length > 0) {
                            $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                        }
                    }

                    /* si la personne ne peut pas éditer le champ,
                    * on le retire la zone */
                    if ($profilBadges.find(".field_editable").length < 1) {
                        $profilBadges.next().andSelf().remove();
                    }
                }

                /* on ajoute le block dans le profil */
                $(".badges-page-profil").append($badges);
            });

        })
    }

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Jeu 8 Sep 2016 - 3:59

    Merci pour ce nouveau JS, le profil simple fonctionne ! Tout s'affiche bien o/

    Que faut-il faire à présent pour l'affichage dans les messages ? :face:
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 18 Sep 2016 - 11:15

    Salut!

    Nihil, tu as vu le message de Tsukasa?



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 18 Sep 2016 - 15:23

    Oh mince, je suis désolée Tsuka ><, j'avais zappé ce sujet, merci Onyx !

    Du coup pour le profil on fait quoi au final ?
    Le membre peut choisir lui même le / les badges qu'il affiche ?
    Combien exactement ?
    On a le placement définitif :hudada: ?

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Jeu 22 Sep 2016 - 3:27

    Bonjour ! Ne t'inquiète pas o/
    Alors pour le placement, peut-être en survolant l'avatar s'affichent les premiers badges obtenus ? (pour ne pas surcharger) En les positionnant au centre, deux par deux, dans la limite de six ? Le reste étant de toute façon visible sur le profil simple.

    Qu'en dis-tu ? Very Happy
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 2 Oct 2016 - 4:49

    Salut!

    @Nihil Scar Winspeare, tu as vu le message de Tsukasa?



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 2 Oct 2016 - 22:00

    Aie, j'oublie toujours les demandes de LS >-<

    Si quelqu'un veut reprendre il y a pas de soucis, sinon je vais m'y atteler mais un peu plus tard, beaucoup de boulot ces temps ci ToT *paaaardon*

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Lun 3 Oct 2016 - 6:57

    Bonjour Nihil !
    Prends ton temps, et bon courage pour tout *-*
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 30 Déc 2016 - 19:40

    Boooon, je reviens après trèèèèès longtemps

    Du coup première question, est ce que c'est encore d'actualité Tsukasa ? :)

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Ven 30 Déc 2016 - 20:06

    Bonsoooir ;3

    Pas de problème o/
    Oui c'est toujours d'actualité !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 13 Jan 2017 - 4:02

    Salut!

    C'est toujours d'actualité ici? Nihil, tu as vu la réponse de Tsukasa?



    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Ven 13 Jan 2017 - 5:09

    Bonjour !

    Oui c'est toujours d'actualité :)
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 28 Jan 2017 - 22:44

    Hello, sorry je n'ai vraiment pas la tête à faire des LS ces temps ci ^^'

    Est ce que je peux avoir ton template des messages s'il te plait ? :)
    Est ce que tu veux que l'avatar soit toujours cliquable (il mène vers le profil actuellement) ? (si on met les badges au survol au dessus)

    EDIT :
    Je sais plus si les badges sont modifiables par les membres :hum:

    En fait il y a 2 manières de faire, une un peu plus embêtante que l'autre :
    Soit un code JS à rajouter un peu long, qui va me prendre un peu la tête
    Soit on ajoute un champ libre où on peut mettre des images en bbcode ( https://www.never-utopia.com/t60660-comment-mettre-un-lien-un-smiley-un-bbcode-dans-un-champ-du-profil ) (qu'on peut ensuite si tu veux déplacer / styliser un peu )

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Mar 31 Jan 2017 - 8:15

    Bonjour !
    Écoute pas de souci, tu peux prendre ton temps ! C'est déjà gentil de t'en occuper.
    Voici le template :
    Spoiler:

    Pour les badges non, nous avions dit réservé à l'équipe admin :p
    Pour l'avatar cliquable, il ne faudrait pas que ce soit gênant pour l'affichage, de toute façon le pseudo est cliquable forcément donc tous les chemins mènent au profil.

    C'est clair que je préfèrerais la technique du LS, mais si tu n'as pas la forme pour le faire... D:
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 16 Fév 2017 - 5:17

    Salut!

    Je viens faire un petit up pour savoir où ça en est ~



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 18 Fév 2017 - 0:37

    Hello !

    Sorry j'ai pas du tout avancé :/
    Je réfléchis à un système qui permet d'éviter de dupliquer le choix des images

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Sam 18 Fév 2017 - 14:44

    Coucou !

    Pas d'inquiétude, prends ton temps n_n
    Merci :heart:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 18 Fév 2017 - 19:01

    Finalement je me relance youuuuhouuu !

    Est ce que je peux avoir le CSS aussi sitouplé ? <3

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Jeu 23 Fév 2017 - 7:51

    Super merci Very Happy !
    Désolé du retard ><

    Le voici :
    Spoiler:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 26 Fév 2017 - 22:28

    Pas de problème, moi même je traine donc je ne suis pas un très bon exemple :toto:
    J'ai totalement tout recommencé différemment :siffle:

    Avant de te passer le javascript, j'ai quelques petites modifications de template et CSS à te passer. ^^

    view_topic_body :
    Spoiler:


    profile_view_body :
    Spoiler:

    Le CSS :
    Spoiler:

    Seconde modif du CSS :
    Spoiler:

    ENFIN, on y est presque xD...
    Pour les succès, ils ne s'affichent plus comme ça :
    Code:
    rose01;prim02;violet03;harpe04;viola05;beat06

    Plutôt qu'un point virgule, on mettre un retour à la ligne
    Code:
    rose01
    prim02
    violet03
    harpe04
    viola05
    beat06
    Du coup il faut bien qu'il soit de type "Zone de texte" dans le panneau d'admin (sinon on ne peut pas faire de retour à la ligne il me semble)

    Tu peux supprimer l'ancienne page HTML et le précédent code javascript, on va mettre autre chose à la place

    Je pense que j'ai fait le tour de toutes les modifs :panic:

    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Ven 3 Mar 2017 - 13:18

    Sorry D:
    Les modifications ont été effectuées, la page html ainsi que le js o/
    Merci ~

    (c'est ok aussi pour la zone de texte **)
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 4 Mar 2017 - 19:14

    Dans le CSS du forum on peut ajouter ça :
    Code:
    .avaPOST {
      position: relative;
    }

    .badge-message-container {
      padding: 15px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
     
      background: rgba(0,0,0,0.8);
      opacity: 1;
      text-align: center;
      transition: opacity ease-in-out .75s;
    }

    .badge-message-container:hover {
      opacity: 1
    }

    .badges-page-profil {
      background: rgba(0,0,0,0.5);
      color: #000;
      margin-top: 10px;
      padding: 10px;
      font-size: 12px;
    }

    J'ai repris l'animation au survol qu'il y a sur la page profil :)

    Code javascript à rajouter :


    Je mets le code sous hide car il est pas totalement niquel, pour éviter que quelqu'un qui voudrait reprendre le système se retrouve car un code un peu compliqué à adapter (là il est adapté pile pour ce forum là) ^^'

    Alors, la liste de TOUS les badges du forum se change ici :
    Code:
    var badgesForum = {
        "rose01": {
            nom: 'Architecte maléfique',
            description: 'Je peux coder l\'esprit des gens',
            img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
        },
        "prim02": {
            nom: 'Architecte tout puissant',
            description: 'Je peux reprogrammer ton cerveau',
            img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
        },
        "violet03": {
            nom: 'Arnaqueur de première',
            description: 'Là tu me vois. Là tu me vois plus. Héhé.',
            img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
        },
        "harpe04": {
            nom: 'Denis Brogniart',
            description: 'YO YO YO YO YO',
            img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
        }
    };

    Le nombre de badge max à afficher par profil ici :
    Code:
    var SujetNombreBadges = 6; /* MAXIMUM a afficher par message dans un sujet */

    Et enfin ici il faut changer si tu changes le nom du champ qui contient les infos :
    Code:
    var SujetTextChamp = "Succès obtenus";

    :panic:

    Bon là c'es un peu embêtant pour modifier, je vais donc essayer de faire un petit système pour que tu remplisses un formulaire et PAF il te donne le code à copier / coller dans ton forum :)

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 10:38