Template updates, mainly updating the deck view

analyzer/models.py

@@ -24,6 +24,8 @@ class Card(models.Model, mtg.Card):
 
     def __unicode__(self):
         return self.name
+    def get_cost(self):
+        return mtg.ManaCost(self.cost)
 class Deck(models.Model):
     name = models.CharField(max_length=80)
     cards = models.ManyToManyField(Card, through='Included')

decks/views.py

@@ -2,7 +2,7 @@ from django.http import Http404
 from django.shortcuts import render_to_response
 from mtgweb.analyzer.models import Deck
 from mtgweb.lib.mtg import mtg
-from pygooglechart import PieChart3D
+from pygooglechart import PieChart3D, SimpleLineChart, Axis
 
 def index(request):
     decks = Deck.objects.all()
@@ -58,4 +58,5 @@ def detail(request, id):
                                                     'deck': deck,
                                                     'land_chart': land_chart,
                                                     'symbol_chart': symbol_chart,
+                                                    'ramp_chart': ramp_chart,
                                                     'curve': curve})

media/mtg.css

@@ -7,30 +7,41 @@ h1, h2, h3, h4, h5, h6 {
     text-shadow: 2px 2px 2px #999;
 }
 
+#main {
+    width: 990px;
+}
 header {
     border-bottom: 2px solid #999;
 }
 #navigation {
-    width: 140px;
-    position: absolute;
 }
 #navigation ul {
+    margin: 0px;
     padding: 0px;
+    float: left;
+    width: 100%;
+    background-color: #ddd;
+    border-bottom: 1px solid #999;
 }
 #navigation li {
     list-style: none;
+    float: left;
 }
-#navigation a {
+#navigation a,
+#navigation a:visited,
+#navigation a:hover {
     display: block;
     padding: 2px;
-    background-color: #ddd;
+    text-decoration: none;
-    border-bottom: 1px solid #999;
+    padding-left: 1em;
+    padding-right: 1em;
 }
 #navigation a:hover {
     background-color: #ccc;
 }
 #content {
-    margin-left: 160px;
+    padding-top: 2em;
+    padding-left: 60px;
 }
 /* Cards and mana symbols */
 .mana.symbol {
@@ -65,11 +76,11 @@ header {
     background-color: #eee;
     padding: 3px;
     height: 1em;
+    vertical-align: middle;
 }
 .card .title .name,
 .card .info .type {
     font-weight: bold;
-    float: left;
     text-shadow: 2px 2px 2px #999;
 }
 .card .title .cost,
@@ -125,3 +136,27 @@ header {
 .mana-curve .bar {
     background-color: #999;
 }
+
+section.mana {
+    width: 500px;
+    position: absolute;
+    margin-left: 430px;
+}
+section.mana section {
+    float: left;
+}
+section.mana section.curve,
+section.mana section.ramp {
+    width: 100%;
+}
+section.mana table {
+    width: 100%;
+}
+section.cards {
+    width: 400px;
+}
+section.cards .card-type {
+    font-weight: bold;
+    text-shadow: 2px 2px 2px #999;
+    list-style: none;
+}

templates/cards/view.html

@@ -7,7 +7,9 @@
         <div class="title">
             <span class="name">{{ card.name|title }}</span>
             <span class="cost">
+                {% if cost.converted > 0 %}
                     {% include 'cards/manacost.html' %}
+                {% endif %}
             </span>
         </div>
         <div class="picture"></div>

templates/decks/detail.html

@@ -6,24 +6,68 @@
 
 {% block content %}
 <h2>{{deck}}</h2>
+<section class="mana">
     <h3>Mana</h3>
+    <section class="lands">
         <h4>Lands</h4>
         <img src="{{ land_chart.get_url }}" />
+    </section>
+    <section class="symbols">
         <h4>Symbols</h4>
         <img src="{{ symbol_chart.get_url }}" />
+    </section>
+    <section class="curve">
         <h4>Curve</h4>
         <table class="mana-curve">
             {% for cost, count in curve.items %}
                 <tr>
                     <td class="cost">{{ cost }}</td>
-            <td><div class="bar" style="text-align: right; width: {% widthratio count curve.values|getsum 100 %}%">{{ count }}</div></td>
+                    <td><div class="bar" style="text-align: right; width: {% widthratio count curve.values|getmax 100 %}%">{{ count }}</div></td>
                 </tr>
             {% endfor %}
         </table>
+    </section>
+    <section class="ramp">
+        <h4>Ramp</h4>
+        <table>
+            <tr>
+                <td>
+                    <img src="{{ ramp_chart.get_url }}" />
+                </td>
+                <td>
+                    <table>
+                        {% for turn in deck.ramp %}
+                            <tr>
+                                <td>Turn {{ turn.turn }}</td>
+                                <td>{{ turn.probability }}%</td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+            </tr>
+        </table>
+    </section>
+</section>
+<section class="cards">
     <h3>Cards</h3>
+    {% regroup deck.included_set.all by card.type as cards %}
     <ul>
-    {% for card in deck.included_set.all %}
+        {% for group in cards %}
-        <li>{{card.count}}x <a href="{% url mtgweb.cards.views.display name=card.card.name %}">{{ card.card }}</a></li>
+        <li class="card-type">{{ group.grouper|title }}
+            <ul>
+                {% for included in group.list %}
+                <li>
+                    <div class="card {% if included.card.colors|length > 1 %}gold{% else %}{{ included.card.colors|join:' ' }}{% endif %}">
+                        <div class="title">
+                            <span class="name">{{ included.count }}x</span>
+                            <a class="name" href="{% url mtgweb.cards.views.display name=included.card.name %}">{{ included.card.name }}</a>
+                            <span class="cost">{% with included.card.get_cost as cost %}{% if cost.converted > 0 %}{% include 'cards/manacost.html' %}{% endif %}{% endwith %}</span>
+                        </div>
+                    </div>
+                </li>
                 {% endfor %}
             </ul>
+        </li>
+        {% endfor %}
+    </li>
+</section>
 {% endblock %}

templates/main.html

@@ -6,6 +6,7 @@
         <title>{% block title %}MTG Armory{% endblock %}</title>
     </head>
     <body>
+        <div id="main">
             <header>
                 <h1>MTG Armory</h1>
             </header>
@@ -33,5 +34,6 @@
             </section>
             <footer>
             </footer>
+        </div>
     </body>
 </html>