Campos, listas e abas

O rpgdesk.js liga sozinho os atributos data-… da página, inclusive nos elementos que aparecem depois (os itens de uma lista, por exemplo). Uma ficha inteira pode ser feita sem JavaScript. A tabela completa está em Atributos no HTML.

A ficha abaixo usa quase tudo desta página: o retrato, os campos, os modificadores calculados, as abas, a lista do inventário e a aba do mestre. Troque o Papel na faixa do canto para ver o que cada um vê.

D20 GenéricoBaixar o .htmlAbrir em nova aba ↗

Modo de teste: os dados ficam só neste navegador. A faixa no canto troca o papel (mestre, dono da ficha, outro jogador) e mostra o registro das rolagens.

O documento e os caminhos

Cada ficha tem um documento: os campos e os valores dela, guardados na mesa. Cada campo tem um caminho:

• nome, nivel, forca: campos soltos;
• atributos.forca, pv.atual, pv.max: campos dentro de um grupo, separados por ponto.

As regras dos nomes:

• letras sem acento, números e _, começando por letra ou _: forca, não força;
• maiúsculas não contam: Forca e forca são o mesmo campo;
• até 64 caracteres por nome e 12 níveis de grupo;
• nomes que começam com _rpgdesk são do RPG Desk.

O verificador avisa de um nome errado antes de instalar. Veja O verificador.

Campos: data-field

Vai num <input>, <textarea> ou <select>:

<label>Nome <input data-field="nome"></label>
<label>Nível <input type="number" data-field="nivel" min="1"></label>
<label><input type="checkbox" data-field="inspirado"> Inspirado</label>
<label>Alinhamento
  <select data-field="alinhamento">
    <option>Leal</option>
    <option>Neutro</option>
    <option>Caótico</option>
  </select>
</label>
<label><input type="radio" name="tamanho" value="pequeno" data-field="tamanho"> Pequeno</label>
<label><input type="radio" name="tamanho" value="medio" data-field="tamanho"> Médio</label>
<textarea data-field="historia" placeholder="História"></textarea>

Campo	O que grava
texto, <textarea>	o texto
type="number", type="range"	um número (vazio apaga o campo)
type="checkbox"	verdadeiro ou falso
type="radio"	o value do marcado (todos com o mesmo data-field)
<select>	o value da opção escolhida
type="date", type="time", type="color"	o valor, como texto

• Texto e número gravam enquanto a pessoa escreve; as escolhas gravam na hora.
• O que outra pessoa escreve aparece na hora. Se você está escrevendo no mesmo campo, a mudança dela aparece quando você sai do campo.
• Quem não pode escrever vê o campo travado (a classe rd-readonly vai no campo). data-readonly trava o campo para todos: bom para mostrar um valor calculado num campo.

Textos: data-text

Mostra o valor de um campo como texto, em qualquer elemento. É o jeito de mostrar um valor calculado:

<p>Modificador: <b data-text="mod_forca"></b></p>

O valor de mod_forca vem do JavaScript, com doc.compute: veja Campos calculados.

Imagens: data-image

Num <img>, mostra a imagem guardada no campo. Clicar abre a escolha de imagem do RPG Desk (do computador ou das imagens da mesa) para quem pode escrever:

<img class="retrato" data-image="retrato" alt="Retrato do personagem">

Sem imagem, aparece uma silhueta; um src próprio no <img> troca a silhueta. O campo guarda o identificador do arquivo, não a imagem.

Listas: data-list

Inventário, magias, ataques: uma lista em que cada item tem os seus campos. O <template> dentro dela é o molde de cada item:

<ul data-list="inventario">
  <template>
    <li class="rd-row">
      <input class="rd-grow" data-field="nome" placeholder="Item">
      <input type="number" data-field="qtd" min="0">
      <button data-roll="1d6 + {qtd}" data-label="{nome}">Rolar</button>
      <button data-list-remove>×</button>
    </li>
  </template>
</ul>
<button data-list-add="inventario">+ Item</button>

• Dentro do <template>, os caminhos são do item: nome é o nome do item, e {qtd}, a quantidade dele.
• data-list-add="inventario" acrescenta um item vazio no fim.
• data-list-remove, dentro do <template>, tira aquele item.
• Uma lista pode ter outra lista dentro de cada item.

Para pôr itens já preenchidos, reordenar ou contar os itens, use o JavaScript: veja Listas.

Abas: data-tabs

Uma ficha é uma página só. Para separar em partes, use abas:

<nav data-tabs="ficha">
  <button data-tab="principal">Principal</button>
  <button data-tab="magias">Magias</button>
</nav>
<section data-tab-panel="principal">…</section>
<section data-tab-panel="magias">…</section>

• Só a seção da aba escolhida aparece. A primeira aba começa aberta.
• O nome em data-tabs ("ficha") separa um grupo de abas de outro, se a página tiver mais de um.
• A aba escolhida fica guardada enquanto a ficha estiver aberta, mesmo se ela mudar de espaço.

Quem vê: data-role

Valor	Quem vê o elemento
data-role="gm"	só os mestres
data-role="owner"	o dono da ficha e os mestres
data-role="player"	só os jogadores

data-role é aparência

data-role só esconde o elemento na tela: os dados continuam chegando a todos. Para um segredo de verdade (o que os jogadores não podem nem receber), use as partes privadas.

Elementos criados pelo JavaScript

O rpgdesk.js liga sozinho os elementos que entram na página. Se você monta um pedaço da página com innerHTML e ele não ligou, chame RPGDesk.bind(elemento).