Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Générateur de battle Empty Générateur de battle

Lun 17 Juin 2019 - 10:20

Du piment dans les animations

Générateur de battle

Hello hello Smile

Lorsque l'on met en place un concours sur son forum, quand arrive l’heure des votes, on se retrouve avec un sondage tout simple où tous les membres s’affrontent. Bien, pas bien ? Ici, chacun a son avis. Moi, ce que je te propose dans ce tutoriel, c’est de t'expliquer comment mettre en place des battles.

Idea Pré-requis :
• Il faut avoir accès au panneau d’administration,
• Il faut connaître un minimum de choses en html & CSS,
• Il ne faut pas avoir peur du js.

Le principe

Concrètement, le principe sera simple. Tu as ton concours “classique”. Mais, au moment des votes, ce n’est pas un “sondage” que tu vas mettre en place mais une battle. Cette battle sera gérée dans une page HTML. A chaque fois que celle-ci sera générée, 2 participations seront tirées au sort et le membre devra choisir laquelle des 2 il préfère.

Avec ce principe, chaque participation a la chance d’être mise en avant et vue. De plus, tu peux permettre à tes membres de voter une fois par jour et tu auras, en toute logique, beaucoup plus de votes qu’en temps normal.

Un petit exemple ?

Mais oui, ça sera beaucoup plus parlant.

J’ai donc mis en place tout ça sur mon forum de test : clic . Logiquement, tu peux tout voir en tant qu'invité, mais pour voter, il faudra te connecter avec ce compte :
• Login : Tambouille
• Mot de passe : mdpTambouille2019

J’ai donc mis en place :
• le “concours ” (pour que tu puisses voir les participants) ;
• le sondage (ici, j’ai décidé de faire en sorte que les votes arrivent directement ici, mais tu peux sans souci les faire arriver dans un autre topic (il faut juste veiller à renseigner les bonnes permissions pour la zone)).

Voici un autre exemple, idéal pour les votes des miss et mister - [voir l'exemple ].

La page HTML

On y va donc Smile

Voici la page html “type”.
Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Battle</title>
    
    <style>
        
    .d-flex{
        align-items: stretch;
        display: flex;
        justify-content: space-between;
        margin: auto;
        width: 600px;
    }
        
    .battle{
        background: #f5e5c7;
        border: 2px solid #dbc8a4;
        border-radius: 20px;
        box-sizing: border-box;
        color: #444;
        padding: 10px;
        text-align: center;
        width: 48.5%;
    }

    .battle .titre{
        color: #444;
        margin-bottom: 10px;
        text-shadow: 1px 1px #dbc8a4, -1px -1px #dbc8a4, -1px 1px #dbc8a4, 1px -1px #dbc8a4;        
    }
        
    .battle .participation iframe{
        height: auto;
        max-height: 400px;
        max-width: 100%;
        width: auto;
    }
        
    .battle .btn input{
        background: #f5e5c7;
        border: 2px solid #dbc8a4;
        border-radius: 20px;
        color: #444;
        cursor: pointer;
        font-weight: bold;
        padding: 10px;
    }
        
    .battle .btn input:hover{
        background: #dbc8a4;
        border: 2px solid #f5e5c7;
        color: #f5e5c7;
    }
        
    </style>
    
    <base target="_parent">
</head>
<body>
    
    <div class="d-flex">
        <div class="battle" data-info="participation1">
            <div class="titre">La participation de <b class="pseudo"></b></div>
            <div class="participation"></div>
            <div class="btn"></div>
        </div>
        <div class="battle" data-info="participation2">
            <div class="titre">La participation de <b class="pseudo"></b></div>
            <div class="participation"></div>
            <div class="btn"></div>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>

    ; (function () {
        
        // On définit chaque partipant/participation
        // On stocke ça dans un tableau
        var listeParticipation = [
            {
                pseudoParticipant: 'Tambouille',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/dPRRgsBz1Qs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            },
            {
                pseudoParticipant: 'Pêpeche',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/iF7zD7ERLjg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            },
            {
                pseudoParticipant: 'Miettes',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/7V9z4ESWh1E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            }
        ];
        
        // On compte le nombre de participations en récupérant la longueur du tableau précédent
        var nbParticipation = listeParticipation.length;    
        
        // On tire au sort un premier nombre
        var participation1 = tirageNbRandom(nbParticipation);
        
        // On tire au sort une seconde participation et on vérifie qu'il ne s'agit pas de la même que précédemment
        var participation2 = tirageNbRandom(nbParticipation, true);

        // On met à jour le html avec les bonnes infos
        majHTML('participation1', listeParticipation, participation1, participation2);
        majHTML('participation2', listeParticipation, participation2, participation1);
        
        function tirageNbRandom(nbTotal, verifExistance){
            // On tire au sort
            var nbHasard = Math.floor( nbTotal * Math.random()) + 1;
            
            // Si c'est la seconde participation
            if(verifExistance){
                // On vérifie si la participation n'est pas la même que la première
                if(nbHasard == participation1){
                    // On retire au sort
                    nbHasard = tirageNbRandom(nbTotal, true);
                }              
            }
            
            // On renvoie le nombre tiré au sort
            return nbHasard;
        }
        
        function majHTML(eltHtml, listeParticipation, participation, concurrent){
            // On retire 1 au nombre tiré au hasard pour pouvoir le trouver dans le tableau des participations
            var participation = participation - 1,
                concurrent = concurrent - 1;
            
            // On récupére les infos du participant & du concurrent
            var infoParticipation= listeParticipation[participation],
                infoConcurrent = listeParticipation[concurrent];
            
            // On stocke le nom de la div à mettre à jour
            var $cible = $('.battle[data-info="'+ eltHtml +'"]');
            
            // On ajoute le pseudo du membre dans l'élement HTML qui a la classe "pseudo"
            // qui se trouve dans un élement qui a la classe "titre"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.titre .pseudo').html(infoParticipation.pseudoParticipant);
            
            // On ajoute la video dans l'élément HTML qui a la classe "participation"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.participation').html(infoParticipation.participation);    
            
            // On ajoute le bouton de vote en précisant l'id du topic dans lequel envoyer la réponse
            var urlForum = 'http://miettes.lebonforum.com',
                idTopic = '80';
            
            // On génère le code du bouton
            var codeBoutonVote =
                '<form action="'+ urlForum +'/posting.forum" method="post" name="post">'+
                    '<input type="hidden" size="18" class="post" name="message" maxlength="12" value="[b]'+ infoParticipation.pseudoParticipant +'[/b] vs. '+ infoConcurrent.pseudoParticipant +'"/>'+
                    '<input type="hidden" name="t" value="'+ idTopic +'"/>'+
                    '<input type="hidden" name="mode" value="reply" /><br>'+
                    '<input type="submit" name="post" class="mainoption" value="Je vote !" />'+
                '</form>';
            
            // On met le code du bouton dans la div qui a la classe "btn"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.btn').append(codeBoutonVote);

        }

        
    })();

    </script>
    
</body>
</html>

Je ne m’attarderai pas sur la CSS, ni même sur le HTML. Le javascript est, quand à lui, commenté et c’est plutôt ici que je vais m’attarder pour t'aider dans tes modifications Smile

Voici les élements que tu dois modifier Smile (pour le reste, si tu ne t’y connais pas en javascript, je te conseille de ne pas y toucher, tout est commenté pour que tu puisses comprendre à quoi sert chaque ligne).

Les participants

Ici, chaque participation a été mise dans un tableau javascript :
Code:
var listeParticipation = [
            {
                pseudoParticipant: 'Tambouille',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/dPRRgsBz1Qs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            },
            {
                pseudoParticipant: 'Pêpeche',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/iF7zD7ERLjg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            },
            {
                pseudoParticipant: 'Miettes',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/7V9z4ESWh1E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            }
        ];
       
Tu peux ajouter d’autres informations si tu le désires, il te suffit de l’ajouter dans les accolades comme c’est fait pour le pseudo et la participation elle-même, par exemple :
Code:
{
                pseudoParticipant: 'Miettes',
                avatarParticipant: 'https://2img.net/u/4014/30/77/56/avatars/1-74.png',
                participation: '<iframe width="560" height="315" src="https://www.youtube.com/embed/7V9z4ESWh1E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            }

Tu peux ajouter autant de participants que tu le désires Smile

Mise à jour du HTML

Ici, j’ai créée une fonction qui fait tout le travail
Code:
function majHTML(eltHtml, listeParticipation, participation, concurrent){
            // On retire 1 au nombre tiré au hasard pour pouvoir le trouver dans le tableau des participations
            var participation = participation - 1,
                concurrent = concurrent - 1;
            
            // On récupére les infos du participant & du concurrent
            var infoParticipation= listeParticipation[participation],
                infoConcurrent = listeParticipation[concurrent];
            
            // On stocke le nom de la div à mettre à jour
            var $cible = $('.battle[data-info="'+ eltHtml +'"]');
            
            // On ajoute le pseudo du membre dans l'élement HTML qui a la classe "pseudo"
            // qui se trouve dans un élement qui a la classe "titre"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.titre .pseudo').html(infoParticipation.pseudoParticipant);
            
            // On ajoute la video dans l'élément HTML qui a la classe "participation"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.participation').html(infoParticipation.participation);    
            
            // On ajoute le bouton de vote en précisant l'id du topic dans lequel envoyer la réponse
            var urlForum = 'http://miettes.lebonforum.com',
                idTopic = '80';
            
            // On génère le code du bouton
            var codeBoutonVote =
                '<form action="'+ urlForum +'/posting.forum" method="post" name="post">'+
                    '<input type="hidden" size="18" class="post" name="message" maxlength="12" value="[b]'+ infoParticipation.pseudoParticipant +'[/b] vs. '+ infoConcurrent.pseudoParticipant +'"/>'+
                    '<input type="hidden" name="t" value="'+ idTopic +'"/>'+
                    '<input type="hidden" name="mode" value="reply" /><br>'+
                    '<input type="submit" name="post" class="mainoption" value="Je vote !" />'+
                '</form>';
            
            // On met le code du bouton dans la div qui a la classe "btn"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.btn').append(codeBoutonVote);

        }

Les éléments que tu as à changer sont :
• les classes des éléments à mettre à jour s’ils sont différents des miens
Code:
var $cible = $('.battle[data-info="'+ eltHtml +'"]');

$cible.find('.titre .pseudo').html(infoParticipation.pseudoParticipant);

$cible.find('.participation').html(infoParticipation.participation);  
 
$cible.find('.btn').append(codeBoutonVote);

• le lien de ton forum
Code:
urlForum = 'http://miettes.lebonforum.com'

• l’id du topic qui doit réceptionner les votes
Code:
idTopic = '80'
Idea Pour trouver cet id, il te suffit de regarder l’url de ton sujet :
Code:
http://miettes.lebonforum.com/t80-tuto-battle-les-votes
l’id se trouve juste après /t, soit ici le 80.

Le code de l'autre exemple

Et pour que tu puisses voir qu'on peut changer un peu ce qu'on veut, voici le code de l'autre exemple sur le battle entre 2 membres :
Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Battle</title>
    
    <style>
        
    .d-flex{
        align-items: stretch;
        display: flex;
        justify-content: space-between;
        margin: auto;
        width: 600px;
    }
        
    .battle{
        background: #f5e5c7;
        border: 2px solid #dbc8a4;
        border-radius: 20px;
        box-sizing: border-box;
        color: #444;
        padding: 10px;
        text-align: center;
        width: 48.5%;
    }

    .battle .titre{
        color: #444;
        margin-bottom: 10px;
        text-shadow: 1px 1px #dbc8a4, -1px -1px #dbc8a4, -1px 1px #dbc8a4, 1px -1px #dbc8a4;        
    }
        
    .battle .avatar img{
        height: auto;
        max-height: 300px;
        max-width: 150px;
        width: auto;
    }
        
    .battle .btn input{
        background: #f5e5c7;
        border: 2px solid #dbc8a4;
        border-radius: 20px;
        color: #444;
        cursor: pointer;
        font-weight: bold;
        padding: 10px;
    }
        
    .battle .btn input:hover{
        background: #dbc8a4;
        border: 2px solid #f5e5c7;
        color: #f5e5c7;
    }
        
    </style>
    
    <base target="_parent">
</head>
<body>
    
    <div class="d-flex">
        <div class="battle" data-info="participation1">
            <div class="titre"><b class="pseudo"></b></div>
            <div class="avatar"></div>
            <div class="btn"></div>
        </div>
        <div class="battle" data-info="participation2">
            <div class="titre"><b class="pseudo"></b></div>
            <div class="avatar"></div>
            <div class="btn"></div>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>

    ; (function () {
        
        // On définit chaque partipant/participation
        // On stocke ça dans un tableau
        var listeParticipation = [
            {
                pseudo: 'Tambouille',
                avatar: 'https://2img.net/r/hpimg11/pics/668439MiettesAvatarcopie.png'
            },
            {
                pseudo: 'Pêpêche',
                avatar: 'http://pvereecken.fr/tambouille/f-ef-html/av-pepeche.png'
            },
            {
                pseudo: 'Miettes',
                avatar: 'https://2img.net/u/4014/30/77/56/avatars/1-74.png'
            },
            {
                pseudo: 'Mäven',
                avatar: 'https://2img.net/u/4014/30/77/56/avatars/2-65.jpg'
            },
            {
                pseudo: 'Visiteur',
                avatar: 'http://pvereecken.fr/tambouille/invite.png'
            }
        ];
        
        // On compte le nombre de participations en récupérant la longueur du tableau précédent
        var nbParticipation = listeParticipation.length;    
        
        // On tire au sort un premier nombre
        var participation1 = tirageNbRandom(nbParticipation);
        
        // On tire au sort une seconde participation et on vérifie qu'il ne s'agit pas de la même que précédemment
        var participation2 = tirageNbRandom(nbParticipation, true);

        // On met à jour le html avec les bonnes infos
        majHTML('participation1', listeParticipation, participation1, participation2);
        majHTML('participation2', listeParticipation, participation2, participation1);
        
        function tirageNbRandom(nbTotal, verifExistance){
            // On tire au sort
            var nbHasard = Math.floor( nbTotal * Math.random()) + 1;
            
            // Si c'est la seconde participation
            if(verifExistance){
                // On vérifie si la participation n'est pas la même que la première
                if(nbHasard == participation1){
                    // On retire au sort
                    nbHasard = tirageNbRandom(nbTotal, true);
                }              
            }
            
            // On renvoie le nombre tiré au sort
            return nbHasard;
        }
        
        function majHTML(eltHtml, listeParticipation, participation, concurrent){
            // On retire 1 au nombre tiré au hasard pour pouvoir le trouver dans le tableau des participations
            var participation = participation - 1,
                concurrent = concurrent - 1;
            
            // On récupére les infos du participant & du concurrent
            var infoParticipation= listeParticipation[participation],
                infoConcurrent = listeParticipation[concurrent];
            
            // On stocke le nom de la div à mettre à jour
            var $cible = $('.battle[data-info="'+ eltHtml +'"]');
            
            // On ajoute le pseudo du membre dans l'élement HTML qui a la classe "pseudo"
            // qui se trouve dans un élement qui a la classe "titre"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.titre .pseudo').html(infoParticipation.pseudo);
            
            // On ajoute l'avatar qui se trouve dans la div qui a la classe "avatar"
            // qui se trouve dans la div qu'on veut mettre à jour
            var avatar = '<img src="'+ infoParticipation.avatar +'" alt="'+ infoParticipation.pseudo +'" />';
            $cible.find('.avatar').html(avatar);    
            
            // On ajoute le bouton de vote en précisant l'id du topic dans lequel envoyer la réponse
            var urlForum = 'http://miettes.lebonforum.com',
                idTopic = "73";
            
            var contenuMsg = '[center][size=16][b][u]Battle "Miss & Mister"[/u][/b][/size][/center]'+
                    '[b]'+ infoParticipation.pseudo +'[/b] vs. '+ infoConcurrent.pseudo +'';
            
            // On génère le code du bouton
            var codeBoutonVote =
                '<form action="'+ urlForum +'/posting.forum" method="post" name="post">'+
                    '<input type="hidden" size="18" class="post" name="message" maxlength="12" value="'+ contenuMsg +'"/>'+
                    '<input type="hidden" name="t" value="'+ idTopic +'"/>'+
                    '<input type="hidden" name="mode" value="reply" /><br>'+
                    '<input type="submit" name="post" class="mainoption" value="Je vote !" />'+
                '</form>';
            
            // On met le code du bouton dans la div qui a la classe "btn"
            // qui se trouve dans la div qu'on veut mettre à jour
            $cible.find('.btn').append(codeBoutonVote);

        }

        
    })();

    </script>
    
</body>
</html>

Idea Si tu as plusieurs concours en même temps qui utilisent ce principe, il te faut 1 page HTML par concours Smile

Et c’est terminé Smile




Tu peux à présent pimenter tes concours en organisant des “battles” Smile

Si tu as un souci avec ce tutoriel, n’hésite surtout pas à nous en parler ici ou sur le discord .


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