Rojin & Fuziah — Notifications Live & Vidéos

Lives Twitch, nouvelles vidéos, annonces, badges de fan, mini-jeu en ligne et ton année avec Rojin & Fuziah.

# Rojin & Fuziah — Notifications Live & Vidéos Extension Chrome pour la communauté de Rojin & Fuziah : notifications des lives Twitch et des nouvelles vidéos YouTube (Valorant, Gaming, React), annonces, badges de fan et récap de l'année. ## Fonctionnalités ### Navigation Une barre d'onglets en bas du popup (🏠 Accueil · 🏆 Fan zone · ⚙️ Réglages), avec une pastille qui glisse sous l'onglet actif. Le popup est animé : vagues qui ondulent, entrée des blocs en cascade, survols, chiffres qui défilent, cartes squelette pendant le chargement. Toutes les animations se coupent si le système demande de réduire les animations. ### Accueil - 🔗 **Partager** une vidéo ou le live en cours. Le bouton est sur la vidéo mise en avant, sur chaque chaîne et sur le live. Il permet de copier le lien, de copier un message tout prêt pour Discord, ou d'ouvrir X, WhatsApp et Telegram avec le message prérempli (le fan valide lui-même). Il propose aussi le menu de partage du système s'il est disponible. Sur YouTube, le bandeau R&F a un bouton « 🔗 Partager » qui copie le message avec un lien court. - 🟢 **Compteur de la commu** (en haut à droite) : « 1,2 k en ligne · 5,7 k hors ligne ». Chaque installation envoie un signal anonyme toutes les 5 min. « En ligne » = Chrome ouvert ces 10 dernières minutes ; le total = installations actives ces 30 derniers jours. Le viewer peut refuser d'être compté (Réglages → Vie privée). Le compteur passe par le même serveur Supabase que le classement. - 🔴 **Live Twitch** : notification au lancement, bouton « Rejoindre le live », nombre de spectateurs en temps réel (rafraîchi toutes les 15 s) et durée du live - 🎬 **Nouvelles vidéos** : notification à chaque sortie, vues et likes, vidéo pas encore vue mise en avant, liste « À rattraper » - 📣 **Annonces** de Rojin & Fuziah (voir plus bas), avec une notification si vous le souhaitez - 📅 **Prochain live** avec compte à rebours et **rappel 15 min avant** - 🎯 **Objectifs de la commu** : « Plus que ~1 000 abonnés avant les 125 k ! », avec une barre de progression par chaîne - 💬 **Discord en direct** : « 8 597 membres · 2 694 en ligne » - 🎃 **Thème Halloween** automatique du 20 octobre au 2 novembre (chauves-souris, citrouilles, palette orange et noir) - 💣 **Mini-jeu « Ne fais pas sauter le Spike »** : un encadré animé façon Valorant en haut de l'accueil (`game-card.js`) ouvre le jeu dans un onglet (`qte/index.html`). Il affiche le record et la Radianite du joueur, et un badge 🎁 quand une récompense l'attend. ### Mini-jeu « Ne fais pas sauter le Spike » (dossier `qte/`) - **Principe** : taper des combos de flèches (ZQSD ou flèches, au clavier ; au doigt ou à la souris sur les touches à l'écran) avant que le cercle autour du Spike se vide. Manche *n* = *n* + 2 à *n* + 3 combos, de 3 touches au début puis une de plus toutes les 2 manches (8 au maximum). Une erreur fait recommencer le combo ; un combo rapide (« Éclair », « Rapide ») rend un peu de temps. Le temps restant n'est gardé qu'en partie d'une manche à l'autre, et le chrono accélère à partir de la manche 4. Rarement, un **combo doré** (toutes les touches identiques) rend plus de temps et de Radianite. Réglages en haut de `qte/game.js`. - **Touches** : les flèches marchent toujours ; les 4 autres touches (ZQSD par défaut, suivant la disposition du clavier) se changent dans les réglages du jeu (bouton en haut à droite). Une touche déjà prise est échangée ; Espace, Entrée, Échap et Tab sont réservées (`qte/keys.js`). - **Rangs du Duel 1v1** (comme le compétitif Valorant, icônes officielles dans `qte/ranks/`) : Fer 1 → Immortel 3 puis Radiant. 5 duels de placement, puis environ +20 RR par victoire et −18 par défaite, ajustés par un MMR caché (cote Elo) : un joueur plus fort que son rang monte vite. 100 RR = division suivante ; sous 0 RR, division du dessous avec 75 RR ; Immortel 3 à 100 RR = Radiant. Recherche d'adversaire de rang proche (±2 divisions, +1 toutes les 8 s d'attente). Les RR sont calculés par le serveur (`qte_duel_*` dans `supabase/setup.sql`) quand les deux joueurs annoncent le même résultat ; celui qui quitte perd. **Pas de RR en partie privée.** Les rangs ne s'activent qu'une fois la partie « duels classés » de `setup.sql` lancée dans Supabase. - **Classements** : Solo (les 3 premiers sont Radiant, puis 2 places par division : 4-5 Immortel 3, 6-7 Immortel 2… jusqu'à Fer 1) et Duel 1v1 (rang puis RR, avec victoires et défaites). - **Pseudos certifiés** (`certified.js`, `certified.css`) : Rojin, Fuziah et 16 proches de la chaîne. Chacun a un code secret, demandé seulement quand on tape l'un de ces pseudos (Fan zone ou mini-jeu) et vérifié par le serveur (`reserved_pseudos`, `claim_fan_pseudo`, `qte_set_pseudo` dans `supabase/setup.sql`). Badge certifié bleu à côté du nom ; Rojin en violet et Fuziah en orange (texte qui brille, lueur, étincelles). Les pseudos contenant « rojin » ou « fuziah » sont refusés. **Les codes ne sont pas dans l'extension** : ils sont dans le dossier privé `prive/` (à côté de `notif-live/`), avec le script `pseudos-certifies.sql` à lancer une fois dans Supabase après `setup.sql`. En duel, le badge d'un adversaire n'apparaît que si le serveur confirme son pseudo. - **Un seul pseudo** : celui choisi dans la Fan zone sert aussi au mini-jeu, et inversement (si le classement des fans est rejoint, il est mis à jour aussi). - **Mention légale** affichée sur l'accueil du jeu (politique « Legal Jibber Jabber » de Riot) : le jeu doit rester gratuit et sans sponsor pour utiliser les icônes de rangs. - **Modes** : Solo classé, **Duel 1v1** (adversaire de ton niveau) et **Partie privée** (code à 5 caractères à envoyer à un ami). En duel, les deux joueurs ont exactement les mêmes combos (même graine), voient l'avancée de l'autre en direct, un combo doré aveugle l'adversaire (flash), et le dernier Spike debout gagne. Revanche si les deux le veulent. - **Radianite** (la monnaie) : gagnée à chaque partie, avec une **récompense du jour** (série de 7 jours ; les jours 1 et 7 sont des **roulettes** : Radianite, objet de la boutique pas encore possédé ou gros lot de 250 / 1 000 ; cases et chances dans `WHEELS`, `qte/economy.js` ; roue dans `qte/wheel.js`). Chaque roulette a aussi une case **mythique à 0,67 %** : la carte de joueur animée « Rojin & Fuziah » (`qte/img/rojin-fuziah.webp`, animation dans `qte/cardfx.js`), introuvable en boutique (1 000 Radianite si elle est déjà possédée) et **3 missions par jour**. Elle sert dans la **boutique** : skins de Spike, explosions, effets de combo, couleurs du clavier, arènes, packs musicaux, cartes de joueur, titres et l'Extracteur (+10 % de Radianite par niveau), avec 4 **offres du jour** à -25 %. Tout est gardé dans le navigateur (`localStorage`, clé `spikeQteSave`). - **Classement** solo (semaine / depuis toujours / cet appareil) : fonctions `qte_*` de `supabase/setup.sql`. Le pseudo du jeu est séparé de celui du classement des fans, mais il est repris automatiquement s'il convient. - **Duels** : aucune table, ils passent par **Supabase Realtime** (Presence pour la file d'attente, Broadcast pour les messages) avec un petit client WebSocket inclus (`qte/realtime.js`, pas de bibliothèque externe). Supabase garde le Realtime actif par défaut sur un nouveau projet. - **Direction artistique** : façon Valorant (bleu nuit, rouge, titres condensés), musique et bruitages créés en direct (`qte/audio.js`, aucun fichier son), particules dans un canevas (`qte/fx.js`), Spike dessiné en SVG dont les skins changent les couleurs (`qte/spike.js`). Réglages du son et « Effets réduits » en haut à droite. - **Tester sans recharger l'extension** : `python -m http.server 8770 --directory notif-live`, puis ouvrir `http://localhost:8770/qte/`. ### Fan zone (bouton 🏆) - 🏅 **Classement des fans** : 1 minute regardée (vidéo ou live) = 1 point. Trois périodes : semaine, mois, depuis toujours. Le top 10 s'affiche avec la part vidéos/lives de chacun, et ta place en plus si tu n'y es pas. La participation est volontaire avec un pseudo unique, et seuls le pseudo et le temps de visionnage sont envoyés. Le classement passe par **Supabase** (gratuit) : voir la partie 4 « Le serveur Supabase ». - 📊 **Résumé de la semaine** : « 5 vidéos, 2 lives · tu en as vu 4/7 ». Il est aussi envoyé en notification chaque dimanche à 18 h. - 🏆 **12 badges** à débloquer, chacun avec une barre de progression : | Badge | Condition | |---|---| | 👋 Bienvenue | Regarder une première vidéo | | 🥇 Premier sur le coup | Voir une vidéo moins d'1 h après sa sortie | | ⚡ Réactif | Voir 5 vidéos dans les 24 h après leur sortie | | 🧭 Explorateur | Voir une vidéo sur chaque chaîne YouTube | | 🔥 Fidèle au poste | Voir des vidéos 3 semaines d'affilée | | 📺 Marathonien | Cumuler 10 h de vidéos | | 💯 Centurion | Voir 100 vidéos | | 🎤 Première en live | Être présent à un live Twitch | | 💜 Pilier du live | Être présent à 10 lives | | 🌙 Oiseau de nuit | Être au live après minuit | | 🎯 Complétiste | Voir toutes les vidéos d'un mois | | 🎃 Halloween | Passer pendant la saison d'Halloween | - 🪪 **Carte de fan** à partager (image 1080 × 1350) : pseudo, photo, niveau, stats et badges. Boutons « Télécharger » et « Copier ». - ✨ **Ton année avec R&F**, façon Recap de YouTube (`wrapped.js`). C'est une story plein écran, avec des barres de progression en haut et un passage automatique toutes les 6,5 s. Toucher à droite pour avancer, à gauche pour revenir, maintenir pour mettre en pause ; les flèches, Espace et Échap marchent aussi. Jusqu'à 11 écrans, chacun avec sa couleur : temps total (et équivalences en parties de Valorant et en films), podium des chaînes, top 3 des vidéos, année mois par mois, moment de la journée et jour préféré, lives, réactivité après une sortie, badges, place au classement et niveau de fan avec image à partager. Les écrans sans données sont sautés. Le récap est disponible toute l'année et mis en avant en décembre. ### Sur YouTube (uniquement sur les vidéos de vos 3 chaînes) Le script `content-yt-ui.js` (style dans `yt-ui.css`) ajoute à la page : - 🎬 **Bandeau R&F** sous la vidéo : temps passé, points gagnés au classement, fans en même temps, prochain badge, bouton « ❤️ Moment » - 📌 **« À rattraper »** en haut de la colonne de droite : 3 vidéos R&F pas encore vues - 🏆 **Badge débloqué en direct**, avec confettis - 🔴 **Alerte live** si vous lancez un live Twitch pendant la vidéo - 🌈 **Barre de lecture** en dégradé violet → orange - 💣 **Spike Valorant** à la place du curseur de lecture. Il s'arme au fil de la vidéo : cyan et calme jusqu'à 50 %, jaune jusqu'à 75 %, orange et tremblant jusqu'à 90 %, puis rouge et clignotant. Il explose à la fin, et se réarme si on revient en arrière. - 🎉 **Confettis** quand la vidéo est regardée jusqu'au bout - 👍 **Rappel like** à 80 %. Le bouton « Où est le like ? » fait défiler la page jusqu'au like et le met en surbrillance. L'extension ne clique jamais à la place du viewer. - 💜 **Animation like** : explosion de cœurs, fleurs et étincelles depuis le bouton, sticker « MERCI ! 💜 » et confettis - ⛔ **Animation dislike** : faux bug « ACCÈS REFUSÉ » façon Valorant pendant environ 2 secondes (écran rouge, lignes de balayage, texte glitch, lecteur qui tremble). Purement visuel : le dislike est bien enregistré par YouTube et rien n'est bloqué. Les deux animations ne se lancent que si le vote a été pris en compte (viewer connecté à YouTube). - 🎃 **Halloween** : chauves-souris et citrouille autour du lecteur pendant la saison - 👀 **Fans en même temps** et ❤️ **moments préférés** : ces deux fonctions passent par le serveur Supabase. Les cœurs des passages préférés de la commu (au moins 2 fans) s'affichent sur la barre de lecture, et un clic dessus amène au passage. Une vidéo est reconnue par son identifiant (vidéos récentes) ou par le lien de la chaîne sous le lecteur (toutes les vidéos, grâce au champ `handle` de `config.js`). Les pubs ne sont jamais touchées. Chaque élément se désactive dans Réglages → Sur YouTube, et un interrupteur général coupe tout. > YouTube modifie régulièrement sa page. Si un élément n'apparaît plus ou est mal placé après une de leurs mises à jour, il faudra adapter les sélecteurs dans `content-yt-ui.js`. ### Réglages (bouton ⚙) - **Apparence** : thème Jour, Nuit ou Auto ; thèmes saisonniers ; objectifs abonnés - **Mes chaînes** : une chaîne désactivée disparaît de l'accueil et n'envoie plus de notifications - **Notifications** : voix de Rojin & Fuziah (avec bouton « Tester »), rappel avant les lives, résumé du dimanche, badges - **Vidéos vues** : suivi des vidéos vues et connexion à l'historique YouTube Les vidéos vues, les badges et les stats du viewer restent **dans son navigateur**. Seules les fonctions communautaires (compteur de la commu, fans en même temps, moments préférés, classement) passent par le serveur Supabase. Le détail des données envoyées est dans `POLITIQUE-DE-CONFIDENTIALITE.md`. ## 1. Les annonces (`annonces.json`) C'est **votre** canal direct avec la commu. Exemple : ```json { "annonces": [ { "id": "giveaway-oct", "emoji": "🎁", "titre": "Giveaway ce soir !", "texte": "Un skin Valorant à gagner pendant le live de 21 h.", "lien": "https://www.twitch.tv/rojinetfuziah", "bouton": "Aller sur Twitch", "debut": "2026-10-20", "jusqua": "2026-10-21", "notifier": true } ], "prochainLive": { "date": "2026-10-20T21:00:00+02:00", "titre": "Giveaway + Valorant avec la commu" }, "objectifs": { "yt:UCYpsCJDO4Jv9fl-Id188v8Q": 150000 }, "theme": "" } ``` | Champ | Rôle | |---|---| | `id` | Identifiant unique de l'annonce. Change-le pour chaque nouvelle annonce, sinon la notification ne repart pas. | | `notifier` | `true` = envoie une notification (une seule fois par viewer) | | `debut` / `jusqua` | Période d'affichage (facultatif) | | `prochainLive` | Utilisé si votre planning Twitch est vide. Si vous remplissez le planning sur Twitch, il passe en priorité. | | `objectifs` | Pour imposer un objectif au lieu du palier automatique (clé `yt:<ID de chaîne>` ou `tw:<login>`) | | `theme` | `"halloween"` pour forcer le thème, `""` pour suivre le calendrier | **Pour modifier les annonces sans republier l'extension**, hébergez ce fichier en ligne : 1. Créez un Gist sur https://gist.github.com avec un fichier `annonces.json`, ou un dépôt GitHub. 2. Cliquez sur **Raw** et copiez l'adresse. Pour un Gist, retirez la partie `/<numéro>/` située juste avant le nom du fichier, pour que l'adresse pointe toujours vers la dernière version. 3. Collez cette adresse dans `announcementsUrl` dans `config.js`, puis publiez l'extension une dernière fois. Ensuite, il suffit de modifier le Gist : tous les viewers voient la nouvelle annonce en moins de 10 minutes. Tant que `announcementsUrl` est vide, c'est le fichier `annonces.json` inclus dans l'extension qui est utilisé. ## 2. Vos voix (`sounds/`) Les fichiers actuels sont des **voix de synthèse temporaires**. Remplacez-les par vos propres enregistrements, avec **exactement les mêmes noms** : | Fichier | Quand | Idée de phrase | |---|---|---| | `live.wav` | Début du live | « Hé ! On est en live, ramène-toi ! » | | `video.wav` | Nouvelle vidéo et annonce | « Nouvelle vidéo ! Viens vite la voir. » | | `reminder.wav` | 15 min avant un live | « Le live commence dans 15 minutes ! » | | `badge.wav` | Badge débloqué | « Bravo, nouveau badge ! » | Gardez des sons courts, de 2 à 4 secondes. Le MP3 marche aussi : changez alors l'extension `.wav` en `.mp3` dans `background.js` (fonction `playSound`). ## 3. Configuration (`config.js`) - `creatorName`, `youtube`, `twitch`, `links` : les chaînes et les réseaux - `announcementsUrl` : l'adresse du fichier d'annonces hébergé (voir plus haut) - `reminderMinutes` : délai du rappel avant un live (15 par défaut) - `seasons` : les périodes des thèmes saisonniers - `supabase` : l'adresse du projet Supabase et sa clé « anon public