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

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        
        {% block titulo %}
            <title>Bootstrap, from Twitter</title>
        {% endblock %}
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        
        <!-- Le styles -->
        <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
        <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        </style>
        
        <link href="{% static 'assets/css/bootstrap-responsive.css' %}" rel="stylesheet">
        
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="{% static 'assets/ico/favicon.ico' %}">
    </head>
    
    
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Django Wars</a>
                    
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="{% url pagina_de_crimes %}">Crimes</a></li>
                            <li><a href="{% url pagina_de_stats %}">Stats</a></li>
                            <li><a href="{% url pagina_da_loja %}">Loja</a></li>
                            <li><a href="{% url pagina_do_inventario %}">Inventário</a></li>
                            <li><a href="{% url pagina_de_alvos %}">Atacar Alguém</a></li>
                            <li><a href="{% url pagina_do_hospital %}">Hospital</a></li>
                            <li><a href="{% url pagina_do_rank %}">Rank</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        
        
        
        <!--informações do usuário-->
        <div class="container" style="margin-bottom: 20px;">
            
            <div class="row">
                
                <div class="span2">
                    <h3>{{ player.user.username }}</h3>
                    
                    <div style="font-size: 10px; font-weight: bold; margin-top: -20px;">
                        Nível {{  player.nivel }} - ${{ player.carteira|floatformat:2 }} na carteira.
                    </div>
                </div><!--/span2-->
                
                
                <div class="span10">
                    
                    <!--barra de hp-->
                    <div class="span2">
                        <strong>HP ({{ player.hp }}/{{ vida }}):</strong>
                        <div class="progress">
                            <div class="bar bar-danger" style="width: {% widthratio player.hp vida 100 %}%;"></div>
                        </div>
                    </div><!--/span2 /barra_de_hp-->
                    
                    <!--barra de energia-->
                    <div class="span2">
                        <strong>Energia ({{ player.energia_atual }}/{{ player.energia }}):</strong>
                        <div class="progress">
                            <div class="bar bar-success" style="width: {% widthratio player.energia_atual player.energia 100 %}%;"></div>
                        </div>
                    </div><!--/span2 /barra_de_energia-->
                    
                    <!--barra de raiva-->
                    <div class="span2">
                        <strong>Raiva ({{ player.raiva_atual }}/{{ player.raiva }}):</strong>
                        <div class="progress">
                            <div class="bar bar-warning" style="width: {% widthratio player.raiva_atual player.raiva 100 %}%;"></div>
                        </div>
                    </div><!--/span2 /barra_de_raiva-->
                    
                </div><!--/span10-->
                
            </div><!--/row-->
            
        </div><!--/container-->
        
        
        {% block conteudo %}
        {% endblock %}
    </body>
</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 *