parthkapoor15/skill-library

Hairline: criar uma figura

Você está fazendo uma figura no estilo Hairline: um desenho de linha isométrica, construído a partir de sólidos arredondados em um único traço, que responde ao ponteiro. Ela é entregue como um único arquivo HTML sem nada para instalar. As seis figuras de @lucasmarkes/hairline são a referência; examples/terrain.js e examples/riffle.js são duas delas, no formato que você escreverá.

Você escreve uma coisa: a figura. O motor (kernel.js) e a página (bench.html) são fixos. Nunca os edite, nunca cole uma cópia modificada deles e nunca escreva novamente o que o kernel já fornece.

Todo arquivo nomeado abaixo está na pasta desta skill. A figura e a página são escritas no diretório de trabalho da pessoa: execute build.mjs, validate.mjs e look.mjs a partir de lá, pelo caminho nesta pasta.

0. Fonte

Apenas quando a solicitação veio com um arquivo .svg. Execute node read.mjs <arquivo.svg>: ele escreve o SVG como uma imagem e um cartão do que foi medido, ambos no diretório de trabalho. Em seguida, leia source.md e responda suas perguntas. O objeto e suas partes agora estão fixos: cada conceito na etapa 1 os mantém.

1. Conceito

Leia concepts.md. Ele tem uma seção para um estado vazio e uma para uma figura desenhada a partir de uma marca. Em seguida, ofereça dois ou três conceitos, uma linha cada:

Nome. O objeto. O que o ponteiro faz com ele. O que a leitura diz. Onde a visita para.

Aguarde a pessoa escolher. Pule esta etapa apenas se ela chegou com o objeto e o gesto já escolhidos. Se não houver ninguém para perguntar, pegue o conceito com a pose de repouso mais forte e diga qual você pegou.

Com uma fonte (etapa 0), cada conceito mantém o objeto e suas partes: eles diferem no gesto, ou, quando o gesto veio com a solicitação, na forma e na leitura.

Uma figura, uma ideia. Um conceito que precisa de um rótulo para ser compreendido ainda não é um conceito.

2. Construir

1. Leia rules.md. As dez regras não são conselho: uma figura que quebra uma delas não está terminada.
2. Leia o índice no topo de kernel.js: o comentário sob a linha de hash, até var HL. Ele lista tudo que você pode chamar. Não leia o código abaixo dele.
3. Leia o exemplo mais próximo do seu conceito: examples/terrain.js para um campo contínuo, examples/riffle.js para itens discretos.
4. Escreva a figura como <nome>.js no diretório de trabalho da pessoa, no formato dos exemplos: pegue o que você precisa de HL, defina mount({ stage, svg, read }, valor) retornando { set, destroy }, e termine o arquivo com hairline({ name, means, rules, range, tour, mount }).
   • name: minúsculo, uma palavra ou hifenizado.
   • means: uma frase, no máximo 140 caracteres, dizendo o que a figura mostra. É a linha abaixo do palco.
   • rules: os números das regras nas quais esta figura mais se apoia.
   • range: o único número que o controle deslizante dirige, nas intensidades 0, 0.5 e 1. O meio é o padrão, e os três se movem em uma direção. O value de mount, e o value que set(valor) recebe quando o controle deslizante se move, é este número: o próprio da figura, lido em range, não de 0 a 1.
   • tour: os três a seis pontos viewBox que o ponteiro invisível visita quando a página toca, ou null para sair; a volta que um estranho vê sem mão na página. Números literais [x, y], pelo menos um deles sendo um ponto. A figura nunca se toca sozinha: o botão de tocar da página e o pacote o fazem.
5. Monte-a: node build.mjs <nome>.js escreve hairline-<nome>.html, e assim também cada execução de look.mjs na etapa 3. Sem Node, copie bench.html e coloque o conteúdo de kernel.js onde está /*KERNEL*/ e sua figura onde está /*FIGURE*/, por operação de arquivo, sem alterar mais nada.

3. Verificar

1. node look.mjs <nome>.js --answer x,y,z --edge x,y,z, e --source <arquivo.svg> quando houver um, sendo os pontos pontos do mundo da sua figura, como look.md diz. Ele constrói a página, valida, tira as oito imagens em uma folha, hairline-<nome>-look.png, e verifica o quadro, a leitura e o console. Corrija cada linha que ele imprimir como falha e execute novamente até que saia com código 0.
2. Leia look.md, depois a folha, e responda suas perguntas. Corrija o que falhar e volte para 1.

look.mjs precisa de um navegador e instala playwright-core uma vez, fora desta pasta. Sem um, verifique com node validate.mjs hairline-<nome>.html após cada construção e faça a verificação como look.md diz sob "Sem um navegador". Sem Node, leia a lista de verificações no topo de validate.mjs e responda a cada uma a partir do seu código.

Não entregue uma página que o validador rejeite. Não diga que a verificação está feita se você não verificou.

4. Entregar

Publique hairline-<nome>.html como um artefato se puder. Se não puder, deixe o arquivo onde a pessoa possa abri-lo e diga onde está. Em seguida, diga, uma linha cada:

• a metáfora: o que o objeto é e o que o ponteiro faz com ele;
• as regras nas quais se apoia;
• a visita: onde para, em ordem;
• qualquer coisa que você não pôde verificar (sem Node, sem navegador), claramente.

Então peça à pessoa para apertar o play na página, ou abri-la com ?play=1, e dizer se a volta conta a história da figura. Se não houver ninguém para perguntar, diga que a visita não foi julgada.

5. Ajustar

Quando a pessoa pedir uma alteração, edite apenas <nome>.js, então execute look.mjs novamente e leia a nova folha. A décima versão é mantida no mesmo padrão da primeira. Uma mudança na volta é uma mudança apenas em tour.

O que dá errado

Se você se pegar	Faça isso em vez disso
adicionando um rótulo, um número ou uma letra ao desenho	diga com geometria (regra 10); nomes vão para read.textContent
recorrendo a uma cor, um preenchimento ou um brilho	mova um traço de sil para hi (regra 04)
escrevendo um timer, um requestAnimationFrame ou uma animação CSS	register(stage, tick), com molas ou tweens (regras 07 e 08)
testando o ponteiro contra o que está desenhado agora	teste contra a pose de repouso ou alvo (regra 01)
desenhando uma caixa com doze arestas	prism de dois anéis arredondados: uma silhueta e uma dobra (regra 09)
desenhando uma parte como um bloco arredondado simples	dê a ela as características que a tornam o que é, aquelas que você nomeou no conceito (concepts.md)
deixando o repouso plano, vazio ou simétrico porque foi fácil	componha-o: o repouso é a miniatura (regra 05)
carimbando uma marca em uma caixa para dizer de quem é	construa a marca como o objeto, ou deixe-a de fora (concepts.md, "De uma marca")
editando o kernel ou o bench para fazer algo funcionar	a figura está errada; mude a figura
fazendo a visita visitar cada parte por vez	três paradas que cada uma mostra uma resposta diferente, depois uma saída: uma volta é uma frase, não um inventário
deixando entrar uma segunda ideia	corte-a: uma figura, uma ideia
traçando um caminho do SVG, ou copiando suas coordenadas	construa a parte como um sólido com as proporções que o cartão dá (source.md)
mantendo uma parte do SVG que é decoração	descarte-a: duas ou três partes formam o objeto