# Pacotes com vários arquivos

> O plugin em .zip: o manifest.json, várias fichas e tabelas, CSS e JavaScript separados, imagens, fontes e sons.

Página: https://docs.rpgdesk.com/fichas/pacotes/

Um arquivo `.html` só dá conta de uma ficha. Use um **pacote** (um `.zip`) quando o plugin tiver:

- mais de uma ficha, ou fichas e tabelas juntas;
- o CSS e o JavaScript em arquivos separados;
- imagens, fontes ou sons próprios.

## O que vai no pacote

A Ficha Básica do RPG Desk, por exemplo:

- ficha-basica.zip

  - manifest.json o manifesto, na raiz
  - ficha.html a ficha
  - estilo.css
  - ficha.js
  - retrato.svg a silhueta do retrato

O `manifest.json` tem os mesmos campos do manifesto do arquivo único e, em cada ficha ou tabela, o `entry`, o HTML dela:

`manifest.json`

```json
{
  "rpgdesk": 1,
  "id": "br.rpgdesk.ficha-basica",
  "name": { "pt": "Ficha Básica do RPG Desk", "en": "RPG Desk Basic Sheet" },
  "version": "1.0.0",
  "author": "RPG Desk",
  "description": "Ficha para qualquer sistema: atributos, perícias, ataques, inventário e anotações.",
  "sdk": 1,
  "sheets": [
    {
      "type": "br.rpgdesk.ficha-basica.personagem",
      "title": { "pt": "Personagem", "en": "Character" },
      "entry": "ficha.html",
      "private": { "mestre": "gm" }
    }
  ]
}
```

- Cada HTML de entrada carrega o rpgdesk.js (e, se quiser, o `rpgdesk.css`) no `<head>`, como no arquivo único. O manifesto não vai dentro do HTML.
- Os outros arquivos entram por caminhos relativos: `<link rel="stylesheet" href="estilo.css">`, `<script src="ficha.js"></script>`, `<img src="img/rpgdesko.webp">`.
- O `"$schema"` no manifesto (opcional) dá a ajuda do editor: `“$schema”: “https://docs.rpgdesk.com/_sdk/1/manifest.schema.json”`.
- O `"icon"` (opcional) é um `.png` ou `.svg` do pacote.

Todos os campos estão em [O manifesto](https://docs.rpgdesk.com/referencia/manifesto/).

*Exemplo funcionando:* [Ficha Básica do RPG Desk](https://docs.rpgdesk.com/exemplos/ficha-basica/ficha.html) ([Baixar o .zip](https://docs.rpgdesk.com/exemplos/ficha-basica.zip))

## Montar o .zip

1. Ponha os arquivos numa pasta, com o `manifest.json` na raiz dela.
2. Selecione **o conteúdo** da pasta (não a pasta) e compacte: no Windows, botão direito → **Enviar para → Pasta compactada**.
3. Instale o `.zip` em **Configurações da mesa → Plugins → Instalar plugin…**.

> **Dica**
>
> Compactou a pasta em vez do conteúdo? O RPG Desk percebe, usa o que está dentro da pasta e avisa. Da próxima vez, compacte o conteúdo.

## Arquivos aceitos

`.html` `.htm` `.css` `.js` `.mjs` `.json` `.txt` `.md` `.png` `.jpg` `.jpeg` `.webp` `.gif` `.svg` `.woff2` `.woff` `.ttf` `.otf` `.mp3` `.ogg` `.wav`

- O pacote tem até 10 MB e 500 arquivos.
- Os caminhos diferenciam maiúsculas e minúsculas: `Retrato.png` não é `retrato.png`.
- A página lê os arquivos do próprio pacote, até com `fetch('dados/magias.json')`. A internet, não.

## Bibliotecas

Bibliotecas como a [Alpine.js](https://alpinejs.dev) e o jQuery funcionam, desde que o arquivo delas vá dentro do pacote. Um `<script src>` de um CDN é erro, porque a ficha não tem internet.

1. Baixe a versão `.min.js` da biblioteca (da Alpine, por exemplo, o `cdn.min.js` do pacote `alpinejs` no npm).
2. Salve numa pasta `vendor/` do pacote, como `vendor/alpine.min.js`.
3. Carregue pelo caminho relativo, depois do rpgdesk.js: `<script defer src="vendor/alpine.min.js"></script>`.

- O verificador não dá avisos para o código de uma biblioteca: um arquivo em `vendor/`, ou um código que começa com o comentário de licença `/*!`. Veja [O verificador](https://docs.rpgdesk.com/referencia/verificador/).
- Com a Alpine, use `x-data`, `x-show` e `x-for` para a tela (abas, mostrar e esconder) e `data-field` para os dados. Não ponha `x-model` e `data-field` no mesmo campo: os dois escreveriam no mesmo valor.
- O `$.ajax` e o `$.getJSON` do jQuery leem os arquivos do pacote (`$.getJSON('dados/magias.json')`), mas não a internet.