Django Wars [Parte 31]: Aplicando template

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 fizemos um template bem básico para o nosso jogo.
Agora vamos aplicar esse template no nosso projeto e ser feliz, com molejããããããoooo.

Vou aplicar o template no arquivo do templates/crimes.html.
Para quem não lembra, o arquivo é assim:

<div class="container">
    <p>
        Informações do usuário:
        Nível {{  player.nivel }}
        |
        Energia {{  player.energia_atual }}/{{ player.energia }}
        |
        Raiva {{ player.raiva_atual }}/{{ player.raiva }}
        HP: {{ player.hp }}/{{ vida }}
        |
        Carteira {{ player.carteira }}
    </p>

    <!--lista de crimes que podem ser cometidos-->
    <p>Roubar carrocinha de cachorro quente. (1 de energia) (nível mínimo: 1) <a href="cometer/1">cometer crime</a></p>
    <p>Roubar doce de criança. (2 de energia) (nível mínimo: 2) <a href="cometer/2">cometer crime</a></p>
    <p>Roubar casa. (3 de energia) (nível mínimo: 3) <a href="cometer/3">cometer crime</a></p>
    <p>Roubar banco. (4 de energia) (nível mínimo: 5)(requer arma) <a href="cometer/4">cometer crime</a></p>
    <p>Roubar coisas secretas. (6 de energia) (nível mínimo: 8)(requer arma)(requer armadura) <a href="cometer/5">cometer crime</a></p>

</div> <!-- /container -->

O arquivo está pronto para ser “encapsulado” pelo nosso template.
Para isso, precisamos dizer neste layout que ele vai “herdar” as informações do arquivo templates.html.
{% extends template.html %}.

Só isso faz com que tudo o que foi definido no template.html seja importado nesse layout.
Porém, haviamos definidos alguns locais especiais dentro do template.html, os blocks.
O block funciona da seguinte maneira: no arquivo de template você define uma área onde algo vai aparecer.
No arquivo do template, você coloca um monte de código genérico dentro dessa área.
Ai, no arquivo que você der {% extends %}, se você re-definir o bloco, esse bloco é exibido ao invés da idéia original.
É mais fácil entender todo esse blá blá blá vendo o exemplo:

No template.html eu defini o seguinte bloco:

{% block titulo %}
    <title>Bootstrap, from Twitter</title>
{% endblock %}

Esse bloco vai apresentar um título genérico em todas as páginas do jogo a não ser que eu re-defina esse bloco.
No arquivo crimes.html vou reescrever dessa forma:

{% block titulo %}
    <title>Django Wars - Cometer crimes</title>
{% endblock %}

E ai, a mágica acontece.

No fim das contas, o código final do arquivo crimes.html ficou assim:

{% extends "template.html" %}


{% block titulo %}
    <title>Django Wars - Cometer crimes</title>
{% endblock %}


{% block conteudo %}
    <div class="container">
        <p>
            Informações do usuário:
            Nível {{  player.nivel }}
            |
            Energia {{  player.energia_atual }}/{{ player.energia }}
            |
            Raiva {{ player.raiva_atual }}/{{ player.raiva }}
            HP: {{ player.hp }}/{{ vida }}
            |
            Carteira {{ player.carteira }}
        </p>

        <!--lista de crimes que podem ser cometidos-->
        <p>Roubar carrocinha de cachorro quente. (1 de energia) (nível mínimo: 1) <a href="cometer/1">cometer crime</a></p>
        <p>Roubar doce de criança. (2 de energia) (nível mínimo: 2) <a href="cometer/2">cometer crime</a></p>
        <p>Roubar casa. (3 de energia) (nível mínimo: 3) <a href="cometer/3">cometer crime</a></p>
        <p>Roubar banco. (4 de energia) (nível mínimo: 5)(requer arma) <a href="cometer/4">cometer crime</a></p>
        <p>Roubar coisas secretas. (6 de energia) (nível mínimo: 8)(requer arma)(requer armadura) <a href="cometer/5">cometer crime</a></p>
    </div> <!-- /container -->
{% endblock %}

Apenas herdando o template e alterando alguns pequenos blocos temos o layout bem maneirovisks da página de crimes.
Já pensou, se a gente não fosse fazer isso?
Se fossemos colocar todo aquele código definido no template.html dentro do arquivo crimes?
Que saco seria, né?

Agora, é fazer isso para todos os seus views/templates.
Vocês são grandinhos e podem fazer sozinhos.
Ou podem copiar o código fonte direto de:
https://github.com/frenetic/django-wars

Observação: podem aproveitar para fazer o resto das firulas de layout.
Como nesse projeto estamos utilizando o Twitter Bootstrap, ele tem um montão de coisas legais já feitas que podemos utilizar, como uma barra de progresso vermelha para simbolizar o hp do jogador.
Como o lance aqui é Django e não designer, até por que eu sou um bosta quando o assunto é design, deixo o resto dos layouts a tesão do programador.
A partir de agora vamos focar em colocar nosso app no ar!