Retour au hub tutoriels

Dock flottant : 5 widgets unifiés

Soundboard, notes, chat, dés, tutoriel. Tout sous un seul bouton.
6 étapes pour exploiter les outils MJ et joueurs.

Sommaire
1. Le FloatingDock unifié2. Soundboard MJ3. Notes MJ4. Chat campagne5. Lanceur de dés6. Accessibilité et performance
Étape 1

Le FloatingDock unifié

Le FloatingDock est l'ensemble des outils flottants en bas à droite de l'écran. Un seul bouton rond gradient violet/cyan (icône PocketKnife) toujours visible.

Click → expansion verticale animée des sous-icônes (200ms par item, étagé). 5 widgets :

  • Tutoriel : ouvre /tutoriel dans nouvel onglet (MJ + joueurs).
  • Soundboard : musique ambiance sync (MJ uniquement).
  • Notes MJ : journal séance (MJ uniquement).
  • Chat : messages temps réel (tous, avec badge unread).
  • Dés : lanceur tous dés + overlay anim + historique 10 (tous).
Comportement trigger
Click bouton principal :
- Aucun widget actif → ouvre/ferme le menu d'expansion.
- Widget actif → ferme directement le widget (raccourci).
- Re-click avec menu déplié → replie le menu.
Icône change : PocketKnife (replié) → X (déplié ou widget actif).
Étape 2

Soundboard MJ

Click sous-icône Soundboard (Music violet). Panneau s'ouvre :

  • Bibliothèque : tes pistes uploadées (MP3, OGG, WAV, M4A — max 15 Mo par fichier).
  • + Upload : ajoute une piste depuis ton disque. Stockage filesystem côté serveur.
  • Transport : ▶ Play / ⏸ Pause / ⏭ Suivant. Volume + Loop ON/OFF.
  • Sync : les joueurs entendent la même piste, au même volume, au même moment via le BackgroundMusicPlayer.
Ambiances
Forêt de jour, Crypte, Combat épique, Tavern. Prépare ta bibliothèque avant la séance, switche en 1 clic pendant le RP.
Volume débile
Les joueurs n'ont pas de contrôle volume (uniquement leur volume browser). Sois raisonnable : 50-60% max, montez progressivement pendant un climax.
Sources légales
Tabletop Audio (gratuit, royalty-free pour RPG), YouTube Audio Library, Pixabay, ou tes propres compositions. Évite la musique commerciale (DMCA + serveur).
Étape 3

Notes MJ

Click sous-icône Notes (NotebookPen cyan). Panneau journal de séance :

  • + Nouvelle séance : crée une entrée datée.
  • Édition : titre + date + contenu Markdown.
  • Auto-save : toutes les 800ms d'inactivité.
  • Liste : sessions précédentes triées par date.
  • Suppression : icône Trash avec confirmation.
Sync avec DMView
Onglet Outils → Notes MJ dans DMView affiche les mêmes données. Modifier ici se reflète là-bas, et vice-versa (store partagé narrative_sessions).
Format conseillé
1 séance = 1 entrée. Titre : « Séance 7 - L'intrusion à la tour ». Contenu : événements clés, décisions joueurs, PNJ rencontrés, butin distribué, prochaines actions à préparer.
Étape 4

Chat campagne

Click sous-icône Chat. Disponible pour MJ + joueurs.

  • Liste messages : auteur, contenu, timestamp.
  • Auteur joueur : nom du PJ claim (et non l'email). Auteur MJ : badge « MJ » avec icône crown.
  • Textarea : Enter pour envoyer, Shift+Enter pour nouvelle ligne. Limite 600 caractères.
  • Rate limit : 30 messages / minute / utilisateur (anti-spam).
  • MJ timeout : clic droit sur un message joueur → choisir durée timeout (5min, 10min, 30min, 1h, indéfini). Empêche le joueur d'envoyer.
Badge unread
Lorsque le chat est replié et qu'un nouveau message arrive (pas de toi), un badge rouge avec compteur apparaît sur :
- La sous-icône Chat dans le menu déplié.
- Le bouton principal du dock (gradient).
Le badge se vide quand tu ouvres le chat (marqué lu via localStorage dnd-chat-last-read-{campaignId}).
Persistance unread
Le statut « lu / non lu » survit au refresh page (localStorage). Tu ne reviens pas avec un faux compteur après rechargement.
Étape 5

Lanceur de dés

Click sous-icône Dés. Grille de 7 dés standards :

  • d4, d6, d8, d10, d12, d20, d100 : un click = roll.
  • Overlay fullscreen : score gigantesque centré (180px), couleur du dé, animation scale + rotation + glow (1800ms).
  • Critique ! : si score = max du dé.
  • Échec ! : si score = 1.
  • Historique : 10 derniers lancers persistés (localStorage dnd-dice-history), avec markers MAX / MIN colorés.
  • Vider : icône Trash pour reset l'historique.
Utile pour tout
Roll quick pour tests de compétence, jets de table aléatoire, percent rolls (d100), choix entre options (d6). Tous les utilisateurs ont accès (joueurs + MJ).
Annoncé en combat
Pendant un combat actif, chaque jet du widget est automatiquement annoncé dans le journal de combat, visible par toute la table. Hors combat, le jet reste local (historique seulement).
Étape 6

Accessibilité et performance

Le dock respecte les bonnes pratiques :

  • Reduced motion : si prefers-reduced-motion: reduce, animations désactivées (transitions instantanées).
  • Keyboard : Tab pour naviguer, Enter pour activer.
  • ARIA : labels descriptifs, état expanded annoncé aux lecteurs d'écran.
  • Click outside : ferme l'expansion (UX standard).
  • Position fixe : ne bouge jamais quand tu scrolles. Toujours accessible.
Z-index
Le dock est en z-80. Au-dessus de tout le contenu de la page mais en-dessous des modales (z-1000+).

Tes outils sont toujours à portée de clic.

Pour aller plus loin : fiche PJ, combat.

Retour au hub