julioandClaude Opus 5.5
69018c8b36
- rosto-motor.js desenha emoji e figurinha dentro dos olhos no estilo e formato escolhidos (brilho, piscada; na Lente no lugar da iris; na Matriz os LEDs usam as cores do desenho) - MotorRosto.retrato desenha um retrato parado em qualquer canvas - miniaturas da biblioteca no painel usam o mesmo motor, no rosto, formato e cor atuais do robo (3:2, com o simbolo "ao redor" no canto) - emoji e figurinha "ao redor" ganham o brilho na cor da reacao - cartoes da biblioteca com as acoes numa linha so Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
85 lines
3.0 KiB
Svelte
85 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { rgb, ROSTOS_INFO } from '../comandos.svelte';
|
|
import { estado } from '../estado.svelte';
|
|
import { SIMBOLO_EMOJI } from '../treinamento.svelte';
|
|
|
|
// Retrato parado da reação, desenhado pelo mesmo motor do celular (rosto-motor.js),
|
|
// no rosto, formato e cor que o robô está usando agora.
|
|
let { receita, tamanho = 64 }: { receita: any; tamanho?: number } = $props();
|
|
let tela: HTMLCanvasElement;
|
|
|
|
const passo = $derived(receita?.passos?.[0]);
|
|
const nosOlhos = $derived({
|
|
icone:
|
|
receita?.emoji?.local === 'olhos'
|
|
? receita.emoji.caractere
|
|
: ['ideia', 'cafe'].includes(receita?.simbolo) && !receita?.emoji && !receita?.figurinha
|
|
? SIMBOLO_EMOJI[receita.simbolo]
|
|
: null,
|
|
desenho: receita?.figurinha?.local === 'olhos' ? receita.figurinha : null,
|
|
});
|
|
// O que aparece fora dos olhos (emoji/figurinha "ao redor", notas, estrelas, corações).
|
|
const aoRedor = $derived.by(() => {
|
|
if (receita?.emoji && receita.emoji.local !== 'olhos') return { emoji: receita.emoji.caractere };
|
|
if (receita?.figurinha && receita.figurinha.local !== 'olhos') return { figurinha: receita.figurinha };
|
|
if (['musica', 'estrela', 'coracao'].includes(receita?.simbolo)) return { emoji: SIMBOLO_EMOJI[receita.simbolo] };
|
|
return null;
|
|
});
|
|
const estilo = $derived(ROSTOS_INFO[estado.aparencia.rosto]?.novo ? estado.aparencia.rosto : 'vivo');
|
|
|
|
$effect(() => {
|
|
const motor = (window as any).MotorRosto;
|
|
if (!motor || !tela) return;
|
|
const d = Math.min(2, devicePixelRatio || 1);
|
|
tela.width = Math.round(tamanho * 1.5 * d); // 3:2, cabe os dois olhos com folga
|
|
tela.height = Math.round(tamanho * d);
|
|
motor.retrato(tela, {
|
|
estilo,
|
|
formato: estado.aparencia.formato ?? 'padrao',
|
|
cor: /^#[0-9a-f]{6}$/i.test(passo?.cor ?? '') ? rgb(passo.cor) : estado.aparencia.cor,
|
|
forma: passo?.olhos ?? 'aberto',
|
|
icone: nosOlhos.icone,
|
|
desenho: nosOlhos.desenho ? $state.snapshot(nosOlhos.desenho) : null,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="miniatura" style="--t: {tamanho}px" aria-hidden="true">
|
|
<canvas bind:this={tela}></canvas>
|
|
{#if aoRedor?.emoji}
|
|
<span class="extra">{aoRedor.emoji}</span>
|
|
{:else if aoRedor?.figurinha}
|
|
<svg class="extra" viewBox="0 0 100 100">
|
|
{#each aoRedor.figurinha.formas as forma, i (i)}<path d={forma.caminho} fill={forma.cor} />{/each}
|
|
</svg>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.miniatura {
|
|
position: relative;
|
|
width: calc(var(--t) * 1.5);
|
|
height: var(--t);
|
|
border-radius: var(--raio);
|
|
background: #000;
|
|
flex: none;
|
|
overflow: hidden;
|
|
}
|
|
canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.extra {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 3px;
|
|
width: calc(var(--t) * 0.34);
|
|
height: calc(var(--t) * 0.34);
|
|
font-size: calc(var(--t) * 0.26);
|
|
line-height: calc(var(--t) * 0.34);
|
|
text-align: center;
|
|
filter: drop-shadow(0 0 4px rgb(92 214 255 / 0.6));
|
|
}
|
|
</style>
|