parthkapoor15/skill-library

Hairline : créer une figure

Vous créez une figure dans le style Hairline : un dessin isométrique au trait, construit à partir de solides arrondis en un seul trait, qui répond au pointeur. Elle est livrée sous forme d'un fichier HTML unique sans rien à installer. Les six figures de @lucasmarkes/hairline sont la référence ; examples/terrain.js et examples/riffle.js en sont deux exemples, dans le format que vous allez écrire.

Vous n'écrivez qu'une seule chose : la figure. Le moteur (kernel.js) et la page (bench.html) sont fixes. Ne les modifiez jamais, ne collez jamais une copie modifiée de ceux-ci, et n'écrivez jamais ce que le noyau vous fournit déjà.

Chaque fichier nommé ci-dessous se trouve dans le dossier de ce skill. La figure et la page sont écrites dans le répertoire de travail de la personne : exécutez build.mjs, validate.mjs et look.mjs depuis ce répertoire, en utilisant leur chemin dans ce dossier.

0. Source

Uniquement lorsque la demande est accompagnée d'un fichier .svg. Exécutez node read.mjs <fichier.svg> : cela écrit le SVG sous forme d'une image et d'une fiche de ce qu'il a mesuré, toutes deux dans le répertoire de travail. Ensuite, lisez source.md et répondez à ses questions. L'objet et ses parties sont désormais fixés : chaque concept à l'étape 1 les conserve.

1. Concept

Lisez concepts.md. Il comporte une section pour un état vide et une pour une figure dessinée à partir d'une marque. Proposez ensuite deux ou trois concepts, une ligne chacun :

Nom. L'objet. Ce que le pointeur lui fait. Ce que dit la lecture. Où s'arrête la visite.

Attendez que la personne choisisse. Sautez cette étape uniquement si la personne est arrivée avec l'objet et le geste déjà choisis. S'il n'y a personne à qui demander, prenez le concept avec la pose de repos la plus forte et dites lequel vous avez pris.

Avec une source (étape 0), chaque concept conserve l'objet et ses parties : ils diffèrent par le geste, ou, lorsque le geste est venu avec la demande, par la forme et la lecture.

Une figure, une idée. Un concept qui a besoin d'une étiquette pour être compris n'est pas encore un concept.

2. Construction

1. Lisez rules.md. Les dix règles ne sont pas des conseils : une figure qui en enfreint une n'est pas terminée.
2. Lisez l'index en haut de kernel.js : le commentaire sous la ligne de hachage, jusqu'à var HL. Il liste tout ce que vous pouvez appeler. Ne lisez pas le code en dessous.
3. Lisez l'exemple le plus proche de votre concept : examples/terrain.js pour un champ continu, examples/riffle.js pour des éléments discrets.
4. Écrivez la figure sous la forme <nom>.js dans le répertoire de travail de la personne, en suivant le modèle des exemples : prenez ce dont vous avez besoin de HL, définissez mount({ stage, svg, read }, value) retournant { set, destroy }, et terminez le fichier par hairline({ name, means, rules, range, tour, mount }).
   • name : en minuscules, un mot ou avec trait d'union.
   • means : une phrase, 140 caractères au maximum, disant ce que la figure montre. C'est la ligne sous la scène.
   • rules : les numéros des règles sur lesquelles cette figure s'appuie le plus.
   • range : le nombre unique que le curseur contrôle, aux intensités 0, 0,5 et 1. Celui du milieu est la valeur par défaut, et les trois évoluent dans un sens. La value de mount, et la value que set(value) reçoit lorsque le curseur bouge, est ce nombre : le propre de la figure, lu sur range, pas de 0 à 1.
   • tour : les trois à six points du viewBox que le pointeur invisible visite lorsque la page joue, ou null pour laisser ; le tour qu'un étranger voit sans avoir la main sur la page. Des nombres littéraux [x, y], dont au moins un point. La figure ne se joue jamais elle-même : le bouton de lecture de la page et le paquet le font.
5. Assemblez-la : node build.mjs <nom>.js écrit hairline-<nom>.html, et chaque exécution de look.mjs à l'étape 3 fait de même. Sans Node, copiez bench.html et placez le contenu de kernel.js là où se trouve /*KERNEL*/ et votre figure là où se trouve /*FIGURE*/, par opération sur fichier, sans rien modifier d'autre.

3. Vérification

1. node look.mjs <nom>.js --answer x,y,z --edge x,y,z, et --source <fichier.svg> le cas échéant, les points étant des points du monde de votre figure, comme indiqué dans look.md. Cela construit la page, la valide, prend les huit images sur une feuille, hairline-<nom>-look.png, et vérifie le cadre, la lecture et la console. Corrigez chaque ligne qu'il imprime comme échouée, et réexécutez jusqu'à ce qu'il se termine avec le code 0.
2. Lisez look.md, puis la feuille, et répondez à ses questions. Corrigez ce qui échoue, puis revenez à l'étape 1.

look.mjs a besoin d'un navigateur et installe playwright-core une fois, en dehors de ce dossier. Sans navigateur, vérifiez avec node validate.mjs hairline-<nom>.html après chaque construction et effectuez la vérification visuelle comme indiqué dans look.md sous "Sans navigateur". Sans Node, lisez la liste des vérifications en haut de validate.mjs et répondez à chacune à partir de votre code.

Ne livrez pas une page que le validateur rejette. Ne dites pas que la vérification visuelle est terminée si vous n'avez pas regardé.

4. Livraison

Publiez hairline-<nom>.html comme un artefact si possible. Si vous ne pouvez pas, laissez le fichier là où la personne peut l'ouvrir et dites où il se trouve. Ensuite, dites, une ligne chacun :

• la métaphore : ce qu'est l'objet, et ce que le pointeur lui fait ;
• les règles sur lesquelles il s'appuie ;
• le tour : où il s'arrête, dans l'ordre ;
• tout ce que vous n'avez pas pu vérifier (pas de Node, pas de navigateur), clairement.

Demandez ensuite à la personne d'appuyer sur le bouton de lecture de la page, ou de l'ouvrir avec ?play=1, et de dire si le tour raconte l'histoire de la figure. S'il n'y a personne à qui demander, dites que le tour n'a pas été jugé.

5. Ajustement

Lorsque la personne demande une modification, modifiez uniquement <nom>.js, puis exécutez à nouveau look.mjs et lisez la nouvelle feuille. La dixième version est tenue à la même exigence que la première. Une modification du tour est une modification de tour uniquement.

Ce qui peut mal se passer

Si vous vous surprenez à	Faites ceci à la place
ajouter une étiquette, un nombre ou une lettre au dessin	dites-le avec la géométrie (règle 10) ; les noms vont dans read.textContent
utiliser une couleur, un remplissage ou une lueur	déplacez un trait de sil à hi (règle 04)
écrire une minuterie, un requestAnimationFrame ou une animation CSS	register(stage, tick), avec des ressorts ou des interpolations (règles 07 et 08)
tester le pointeur par rapport à ce qui est dessiné actuellement	testez-le par rapport à la pose de repos ou cible (règle 01)
dessiner une boîte avec douze arêtes	prism de deux anneaux arrondis : une silhouette et un pli (règle 09)
dessiner une partie comme un simple bloc arrondi	donnez-lui les caractéristiques qui en font ce qu'elle est, celles que vous avez nommées dans le concept (concepts.md)
laisser le repos plat, vide ou symétrique parce que c'était facile	composez-le : le repos est la vignette (règle 05)
tamponner une marque sur une boîte pour dire à qui elle est	construisez la marque comme l'objet, ou laissez-la de côté (concepts.md, "À partir d'une marque")
modifier le noyau ou le banc pour faire fonctionner quelque chose	la figure est erronée ; changez la figure
faire visiter le tour à chaque partie tour à tour	trois arrêts qui montrent chacun une réponse différente, puis un départ : un tour est une phrase, pas un inventaire
laisser entrer une deuxième idée	coupez-la : une figure, une idée
tracer un chemin à partir du SVG, ou copier ses coordonnées	construisez la partie comme un solide avec les proportions données par la fiche (source.md)
conserver une partie du SVG qui est une décoration	supprimez-la : deux ou trois parties font l'objet