> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dkscripts.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Loja de Roupas

> Como o jogador prova, monta o carrinho e compra roupas na loja

# 🛍️ Loja de Roupas

A loja foi desenhada para atender os dois tipos de jogador: quem **já sabe o número** da peça e quer trocar em segundos, e quem prefere **explorar o catálogo** olhando as fotos.

***

## Abrindo a loja

<Steps>
  <Step title="Vá até um ponto de loja" icon="location-dot">
    Os pontos aparecem no mapa quando o admin marca a opção de exibir o ícone.
  </Step>

  <Step title="Pressione E" icon="keyboard">
    Dentro do raio de interação, a loja abre e a câmera enquadra o personagem.
  </Step>
</Steps>

<Note>
  Cada ponto pode ter **categorias diferentes** e uma **permissão própria** — livre, VIP, admin ou organização. Se a loja não abrir, o ponto pode não ser para o seu grupo.
</Note>

***

## A tela

<AccordionGroup>
  <Accordion title="Painel principal — categorias, conjuntos e carrinho" icon="table-columns" defaultOpen>
    Onde o jogador escolhe o que quer provar:

    * **Categorias em destaque** ficam no topo, seguidas do restante do catálogo
    * **Busca** por nome da categoria
    * Aba **Conjuntos** com os looks prontos do servidor
    * **Carrinho** com as peças escolhidas e o **total atualizado em tempo real**
  </Accordion>

  <Accordion title="Painel de variações — as peças da categoria" icon="grip" defaultOpen>
    Ao abrir uma categoria, aparece a grade de variações:

    * **Foto real** de cada peça (ou o ícone da categoria, quando não há foto)
    * Filtro **Todos / Comprados**
    * Faixa de **usados recentemente**
    * Seletor de **textura / cor** da variação selecionada
    * Contador clicável para **digitar o número** direto
    * Botão **Remover** para tirar a peça
  </Accordion>

  <Accordion title="Área do personagem" icon="user" defaultOpen>
    O personagem fica visível o tempo todo, com:

    * Câmera que **enquadra automaticamente** a parte do corpo da categoria aberta
    * Atalhos de enquadramento: **Rosto**, **Peito**, **Pernas**, **Pés** e **Corpo**
    * **Zoom** e **rotação** manuais
    * Botões de **iluminação** e de **levantar as mãos**
  </Accordion>
</AccordionGroup>

***

## Navegando

<Tabs>
  <Tab title="Mouse" icon="computer-mouse">
    | Ação                | Como                                         |
    | ------------------- | -------------------------------------------- |
    | Escolher peça       | Clique na foto                               |
    | Rolar a lista       | Scroll ou **arrastar na vertical**           |
    | Trocar de textura   | Setas laterais ou **arrastar na horizontal** |
    | Girar o personagem  | Arrastar sobre o personagem                  |
    | Aproximar / afastar | Scroll do mouse                              |
    | Ir para um número   | Clicar no contador e digitar                 |
  </Tab>

  <Tab title="Teclado" icon="keyboard">
    | Ação                       | Como             |
    | -------------------------- | ---------------- |
    | Navegar entre as peças     | Setas do teclado |
    | Confirmar a seleção        | <kbd>Enter</kbd> |
    | Levantar / abaixar as mãos | <kbd>X</kbd>     |
    | Fechar a loja              | <kbd>ESC</kbd>   |

    <Tip>
      Quem já sabe o número da peça nem precisa abrir a loja: os [comandos de categoria](/scripts/skinshop/commands) vestem e salvam na hora.
    </Tip>
  </Tab>
</Tabs>

***

## Provando e comprando

<Steps>
  <Step title="Escolha a categoria" icon="list">
    A câmera muda sozinha para o enquadramento certo — cabeça para chapéu, pulso para relógio, pés para sapatos.
  </Step>

  <Step title="Prove as variações" icon="shirt">
    Cada peça selecionada é vestida no personagem na hora, junto com a textura escolhida.
  </Step>

  <Step title="Monte o carrinho" icon="cart-shopping">
    O carrinho aceita peças de **categorias diferentes** ao mesmo tempo. O total é recalculado a cada mudança.
  </Step>

  <Step title="Confirme a compra" icon="money-bill">
    A tela de confirmação lista item por item, marca o que o jogador **já possui** e mostra o valor final.
  </Step>
</Steps>

<Info>
  Fechar a loja ou cancelar a prova **devolve a roupa que o jogador estava usando antes**. Nada é cobrado sem passar pela confirmação.
</Info>

### O que acontece depois da compra

* As peças entram no **histórico de compras** do jogador
* Elas passam a aparecer no **guarda-roupa** dele
* O visual atual é **salvo** como a roupa do personagem

<Tip>
  Com `purchasedDiscount` ligado (o padrão), **uma variação já comprada volta a custar zero**. O histórico é por categoria e variação, então trocar apenas a cor de uma peça que já é sua também sai de graça.
</Tip>

***

## Conjuntos prontos

Na aba **Conjuntos**, o servidor oferece looks completos montados pela staff — executivo, casual, uniforme de evento, o que fizer sentido.

* Cada card mostra o nome, a descrição e o preço do pacote
* O desconto configurado em `conjuntoDiscount` aparece no valor exibido
* Selos **Popular**, **Novo** e **VIP** ajudam a destacar os favoritos

Ao escolher um conjunto, as peças são aplicadas e salvas na hora, além de entrarem no carrinho.

<Card title="Configurar conjuntos" icon="sliders" href="/scripts/skinshop/configs/sh-config#conjuntos-prontos" horizontal>
  Como montar os conjuntos do seu servidor a partir de um look vestido no jogo.
</Card>

***

## Privacidade durante a prova

Enquanto a loja está aberta, o script **esconde os peds próximos** e remove a colisão entre eles e o jogador, para ninguém atravessar na frente da câmera nem empurrar o personagem no meio da prova.

<Note>
  No **guarda-roupa** o comportamento muda: os outros jogadores continuam visíveis, porque é para eles que o look é compartilhado. Só os NPCs somem. Isso é ajustável em [Configurações do Client](/scripts/skinshop/configs/cl-config#privacidade).
</Note>

***

<CardGroup cols={2}>
  <Card title="Guarda-Roupa" icon="box-archive" href="/scripts/skinshop/usage/wardrobe">
    O que fazer com as peças depois de comprá-las.
  </Card>

  <Card title="Preços e categorias" icon="tag" href="/scripts/skinshop/configs/sh-config">
    Configure o catálogo, os preços e os destaques da loja.
  </Card>
</CardGroup>