- PêpêcheMascotte
- Messages : 4428
Générateur de battle
Lun 17 Juin 2019 - 10:20
Du piment dans les animations
Générateur de battle
Hello hello
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.
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.
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.
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 :
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].
On y va donc
Voici la page html “type”.
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
Voici les élements que tu dois modifier (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).
Ici, chaque participation a été mise dans un tableau javascript :
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 :
Tu peux ajouter autant de participants que tu le désires
Ici, j’ai créée une fonction qui fait tout le travail
Les éléments que tu as à changer sont :
• les classes des éléments à mettre à jour s’ils sont différents des miens
• le lien de ton forum
• l’id du topic qui doit réceptionner les votes
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 :
Si tu as plusieurs concours en même temps qui utilisent ce principe, il te faut 1 page HTML par concours
Et c’est terminé
Tu peux à présent pimenter tes concours en organisant des “battles”
Si tu as un souci avec ce tutoriel, n’hésite surtout pas à nous en parler ici ou sur le discord.
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.
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
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
Voici les élements que tu dois modifier (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
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'
- Code:
http://miettes.lebonforum.com/t80-tuto-battle-les-votes
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>
Si tu as plusieurs concours en même temps qui utilisent ce principe, il te faut 1 page HTML par concours
Et c’est terminé
Tu peux à présent pimenter tes concours en organisant des “battles”
Si tu as un souci avec ce tutoriel, n’hésite surtout pas à nous en parler ici ou sur le discord.
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
|
|