// =============================================================================
// VITRINE DE ITENS — emotes (danças) e itens avulsos dentro da Z Shop
// =============================================================================
// Mesmo layout master-detail da Concessionária e do canil (`animalshop.jsx`):
// ESQUERDA = os cards da seção (3D girando, borda na cor da raridade)
// DIREITA = palco do selecionado (3D grande, ficha, botão de compra)
//
// Por que não reusa o grid antigo de "PRATELEIRA": aquele grid é um card chapado
// sem 3D — foi feito quando os itens eram só texto. Emote e Caixa A.U.R.A. têm
// modelo, e modelo é o que o jogador compra com os olhos.
//
// 🔑 Zero tabela de produto aqui. Título, preço, modelo e os "fatos" saem do
// `metadata` do próprio produto — igual `carshop.jsx` e `animalshop.jsx`.
// Duplicar dado no JS é o erro que já mordeu o projeto: a UI passa a mentir no
// dia em que o banco muda.
// =============================================================================
const IT_RARIDADE = {
comum: { label: 'COMUM', cor: '#B2B2B2' },
incomum: { label: 'INCOMUM', cor: '#4CE64C' },
raro: { label: 'RARO', cor: '#3075FF' },
epico: { label: 'EPICO', cor: '#B34CE6' },
lendario: { label: 'LENDARIO', cor: '#FFA000' },
};
function itRar(r) { return IT_RARIDADE[r] || { label: (r || '').toUpperCase(), cor: '#B2B2B2' }; }
function itFmt(n) { return Number(n || 0).toLocaleString('pt-BR'); }
// --- CSS próprio --------------------------------------------------------------
// 🪤 Antes esta vitrine usava as classes `gz-cs-*` da Concessionária, e a
// Concessionária só injeta o CSS dela quando ELA aparece. Com a loja de carros
// desligada (`car_shop_config.enabled = false`, que é exatamente o estado até o
// Henrique abrir), emotes e itens perdiam o grid e viravam uma coluna esticada —
// sem erro nenhum no console. Agora a seção não depende de outra seção.
function ensureItensCss() {
if (document.getElementById('gz-itens-css')) return;
const st = document.createElement('style');
st.id = 'gz-itens-css';
st.textContent = `
@keyframes gzItFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gz-it-wrap { display: grid; grid-template-columns: minmax(300px, 480px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
/* 🪤 align-content:start deixava o card com a altura MINIMA e a area 3D ficava
com 156px — a Aurora dancando saia com a cabeca cortada. A vitrine de animais
(que ele apontou como referencia) usa stretch, e la a area 3D mede 218px.
Medido nos dois em 23/08. A altura vem do minHeight da area 3D do card, NAO de
align-content:stretch -- com 2 cards numa linha so, stretch estica a linha ate a
altura do palco e o card sai com 672px (medido).
🚨 CUIDADO: este bloco e' um TEMPLATE LITERAL. Acento grave aqui dentro FECHA
a string e quebra o arquivo -- foi o que aconteceu ao escrever este comentario. */
.gz-it-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.gz-it-item { cursor: pointer; }
.gz-it-item model-viewer { pointer-events: none; }
.gz-it-fade { animation: gzItFadeIn .3s ease; }
.gz-it-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.gz-it-chip { background: none; padding: 0; cursor: pointer; line-height: 0; transition: transform .15s ease, box-shadow .15s ease; }
.gz-it-chip:hover { transform: translateY(-2px); }
@media (max-width: 920px) { .gz-it-wrap { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .gz-it-list { grid-template-columns: 1fr; } }
`;
document.head.appendChild(st);
}
// --- enquadramento: MEDIR, nunca cravar --------------------------------------
// A Aurora tem ~1,8 de altura e a caixa ~0,5. `camera-target` fixo enquadra um e
// corta o outro, então a página mede a caixa do modelo quando ele carrega e mira
// no centro dela. Fator MAIOR = objeto mais baixo no quadro.
const IT_OLHAR_PALCO = 0.86;
const IT_OLHAR_CARD = 0.92;
function itMirar(mv, fator) {
if (!mv || mv._genzMirado) return;
mv._genzMirado = true;
mv.addEventListener('load', () => {
try {
const c = mv.getBoundingBoxCenter();
mv.cameraTarget = `${c.x.toFixed(3)}m ${(c.y * fator).toFixed(3)}m ${c.z.toFixed(3)}m`;
mv.jumpCameraToGoal();
} catch (e) { /* sem caixa ainda: o padrão do model-viewer já centraliza */ }
});
}
// Borda: 3px em cima na cor da raridade, 1px nos outros lados.
// 🪤 LONGHAND de propósito — `border` + `borderTop` no mesmo objeto de estilo faz
// o React avisar "mixing shorthand and non-shorthand", e o aviso é legítimo: numa
// re-renderização a ordem não é garantida e a borda fica com a cor do card anterior.
function itBorda(cor, selecionado) {
const lado = selecionado ? cor : cor + '33';
return {
borderStyle: 'solid',
borderTopWidth: 3, borderRightWidth: 1, borderBottomWidth: 1, borderLeftWidth: 1,
borderTopColor: cor, borderRightColor: lado, borderBottomColor: lado, borderLeftColor: lado,
};
}
// --- os "fatos" da ficha ------------------------------------------------------
// Não são barras (emote e caixa não têm escala de 0 a 100 — comparar dança com
// dança por barra seria inventar número). São pares rótulo/valor lidos do
// metadata, na ordem em que interessam.
function itFatos(md) {
const f = [];
if (md.musicas) f.push(['MÚSICAS', md.musicas + ' aleatórias']);
if (md.addon_de) f.push(['ADDON DE', md.addon_de]);
if (md.capacidade) f.push(['ESPAÇO', md.capacidade + ' (o dobro da caixa militar)']);
if (md.empilha) f.push(['EMPILHA', 'até ' + md.empilha]);
if (md.tranca) f.push(['TRANCA', md.tranca]);
return f;
}
// --- famílias: 100 linhas no banco, UM card na tela ---------------------------
// A Caixa A.U.R.A. são 10 cores × 10 marcas = 100 itens DIFERENTES no jogo, e a
// entrega é indexada pelo SKU — por isso são 100 produtos. Mas 100 cards seria
// uma parede de caixa igual: o jogador escolhe cor e marca, não "produto 47".
// Agrupa por `metadata.grupo`; produto sem grupo continua sendo o próprio card.
function itAgrupar(lista) {
const ordem = [], por = {};
(lista || []).forEach(p => {
const md = p.metadata || {};
const id = md.grupo ? ('g:' + md.grupo) : p.sku;
if (!por[id]) {
por[id] = { id, grupo: md.grupo || null, titulo: md.grupo_titulo || p.title, variantes: [] };
ordem.push(id);
}
por[id].variantes.push(p);
});
return ordem.map(id => por[id]);
}
// As opções de um eixo (cor, marca), na ordem em que o catálogo as declarou e
// sem repetir. Sai das PRÓPRIAS variantes: nenhuma lista de cor escrita no JS.
function itEixo(variantes, chave, rotulo, extra) {
const visto = {}, saida = [];
variantes.forEach(p => {
const md = p.metadata || {};
const k = md[chave];
if (k && !visto[k]) { visto[k] = 1; saida.push({ k, nome: md[rotulo] || k, extra: md[extra] }); }
});
return saida;
}
// --- pintar o 3D ao vivo ------------------------------------------------------
// Mesmo mecanismo que a Concessionária já usa pra trocar a pintura do carro:
// `createTexture` + `setTexture` no material pelo NOME. Aqui são dois materiais
// (a caixa e o decalque do símbolo), e os nomes vêm do metadata — nada de string
// mágica no JS.
// 🪤 Clique rápido dispara vários `await` que voltam fora de ordem: sem o
// carimbo, a última cor clicada podia perder pra uma anterior que demorou mais.
async function itPintar(mv, pinturas, chave) {
if (!mv || !mv.model || !pinturas || !pinturas.length) return;
mv._genzPintura = chave;
for (const p of pinturas) {
const m = (mv.model.materials || []).find(x => x.name === p.material);
if (!m) { console.warn('[GZ] o glb não tem o material', p.material); continue; }
const slot = m.pbrMetallicRoughness && m.pbrMetallicRoughness.baseColorTexture;
if (!slot) { console.warn('[GZ] material sem slot de cor:', p.material); continue; }
try {
const tex = await mv.createTexture(p.url);
if (mv._genzPintura !== chave) return; // já pediram outra coisa
slot.setTexture(tex);
} catch (e) { console.warn('[GZ] textura não carregou:', p.url, e); }
}
}
function itPinturas(md) {
const mat = md.materiais;
if (!mat) return null;
const out = [];
if (mat.cor && md.textura) out.push({ material: mat.cor, url: md.textura });
if (mat.simbolo && md.simbolo) out.push({ material: mat.simbolo, url: md.simbolo });
return out.length ? out : null;
}
// --- 3D, ou um lugar honesto no lugar dele -----------------------------------
// Enquanto o modelo não existe, o palco NÃO fica vazio: um buraco leva o olho a
// achar que a arte quebrou. Diz o que vai estar ali.
function ItPalco3D({ produto, fator, orbita, controles, pinturas }) {
const md = produto.metadata || {};
const [morreu, setMorreu] = React.useState(false);
const mvRef = React.useRef(null);
const chave = (pinturas || []).map(x => x.material + '=' + x.url).join('|');
// 🪤 Este efeito fica ANTES do return de "sem modelo": hook depois de return
// condicional muda a ordem dos hooks entre renderizações e o React quebra.
React.useEffect(() => {
const mv = mvRef.current;
if (!mv || !chave) return;
let vivo = true;
const aplicar = () => { if (vivo) itPintar(mv, pinturas, chave); };
if (mv.model) aplicar(); // já carregado: pinta agora
mv.addEventListener('load', aplicar);
return () => { vivo = false; mv.removeEventListener('load', aplicar); };
}, [chave]);
if (!md.model || morreu) {
return (
3D
{md.model3d_texto || 'modelo a caminho'}
);
}
// 🪤 `onError` de JSX NAO funciona em custom element no React 18 (vira
// atributo e nunca dispara). O aviso de modelo que nao carregou tem que ser
// ouvido no proprio elemento — senao o palco fica com um buraco preto e
// parece que a pagina quebrou.
const ligar = (el) => {
if (!el) return;
mvRef.current = el;
itMirar(el, fator);
if (!el._genzErro) {
el._genzErro = true;
el.addEventListener('error', () => setMorreu(true));
}
};
return (
);
}
// --- card da lista ------------------------------------------------------------
// `p` é a variante em foco (num grupo, a combinação escolhida); `titulo`/`sub`
// são o que aparece escrito, que num grupo é o nome da família + a escolha.
function ItemCard({ p, id, titulo, sub, selected, onSelect }) {
const r = itRar(p.rarity);
const md = p.metadata || {};
const ref = React.useRef(null);
const onMove = (e) => {
const el = ref.current; if (!el) return;
const b = el.getBoundingClientRect();
const px = (e.clientX - b.left) / b.width;
const py = (e.clientY - b.top) / b.height;
const MAX = 8;
el.style.transform = `rotateX(${((0.5 - py) * 2 * MAX).toFixed(2)}deg) rotateY(${((px - 0.5) * 2 * MAX).toFixed(2)}deg) scale(1.03)`;
el.style.setProperty('--gx', (px * 100).toFixed(1) + '%');
el.style.setProperty('--gy', (py * 100).toFixed(1) + '%');
};
const reset = () => { if (ref.current) ref.current.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; };
return (
onSelect(id || p.sku)}>
{r.label}
{titulo || p.title}
{sub && (
{sub}
)}
{itFmt(p.price_credits)} ZB
{selected && ▸ NO PALCO}
);
}
// --- a vitrine ----------------------------------------------------------------
function ItemShowcase({ produtos, entrega, session, wallet, busy, onBuy, onNavigate }) {
const { useState } = React;
const entradas = itAgrupar(produtos);
const [selId, setSelId] = useState(entradas.length ? entradas[0].id : null);
const [escolhas, setEscolhas] = useState({}); // id do grupo -> {cor, categoria}
React.useEffect(() => { ensureItensCss(); }, []);
if (!entradas.length) return null;
// A variante em foco de uma entrada: num grupo é a combinação escolhida; sem
// grupo é o único produto. Escolha parcial cai na 1ª que casa — nunca "nada".
function focoDe(e) {
const esc = escolhas[e.id] || {};
return e.variantes.find(v => {
const m = v.metadata || {};
return (!esc.cor || m.cor === esc.cor) && (!esc.categoria || m.categoria === esc.categoria);
}) || e.variantes[0];
}
function itSub(e) {
const m = focoDe(e).metadata || {};
return e.grupo && m.cor_nome ? (m.cor_nome + ' · ' + (m.categoria_nome || '')) : null;
}
const ent = entradas.find(x => x.id === selId) || entradas[0];
const p = focoDe(ent);
const md = p.metadata || {};
const r = itRar(p.rarity);
const fatos = itFatos(md);
const canAfford = session && wallet && (wallet.balance || 0) >= p.price_credits;
const isBusy = busy === p.sku;
// A escolha atual sai sempre da variante em foco, não de um estado paralelo:
// assim o seletor nunca mostra marcado algo diferente do que está no palco.
// 🪤 A base vem de `prev`, NUNCA do `md` do fechamento. Duas trocas no mesmo
// lote do React (trocar cor e marca antes de um re-render) liam o `md` velho e
// a segunda desfazia a primeira — a caixa voltava pra cor anterior sozinha.
function escolher(eixo, valor) {
setEscolhas(prev => {
const atual = prev[ent.id] || { cor: md.cor, categoria: md.categoria };
return Object.assign({}, prev, { [ent.id]: Object.assign({}, atual, { [eixo]: valor }) });
});
}
const cores = ent.grupo ? itEixo(ent.variantes, 'cor', 'cor_nome', 'cor_hex') : [];
const marcas = ent.grupo ? itEixo(ent.variantes, 'categoria', 'categoria_nome', 'simbolo') : [];
return (
{entradas.map(e => {
const f = focoDe(e);
return ;
})}
{r.label}
{md.model && (
3D · ARRASTE PRA GIRAR
)}
{p.title}
{p.description}
{/* seletores: só aparecem quando há mais de uma opção no eixo.
A cor da bolinha é a AMOSTRA medida na peça renderizada (vem no
metadata), não a tinta — senão o botão promete um tom e o 3D
entrega outro. */}
{cores.length > 1 && (
{/* Crédito de licença. Os símbolos são CC BY 3.0 (game-icons.net): usar
pode, inclusive comercialmente, mas o crédito é OBRIGATÓRIO — e a
página que mostra os símbolos é onde ele tem que aparecer. */}
{md.creditos && (