Teste Ficha Luch

COMO USAR?

Dividirei o código em partes aqui com recomendações de formatação e também explicações sobre a necessidade de ajustar tamanhos de figuras - algumas inclusive padronizadas - para evitar qualquer "quebra" do layout.

1.

Código:

<link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet">

Code que mantém a Font utilizada no template ativa. Basta copiar e colar no início do post. Sem mistério...

2.

Código:

<link rel="stylesheet" href="https://dl.dropbox.com/s/8kbhnigjbs1vvpm/pokeinfo.css">

Essa parte é simplesmente o link que "chama" o código CSS produzido por mim e hosteado para cá, a partir da minha conta do Dropbox. Ao utilizá-lo, é importante saber que qualquer modificação que eu fizer no código, impactará diretamente no local onde o estiver utilizando. Também é importante ressaltar que, apesar de ser recomendado usar essa parte do código em cada post que fizer, basta utilizá-lo uma vez por página, obtendo o efeito desejado em todos os posts dessa página.

3.

Código:

<div class="lvlluch">Lv. 21</div>

Sem muitos mistérios, é a parte onde você coloca o Level do Pokémon. Apesar de eu utilizar a abreviatura como "Lv.", você pode ficar livre para fazer como quiser, desde que tome cuidado com o espaço disponível, para não causar uma quebra de formatação.

4.

Código:

<div class="genderluch" style="color: red;">♀</div>

Essa parte, como deve-se imaginar, é destinada ao símbolo do gênero do Pokémon. A cor não está incluída no código, então deve ser adicionada, como consta no exemplo. Minha recomendação é: 'blue' para o símbolo de male, 'red' para o símbolo de female e 'darkgrey' para o símbolo de genderless.

5.

Código:

<div class="status1luch">[img(31px,15px)]https://i.imgur.com/gK6XSMi.png[/img]</div><div class="status2luch"></div><div class="status3luch"></div><div class="status4luch"></div>

Essa parte é onde você irá adicionar as imagens referentes às condições majoritárias de status, ou seja, aquelas que perduram mesmo após o fim de uma batalha, se não forem curadas de alguma forma. São elas: Burn, Freeze, Paralyze, Poisoned, Badly Poisoned e Sleep. Apesar de haver seis delas, no RPG só é possível ter simultaneamente quatro, considerando as incompatibilidades. Portanto, só deixei espaço para quatro tags, um para cada classe de div descrita ali em cima.

Atentem-se para o fato de que, o tamanho que eu adicionei ao code da imagem, não foi arbitrário... Para que os 4 caibam no mesmo template, é necessário manter um width de 31px e um height de 15px, como eu fiz no exemplo... Esta proporção está de acordo com os tags que eu mesmo fiz e disponibilizo aqui embaixo para quem quiser copiar o link e aplicar. Criei também um tag para o Pokémon que estiver Fainted:



Se não houver algum status negativo no momento, basta deixar os div em branco, assim como fiz com o 2, 3 e 4.

6.

Código:

div class="pokeimgluch"><img src="https://img.pokemondb.net/sprites/sun-moon/icon/honchkrow.png" style="width: 70px;" title="93 EXP to level 22."></div>

Esse fragmento do code é um dos mais importantes, afinal é a "cara" do Pokémon que deseja mostrar no template! Na hora de preencher esta parte, é importante seguir exatamente a forma como eu fiz para obter o mesmo resultado, incluindo utilizando o mesmo link da imagem. Basta substituir o nome do Pokémon contido no final do link - que no exemplo é o Honchkrow - pelo Pokémon que desejar.

Na parte de Style, você só precisa adicionar o width de 70px, que o próprio navegador se encarrega de alterar proporcionalmente o height.

Por fim, o title, é um espaço para colocar uma informação importante. Eu escolhi adicionar ali a EXP que falta para o Pokémon subir um nível. É uma informação fácil de se obter, mas não está explícita na Box. Apresentar esse dado assim, atualizando-o a cada batalha, pode ajudar o narrando a escolher o próximo Pokémon que irá utilizar em combate, por exemplo, baseando-se no quão pouco falta para ele evoluir. Para preencher, não tem mistério, basta substituir o que eu escrevi pela sua frase, evitando-se textos muito grandes. Essa frase surgirá ao deixar o ponteiro do mouse sobre o sprite OU, apertando e segurando o dedo sobre a imagem do Pokémon, se estiver pelo celular.

7.

Código:

<div class="holditemluch">[img(20px,20px)]http://www.serebii.net/itemdex/sprites/metalcoat.png[/img]</div>

Essa parte é referente à imagem do Hold Item que o Pokémon possuir no momento. Assim como a imagem do Pokémon, deve-se utilizar o mesmo link que eu informei, do Serebii. Basta trocar o nome, no final, pelo nome do item que deseja adicionar, sem espaços... Tudo junto. O tamanho que a imagem deve ter é 20px x 20px. Neste exemplo, já está configurado para estas dimensões, facilitando o trabalho.

8.

Código:

<div class="nameluch">Lenora</div>

Outra parte sem mistério, basta substituir Lenora pelo nome da espécie do Pokémon ou Apelido.

9.

Código:

<div class="hpbarluch"><div class="greenbarluch" style="width: 100%;"></div></div>

Essa parte do Code é referente à barra de HP, quanto ao tamanho da energia e a cor. No exemplo, temos uma Barra de HP completamente cheia (100%), portanto verde. Durante a batalha, o narrador pode calcular a porcentagem atual da energia, dividindo o HP atual pelo HP total. O resultado, em porcentagem, deve ser substituído no width, no lugar do 100%.

Caso a porcentagem esteja entre 51% e 100%, mantém-se a div class de 'greenbarluch'; De 26% a 50%, 'yellowbarluch' e de 0% a 25%, 'redbarluch'.

10.

Código:

<div class="hpnumberluch">73 / 73</div>

Por fim, há a quantidade absoluta de HP do Pokémon em questão. No preenchimento desta área há pouco mistério... Basta adicionar primeiro o HP atual e na direita, o HP total, que não será alterado até uma mudança de Level. Para uma boa formatação, é recomendado manter um espaço entre os números e a barra, mas pode ser alterado conforme o gosto do usuário.


Enfim, esta foi uma curta explicação do código. Qualquer outra dúvida, pode me procurar em quaisquer canais que possuir acesso... Também pode copiar e usar o código livremente... Só peço que me avise quando o fizer... Para adicionar o mesmo "template", numa mesma linha, basta colar o código todo de novo logo após o anterior, sem dar Enter para não trocar de linha.