Pular para o conteúdo principal

Avatar e Tokens

Avatar​

Este widget é usado para exibir uma imagem com progresso opcional e informações de nível. A imagem exibida corresponde ao nível atual do jogador. Esta imagem é adicionada quando o nível é criado no backoffice.

  • classe <string|required>: gamification_widget
  • data-type <string|required>: avatar
  • data-size <string|optional>: altura e largura do avatar, só suportamos três valores (50px, 110px [usado por padrão] e 140px).
  • data-show-level <string|optional>: true para mostrar o nível. Se não fornecido, o padrão é false.
  • data-progress-type <string|optional>: refere-se ao círculo de progresso em torno do avatar, referente ao rank ou ao nível. Se não fornecido, o padrão é rank.

Exemplos de Tamanhos de Avatar Com/Sem Crachá de Nível:​

Esses exemplos mostram os 3 tamanhos disponíveis, o do meio sem o crachá de nível.

sizes.png

Mostre-me o código!
<div
  class="gamification_widget"
  data-type="avatar"
  data-show-level="true"
  data-size="140"
></div>

<div class="gamification_widget" data-type="avatar" data-size="110"></div>

<div
  class="gamification_widget"
  data-type="avatar"
  data-show-level="true"
  data-size="50"
></div>

Exemplos de Tipos de Progresso do Avatar:​

Este exemplo mostra um avatar para o mesmo jogador, o primeiro com progresso de rank e o segundo com progresso de nível.

progress-types.png

Mostre-me o código!
<div
  class="gamification_widget"
  data-type="avatar"
  data-size="110"
  data-show-level="true"
  data-progress-type="rank"
></div>

<div
  class="gamification_widget"
  data-type="avatar"
  data-size="110"
  data-show-level="true"
  data-progress-type="level"
></div>

Animações:​

O widget do avatar inclui animações para os seguintes eventos

  • Nível Acima

    level-up.gif

  • Rank Acima

    rank-up.gif

Crachá de Nível​

Este widget é usado para exibir o crachá de nível do widget do avatar, mas separadamente

  • classe <string|required>: gamification_widget
  • data-type <string|required>: badge-level
  • data-size <string|optional>: tamanho do crachá de nível, suportamos apenas dois tamanhos: padrão e pequeno.

Tamanhos de Exemplo​

Esses exemplos mostram os 2 tamanhos disponíveis.

badge-sizes.png

Mostre-me o código!
<div
  class="gamification_widget"
  data-type="badge-level"
  data-size="small"
></div>
<div class="gamification_widget" data-type="badge-level"></div>

Animações:​

O widget de nível de emblema inclui animações para o evento de nível acima

badge-level.gif

Tokens​

Este widget é usado para exibir apenas os tokens do jogador

  • classe <string|required>: gamification_widget
  • data-type <string|required>: tokens
  • data-direction <string|optional>: adicione a cor no formato hex (#FFFFFF) para alterar a cor do texto dos tokens
  • 🆕 data-reverse <boolean|optional>: true para mostrar a imagem à direita dos dígitos. Se não fornecido, o padrão é false e a imagem aparece à esquerda.

Exemplo de tokens sem / com cor personalizada:​

TokensTokens
Me mostre o código!
<div class="gamification_widget" data-type="tokens"></div>

<div
  class="gamification_widget"
  data-type="tokens"
  data-text-color="#81c784"
></div>

Exemplo de tokens com ordem inversa​

Tokens InversosTokens Inversos
Me mostre o código!
<div class="gamification_widget" data-type="tokens" data-reverse="true"></div>

Animações:​

O widget de tokens inclui animações para o evento de vitória

tokens-win.gif