From d022243e5a6f5cf2788b8127f777785863f90ede Mon Sep 17 00:00:00 2001
From: Ada Werefox <ada.werefox@tutanota.com>
Date: Sun, 10 Mar 2024 01:36:19 -0600
Subject: [PATCH] Reworking the user interface.

---
 tunictracker/tracker/forms.py                 |  4 +-
 .../tracker/static/tracker/assets/refresh.js  | 24 ++---
 .../static/tracker/data/holy_cross_codes.json | 10 +-
 .../templates/tracker/address/index.html      |  4 +-
 .../templates/tracker/breakdown/block.html    | 26 +++---
 .../templates/tracker/codes/block.html        | 20 +---
 .../templates/tracker/codes/index.html        | 10 +-
 .../tracker/templates/tracker/index.html      | 92 ++++++++++---------
 .../templates/tracker/settings/index.html     |  4 +-
 .../templates/tracker/status/index.html       |  2 +-
 .../templates/tracker/summary/block.html      |  2 +-
 .../templates/tracker/summary/list.html       |  2 +-
 tunictracker/tracker/views.py                 |  5 +-
 13 files changed, 98 insertions(+), 107 deletions(-)

diff --git a/tunictracker/tracker/forms.py b/tunictracker/tracker/forms.py
index 87f5cc8..b2870f4 100644
--- a/tunictracker/tracker/forms.py
+++ b/tunictracker/tracker/forms.py
@@ -5,9 +5,9 @@ from json import loads
 class ServerAddressForm(forms.Form):
     server_address_form = forms.URLField(
         max_length=1312, initial="http://localhost:8000/", empty_value="http://localhost:8000/", label="")
-    server_address_form.widget.attrs["class"] = "w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
+    server_address_form.widget.attrs["class"] = "w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
 
 
 class BackendFilepathForm(forms.Form):
     backend_filepath_form = forms.CharField()
-    backend_filepath_form.widget.attrs["class"] = "w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
+    backend_filepath_form.widget.attrs["class"] = "w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
diff --git a/tunictracker/tracker/static/tracker/assets/refresh.js b/tunictracker/tracker/static/tracker/assets/refresh.js
index f46b7bc..21b9c8b 100644
--- a/tunictracker/tracker/static/tracker/assets/refresh.js
+++ b/tunictracker/tracker/static/tracker/assets/refresh.js
@@ -269,10 +269,10 @@ async function refresh_elements(cross_codes) {
 						cross_codes_block_list_item.querySelector(
 							".codes-list-item-code"
 						).textContent = default_cross_codes[code]
-							.replace(/U/g, "⬆️ ")
-							.replace(/R/g, "➡️ ")
-							.replace(/D/g, "⬇️ ")
-							.replace(/L/g, "⬅️ ");
+							.replace(/U/g, "⬆️")
+							.replace(/R/g, "➡️")
+							.replace(/D/g, "⬇️")
+							.replace(/L/g, "⬅️");
 						new_cross_codes_block_list.appendChild(
 							cross_codes_block_list_item.cloneNode(true)
 						);
@@ -284,10 +284,10 @@ async function refresh_elements(cross_codes) {
 						cross_codes_block_list_item.querySelector(
 							".codes-list-item-code"
 						).textContent = global_cross_codes[code]
-							.replace(/U/g, "⬆️ ")
-							.replace(/R/g, "➡️ ")
-							.replace(/D/g, "⬇️ ")
-							.replace(/L/g, "⬅️ ");
+							.replace(/U/g, "⬆️")
+							.replace(/R/g, "➡️")
+							.replace(/D/g, "⬇️")
+							.replace(/L/g, "⬅️");
 						if (cross_codes_entered.Global[code]) {
 							cross_codes_block_list_item.classList.add("hidden");
 						} else {
@@ -305,10 +305,10 @@ async function refresh_elements(cross_codes) {
 							cross_codes_block_list_item.querySelector(
 								".codes-list-item-code"
 							).textContent = cross_codes[scene][code]
-								.replace(/U/g, "⬆️ ")
-								.replace(/R/g, "➡️ ")
-								.replace(/D/g, "⬇️ ")
-								.replace(/L/g, "⬅️ ");
+								.replace(/U/g, "⬆️")
+								.replace(/R/g, "➡️")
+								.replace(/D/g, "⬇️")
+								.replace(/L/g, "⬅️");
 							if (cross_codes_entered[scene][code]) {
 								cross_codes_block_list_item.classList.add("hidden");
 							} else {
diff --git a/tunictracker/tracker/static/tracker/data/holy_cross_codes.json b/tunictracker/tracker/static/tracker/data/holy_cross_codes.json
index 7b8c64c..99b6fcb 100644
--- a/tunictracker/tracker/static/tracker/data/holy_cross_codes.json
+++ b/tunictracker/tracker/static/tracker/data/holy_cross_codes.json
@@ -1,7 +1,7 @@
 {
 	"Default": {
 		"Speedrunner Code": "RULDDRULU",
-		"Seeking Spell": "ULURDL",
+		"Seeking Spell": "ULURDR",
 		"Healing Spell": "DRDLURU"
 	},
 	"Cathedral": {
@@ -46,10 +46,10 @@
 		"Back To Work Treasure": "RDLULLDRRDD",
 		"Compass Fairy": "LRDUUDRLURDLUDRL",
 		"Fire Wand Obelisk Page": "URDLDRUL",
-		"Fountain Cross Door": "URDLDLU",
+		"Fountain Cross Door": "DRULUR",
 		"Fountain Fairy": "DLLDURD",
-		"Lower Flower Fairy": "URDLDLDLU",
-		"Moss Fairy": "URULDRURULDLDRULURDRD",
+		"Lower Flower Fairy": "URDLDLDLDLU",
+		"Moss Fairy": "URULDLULURDRDRULURDRD",
 		"Power Up Treasure": "UDRUDLUDLRDLRU",
 		"Sacred Geometry Treasure": "DLLUURRLDRUD",
 		"Southeast Cross Door": "DRULUR",
@@ -73,7 +73,7 @@
 	},
 	"West Garden": {
 		"Sword Door": "DRULUR",
-		"Tiles Fairy": "URULURULURDRULRLURULURULU",
+		"Tiles Fairy": "URULURULURDRULDLURULURULU",
 		"Tree Fairy": "LDRLUD"
 	}
 }
diff --git a/tunictracker/tracker/templates/tracker/address/index.html b/tunictracker/tracker/templates/tracker/address/index.html
index 3295702..f5382e7 100644
--- a/tunictracker/tracker/templates/tracker/address/index.html
+++ b/tunictracker/tracker/templates/tracker/address/index.html
@@ -1,7 +1,7 @@
 <form action="{% url "set_address" %}"
       method="post"
       class="flex flex-row space-x-2">
-       <div class="w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
+       <div class="w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
             hidden></div>
        {% csrf_token %}
        <label for="server-address-form"
@@ -9,6 +9,6 @@
        {% for field in server_address_form %}{{ field }}{% endfor %}
        <input type="submit"
               value="Submit"
-              class="p-2 m-auto text-sm rounded-md ring-2 ring-bluelight-dark bg-bluelight-translucent"
+              class="p-2 m-auto text-sm rounded-xl border-2 border-bluelight-dark bg-bluelight-translucent"
               id="server-address-form" />
 </form>
diff --git a/tunictracker/tracker/templates/tracker/breakdown/block.html b/tunictracker/tracker/templates/tracker/breakdown/block.html
index 0a0a85e..2ac1fa9 100644
--- a/tunictracker/tracker/templates/tracker/breakdown/block.html
+++ b/tunictracker/tracker/templates/tracker/breakdown/block.html
@@ -1,4 +1,4 @@
-<div class="p-4 flex flex-col max-w-full rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark {{ extra_classes }}">
+<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark {{ extra_classes }}">
   <div class="flex text-lg breakdown-block-title">{{ scene_title }}</div>
   <div class="flex flex-col md:flex-row justify-center md:space-x-4">
     <div class="flex flex-col basis-1/2 overflow-hidden">
@@ -6,14 +6,14 @@
         <div class="text-md breakdown-block-checks-title">
           Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
         </div>
-        <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
+        <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
       </div>
-      <div class="pb-4 flex flex-col space-y-2 overflow-x-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
-        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
+      <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
+        <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
         </ul>
         {% for check_name, check in scene_data.Checks.items %}
           {% if not check %}
-            <ul class="min-w-max bg-bluelight-translucent rounded-md px-1">
+            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
               ❌ {{ check_name }}
             </ul>
           {% endif %}
@@ -25,18 +25,18 @@
         <div class="text-md breakdown-block-entrances-title">
           Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
         </div>
-        <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
+        <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
       </div>
-      <div class="pb-4 flex flex-col space-y-2 overflow-x-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
-        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
+      <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
+        <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
         </ul>
         {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
           {% if entrance_destination == "" %}
-            <ul class="min-w-max bg-bluelight-translucent rounded-md px-1">
+            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
               ❌ {{ entrance_origin }}
             </ul>
           {% else %}
-            <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
+            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
               ❌ {{ entrance_origin }}
             </ul>
           {% endif %}
@@ -44,13 +44,13 @@
       </div>
     </div>
   </div>
-  <div class="overflow-x-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
+  <div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
     <div class="flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
-      <ul class="bg-bluelight rounded-md px-1 hidden">
+      <ul class="bg-bluelight rounded-xl px-1 text-sm hidden">
       </ul>
       {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
         {% if entrance_destination %}
-          <ul class="bg-bluelight rounded-md px-1">
+          <ul class="bg-bluelight rounded-xl px-1 text-sm">
             ✔️ {{ entrance_origin }} -> {{ entrance_destination }}
           </ul>
         {% endif %}
diff --git a/tunictracker/tracker/templates/tracker/codes/block.html b/tunictracker/tracker/templates/tracker/codes/block.html
index ebada44..87b7264 100644
--- a/tunictracker/tracker/templates/tracker/codes/block.html
+++ b/tunictracker/tracker/templates/tracker/codes/block.html
@@ -1,20 +1,8 @@
 {% if not is_entered %}
-    <ul class="flex flex-col p-2 rounded-md bg-bluelight-translucent-dark max-w-full">
-        <div class="p-2 codes-list-item-title">{{ name }}</div>
-        <div class="p-2 m-auto justify-center align-top">
-            <div class="max-w-64 codes-list-item-code">
-                {% for arrow in code %}
-                    {% if arrow == "U" %}
-                        ⬆️
-                    {% elif arrow == "D" %}
-                        ⬇️
-                    {% elif arrow == "L" %}
-                        ⬅️
-                    {% elif arrow == "R" %}
-                        ➡️
-                    {% endif %}
-                {% endfor %}
-            </div>
+    <ul class="p-2 flex flex-col rounded-xl bg-bluelight-translucent-dark">
+        <div class="codes-list-item-title text-md">{{ name }}</div>
+        <div class="m-auto justify-center align-top">
+            <div class="max-w-64 codes-list-item-code text-2xl break-all">{{ code }}</div>
         </div>
     </ul>
 {% endif %}
diff --git a/tunictracker/tracker/templates/tracker/codes/index.html b/tunictracker/tracker/templates/tracker/codes/index.html
index fefba43..2d5a3af 100644
--- a/tunictracker/tracker/templates/tracker/codes/index.html
+++ b/tunictracker/tracker/templates/tracker/codes/index.html
@@ -1,7 +1,7 @@
-<div class="p-4 flex flex-col space-y-2 max-w-full text-lg rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
-    <div class="text-md">Holy Cross Codes</div>
-    <div class="flex flex-col space-y-2">
-        <ul class="flex flex-col space-y-4 rounded-md codes-list">
+<details class="p-2 flex flex-col space-y-2 max-w-full text-lg rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
+    <summary>Holy Cross Codes</summary>
+    <div class="flex flex-col space-y-2 max-h-96 overflow-y-scroll">
+        <ul class="flex flex-col space-y-2 rounded-xl codes-list">
             {% for name, code in default_codes.items %}
                 {% include "tracker/codes/block.html" with is_entered=False %}
             {% endfor %}
@@ -18,4 +18,4 @@
             {% endfor %}
         </ul>
     </div>
-</div>
+</details>
diff --git a/tunictracker/tracker/templates/tracker/index.html b/tunictracker/tracker/templates/tracker/index.html
index 7e3c650..ed7321d 100644
--- a/tunictracker/tracker/templates/tracker/index.html
+++ b/tunictracker/tracker/templates/tracker/index.html
@@ -1,66 +1,68 @@
 {% extends "index.html" %}
 {% load static %}
 {% block content %}
-    <div class="container monospace">
-        <div class="m-4 ring-4 rounded-md text-[#eee] bg-bluelight-translucent-dark ring-bluelight-dark">
+    <div class="container monospace py-4">
+        <div class="border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
             {% if debug != '' %}
-                <div class="p-4 flex flex-col space-y-4">
-                    <h1 class="flex text-2xl mx-2">
-                        <span class="relative inline-block align-middle h-8 w-8">
-                            <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
-                                 alt="A trans pride fox emoji."
-                                 width=""
-                                 height="" />
-                        </span>
-                        &nbsp;Tunic Transition Tracker
-                    </h1>
-                    <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
-                    <details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-                        <summary class="justify-start p-2 text-lg">Settings</summary>
-                        <div class="p-2 flex flex-col space-y-2">
-                            {% include "tracker/settings/index.html" %}
-                            {% include "tracker/address/index.html" %}
-                        </div>
-                    </details>
+                <h1 class="mt-2 px-2 flex text-2xl">
+                    <span class="relative inline-block align-middle h-8 w-8">
+                        <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
+                             alt="A trans pride fox emoji."
+                             width=""
+                             height="" />
+                    </span>
+                    &nbsp;Tunic Transition Tracker
+                </h1>
+                <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
+                <div class="p-2 flex flex-col space-y-2">
                     {% include "tracker/status/index.html" %}
-                    <div class="p-4 flex flex-col max-w-full space-y-4 md:space-y-4 text-md rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark"
+                    <div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark"
                          id="overview">
-                        <div class="text-lg">Overview</div>
+                        <div class="text-lg mb-2">Overview</div>
                         <div class="flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0">
                             <div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
                             <div class="flex basis-1/2 overview-entrances">
                                 Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }}
                             </div>
                         </div>
-                        <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
-                        <details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-                            <summary class="justify-start p-2 text-lg">Summary</summary>
-                            <div class="p-4 summary-list">{% include "tracker/summary/list.html" %}</div>
-                        </details>
-                        <details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-                            <summary class="justify-start p-2 text-lg">Breakdown</summary>
-                            <div class="p-4 flex flex-col space-y-4 breakdown-list">
-                                {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
-                                {% for scene_title, scene_data in scenes.items %}
-                                    {% if scene_title == current_scene.title %}
-                                        {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
-                                    {% else %}
-                                        {% include "tracker/breakdown/block.html" %}
-                                    {% endif %}
-                                {% endfor %}
-                            </div>
-                        </details>
+                        <hr class="mt-2 mb-4 border-2 border-bluelight-translucent-dark rounded-xl" />
+                        <div class="flex flex-col space-y-2">
+                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                                <summary class="justify-start p-2 text-lg">Summary</summary>
+                                <div class="p-2 summary-list">{% include "tracker/summary/list.html" %}</div>
+                            </details>
+                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                                <summary class="justify-start p-2 text-lg">Breakdown</summary>
+                                <div class="px-2 flex flex-col space-y-2 breakdown-list">
+                                    {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
+                                    {% for scene_title, scene_data in scenes.items %}
+                                        {% if scene_title == current_scene.title %}
+                                            {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
+                                        {% else %}
+                                            {% include "tracker/breakdown/block.html" %}
+                                        {% endif %}
+                                    {% endfor %}
+                                </div>
+                            </details>
+                        </div>
                     </div>
                     <div id="breakdown-current">
                         {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
                     </div>
-                    <details class="group p-2 flex max-w-full rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-                        <summary class="justify-start p-2">Tracker Debug</summary>
-                        <div class="p-2 flex flex-col space-y-2" id="debug-block">
-                            <ul class="p-2 rounded-md bg-bluelight-translucent hidden">
+                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                        <summary class="justify-start">Settings</summary>
+                        <div class="p-2 flex flex-col space-y-2">
+                            {% include "tracker/settings/index.html" %}
+                            {% include "tracker/address/index.html" %}
+                        </div>
+                    </details>
+                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                        <summary class="justify-start">Tracker Debug</summary>
+                        <div class="py-2 flex flex-col space-y-2" id="debug-block">
+                            <ul class="p-2 rounded-xl bg-bluelight-translucent hidden">
                             </ul>
                             {% for name, value in debug.items %}
-                                <ul class="p-2 rounded-md bg-bluelight-translucent">
+                                <ul class="p-2 rounded-xl bg-bluelight-translucent">
                                     {{ name }}: {{ value }}
                                 </ul>
                             {% endfor %}
diff --git a/tunictracker/tracker/templates/tracker/settings/index.html b/tunictracker/tracker/templates/tracker/settings/index.html
index 753a936..5b2d31c 100644
--- a/tunictracker/tracker/templates/tracker/settings/index.html
+++ b/tunictracker/tracker/templates/tracker/settings/index.html
@@ -1,7 +1,7 @@
 <form action="{% url "set_settings" %}"
       method="post"
       class="flex flex-row space-x-2">
-    <div class="w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
+    <div class="w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
          hidden></div>
     {% csrf_token %}
     <label for="backend-filepath-form"
@@ -9,6 +9,6 @@
     {% for field in backend_filepath_form %}{{ field }}{% endfor %}
     <input type="submit"
            value="Submit"
-           class="p-2 m-auto text-sm rounded-md ring-2 ring-bluelight-dark bg-bluelight-translucent"
+           class="p-2 m-auto text-sm rounded-xl border-2 border-bluelight-dark bg-bluelight-translucent"
            id="backend-filepath-form" />
 </form>
diff --git a/tunictracker/tracker/templates/tracker/status/index.html b/tunictracker/tracker/templates/tracker/status/index.html
index 8149d86..7aa2c97 100644
--- a/tunictracker/tracker/templates/tracker/status/index.html
+++ b/tunictracker/tracker/templates/tracker/status/index.html
@@ -1,4 +1,4 @@
-<div class="p-2 flex flex-col rounded-md ring-4 ring-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
+<div class="p-2 flex flex-col rounded-xl border-4 border-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
     <div class="text-xl">Oh no!</div>
     <div class="text-lg">It looks like the backend can't be accessed...</div>
     <div class="text-lg">Are you sure there is one running at {{ server_address }}?</div>
diff --git a/tunictracker/tracker/templates/tracker/summary/block.html b/tunictracker/tracker/templates/tracker/summary/block.html
index b29c713..c561fa0 100644
--- a/tunictracker/tracker/templates/tracker/summary/block.html
+++ b/tunictracker/tracker/templates/tracker/summary/block.html
@@ -1,4 +1,4 @@
-<div class="p-2 flex flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 {{ extra_classes }}">
+<div class="p-2 flex flex-col rounded-xl border-4 border-bluelight-dark bg-opacity-50 {{ extra_classes }}">
   <div class="summary-title">{{ scene }}:</div>
   <div class="summary-checks">
     Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
diff --git a/tunictracker/tracker/templates/tracker/summary/list.html b/tunictracker/tracker/templates/tracker/summary/list.html
index 400b0cb..7330772 100644
--- a/tunictracker/tracker/templates/tracker/summary/list.html
+++ b/tunictracker/tracker/templates/tracker/summary/list.html
@@ -1,4 +1,4 @@
-<div class="grid gap-4 md:grid-cols-3 grid-flow-row">
+<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-5 grid-flow-row max-h-96 overflow-y-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
   {% include "tracker/summary/block.html" with extra_classes="hidden" %}
   {% for scene, scene_data in scenes.items %}
     {% if scene == current_scene.title %}
diff --git a/tunictracker/tracker/views.py b/tunictracker/tracker/views.py
index 0b16766..4a602a6 100644
--- a/tunictracker/tracker/views.py
+++ b/tunictracker/tracker/views.py
@@ -58,7 +58,8 @@ def index(request):
                 return
     with open('tracker/static/tracker/data/holy_cross_codes.json', 'r') as t:
         try:
-            cross_codes = loads(t.read())
+            temp_codes = loads(t.read())
+            cross_codes = { x: { k: l.replace('U', '⬆️').replace('D', '⬇️').replace('L', '⬅️').replace('R', '➡️').strip() for k,l in temp_codes[x].items() } for x in temp_codes.keys() }
         except:
             return
     tracker_debug = tracker_output['Debug']
@@ -133,4 +134,4 @@ def get_settings(request):
     if request.method == 'GET':
         return HttpResponse(dumps(request.session['backend_filepath']), content_type="application/json")
     else:
-        return render(request, 'tracker/index.html')
\ No newline at end of file
+        return render(request, 'tracker/index.html')