From 0f7d70da837d50db424062bc795505e8aec3e34a Mon Sep 17 00:00:00 2001
From: Correl Roush <correl@gmail.com>
Date: Wed, 22 Sep 2010 21:26:21 -0400
Subject: [PATCH] Template updates, mainly updating the deck view

---
 analyzer/models.py          |  2 +
 decks/views.py              |  3 +-
 media/mtg.css               | 49 ++++++++++++++++++----
 templates/cards/view.html   |  4 +-
 templates/decks/detail.html | 84 ++++++++++++++++++++++++++++---------
 templates/main.html         | 56 +++++++++++++------------
 6 files changed, 142 insertions(+), 56 deletions(-)

diff --git a/analyzer/models.py b/analyzer/models.py
index d216a8a..9ba2837 100755
--- a/analyzer/models.py
+++ b/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')
diff --git a/decks/views.py b/decks/views.py
index 3bac627..05fab34 100755
--- a/decks/views.py
+++ b/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})
diff --git a/media/mtg.css b/media/mtg.css
index 8b6478b..e020770 100644
--- a/media/mtg.css
+++ b/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;
-    border-bottom: 1px solid #999;
+    text-decoration: none;
+    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;
+}
diff --git a/templates/cards/view.html b/templates/cards/view.html
index bd697a0..a927ccd 100644
--- a/templates/cards/view.html
+++ b/templates/cards/view.html
@@ -7,7 +7,9 @@
         <div class="title">
             <span class="name">{{ card.name|title }}</span>
             <span class="cost">
-                {% include 'cards/manacost.html' %}
+                {% if cost.converted > 0 %}
+                    {% include 'cards/manacost.html' %}
+                {% endif %}
             </span>
         </div>
         <div class="picture"></div>
diff --git a/templates/decks/detail.html b/templates/decks/detail.html
index 1675c11..5ae56e5 100755
--- a/templates/decks/detail.html
+++ b/templates/decks/detail.html
@@ -6,24 +6,68 @@
 
 {% block content %}
 <h2>{{deck}}</h2>
-<h3>Mana</h3>
-<h4>Lands</h4>
-<img src="{{ land_chart.get_url }}" />
-<h4>Symbols</h4>
-<img src="{{ symbol_chart.get_url }}" />
-<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>
-        </tr>
-    {% endfor %}
-</table>
-<h3>Cards</h3>
-<ul>
-    {% for card in deck.included_set.all %}
-        <li>{{card.count}}x <a href="{% url mtgweb.cards.views.display name=card.card.name %}">{{ card.card }}</a></li>
-    {% endfor %}
-</ul>
+<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|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 group in cards %}
+        <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 %}
diff --git a/templates/main.html b/templates/main.html
index 8c3fcf9..18f9985 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -6,32 +6,34 @@
         <title>{% block title %}MTG Armory{% endblock %}</title>
     </head>
     <body>
-        <header>
-            <h1>MTG Armory</h1>
-        </header>
-        <section id="navigation">
-            <ul>
-                <li><a href="{% url mtgweb.analyzer.views.index %}">Home</a></li>
-                <li><a href="/cards/">Cards</a></li>
-                <li><a href="/decks/">Decks</a></li>
-            </ul>
-        </section>
-        <section id="content">
-            {% block content %}
-                <h2>Welcome to the MTG Armory</h2>
-                <p>
-                    Someday this might grow up into yet another deck builder
-                    site for folks to flock to and keep track of their stuff.
-                    For now, though, it's just an awful looking dumping ground
-                    for my own decks and Python experimentation.
-                </p>
-                <p>
-                    This whole thing is just an excercise in learning Django
-                    and HTML5, so don't expect too much out of it. Ever.
-                </p>
-            {% endblock %}
-        </section>
-        <footer>
-        </footer>
+        <div id="main">
+            <header>
+                <h1>MTG Armory</h1>
+            </header>
+            <section id="navigation">
+                <ul>
+                    <li><a href="{% url mtgweb.analyzer.views.index %}">Home</a></li>
+                    <li><a href="/cards/">Cards</a></li>
+                    <li><a href="/decks/">Decks</a></li>
+                </ul>
+            </section>
+            <section id="content">
+                {% block content %}
+                    <h2>Welcome to the MTG Armory</h2>
+                    <p>
+                        Someday this might grow up into yet another deck builder
+                        site for folks to flock to and keep track of their stuff.
+                        For now, though, it's just an awful looking dumping ground
+                        for my own decks and Python experimentation.
+                    </p>
+                    <p>
+                        This whole thing is just an excercise in learning Django
+                        and HTML5, so don't expect too much out of it. Ever.
+                    </p>
+                {% endblock %}
+            </section>
+            <footer>
+            </footer>
+        </div>
     </body>
 </html>