Créer des widgets pour PlayerVox OverCrow

Un widget PlayerVox OverCrow est un petit paquet que l’overlay dessine par-dessus votre jeu : une horloge, un compteur d’images par seconde, une liste de tâches, un chat. Vous décrivez sa vue en balisage, vous la stylez avec un petit sous-ensemble de CSS et vous écrivez sa logique en TypeScript avec @overcrow/sdk. L’outil en ligne de commande overcrow-widget le vérifie, le teste et l’empaquette ; le catalogue signé l’apporte aux utilisateurs.

Tous les widgets intégrés de PlayerVox OverCrow sont écrits ainsi, avec le même SDK public, le même format de paquet et le même sandbox que les vôtres. Leurs sources sont les widgets de référence.

Fichier	Rôle	Page
`manifest.json`	Identité, version, noms, règles de taille, menu d’options et permissions que le widget demande.	Le manifeste
`view.ocml`	La vue : des éléments comme `box`, `text`, `button`, `list` ou `chart`, liés à l’état par des expressions `{…}`.	La vue
`style.ocss`	Le style, facultatif : mise en page flex et grid, couleurs, bordures, typographie, avec les tokens du thème.	Le style
`logic.ts`	La logique : l’état, les gestionnaires d’événements, les minuteurs et les appels aux services.	La logique
`locales/en.json`, `locales/fr.json`	Les messages en anglais et en français, facultatifs.	Messages
`LICENSE`	La licence de votre widget.	Le paquet

La vue et la logique se rejoignent ainsi : la vue lit state.count et appelle les gestionnaires que la logique exporte.

OCMLtemplates/counter/view.ocml

<box class="counter">
  <text class="value">{state.count}</text>
  <box class="actions">
    <button class="step" label={t("decrement")} on:activate={decrement}>
      <icon name="minus"/>
    </button>
    <button class="step" label={t("increment")} on:activate={increment}>
      <icon name="plus"/>
    </button>
  </box>
</box>

TStemplates/counter/logic.ts

const state = initState({ count: 0 });

export function increment(): void {
  state.count += 1;
}

La logique tourne dans sa propre petite VM JavaScript, dans son propre processus, enfermé dans un sandbox. Elle n’a ni DOM, ni système de fichiers, ni réseau, ni accès aux autres widgets : elle n’atteint PlayerVox OverCrow que par le SDK.
Après chaque événement, déclenchement de minuteur ou réponse d’un service, la VM évalue de nouveau la vue et n’envoie à PlayerVox OverCrow que ce qui a changé. OverCrow met en page et dessine le widget lui-même : aucun moteur web n’intervient.
Tout ce qui touche à l’extérieur (réseau, stockage, presse-papiers, données de jeu) est un service de PlayerVox OverCrow. À chaque appel, celui-ci vérifie les permissions que le widget a déclarées et que l’utilisateur a accordées. Voir services et permissions.

Ces pages appellent PlayerVox OverCrow l’hôte quand elles décrivent ce qu’il fait pour un widget : l’hôte dessine la vue, répond aux services et conserve les données de l’utilisateur.

Par où commencer

Suivez le guide du créateur : de overcrow-widget init à un widget soumis, en douze courtes étapes.
Lisez les widgets de référence : les widgets intégrés, avec leurs tests.
Approfondissez, un thème par page : le manifeste, la vue, le style, la logique, les services et permissions, les formulaires.
Servez-vous des outils : la CLI, les tests et le canal de développement, qui exécute votre widget dans PlayerVox OverCrow pendant que vous l’écrivez.
Cherchez un élément, une propriété de style, un service ou une fonction du SDK dans la référence.
Avant de publier, lisez le paquet et sécurité.
Publiez dans l’espace créateurs : démarrer, puis publier un widget.

Les widgets fonctionnent de la même façon sous Windows et sous Linux : le même paquet, le même SDK et le même rendu.

Créer des widgets pour PlayerVox OverCrow

De quoi est fait un widget

Comment un widget s’exécute

Par où commencer