Dados de Gamificação

Este widget é usado para exibir as informações de gamificação do jogador separadamente: classificação, nível, fichas e uma barra de progresso com os pontos de XP. Ao contrário do widget de pontos, que mostra todos os dados de gamificação em um único componente, este widget foi projetado para exibir apenas um item de dados de gamificação específico.

• classe <string|required>: gamification_widget
• tipo-de-dados <string|required>: dados-de-gamificacao
• dados-tipo-de-gamificacao <string|required>: refere-se ao item de dados de gamificação que você deseja exibir ('classificação', 'nível', 'ficha', 'xp').
• dados-mostrar-nome <string|optional>: true para exibir o tipo de dados de gamificação no componente. Se não for fornecido, o padrão é false.
• dados-mostrar-dica <string|optional>: true para exibir o componente de dica com uma descrição do tipo de gamificação. Se não for fornecido, o padrão é false.
• dados-tipo-de-progresso <string|optional>: refere-se ao tipo de barra de progresso ('classificação' ou 'nível'), usado apenas quando o dados-tipo-de-gamificacao é xp. Se não for fornecido, o padrão é classificação.

Exemplo 1: (Props Obrigatórios)

Mostre-me o código!

Classificação:

<div
  class="gamification_widget"
  data-type="dados-de-gamificacao"
  data-gamification-type="classificacao"
></div>

Nível:

<div
  class="gamification_widget"
  data-type="dados-de-gamificacao"
  data-gamification-type="nivel"
></div>

Ficha:

<div
  class="gamification_widget"
  data-type="dados-de-gamificacao"
  data-gamification-type="ficha"
></div>

UI:

Exemplo 2: Mostrar Nome

Mostrar o nome do tipo de gamificação

Mostre-me o código!

Classificação:

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="rank"
  data-show-name="true"
></div>

Nível:

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="level"
  data-show-name="true"
></div>

Token:

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="token"
  data-show-name="true"
></div>

UI:

Exemplo 3: Mostrar Tooltip

Mostrar o componente de tooltip com uma descrição do tipo de gamificação. É necessário mostrar o nome para exibir o tooltip.

Mostre-me o código!

Classificação:

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="rank"
  data-show-name="true"
  data-show-tooltip="true"
></div>

Nível:

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="level"
  data-show-name="true"
  data-show-tooltip="true"
></div>

Token:

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="token"
  data-show-name="true"
  data-show-tooltip="true"
></div>

UI:

Exemplo 4: Pontos de XP e Barra de Progresso

Mostra os pontos de xp e a barra de progresso. Por padrão, o data-progress-type é "rank", o que significa que as informações da barra de progresso são baseadas no rank.

Mostre-me o código!

Padrão (Barra de Progresso por Rank):

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="xp"
></div>

Barra de Progresso por Nível

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="xp"
  data-progress-type="level"
></div>

Interface:

Exemplo 5: Pontos de XP e Barra de Progresso (Mostrar Nome e Mostrar Dica)

Mostre os pontos de xp e a barra de progresso com o nome e a dica

Mostre-me o código!

Padrão (Barra de Progresso por Rank):

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="xp"
  data-show-name="true"
  data-show-tooltip="true"
></div>

Barra de Progresso por Nível

<div
  class="gamification_widget"
  data-type="gamification-data"
  data-gamification-type="xp"
  data-show-name="true"
  data-show-tooltip="true"
  data-progress-type="level"
></div>

UI: