From 1263c5aac220d6918912033e5b2a044cd20ecc62 Mon Sep 17 00:00:00 2001
From: Peder Bergebakken Sundt <pbsds@hotmail.com>
Date: Sun, 6 Oct 2019 13:27:33 +0200
Subject: [PATCH] Add support for icons and add python requirements

---
 requirements.txt |  4 ++++
 style.html.j2    | 47 +++++++++++++++++++++++++++++++++++++++++------
 style.scss       | 28 +++++++++++++++++++---------
 3 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 requirements.txt

diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..f5b26ed
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,4 @@
+Jinja2
+libsass
+Markdown
+PyYAML
diff --git a/style.html.j2 b/style.html.j2
index dc4ef84..c637131 100644
--- a/style.html.j2
+++ b/style.html.j2
@@ -57,18 +57,53 @@
     </div>
 {% endmacro %}
 
+{% macro named_icon_to_emoji(name) %}
+    {% if   "AIR"           in name | upper %} 🌪
+    {% elif "ALCHEMY"       in name | upper %} ⚗️
+    {% elif "ANIMAL"        in name | upper %} 🐾
+    {% elif "COMBAT"        in name | upper %} ⚔️
+    {% elif "CRAFTING"      in name | upper %} ⚒
+    {% elif "DARK"          in name | upper %} 💀
+    {% elif "DEFENCE"       in name | upper %} 🛡
+    {% elif "EARTH"         in name | upper %} 🌱
+    {% elif "FIRE"          in name | upper %} 🔥
+    {% elif "HOLY"          in name | upper %} ☀️
+    {% elif "INNATE"        in name | upper %} 🧙
+    {% elif "MAGIC"         in name | upper %} 🔮
+    {% elif "MARKSMANSHIP"  in name | upper %} 🎯
+    {% elif "MARTIAL"       in name | upper %} 🥊
+    {% elif "META"          in name | upper %} 🧩
+    {% elif "PERFORMANCE"   in name | upper %} 🎺
+    {% elif "SHAPESHIFTING" in name | upper %} 🐻
+    {% elif "SKULLDUGGERY"  in name | upper %} ⚰️
+    {% elif "TECHNIQUE"     in name | upper %} 🎲
+    {% elif "WATER"         in name | upper %} 🌊
+    {% elif "WEAPONMASTER"  in name | upper %} 🤺
+    {% else %} {{name}}
+    {% endif %}
+{% endmacro %}
+
 <div class="fjomp_card{{" " + card.style if card.style}}">
-    <header>{{ card.title }}</header>
+    <header>
+        {{ card.title }}
+    </header>
+    {% if card.icon %}
+    <div class="icon">
+        {{ named_icon_to_emoji(card.icon) }}
+    </div>
+    {% endif %}
     <figure>
     {% for figure in card.figures %}
         {{ figure_layer(figure) }}
     {% endfor %}
     </figure>
-    <aside><ul>
-    {% for property in card.properties %}
-        <li>{{ property }}</li>
-    {% endfor %}
-    </ul></aside>
+    <aside>
+        <ul>
+        {% for property in card.properties %}
+            <li>{{ property }}</li>
+        {% endfor %}
+        </ul>
+    </aside>
     <div class="costbar">
     {% for cost in card.costs %}
         <section>
diff --git a/style.scss b/style.scss
index ce84960..6335e49 100644
--- a/style.scss
+++ b/style.scss
@@ -13,13 +13,13 @@
     font-family: sans-serif;
 
     display: grid;
-    grid-template-columns: 5fr 3fr;
+    grid-template-columns: 5fr 3fr auto;
     grid-template-rows: 1.5em var(--figure-size) 2.1em auto;
     grid-template-areas:
-        "title title"
-        "figure properties"
-        "costbar costbar"
-        "description description";
+        "title title icon"
+        "figure properties properties"
+        "costbar costbar costbar"
+        "description description description";
 
     header {
         grid-area: title;
@@ -32,6 +32,11 @@
         border-radius: 0;
         color: white;
     }
+    .icon {
+        grid-area: icon;
+        background-color: #222;
+        color: white;
+    }
     figure {
         grid-area: figure;
         background-color: #333;
@@ -133,6 +138,11 @@
 		background-color: #ddd;
 		color: #333;
 	}
+    .icon {
+        grid-area: icon;
+        background-color: #ddd;
+        color: #333;
+    }
 	figure {
         background-color: #fff;
 		div {
@@ -159,10 +169,10 @@
     --figure-size: 1.5in;
     grid-template-columns: 1fr;
     grid-template-areas:
-        "title"
-        "figure"
-        "costbar"
-        "description";
+        "title icon"
+        "figure figure"
+        "costbar costbar"
+        "description description";
     aside {
         display: none;
     }