Créer des jeux et récompenses

Oui, votre jeu peut réagir aux cadeaux TikTok

Votre JavaScript choisit l'action : accélérer une fusée, cultiver un jardin, créer un ennemi ou remplir un objectif commun. Vous choisissez aussi le seuil. SSN ne peut pas changer les prix des cadeaux d'une plateforme.

Choisir un modèle

Chaque aperçu possède des boutons d'exemple et un inspecteur « Dernières données reçues ». Les exemples sont des événements fictifs, pas des achats. L'aperçu ne rejoint jamais votre session en direct.

• Dans le HTML, recherchez EDIT THIS RULE ou EDIT THESE RULES.
• Placez la logique du jeu dans la fonction receive(data) .
• Les utilitaires de connexion et de comptage se trouvent dans starter.js. Les styles se trouvent dans starter.css.

Connecter un modèle en 3 étapes

1. Lancez SSN et connectez votre chat. Vérifiez que chat et cadeaux apparaissent dans le dock. Pour TikTok, consultez les modes de connexion.
2. Ouvrez le modèle sans ?demo, avec votre identifiant de session (et le mot de passe, si défini).
3. Vérifiez dans un navigateur. Ajoutez ensuite le même lien dans OBS comme source navigateur, par exemple en 1000 × 800.

https://socialstream.ninja/games/templates/coin-rocket.html?session=YOUR_SESSION&password=YOUR_PASSWORD&clean

• &clean masque l'inspecteur, l'état de connexion et les boutons de l'hôte.
• Pas de mot de passe ? Omettez &password=….
• Sur le site bêta, gardez /beta/ avant games/.

Créer votre copie et l'exécuter depuis le disque

Aucun serveur à installer. Vous modifiez un fichier sur votre ordinateur et le faites ouvrir par OBS.

1. Télécharger le ZIP du code bêta et extrayez-le.
2. Copiez le modèle choisi à côté de l'original. Exemple : games/templates/my-rocket.html.
3. Gardez la structure des dossiers. Les modèles chargent js/local-server-url.js, et l’objectif de soutien charge currency.js depuis le dossier racine. Gardez aussi les images et l'audio à leur place.
4. Glissez votre HTML dans Chrome ou Edge et copiez l'adresse file:/// .
5. Ajoutez tout à partir de ? et la suite de votre lien de jeu fonctionnel (session, mot de passe, options de transport).
6. Dans OBS, laissez Fichier local décoché. Collez l'adresse complète dans le champ URL .
7. Après chaque modification, actualisez la source navigateur.

file:///C:/SSN/social_stream-beta/games/templates/my-rocket.html?session=YOUR_SESSION&clean

Utilisez votre vrai chemin. Ne déplacez pas le dossier extrait. La session est votre ID de connexion SSN, pas le nom du jeu. Retirez demo pour les données en direct. Gardez SSN et la capture actifs. Autres exemples : guide de configuration des fichiers.

Customize [game file] to match [reference], at [canvas size].
Include its existing CSS/JS and local artwork/audio. Preserve the game's
rules, controls, gift/coin/USD distinctions, streak handling, duplicate
handling, and demo/clean modes. Change the visual design, not the reward rules,
unless I explicitly specify a rule change. Keep session/password and
transport parsing, relative paths, and Chrome 80-compatible classic scripts.
Read docs/event-reference.html and docs/making-games.html.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited game work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files/assets, file URL and OBS setup steps, and tests using
fictional data. Preserve image-only events and a valid donoValue of zero.
Never treat chat text as proof of a payment.

Comment choisir le nombre de pièces d’une action ?

Décidez d'abord ce que vous mesurez, puis choisissez un nombre.

Exact, minimum ou solde cumulé ?

• Exact : coins === 10. Un cadeau de 25 pièces ne fait rien.
• Minimum par événement : coins >= 10.
• Solde cumulé : ce que la fusée utilise. 25 pièces = deux accélérations, avec 5 pièces restantes.

Plusieurs paliers ? Vérifiez le plus élevé d'abord pour qu'un cadeau ne déclenche pas tous les paliers inférieurs.

Ce que chaque plateforme envoie

type indique la provenance. event indique ce qui s'est passé, s'il est présent. Les données dépendent du mode de capture, des réglages et de la plateforme. Cela reflète le code actuel de SSN, sans garantir tous les événements à tous les comptes.

D'autres sources peuvent signaler pourboires, cadeaux, abonnements ou achats. Consultez la référence des événements avant de les ajouter au filtre isSupport . Une vente ou un abonnement offert n'est pas automatiquement un pourboire. YouTube envoie l'achat du cadeau et chaque avis de destinataire ; compter les deux récompense deux fois le même cadeau.

Bien utiliser donoValue et currency.js

<script src="../../currency.js"></script>
<script>
// From games/templates/: use the existing helper, including its zero handling.
var usd = getDonationValueUSD(data);
// Use usd for your rule; display data.hasDonation for the original amount/unit.
</script>

À éviter

• donoValue || convertToUSD(...) — cela élimine un zéro intentionnel.
• Extraire des nombres de chatmessage pour détecter les paiements.
• Exiger event === "donation" — les étoiles Facebook et certains Cheers n'ont pas d'événement.

Le modèle d'objectif de soutien sélectionne d'abord les types de soutien, puis appelle le convertisseur partagé.

Compter une série de cadeaux une seule fois

TikTok peut signaler une série par totaux cumulés : 1, 2, 3. Ce sont trois cadeaux, pas six. Mémorisez le plus grand total observé et ajoutez seulement l'augmentation.

// All three events refer to the same streak:
// incoming total: 1, 2, 3, 3
// added to game:  1, 1, 1, 0
var newCoins = RewardStarter.increment(data, RewardStarter.coins(data), 'coins');

• L'utilitaire identifie les séries par les ID TikTok de groupe, d'expéditeur et de cadeau, puis par meta.tiktokGiftStreakId, puis par identifiants de message. Ceux-ci bloquent aussi les envois répétés.
• Il n'attend pas repeatEnd, car la capture navigateur peut ne jamais l'envoyer. Besoin d'une seule action à la fin d'une série ? Écrivez une règle séparée avec les champs transmis par votre connexion.
• Utilisez une seule route de capture. Une seconde capture de la même chaîne peut utiliser d'autres ID et compter deux fois.

Récompenses sans jeu personnalisé

Dans Event Flow:

1. Ajouter Comparer une propriété.
2. Réglez-le sur donoValue, supérieur ou égal, et votre montant en USD.
3. Connectez une action : son, animation ou commande OBS.

Il utilise la valeur de la source si elle est valide, sinon la conversion monétaire SSN.

• Un cadeau TikTok précis : comparez meta.giftId ou meta.giftName, et limitez le flux aux événements de cadeaux TikTok.
• Les vérifications numériques de hasDonation sont aussi converties en USD. Ce ne sont pas des contrôles de pièces brutes. Utilisez les métadonnées natives ou du code personnalisé pour les règles de pièces.
• Chaque vérification s'exécute par message. Ce n'est ni un solde cumulé ni un compteur de séries. Utilisez nœuds d’état si nécessaire, ou gardez cette logique dans votre jeu.

Tester avant d'associer une action payante

1. Boutons d'exemple. Une série 1 → 2 → 3 ajoute trois cadeaux. L'exemple avec valeur zéro n'ajoute aucun USD. Un prix inconnu n'ajoute aucune quantité exacte de pièces.
2. Source réelle. Examinez les données réellement capturées. Confirmez nom/ID du cadeau, montant, unité, quantité et événement. Les exemples testent la règle, pas la capture réelle.
3. Scène OBS. Testez les événements répétés, une reconnexion et un rechargement. N'actualisez ni n'arrêtez la source navigateur si vous devez conserver la progression en mémoire.

Autres détails de connexion : overlays personnalisés.