Holy cross code images provided by Fletcher now show up in the holy cross codes section, alongside some temporary placeholders. Fixed summary colors being assigned incorrectly, and summaries without entrances/checks showing up.

tunictracker/empty_doors.json

@@ -3,7 +3,7 @@
 	"remaining": 0,
 	"total": 1312,
 	"scenes": {
-		"???": {
+		"mystery": {
 			"found": 0,
 			"remaining": 0,
 			"total": 0,

tunictracker/empty_items.json

@@ -3,12 +3,12 @@
 	"remaining": 0,
 	"total": 1312,
 	"scenes": {
-		"???": {
+		"mystery": {
 			"collected": 0,
 			"remaining": 0,
 			"total": 0,
 			"checks": {
-				"It's a mystery": { "name": "", "owner": "" }
+				"It is a mystery": { "name": "", "owner": "" }
 			}
 		},
 		"Another One": {

tunictracker/empty_overview.json

@@ -1,11 +1,11 @@
 {
-	"scene": "???",
+	"scene": "mystery",
 	"seed": 0,
 	"items": 1312,
 	"entrances": 1312,
 	"hints": 0,
 	"codes": {
-		"???": {
+		"it is a mystery": {
 			"Distance": 0,
 			"Global": false,
 			"InRange": false

tunictracker/tracker/static/tracker/assets/main.js

@@ -255,19 +255,25 @@ async function update_codes(codes) {
 				if (codes[codename].Global) {
 					cross_codes_block_list_item.querySelector(
 						".codes-list-item-code"
-					).textContent = cross_codes["Global"][codename]
+					).firstElementChild.alt = cross_codes["Global"][codename]
 						.replace(/U/g, "⬆️")
 						.replace(/R/g, "➡️")
 						.replace(/D/g, "⬇️")
 						.replace(/L/g, "⬅️");
+					cross_codes_block_list_item.querySelector(
+						".codes-list-item-code"
+					).firstElementChild.src = `/static/tracker/images/cross_codes/Global/${codename}.png`;
 				} else {
 					cross_codes_block_list_item.querySelector(
 						".codes-list-item-code"
-					).textContent = cross_codes[current_scene][codename]
+					).firstElementChild.alt = cross_codes[current_scene][codename]
 						.replace(/U/g, "⬆️")
 						.replace(/R/g, "➡️")
 						.replace(/D/g, "⬇️")
 						.replace(/L/g, "⬅️");
+					cross_codes_block_list_item.querySelector(
+						".codes-list-item-code"
+					).firstElementChild.src = `/static/tracker/images/cross_codes/${current_scene}/${codename}.png`;
 				}
 				cross_codes_block_list_item.dataset.codename = codename;
 				cross_codes_block_list_item.dataset.order = index;
@@ -281,11 +287,14 @@ async function update_codes(codes) {
 			).textContent = code;
 			cross_codes_block_list_item.querySelector(
 				".codes-list-item-code"
-			).textContent = default_cross_codes[code]
+			).firstElementChild.alt = default_cross_codes[code]
 				.replace(/U/g, "⬆️")
 				.replace(/R/g, "➡️")
 				.replace(/D/g, "⬇️")
 				.replace(/L/g, "⬅️");
+			cross_codes_block_list_item.querySelector(
+				".codes-list-item-code"
+			).firstElementChild.src = `/static/tracker/images/cross_codes/Default/${code}.png`;
 			new_cross_codes_block_list.appendChild(
 				cross_codes_block_list_item.cloneNode(true)
 			);
@@ -361,39 +370,31 @@ async function apply_summary_colors(summary) {
 		"text-highlight-empty-text",
 		"text-highlight-undiscovered-text"
 	);
-	if (summary.checks_total > 0 || summary.entrances_total > 0) {
-		if (
-			summary.checks_collected == summary.checks_total &&
-			summary.entrances_found == summary.entrances_total
-		) {
-			summary.element.classList.add(
-				"from-highlight-empty-light",
-				"to-highlight-empty-dark",
-				"text-highlight-empty-text"
-			);
-		} else if (
-			summary.checks_collected <= 0 &&
-			summary.entrances_found <= 0 &&
-			summary.entrances_total > 0
-		) {
-			summary.element.classList.add(
-				"from-highlight-undiscovered-light",
-				"to-highlight-undiscovered-dark",
-				"text-highlight-undiscovered-text"
-			);
-		} else if (summary.checks_collected >= summary.checks_total) {
-			summary.element.classList.add(
-				"from-highlight-checks-light",
-				"to-highlight-checks-dark",
-				"text-highlight-checks-text"
-			);
-		} else if (summary.entrances_found >= summary.entrances_total) {
+	if (summary.entrances_total > 0) {
+		if (summary.checks_total > 0) {
+			if (summary.checks_remaining > 0 || summary.entrances_remaining > 0) {
+				if (summary.checks_remaining <= 0 || summary.entrances_remaining <= 0) {
+					if (summary.checks_remaining == 0) {
 						summary.element.classList.add(
 							"from-highlight-entrances-light",
 							"to-highlight-entrances-dark",
 							"text-highlight-entrances-text"
 						);
 					} else {
+						summary.element.classList.add(
+							"from-highlight-checks-light",
+							"to-highlight-checks-dark",
+							"text-highlight-checks-text"
+						);
+					}
+				} else {
+					if (summary.entrances_found <= 0) {
+						summary.element.classList.add(
+							"from-highlight-undiscovered-light",
+							"to-highlight-undiscovered-dark",
+							"text-highlight-undiscovered-text"
+						);
+					}
 					summary.element.classList.add(
 						"from-highlight-both-light",
 						"to-highlight-both-dark",
@@ -402,11 +403,41 @@ async function apply_summary_colors(summary) {
 				}
 			} else {
 				summary.element.classList.add(
-			"from-highlight-undiscovered-light",
-			"to-highlight-undiscovered-dark",
-			"text-highlight-undiscovered-text"
+					"from-highlight-empty-light",
+					"to-highlight-empty-dark",
+					"text-highlight-empty-text"
 				);
 			}
+		} else {
+			if (summary.entrances_remaining > 0) {
+				summary.element.classList.add(
+					"from-highlight-entrances-light",
+					"to-highlight-entrances-dark",
+					"text-highlight-entrances-text"
+				);
+			} else {
+				summary.element.classList.add(
+					"from-highlight-empty-light",
+					"to-highlight-empty-dark",
+					"text-highlight-empty-text"
+				);
+			}
+		}
+	} else {
+		if (summary.checks_total > 0 && summary.checks_remaining > 0) {
+			summary.element.classList.add(
+				"from-highlight-checks-light",
+				"to-highlight-checks-dark",
+				"text-highlight-checks-text"
+			);
+		} else {
+			summary.element.classList.add(
+				"from-highlight-empty-light",
+				"to-highlight-empty-dark",
+				"text-highlight-empty-text"
+			);
+		}
+	}
 
 	return summary.element;
 }
@@ -672,14 +703,16 @@ async function initialize_summary(summary_element, scene, checks, entrances) {
 		await apply_summary_colors({
 			element: summary_element.firstElementChild,
 			checks_collected: checks.collected,
+			checks_remaining: checks.remaining,
 			checks_total: checks.total,
 			entrances_found: entrances.found,
+			entrances_remaining: entrances.remaining,
 			entrances_total: entrances.total,
 		})
 	);
 
 	// Hide summaries for scenes with no entrances and the current scene and completed areas if "Hide completed areas" is checked
-	if (entrances.total <= 0 || current_scene == scene) {
+	if ((entrances.total <= 0 && checks.total <= 0) || current_scene == scene) {
 		summary_element.dataset.current = current_scene == scene;
 		summary_element.classList.add("hidden");
 	} else {
@@ -737,8 +770,10 @@ async function update_summary(scene, checks, entrances) {
 					element: document.querySelector(`.summary[data-scene="${scene}"]`)
 						.firstElementChild,
 					checks_collected: checks.collected,
+					checks_remaining: checks.remaining,
 					checks_total: checks.total,
 					entrances_found: entrances.found,
+					entrances_remaining: entrances.remaining,
 					entrances_total: entrances.total,
 				})
 			);
@@ -924,24 +959,47 @@ async function update_scene(scene) {
 	current_breakdown.dataset.current = true;
 	current_breakdown.classList.add("order-first");
 	current_breakdown.classList.remove("hidden", "order-last");
+	const old_checks_remaining = parseInt(
+		current_summary_old.querySelector(".summary-checks").dataset.checksRemaining
+	);
+	const old_entrances_remaining = parseInt(
+		current_summary_old.querySelector(".summary-entrances").dataset.entrancesRemaining
+	);
+	const old_checks_total = parseInt(current_summary_old.querySelector(".summary-checks").dataset.checksTotal);
+	const old_entrances_total = parseInt(
+		current_summary_old.querySelector(".summary-entrances").dataset.entrancesTotal
+	);
+	// const current_checks_remaining = parseInt(
+	// 	current_summary.dataset.checksRemaining
+	// );
+	// const current_entrances_remaining = parseInt(
+	// 	current_summary.dataset.entrancesRemaining
+	// );
+	// const current_checks_total = parseInt(current_summary.dataset.checksTotal);
+	// const current_entrances_total = parseInt(
+	// 	current_summary.dataset.entrancesTotal
+	// );
 
 	// Update the current summary
 	current_summary_old.dataset.current = false;
 	if (hide_completed_areas) {
-		const checks_remaining = parseInt(
-			current_summary_old.dataset.checksRemaining
-		);
-		const entrances_remaining = parseInt(
-			current_summary_old.dataset.entrancesRemaining
-		);
-		if (checks_remaining > 0 && entrances_remaining > 0) {
+		if (old_checks_remaining > 0 && old_entrances_remaining > 0) {
 			current_summary_old.classList.remove("hidden");
 		} else {
 			current_summary_old.classList.add("hidden");
-		}
+			if (old_entrances_total <= 0 && old_checks_total <= 0) {
+				current_summary_old.classList.add("hidden");
 			} else {
 				current_summary_old.classList.remove("hidden");
 			}
+		}
+	} else {
+		if (old_entrances_total <= 0 && old_checks_total <= 0) {
+			current_summary_old.classList.add("hidden");
+		} else {
+			current_summary_old.classList.remove("hidden");
+		}
+	}
 	current_summary.dataset.current = true;
 	current_summary.classList.add("hidden");
 }

tunictracker/tracker/static/tracker/data/holy_cross_codes.json

@@ -80,7 +80,7 @@
 		"Holy Cross (Blue Lines)": "URULURULURDRULDLURULURULU",
 		"Tree Holy Cross Chest": "LDRLUD"
 	},
-	"???": {
-		"???": "UDLR"
+	"mystery": {
+		"it is a mystery": "UDLR"
 	}
 }

tunictracker/tracker/templates/tracker/breakdown/block.html

@@ -45,16 +45,16 @@
         </div>
       </div>
     </div>
-    <div class="overflow-scroll max-h-64 scrollbar scrollbar-thumb-trans-pride-cyan-translucent scrollbar-track-bluelight-translucent">
+    <div class="overflow-scroll max-h-64 scrollbar scrollbar-thumb-bluelight-translucent scrollbar-track-bluelight-translucent">
       <div class="flex flex-col p-1 mx-auto space-y-2 min-w-max breakdown-block-mapped-list">
         <button type="button"
-                class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm hidden"
+                class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-bluelight-translucent rounded-md px-1 text-sm hidden"
                 onclick="open_breakdown(this)"
                 data-scene=""></button>
         {% for entrance_origin, entrance_destination in scene_data.entrances.doors.items %}
           {% if entrance_destination.door %}
             <button type="button"
-                    class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]"
+                    class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-bluelight-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]"
                     onclick="open_breakdown(this)"
                     data-scene="{{ entrance_destination.scene }}">
               ✔️ {{ entrance_origin }} -> {{ entrance_destination.door }}

tunictracker/tracker/templates/tracker/codes/block.html

@@ -1,9 +1,23 @@
+{% load static %}
 {% if not is_entered %}
-    <ul class="p-2 flex flex-col rounded-xl order-last {{ extra_classes }}">
+    <ul class="p-2 flex flex-col rounded-xl {{ extra_classes }}">
         <div class="pl-2 text-base codes-list-item-title">{{ name }}</div>
         <hr class="mb-2 border-2 border-holy-cross opacity-30 rounded-xl" />
         <div class="min-x-full">
-            <div class="mx-2 text-2xl text-justify break-all align-top codes-list-item-code">{{ code }}</div>
+            {% if is_global %}
+                <span class="flex flex-shrink-0 object-contain mx-2 my-auto text-2xl text-justify break-all align-middle codes-list-item-code">
+                    {% with "tracker/images/cross_codes/"|add:"Global/"|add:name|add:".png" as code_image %}
+                        <img src="{% static code_image %}" alt="{{ code }}" width="" height="" />
+                    {% endwith %}
+                </span>
+            {% else %}
+                <span class="flex flex-shrink-0 object-contain mx-2 my-auto text-2xl text-justify break-all align-middle codes-list-item-code">
+                    {% with "tracker/images/cross_codes/"|add:current_scene|add:"/"|add:name|add:".png" as code_image %}
+                        <img src="{% static code_image %}" alt="{{ code }}" width="" height="" />
+                    {% endwith %}
+                </span>
+            {% endif %}
+            {% comment %} <div class="mx-2 text-2xl text-justify break-all align-top codes-list-item-code">{{ code }}</div> {% endcomment %}
         </div>
     </ul>
 {% endif %}

tunictracker/tracker/templates/tracker/codes/index.html

@@ -1,15 +1,16 @@
-<details class="py-2 px-2 mt-2 flex flex-col space-y-4 max-w-full text-holy-cross text-base [text-shadow:_1px_1px_4px_rgb(0_0_0_/_100%)] rounded-xl bg-gradient-to-br from-[#ffe28558] to-[#ffffff58] shadow-sm shadow-[#242424] justify-start">{% comment %} drop-shadow-[0px_0px_4px_rgba(255,255,255,1)]"> {% endcomment %}
+<details class="py-2 px-2 mt-2 flex flex-col space-y-4 max-w-full text-holy-cross text-base [text-shadow:_1px_1px_4px_rgb(0_0_0_/_100%)] rounded-xl bg-gradient-to-br from-[#ffe28558] to-[#ffffff58] shadow-sm shadow-[#242424] justify-start">
+    {% comment %} drop-shadow-[0px_0px_4px_rgba(255,255,255,1)]"> {% endcomment %}
     <summary>Holy Cross Codes</summary>
     <hr class="border-2 border-holy-cross opacity-30 rounded-xl" />
     <div class="flex flex-col space-y-2 overflow-y-scroll max-h-96 rounded-xl">
         <div class="grid grid-flow-row gap-2 md:grid-cols-3 xl:grid-cols-5 rounded-xl"
              id="codes-list">
-            {% include "tracker/codes/block.html" with is_entered=False name="" code="" extra_classes="hidden" %}
+            {% include "tracker/codes/block.html" with is_entered=False name="it is a mystery" current_scene="mystery" code="" extra_classes="order-last hidden" %}
             {% for name, code in default_codes.items %}
-                {% include "tracker/codes/block.html" with is_entered=False %}
+                {% include "tracker/codes/block.html" with is_entered=False current_scene="Default" extra_classes="order-last" %}
             {% endfor %}
             {% for name, values in codes.items %}
-                {% include "tracker/codes/block.html" with code=values.code is_entered=False %}
+                {% include "tracker/codes/block.html" with code=values.code is_entered=False is_global=values.global extra_classes="" %}
             {% endfor %}
         </div>
     </div>

tunictracker/tracker/templates/tracker/index.html

@@ -1,13 +1,14 @@
 {% extends "index.html" %}
 {% load static %}
 {% block content %}
+<div class="min-h-screen font-nerd bg-gradient-to-br from-bluelight-background-dark to-bluelight-background">
     <div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
         <div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
             {% if debug != '' %}
                 <div class="px-2 space-y-2">
                     <div class="flex flex-col align-middle max-w-fit">
                         <div class="flex flex-row space-x-2 align-middle sm:h-12 max-w-fit">
-                            <span class="flex flex-shrink-0 object-contain w-8 h-8 my-auto align-middle shake backdrop-blur">
+                            <span class="flex flex-shrink-0 object-contain w-8 h-8 my-auto align-middle shake">
                                 <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
                                      alt="A trans pride fox emoji."
                                      width="32"
@@ -116,4 +117,5 @@
                 <div id="no_data" />{% endif %}</div>
         {% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux" tracker_be_link="https://github.com/spaceglace/TunicTransitionTracker" %}
     </div>
+</div>
 {% endblock content %}

tunictracker/werefoxtheme/static_src/tailwind.config.js

@@ -31,9 +31,9 @@ module.exports = {
 		 * patterns match your project structure.
 		 */
 		/* JS 1: Ignore any JavaScript in node_modules folder. */
-		// '!../../**/node_modules',
+		"!../../**/node_modules",
 		/* JS 2: Process all JavaScript files in the project. */
-		'../../**/*.js',
+		"../../**/*.js",
 
 		/**
 		 * Python: If you use Tailwind CSS classes in Python, uncomment the following line
@@ -41,6 +41,30 @@ module.exports = {
 		 */
 		// '../../**/*.py'
 	],
+	safelist: [
+		"order-first",
+		"order-last",
+		"order-1",
+		"order-2",
+		"order-3",
+		"order-4",
+		"order-5",
+		"order-6",
+		"order-7",
+		"order-8",
+		"order-9",
+		"order-10",
+		"order-11",
+		"order-12",
+		"order-13",
+		"order-14",
+		"order-15",
+		"order-16",
+		"order-17",
+		"order-18",
+		"order-19",
+		"order-20",
+	],
 	theme: {
 		container: {
 			center: true,
@@ -71,6 +95,22 @@ module.exports = {
 					},
 					link: "hsl(203.91, 56.64%, 75%)",
 				},
+				redlight: {
+					light: "#hsla(7, 56.86%, 50%, 50%)",
+					DEFAULT: "hsla(7, 56.64%, 44.31%, 100%)",
+					dark: "hsla(7, 100%, 35.1%, 50%)",
+					translucent: {
+						light: "hsla(7, 72.32%, 69.41%, 25%)",
+						DEFAULT: "hsla(7, 72.32%, 69.41%, 50%)",
+						dark: "hsla(7, 81.57%, 100%, 25%)",
+					},
+					background: {
+						light: "hsla(7, 56.64%, 44.31%, 100%)",
+						DEFAULT: "hsla(7, 57.3%, 34.9%, 100%)",
+						dark: "hsla(7, 57.48%, 24.9%, 100%)",
+					},
+					link: "hsla(7, 56.64%, 75%, 100%)",
+				},
 				"trans-pride": {
 					cyan: {
 						DEFAULT: "#5adefc",