Afficheur à 3 chiffres avec tirage aléatoire

[Le.Gone]

Bonjour,

J'ai créé un forum réservé aux membres d'une petite équipe d'un jeu de différences. Il nous sert pour échanger en dehors du jeu. Pour pimenter un peu nos interactions, je propose des animations et j'ai un souci avec ma dernière idée...

Je cherche un afficheur de 3 chiffres (sur le principe de celui des chiffres et des lettres) pour un tirage aléatoire entre 0 et 999. J'ai besoin d'un bouton pour lancer le tirage qui doit être verrouillé à l’issue.

J'ai trouvé la solution avec [rand] mais ce n'est pas pratique si d'autres membres veulent lancer un tirage et le rendu visuel est un peu brut.

J'ai cherché ici et sur la toile des solutions mais hélas rien ne correspond. Je sais qu'il existe forcément plusieurs possibilités pour arriver au résultat (je programmais une 40aine d'années en arrière mais c'est du passé) et j'espère que vous pourrez me proposer la solution la plus simple à mettre en œuvre pour ce résultat.
bbcode, js, html, widget ???? Je n'ai pas d’apriori.

Luxe du luxe, si l'afficheur pouvait faire défiler les chiffres comme des rouleaux de machine à sous en ralentissant progressivement pour afficher les unités, les dizaines et enfin les centaines, ce serait le top !


Merci à ceux qui pourront éclairer ma lanterne qui faiblit avec les années....  

[Lixyr]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

[Toryudo]

Bonjour !
C'est faisable, avec un peu de CSS (pour le côté roulette) :

Code:

   #lanceur {
      overflow: hidden;
   }
   #lanceur div {
      float: left;

      width: 100px;
      height: 200px;

      border: 2px solid #000;
      box-shadow: inset 0px 8px 12px #000, inset 0px -8px 12px #000
   }
   #lanceur p {
      position: relative;

      display: flex;
      justify-content: center;
      align-items: center;

      width: 100px;
      height: 200px;

      margin: 0;
      font-size: 100px;
   }

Un peu de HTML (pour l'affichage) :

Code:

<div id="lanceur">
   <div id="centaines"><p>0</p></div>
   <div id="dizaines"><p>0</p></div>
   <div id="unites"><p>0</p></div>
</div>
<input id="lancement" type="button" value="Lancer !" />

Et un peu de Javascript (pour l'aléatoire et l'animation) :

Code:

   function getRandomInt(max) {
      return Math.floor(Math.random() * max);
   }
   
   $(function(){
      $('#lancement').click(function (){
         $('#lancement').prop("disabled", true);

         let unites = getRandomInt(10) + 30;
         let uniteEnCours = parseInt($('#unites p').text());
         $('#unites p').animate({'margin-top': '-' +  (200 * unites) + 'px'}, (100 * unites), function (){
            $('#unites p:not(:last)').remove();
         });
         for (let i = 0; i < unites; i++){
            $('#unites').append('<p>' + ((++uniteEnCours) % 10) + '</p>');
         }


         let dizaines = getRandomInt(10) + 50;
         let dizainesEnCours = parseInt($('#dizaines p').text());
         $('#dizaines p').animate({'margin-top': '-' + (200 * dizaines) + 'px'}, (100 * dizaines), function (){
            $('#dizaines p:not(:last)').remove();
         });
         for (let i = 0; i < dizaines; i++){
            $('#dizaines').append('<p>' + ((++dizainesEnCours) % 10) + '</p>');
         }


         let centaines = getRandomInt(10) + 70;
         let centainesEnCours = parseInt($('#centaines p').text());
         $('#centaines p').animate({'margin-top': '-' + (200 * centaines) + 'px'}, (100 * centaines), function (){
            $('#centaines p:not(:last)').remove();
            $('#lancement').prop("disabled", false);
         });
         for (let i = 0; i < centaines; i++){
            $('#centaines').append('<p>' + ((++centainesEnCours) % 10) + '</p>');
         }
      });
   });

Petite démo ici pour montrer le rendu :
https://undeustroisquatre.forumactif.com/h9-demo

Est-ce que ça correspondrait à ce que vous cherchez ?

[Le.Gone]

Bonsoir Toryudo,

C'est exactement ce que je cherche alors un grand merci.

Par contre, comment je fais pour insérer ce code dans un message de forum parce que j'ai compris que seul le bbcode est supporté sauf si on demande à ce que le js et l'html soient reconnus ?

Dans l'utilisation, je prépare un message, avec ce code, qui est exclusivement destiné à une personne pour lancer le tirage mais après ce message peut être consulté sans possibilité de changer le nombre sorti et je recommence l'opération quand c'est nécessaire.

Un autre point qui ne doit pas être très dur à résoudre, la possibilité de ne faire qu'un seul tirage (pour éviter les tricheurs qui n'aimeraient pas le tirage  )

Par contre, il me semblait que la grande famille des bidouilleurs de code se tutoie alors de te voir me vouvoyer me met un coup de vieux supplémentaire !  

EDIT : J'ai pu, ce matin, mettre les doigts dans ton code pour changer le look de l'afficheur, couleurs, police, etc... pour qu'il me plaise encore plus

Il ne me reste plus que le problème du bouton de lancement du tirage (hormis la mise en ligne). J'avais fait une image pour un bouton et j'ai pu remplacer ton bouton mais je n'ai pas les différents états.

Quelle est la meilleure solution ?
- Garder le bouton actuel en essayant de lui donner un look un peu plus cool avec du css et 3 états, basic, en passant dessus le fond change et en cliquant il se grise...
- ou partir sur 3 images, basic, en passant dessus le fond change et quand on clique le bouton disparaît (image "vide") donc on ne peut plus relancer de tirage...
Ce n'est pas dans les règles de l'art car je suppose qu'il suffit d'une boucle (à un tour) pour bloquer un nouveau tirage mais cette solution me fait sourire.
Dans les 2 cas, un petit bout de code serait le bienvenu

Je n'ai pas trouvé comment centrer le bouton sous l'afficheur malgré de nombreux essais mais je suppose que ce doit être tout simple, suffit de savoir comment faire...

[Toryudo]

Ah !
Du coup, il va falloir des changements et une concession dans le fonctionnement : autant on peut faire en sorte de "bloquer" le résultat, autant les gens pourront (et devront) re-déclencher la roulette pour revoir le résultat à chaque fois qu'ils chargeront la page. En fait, on ne peut peut pas enregistrer l'état "roulette lancée", parce qu'il faudrait alors pouvoir éditer le message qui l'a postée... ce qui n'est pas possible pour quelqu'un d'autre qu'un modérateur de section ou un admin !
(et qui serait encore plus compliqué à mettre en place de toute façon)

Je propose la chose suivante :

1. Il faut commencer par activer le HTML sur le forum, qu'il soit disponible au moins pour la personne qui poste la loterie (Admin, modo) : tuto activation HTML https://forum.forumactif.com/t285442-activation-du-html
   
   
2. Ajouter un peu de CSS dans la feuille de CSS personnalisée, pour le rendu visuel : tuto https://forum.forumactif.com/t404669-la-feuille-de-style-css
   
   

   Code:

   .loterie {
  display: none;
}
.lanceur {
  overflow: hidden;
}
.lanceur div {
  float: left;

  width: 100px;
  height: 200px;

  border: 2px solid #000;
  box-shadow: inset 0px 8px 12px #000, inset 0px -8px 12px #000
}
.lanceur p {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100px;
  height: 200px;

  margin: 0;
  font-size: 100px;
}

   
   
3. Ajouter un JavaScript personnalisé pour mettre en place la roulette : tuto https://forum.forumactif.com/t311791-gestion-des-codes-javascript
   Celui-ci sera à placer "Sur les sujets".
   
   

   Code:

   
$(function(){
   $('.loterie').each(function( index ) {
      $(this).after('<div class="loterierep" data-rand="' + $(this).find('dd').text() + '"><div class="lanceur"><div class="centaines"><p>0</p></div><div class="dizaines"><p>0</p></div><div class="unites"><p>0</p></div></div><input class="lancement" type="button" value="Lancer !" /></div>');
   });

   $('.lancement').click(function (){
      let hasard = $(this).parent().data('rand');
      hasard = hasard.toString().padStart(3, '0');

      let unites = parseInt(hasard[2]) + 30;
      console.log(unites);
      let uniteEnCours = parseInt($(this).parent().find('.unites p').text());
      $(this).parent().find('.unites p').animate({'margin-top': '-' +  (200 * unites) + 'px'}, (100 * unites), function (){
         $(this).parent().find('p:not(:last)').remove();
      });
      for (let i = 0; i < unites; i++){
         $(this).parent().find('.unites').append('<p>' + ((++uniteEnCours) % 10) + '</p>');
      }

      let dizaines = parseInt(hasard[1]) + 50;
      console.log(dizaines);
      let dizainesEnCours = parseInt($(this).parent().find('.dizaines p').text());
      $(this).parent().find('.dizaines p').animate({'margin-top': '-' + (200 * dizaines) + 'px'}, (100 * dizaines), function (){
         $(this).parent().find('p:not(:last)').remove();
      });
      for (let i = 0; i < dizaines; i++){
         $(this).parent().find('.dizaines').append('<p>' + ((++dizainesEnCours) % 10) + '</p>');
      }

      let centaines = parseInt(hasard[0]) + 70;
      console.log(centaines);
      let centainesEnCours = parseInt($(this).parent().find('.centaines p').text());
      $(this).parent().find('.centaines p').animate({'margin-top': '-' + (200 * centaines) + 'px'}, (100 * centaines), function (){
         $(this).parent().find('p:not(:last)').remove();
      });
      for (let i = 0; i < centaines; i++){
         $(this).parent().find('.centaines').append('<p>' + ((++centainesEnCours) % 10) + '</p>');
      }
      
      $(this).remove();
   });
});

   
   
4. Et maintenant, pour ajouter une loterie dans un message, il n'y a plus qu'à ajouter ce code :
   

   Code:

   <div class="loterie">[rand]000,999[/rand]</div>

J'ai fait en sorte qu'il puisse y en avoir plusieurs par page et par message si besoin.
Le résultat de la loterie est décidé au moment où le post est envoyé et il est bloqué ensuite. La roulette sert alors à le révéler ! (mais je le répète, il faut la relancer à chaque fois pour voir le résultat, on ne peut pas la laisser en état "déjà lancée")

[Le.Gone]

Aie !

Ça ne va pas le faire parce que pour les utilisateurs, s'ils relancent le tirage pour faire apparaître le résultat, ils auront l'impression de lancer un nouveau tirage et je risque d'avoir beaucoup de mal à leurs expliquer... La seule chose qu'ils voudront voir c'est le résultat et ils se fichent du coté technique.  

Avec la fonction [rand] j'avais ce résultat figé après le lancement du tirage et chacun peut vérifier le tirage en consultant le message.
Alors est-ce que la solution ne serait pas d'utiliser la fonction [rand] entre 0 et 999 pour déterminer le tirage ? Et après faire un affichage des chiffres dans un afficheur un peu sympa (j'ai fait un edit de mon dernier message)  Comme le chiffre tiré ne pourra pas changer, on aura toujours le même affichage et si on n'a pas le coté roulette bah tant pis.

Il faudrait que ceux qui n'ont pas lancé le tirage puissent juste consulter le résultat sans rien faire.

Bon ce n'est pas gagné cette histoire mais merci pour ton coup de main... Cela me rappelle beaucoup de souvenirs avec des moutons à 5 pattes comme celui que je propose aujourd'hui

Dans l'absolu, je ne veux pas faire une usine à gaz alors s'il n'y a pas de solution "simple" on se contentera de ce qu'on a actuellement.

"Quand on n'a pas ce que l'on aime, faut aimer ce que l'on a !" Gainsbourg dans "Un violon, un jambon"... Je viens de découvrir que c'est une citation en fait de Corneille ou du comte Roger de Bussy-Rabutin


EDIT : Bon je viens de voir comment activer l'html et il faut que les utilisateurs l'activent aussi donc c'est une galère alors nouvelle solution qui doit être assez simple à mettre en œuvre...

On utilise [rand] pour avoir le nombre entre 0 et 999 et on le décompose par centaine, dizaine et unité. et je fais 10 images des chiffres de 0 à 9 et on demande l'affichage de telle ou telle image en fonction du chiffre sorti.  Là ce n'est plus que l'affichage de 3 images côte à côte.
Seule une personne pourra lancer le tirage et après il faut utiliser le nombre figé pour l'affichage des 3 images. Sur ce principe, avant le lancement on devrait avoir un affichage 3 fois de l'image 0 si la valeur de [rand] est 000 avant lancement...

EDIT du 29.08 : Si on part sur l'idée des images figées pour éviter l'activation du js et html, j'ai peut-être la solution pour l'animation des rouleaux : des gifs animés !
Il me suffit de faire 3 x 10 images de 0 à 9 et de les assembler dans des gifs animés en fonction de leur rang (centaine, dizaine, unité) pour la vitesse de rotation et de la dernière image à afficher qui sera le chiffre désiré. C'est une solution un peu hors des clous mais je pense que ça marchera.

Un coup de pouce pour l'affichage de ces images sera le bienvenu...

[Le.Gone]

Personne pour m'aider à afficher les images ?

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Le.Gone]

Up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.