Django Wars [Parte 32]: Firulas no layout

O Django Wars foi idealizado e desenvolvido no Django 1.4. Algumas funcionalidades aqui descritas podem não funcionar ou funcionar de forma diferente em outras versões do Django

No post anterior eu falei que não iria mais falar sobre layouts e design.
Eu menti.
Não me processem que eu não tenho dinheiro…
Eu queria apenas compartilhar uma dica com vocês e ai cada um faz o seu layout.

Desde quando o projeto começou, venho frizando que estamos utilizando o Twitter Bootstrap.
Como eu já falei antes, o Bootstrap tem um monte de componentes legais, prontinhos da silva sauro para serem utilizados por nós, programadores sem noção de design.
Mas, se você não conhece o poder desse framework para front-end, ou anda meio sem inspiração, vou fazer duas coisas bem legais nesse post:

Primeiro: Bootsnipp – Nesse site, BootSnipp.com, você encontra um monte de snipets de código e idéias de como utilizar o Bootstrap.
Na falta de inspiração ou falta de conhecimento, a dica pode salvar o dia.

Segundo: Vou fazer o painel de informações do usuário pra ficar bem legalzão 😀
E ai, quem sabe, vocês se inspiram e partem para o layout próprio.

Vou fazer a adição no arquivo template.html, visto que todos os layouts “herdam” deste.

template.html

OMG!
Vejam: coloquei um container que mostra as informações do jogador de forma mais organizada.
Não é bonito e nem funcional, mas serve muito bem para exemplificar o conceito de Filtros de Template.

O primeiro filtro utilizado encontra-se na linha 67, o filtro FloatFormat.
O que esse filtro faz é pegar um número real, float, e exibi-lo com a quantidade de casas decimais que desejamos.
No caso, queremos apenas que apareçam duas casas decimais.

Outro filtro, que foi usado três vezes nesse template (linhas 78, 86, 94) foi o WidthRatio.
Este filtro recebe três números, que vamos chamar de A, B e C.
Pega o número A e divide por B.
O resultado da operação de divisão é multiplicado por C.
Para sabermos quantos por centro de HP nosso jogador possui fica fácil:
Pega a quantidade atual de HP e divide pela quantidade máxima possível.
Assim teremos a razão, um número entre 0 e 1.
Se multiplicarmos a razão por 100, teremos a porcentagem.
Ai, é só colocar um % perto da saída do filtro e o jogador estará vendo a porcentagem de HP atual.
Bom demais, né?

Pronto!
Agora chega de falar de layout.
Cada um com seus problemas na hora de embelezar o jogo.
Próxima postagem falaremos um pouco sobre publicação do projeto em um servidor.

O código fonte atual encontra-se em:
https://github.com/frenetic/django-wars

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *