Componente de Conquistas da Filial Lusófona

AVISO:

Esta é uma página component usada internamente pela Wiki Lusófona. Ela foi feita para ser usada e incluída em outras páginas.

O que é isso?

Este é o Componente de Conquistas Lusófono, o componente oficial para conquistas da filial Lusófona da Wiki SCP.

Este componente foi feito tanto para uso oficial em guias quanto para uso pessoal em páginas de autor e afins.

Como Usar

Conforme dito acima, este componente foi feito para uso pela administração e por autores e, como tal, apresenta modos de uso levemente diferentes para cada situação.

A diferença entre a versão pessoal e oficial é que a pessoal é exibida a todo e qualquer usuário, ao passo que a oficial é feita para aparecer apenas a usuários seletos.

A única coisa que todo e qualquer usuário deve seguir ao utilizar este componente é adicionar o seguinte no topo da página em que for usá-lo:

[[Module CSS]]
@import url('http://scp-pt-br.wikidot.com/component:conquistas-lusofonas/code/1');
[[/module]]

Uso Pessoal

Para uso pessoal em páginas de autor e afins, o seguinte formato deve ser aplicado para CADA conquista que se deseja acrescentar.

[[include :scp-pt-br:component:conquistas-lusofonas
|pessoal=--
|imagem=URL
|titulo=TÍTULO
|desc=DESCRIÇÃO
]]

Nesse código pessoal indica que você quer usar a versão pessoal do componente e, como tal, não deve ser tocado. imagem define a imagem que será usada, logo basta substituir URL pelo url da imagem pretendida. titulo define o título a ser exibido, e descrição a descrição.

Por último, para as conquistas serem exibidas bonitinho em um grupo basta envolver as conquistas que se deseja agrupar em um div especial deste componente.

Para isso, basta colocar o seguinte em cima da primeira conquista do grupo:

[[div class="wrapwrapper"]]

Para fechar o grupo, coloque o seguinte imediatamente após a última conquista do mesmo:

[[/div]]

Em resumo, troque URL pelo endereço da imagem, TÍTULO pelo título da conquista e DESCRIÇÃO pela descrição no modelo fornecido e repita o processo até ficar satisfeito e então coloque tudo entre [[div class="wrapwrapper"]] e [[/div]].

Exemplo:

[[div class="wrapwrapper"]]

[[include :scp-pt-br:component:conquistas-lusofonas
|pessoal=--
|imagem=http://scp-pt-br.wdfiles.com/local--files/achievements/Temporario.svg
|titulo=Um título incrível.
|desc=Uma descrição bem bacana.
]]

[[/div]]

Uso Oficial (Conquistas Automáticas)

Para uso oficial, basta utilizar o seguinte modelo:

[[include :scp-pt-br:component:conquistas-lusofonas
|oficial1=--
|nome={$nome}
|total=TOTAL
|tags=TAGS
|imagem=URL
|titulo=TÍTULO
|desc=DESCRIÇÃO
]]

Nesse código imagem, título e desc são, respectivamente, o url da imagem a ser usada, o título da conquista e a descrição dela, assim como no código para uso pessoal.

oficial1 indica que o componente será usado de maneira oficial e serve somente para conquistas que serão entregues automaticamente (pendente a criação do oficial2 para conquistas entregues manualmente). nome é uma variável obrigatória, mas que será preenchida automaticamente pelo url da página de conquistas, logo essa linha deve ser colocada, mas o {$nome} deve permanecer intocado.

tags corresponde às tags pelas quais o componente irá procurar para decidir se irá exibir ou não a conquista para o usuário. O componente irá procurar por páginas que batam com as tags colocadas nessa variável para tal seguindo as regras abaixo:

  • Para indicar o fim de uma tag e o começo da próxima, coloque um espaço entre elas.
  • Para indicar que a tag deve obrigatoriamente estar presente em alguma página do usuário para que a conquista seja exibida, coloque + imediatamente na frente da tag.
  • Para indicar que a tag não deve existir na página para que ela seja contabilizada, coloque - imediatamente na frente da tag.
  • Caso queira que o componente contabilize somente páginas que tenham uma tag ou outra, coloque nada na frente da tag.

EX: +tradução -es ru el fará com que o componente contabilize apenas páginas que obrigatoriamente tenham a tag tradução desprovidas da tag es que tenham a tag ru ou a tag el.

total corresponde ao número que o componente irá utilizar para decidir se exibirá ou não a conquista ao usuário que o vê. Tendo varrido a wiki em busca de páginas criadas pelo usuário que tenham as tags solicitadas, o componente terá um número que irá ser comparado com o número em total.

Se o número de páginas for menor que o total, o componente não irá exibir uma versão transparente e em preto e branco da imagem (não exibido).

Se o número de páginas for maior ou igual ao total, o componente exibirá a conquista normalmente.

Por exemplo, se eu quero que o usuário tenha o mínimo de 3 traduções para ver a conquista normalmente, eu definirei total como 3.

Por fim, grupos de conquistas devem ser colocados dentro se uma div wrapwrapper conforme explicado em Uso Pessoal.

Exemplo:

[[div class="wrapwrapper"]]

[[include :scp-pt-br:component:conquistas-lusofonas
|oficial1=--
|nome={$nome}
|total=3
|tags=+traduzido +ru -pl
|imagem=http://scp-pt-br.wdfiles.com/local--files/achievements/Temporario.svg
|titulo=Um título daora.
|desc=Uma descrição bacana.
]]

[[/div]]

Uso Oficial (Conquistas Manuais)

Para uso oficial envolvendo conquistas manuais basta seguir o seguinte modelo:

[[include :scp-pt-br:component:conquistas-lusofonas
|oficial2=--
|conquista=MARCADOR
|nominadoX=USUÁRIO
|titulo=TÍTULO
|desc=DESCRIÇÃO
|imagem=URL
]]

Nesse modelo imagem, desc e titulo são exatamente a mesma coisa dos casos de uso pessoall e //oficial (conquista automática), o que muda é a existência das variáveis conquista e nominado.

conquista corresponde ao nome único da conquista, sendo ele obrigatório e necessitando ser diferente de qualquer outro nome dado a outra conquista dentro de uma mesma página.
nominado corresponde ao nome de usuário daquele que poderá ver a conquista em seu estado ativo e é na verdade 101 variáveis diferentes, cada uma para um usuário diferente. O X precisa ser removido ou trocado por um número de 0 a 99 para que a variável funcione.

Aviso: O nome do usuário deve ser escrito em letras minúsculas e com - no lugar de espaços para funcionar.

Exemplo:

[[div class="wrapwrapper"]]

[[include :scp-pt-br:component:conquistas-lusofonas
|oficial2=--
|conquista=conquistagenerica
|nominado=l200
|nominado0=peixe-do-vento
|nominado1=vintner2
|titulo=Um nome daora
|desc=Descrição daora.
|imagem=http://scp-pt-br.wdfiles.com/local--files/achievements/Temporario.svg
]]

[[include :scp-pt-br:component:conquistas-lusofonas
|oficial2=--
|conquista=outraconquistagenerica
|nominado=l200
|titulo=Um nome bem daora
|desc=Descrição mais daora.
|imagem=http://scp-pt-br.wdfiles.com/local--files/achievements/Temporario.svg
]]

[[/div]]

Código:

/* ACHIEVEMENTS */
 
.wrapwrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: space-between;
    justify-content: space-around;
}
 
.name {
    font-size: 120%;
    font-weight: bold;
    padding-top: 10px;
    min-width: 100%;
}
 
.moduleconverter div.list-pages-box {
   max-width: 100% !important;
}
 
.manual-class .achievewrapnot,
.moduleconverter .achievewrapnot,
.manual-class .achievewrap,
.moduleconverter .achievewrap {
   max-width: 100% !important;
}
 
.moduleconverter {
   max-width: 22.5% !important;
}
 
.achievewrapnot,
.achievewrap {
    margin: 0.3rem;
    position: relative;
    padding: 0;
    text-align: center;
    transition: 0.2s transform ease-in-out;
    max-width: 22.5% !important;
    transition: 0.2s transform;
    display: flex;
}
 
@media (max-width: 500px) {
   .moduleconverter,
   .achievewrapnot,
   .achievewrap {
      max-width: 45% !important;
   }
}
 
.achievewrap:hover,
.expand:hover .achievewrap {
    transform: scale(1.25);
    z-index: 2;
}
 
.expand {
    position: absolute;
    top: 0;
    opacity: 0;
    min-width: 100%;
    transition: 0.3s top, 0.3s 0.1s opacity;
    border: 1px solid #888;
    border-radius: 8px;
    background: #f7f7f7;
    pointer-events: none;
    hyphens: auto;
    max-width: unset !important;
}
 
.achievewrap:hover .expand {
     opacity: 1;
     top: 100%;
     pointer-events: unset;
}
 
.unachieved {
    opacity: .5;
    filter: grayscale(1);
}
 
.achievewrap .con_imagem {
    transform: scale(1);
    transition: 0.2s transform;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: 1s border, 1s background, 0.2s transform;
}
 
.achievewrap:hover .con_imagem {
    transform: scale(1.1);
    border: 1px solid #888;
    background: #f7f7f7;
    transition: 0.3s border, 0.3s background, 0.2s transform;
}
 
.description {
    font-size: 80%;
    padding: 0.25rem 0.25rem 1rem 0.25rem;
    border-top: 1px dashed #888;
}
Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License