Comment utiliser la roue

Ce guide documente les 14 actions visibles du tirage aléatoire Spin and Wheel — un outil dans le navigateur qui attribue à chaque entrée un arc égal sur une roue HTML5 Canvas, produisant une probabilité de sélection de 1/N. La page contient un démarrage rapide en trois étapes et une référence détaillée pour chaque bouton, bascule et raccourci de la roue principale.

Ouvrir la roue

Démarrage rapide

  1. Ajoutez vos entrées

    Tapez ou collez votre liste dans la zone Entrées — un élément par ligne. Noms, options, tâches, lots… tout ce que vous voulez tirer au sort. Aucune limite supérieure au-delà de la capacité localStorage du navigateur (environ 5 Mo par origine).

  2. Faites tourner la roue

    Cliquez sur le bouton Tourner sous la roue, ou directement sur le canvas de la roue. La rotation dure 3,5 secondes avec une courbe de décélération easeOutQuart et s'arrête sur une entrée aléatoire avec une probabilité de 1/N — chaque entrée a exactement la même chance, indépendamment de sa position sur la roue.

  3. Utilisez le résultat

    Le gagnant apparaît dans une fenêtre. Vous pouvez relancer, retirer le gagnant de la liste ou fermer la fenêtre — vos gagnants sont automatiquement enregistrés dans l'onglet Gagnants.

Toutes les actions disponibles

Édition des entrées

Zone des entrées

La zone Entrées contient la liste parmi laquelle la roue choisit — un élément par ligne, avec un compteur en direct du nombre de lignes non vides. Chaque entrée occupe un arc de 360°/N de la roue, donnant exactement une probabilité de sélection de 1/N, indépendamment de la longueur du texte ou de la position. Aucune limite supérieure au-delà de la capacité localStorage du navigateur (environ 5 Mo par origine).

Astuce : collez une colonne de tableur pour ajouter en masse de nombreuses entrées.

Mélanger

Réorganise aléatoirement toutes les entrées de la zone de texte. Pratique pour changer le voisinage des éléments sur la roue entre deux tours ou casser l'ordre d'une liste triée.

Mélanger ne change pas la probabilité — chaque entrée garde une chance de 1/N.

Trier

Classe les entrées par ordre alphabétique (A–Z). Utile pour ranger une longue liste collée ou regrouper des entrées similaires avant de partager la roue.

Comme le mélange, le tri ne change que l'affichage, pas l'équité.

Effacer

Supprime toutes les entrées en un clic. La roue devient vide et vous pouvez recommencer une liste.

Une liste effacée n'est pas récupérable — partagez l'URL avant pour en garder une copie.

Tirage et résultats

Tourner (lancer la roue)

Démarre l'animation de rotation, fixée à 3 500 ms avec une courbe de décélération easeOutQuart pour garantir une sensation cohérente et l'équité du résultat. Deux déclencheurs : le bouton Tourner sous la roue et un clic direct sur le canvas. La zone Entrées est désactivée pendant la rotation pour empêcher toute modification de la liste en cours, qui invaliderait le calcul de probabilité.

La durée d'animation est volontairement fixe pour qu'aucune entrée ne soit favorisée.

Onglet Gagnants

Chaque gagnant est ajouté automatiquement à l'onglet Gagnants. Changez d'onglet pour voir l'historique complet, avec un compteur affichant le nombre total de gagnants tirés.

Utilisez le bouton Effacer de l'onglet Gagnants pour réinitialiser l'historique sans toucher à vos entrées.

Retirer le gagnant / Utiliser comme entrées

Dans la fenêtre de gagnant, le bouton Retirer enlève l'entrée gagnante de la roue — parfait pour les tirages où chaque nom ne doit gagner qu'une fois. Le bouton Utiliser comme entrées (onglet Gagnants) replace tous les gagnants dans la liste de tirage.

Combinez les deux pour des tours d'élimination : tirer, retirer, recommencer.

Tour automatique

Après l'affichage d'un gagnant, la fenêtre peut déclencher automatiquement le tour suivant. Activez la case et réglez le compte à rebours en secondes. Le décompte repart à chaque nouveau gagnant.

Décompte par défaut : 30 secondes — ajustez-le au rythme de votre événement.

Lecture et affichage

Annonce vocale du gagnant

Lorsque l'option est activée, le nom du gagnant est lu à voix haute par la Web Speech API du navigateur (interface SpeechSynthesis, spécification W3C Community Group). La voix et la langue sont sélectionnées automatiquement pour correspondre à la langue active de l'interface, parmi les sept locales prises en charge. L'état de la bascule dans la fenêtre de gagnant est conservé dans localStorage sous voiceOver_.

La qualité et la langue de la voix dépendent des voix installées sur votre système.

Son de rotation

Un cliquetis se fait entendre pendant la rotation, comme une vraie roue de la fortune. Activez ou coupez-le grâce à l'icône haut-parleur dans l'en-tête — le réglage est mémorisé entre les sessions.

Coupez-le en classe ou au bureau quand l'environnement sonore compte.

Mode plein écran

Cliquer sur l'icône plein écran dans l'en-tête invoque la Fullscreen API du navigateur (Element.requestFullscreen()), étendant le canvas de la roue à tout le viewport. Pris en charge par tous les navigateurs evergreen (Chrome, Edge, Firefox, Safari 16.4+) — idéal pour les présentations, vidéoprojecteurs et partages d'écran en visio.

Appuyez sur Échap pour quitter le plein écran à tout moment.

Persistance et langue

Sauvegarde des listes (auto)

Les entrées sont enregistrées automatiquement dans le localStorage du navigateur (Web Storage API, recommandation W3C), avec une clé par langue : mainInput_en, mainInput_fr, etc. Le stockage survit à la fermeture de l'onglet, au redémarrage du navigateur et de la machine, jusqu'à effacement des données du site. La capacité par origine est généralement de 5 Mo, soit des dizaines de milliers d'entrées.

Sauvegarde par langue : passer en anglais vous donne une liste anglaise distincte.

Partage par lien

L'URL est mise à jour à chaque frappe via la History API (history.replaceState), encodant la liste d'entrées dans un paramètre de requête sécurisé. Partager l'adresse transfère l'état de la roue sans aucun appel serveur — le destinataire ouvre le lien et voit la même configuration sur son appareil. La taille de liste n'est limitée que par les longueurs d'URL des navigateurs (~2 000 caractères sur les anciens clients, ~32 000 sur Chromium moderne).

Sans compte, sans serveur — la liste vit directement dans l'URL.

Sélecteur de langue

La roue est disponible en 7 langues : anglais, français, espagnol, japonais, portugais, allemand et polonais. Choisissez la langue dans le pied de page — toute l'interface, y compris l'annonce vocale, change instantanément.

Chaque langue conserve sa propre liste sauvegardée, sans écraser les autres.

Essayer la roue maintenant