Everything should update in place, and will (hopefully) not break of the front end gets bad data or no data.

tunictracker/empty_spoiler.json

@@ -0,0 +1,33 @@
+{
+	"Debug": {
+		"Name": "",
+		"Seed": "",
+		"SpoilerSeed": "",
+		"Archipelago": false,
+		"Randomized": false,
+		"HexQuest": false,
+		"EntranceRando": false,
+		"FixedShops": false
+	},
+	"Totals": {
+		"Entrances": { "Total": 0, "Undiscovered": 0 },
+		"Checks": { "Total": 0, "Undiscovered": 0 }
+	},
+	"Current": {
+		"Scene": "No Scene",
+		"Respawn": "",
+		"Dath": "",
+		"HasLaurels": false,
+		"HasDath": false
+	},
+	"Scenes": {
+		"No Scene": {
+			"Totals": {
+				"Entrances": { "Total": 0, "Undiscovered": 0 },
+				"Checks": { "Total": 0, "Undiscovered": 0 }
+			},
+			"Checks": {},
+			"Entrances": {}
+		}
+	}
+}

tunictracker/tracker/static/tracker/assets/refresh.js

@@ -1,61 +1,33 @@
 window.onload = () => {
-	let overview = {
+	//
-		checks: document.getElementById("overview_checks"),
+	let overview = document.getElementById("overview");
-		entrances: document.getElementById("overview_entrances"),
+	let summary_list = overview.querySelector(".summary-list");
-		summary: document.getElementById("summary"),
+	let breakdown_list = overview.querySelector(".breakdown-list");
-	};
+	let breakdown_current = document.getElementById("breakdown-current");
-	let current_scene = {
-		name: document.getElementById("current_scene_text"),
-		checks: {
-			title: document.getElementById("current_scene_checks_title"),
-			list: document.getElementById("current_scene_checks_list"),
-		},
-		entrances: {
-			title: document.getElementById("current_scene_entrances_title"),
-			list: document.getElementById("current_scene_entrances_list"),
-			mapped: document.getElementById("current_scene_entrances_mapped"),
-		},
-	};
-	let line_elem = document
-		.getElementById("current_scene_checks_list")
-		.firstElementChild.cloneNode(true);
-	let mapped_line_elem = document
-		.getElementById("current_scene_entrances_mapped")
-		.firstElementChild.cloneNode(true);
-	let summary_element = document
-		.getElementById("summary")
-		.firstElementChild.cloneNode(true);
-	summary_element.classList.forEach((class_name) => {
-		if (class_name == "bg-green-900") {
-			summary_element.classList.remove(class_name);
-		} else if (class_name == "bg-yellow-900") {
-			summary_element.classList.remove(class_name);
-		} else if (class_name == "bg-blue-900") {
-			summary_element.classList.remove(class_name);
-		}
-	});
 	const refresh_interval = setInterval(
 		refresh_elements,
 		500,
 		overview,
-		current_scene,
+		summary_list,
-		line_elem,
+		breakdown_list,
-		mapped_line_elem,
+		breakdown_current
-		summary_element
 	);
 };
 
 async function refresh_elements(
 	overview,
-	current_scene,
+	summary_list,
-	line_elem,
+	breakdown_list,
-	mapped_line_elem,
+	breakdown_current
-	summary_element
 ) {
 	fetch("http://localhost:8000/spoiler")
 		.then((response) => response.json())
-		.then((data) => {
+		.then(
+			(data) => {
+				// Attempt to receive response JSON.
 				const response_object = JSON.parse(JSON.stringify(data));
+
+				// Parse out data from the back-end into variables.
 				const overview_checks_undiscovered =
 					response_object.Totals.Checks.Undiscovered;
 				const overview_checks_total = response_object.Totals.Checks.Total;
@@ -63,120 +35,182 @@ async function refresh_elements(
 					response_object.Totals.Entrances.Undiscovered;
 				const overview_entrances_total = response_object.Totals.Entrances.Total;
 				const current_scene_name = response_object.Current.Scene;
-			const current_scene_checks_undiscovered =
-				response_object.Scenes[current_scene_name].Totals.Checks.Undiscovered;
-			const current_scene_checks_total =
-				response_object.Scenes[current_scene_name].Totals.Checks.Total;
-			const current_scene_entrances_undiscovered =
-				response_object.Scenes[current_scene_name].Totals.Entrances
-					.Undiscovered;
-			const current_scene_entrances_total =
-				response_object.Scenes[current_scene_name].Totals.Entrances.Total;
-			const current_scene_checks_list =
-				response_object.Scenes[current_scene_name].Checks;
-			const current_scene_entrances_list =
-				response_object.Scenes[current_scene_name].Entrances;
 				const all_scenes = response_object.Scenes;
-			overview.checks.textContent = `Checks: ${overview_checks_undiscovered}/${overview_checks_total}`;
+				let new_breakdown_list = overview
-			overview.entrances.textContent = `Entrances: ${overview_entrances_undiscovered}/${overview_entrances_total}`;
+					.querySelector(".breakdown-list")
-			current_scene.name.textContent = current_scene_name;
+					.cloneNode(true);
-			current_scene.checks.title.textContent = `Checks: ${current_scene_checks_undiscovered}/${current_scene_checks_total}`;
+				let new_summary_list = overview
-			current_scene.entrances.title.textContent = `Entrances: ${current_scene_entrances_undiscovered}/${current_scene_entrances_total}`;
+					.querySelector(".summary-list")
-			current_scene.checks.list.innerHTML = "";
+					.cloneNode(true);
-			current_scene.entrances.list.innerHTML = "";
+				new_breakdown_list.innerHTML = "";
-			current_scene.entrances.mapped.innerHTML = "";
+				new_summary_list.firstElementChild.innerHTML = "";
-			overview.summary.innerHTML = "";
+
-			Object.keys(current_scene_checks_list).forEach((check) => {
+				// Refresh elements with new data from the back end.
-				if (!current_scene_checks_list[check]) {
+
-					line_elem.textContent = `❌ ${check}`;
+				//  Clone all the needed elements for updating.
-					current_scene.checks.list.appendChild(line_elem.cloneNode(true));
+				let overview_checks_title = overview.querySelector(".overview-checks");
-				}
+				let overview_entrances_title = overview.querySelector(
-			});
+					".overview-entrances"
-			Object.keys(current_scene_entrances_list).forEach((entrances) => {
+				);
-				if (current_scene_entrances_list[entrances] == "") {
+				let summary_block =
-					line_elem.textContent = `❌ ${entrances}`;
+					summary_list.firstElementChild.firstElementChild.cloneNode(true);
-					current_scene.entrances.list.appendChild(line_elem.cloneNode(true));
+				let breakdown_block = breakdown_list.firstElementChild.cloneNode(true);
-				} else {
+				breakdown_block.classList.remove("hidden");
-					mapped_line_elem.textContent = `✔️ ${entrances} -> ${current_scene_entrances_list[entrances]}`;
+
-					current_scene.entrances.mapped.appendChild(
+				// Set content to updated data.
-						mapped_line_elem.cloneNode(true)
+				overview_checks_title.textContent = `Checks: ${overview_checks_undiscovered}/${overview_checks_total}`;
+				overview_entrances_title.textContent = `Entrances: ${overview_entrances_undiscovered}/${overview_entrances_total}`;
+
+				// Create new lists with updated data.
+				Object.keys(all_scenes).forEach((scene) => {
+					// Create variables for element pointers.
+					summary_block =
+						summary_list.firstElementChild.firstElementChild.cloneNode(true);
+					summary_block.classList.remove("hidden");
+					let summary_title = summary_block.querySelector(".summary-title");
+					let summary_checks = summary_block.querySelector(".summary-checks");
+					let summary_entrances =
+						summary_block.querySelector(".summary-entrances");
+
+					breakdown_block = breakdown_list.firstElementChild.cloneNode(true);
+					breakdown_block.classList.remove("hidden");
+					let breakdown_block_title = breakdown_block.querySelector(
+						".breakdown-block-title"
+					);
+					let breakdown_block_checks_title = breakdown_block.querySelector(
+						".breakdown-block-checks-title"
+					);
+					let new_breakdown_block_checks_list = breakdown_block
+						.querySelector(".breakdown-block-checks-list")
+						.cloneNode(true);
+					let breakdown_block_checks_list_item = breakdown_block
+						.querySelector(".breakdown-block-checks-list")
+						.firstElementChild.cloneNode(true);
+					breakdown_block_checks_list_item.classList.remove("hidden");
+					let breakdown_block_entrances_title = breakdown_block.querySelector(
+						".breakdown-block-entrances-title"
+					);
+					let new_breakdown_block_entrances_list = breakdown_block
+						.querySelector(".breakdown-block-entrances-list")
+						.cloneNode(true);
+					let breakdown_block_entrances_list_item = breakdown_block
+						.querySelector(".breakdown-block-entrances-list")
+						.firstElementChild.cloneNode(true);
+					breakdown_block_entrances_list_item.classList.remove("hidden");
+					let new_breakdown_block_mapped_list = breakdown_block
+						.querySelector(".breakdown-block-mapped-list")
+						.cloneNode(true);
+					let breakdown_block_mapped_list_item = breakdown_block
+						.querySelector(".breakdown-block-mapped-list")
+						.firstElementChild.cloneNode(true);
+					breakdown_block_mapped_list_item.classList.remove("hidden");
+
+					// Create variables for commonly used values.
+					let scene_checks_undiscovered =
+						all_scenes[scene].Totals.Checks.Undiscovered;
+					let scene_checks_total = all_scenes[scene].Totals.Checks.Total;
+					let scene_entrances_undiscovered =
+						all_scenes[scene].Totals.Entrances.Undiscovered;
+					let scene_entrances_total = all_scenes[scene].Totals.Entrances.Total;
+
+					// Set textContent.
+					summary_title.textContent = scene;
+					summary_checks.textContent = `Checks: ${scene_checks_undiscovered}/${scene_checks_total}`;
+					summary_entrances.textContent = `Entrances: ${scene_entrances_undiscovered}/${scene_entrances_total}`;
+					breakdown_block_title.textContent = scene;
+					breakdown_block_checks_title.textContent = `Checks: ${all_scenes[scene].Totals.Checks.Undiscovered}/${all_scenes[scene].Totals.Checks.Total}`;
+					breakdown_block_entrances_title.textContent = `Entrances: ${all_scenes[scene].Totals.Entrances.Undiscovered}/${all_scenes[scene].Totals.Entrances.Total}`;
+
+					// Create checks, entrances, and mapped entrances lists.
+					Object.keys(all_scenes[scene].Checks).forEach((check) => {
+						if (!all_scenes[scene].Checks[check]) {
+							breakdown_block_checks_list_item.textContent = `❌ ${check}`;
+							new_breakdown_block_checks_list.appendChild(
+								breakdown_block_checks_list_item.cloneNode(true)
 							);
 						}
 					});
-			let scene_div = document.createElement("div");
+					Object.keys(all_scenes[scene].Entrances).forEach((entrances) => {
-			let checks_div = document.createElement("div");
+						if (all_scenes[scene].Entrances[entrances] == "") {
-			let entrances_div = document.createElement("div");
+							breakdown_block_entrances_list_item.textContent = `❌ ${entrances}`;
-			let scene_checks_undiscovered = 0;
+							new_breakdown_block_entrances_list.appendChild(
-			let scene_checks_total = 0;
+								breakdown_block_entrances_list_item.cloneNode(true)
-			let scene_entrances_undiscovered = 0;
+							);
-			let scene_entrances_total = 0;
+						} else {
-			Object.keys(all_scenes).forEach((scene) => {
+							breakdown_block_mapped_list_item.textContent = `✔️ ${entrances} -> ${all_scenes[scene].Entrances[entrances]}`;
-				summary_element.innerHTML = "";
+							new_breakdown_block_mapped_list.appendChild(
-				scene_div.textContent = scene;
+								breakdown_block_mapped_list_item.cloneNode(true)
-				scene_checks_undiscovered =
+							);
-					all_scenes[scene]["Totals"]["Checks"]["Undiscovered"];
-				scene_checks_total = all_scenes[scene]["Totals"]["Checks"]["Total"];
-				scene_entrances_undiscovered =
-					all_scenes[scene]["Totals"]["Entrances"]["Undiscovered"];
-				scene_entrances_total =
-					all_scenes[scene]["Totals"]["Entrances"]["Total"];
-				if (scene_entrances_total <= 0) {
-					return;
 						}
-				if (scene == current_scene.name.textContent) {
+					});
-					return;
+
-				}
+					// Apply color coding to summary block
-				checks_div.textContent = `Checks: ${scene_checks_undiscovered}/${scene_checks_total}`;
+					summary_block.classList.remove(
-				entrances_div.textContent = `Entrances: ${scene_entrances_undiscovered}/${scene_entrances_total}`;
-				if (scene_checks_undiscovered > 0 && scene_entrances_undiscovered > 0) {
-					if (scene_entrances_undiscovered == scene_entrances_total) {
-						summary_element.classList.add("bg-red-900");
-						summary_element.classList.remove(
 						"bg-green-900",
 						"bg-yellow-900",
-							"bg-blue-900"
-						);
-					} else {
-						summary_element.classList.add("bg-green-900");
-						summary_element.classList.remove(
 						"bg-blue-900",
-							"bg-yellow-900",
 						"bg-red-900"
 					);
+					if (
+						scene_checks_undiscovered > 0 &&
+						scene_entrances_undiscovered > 0
+					) {
+						if (scene_entrances_undiscovered == scene_entrances_total) {
+							summary_block.classList.add("bg-red-900");
+						} else {
+							summary_block.classList.add("bg-green-900");
 						}
 					} else if (scene_checks_undiscovered > 0) {
-					summary_element.classList.add("bg-yellow-900");
+						summary_block.classList.add("bg-yellow-900");
-					summary_element.classList.remove(
-						"bg-blue-900",
-						"bg-green-900",
-						"bg-red-900"
-					);
 					} else if (scene_entrances_undiscovered > 0) {
-					summary_element.classList.add("bg-blue-900");
+						summary_block.classList.add("bg-blue-900");
-					summary_element.classList.remove(
-						"bg-green-900",
-						"bg-yellow-900",
-						"bg-red-900"
-					);
-				} else {
-					summary_element.classList.remove(
-						"bg-green-900",
-						"bg-yellow-900",
-						"bg-blue-900",
-						"bg-red-900"
-					);
-				}
-				summary_element.appendChild(scene_div.cloneNode(true));
-				summary_element.appendChild(checks_div.cloneNode(true));
-				summary_element.appendChild(entrances_div.cloneNode(true));
-				overview.summary.appendChild(summary_element.cloneNode(true));
-			});
-		})
-		.catch((err) => {
-			console.log(err);
-		});
 					}
 
+					// Replace lists
+					breakdown_block
+						.querySelector(".breakdown-block-checks-list")
+						.replaceWith(new_breakdown_block_checks_list);
+					breakdown_block
+						.querySelector(".breakdown-block-entrances-list")
+						.replaceWith(new_breakdown_block_entrances_list);
+					breakdown_block
+						.querySelector(".breakdown-block-mapped-list")
+						.replaceWith(new_breakdown_block_mapped_list);
+
+					// Append relevant elements to lists.
+					if (scene == current_scene_name) {
+						summary_block.classList.add("hidden");
+						breakdown_current.firstElementChild.replaceWith(
+							breakdown_block.cloneNode(true)
+						);
+						breakdown_block.classList.add("hidden");
+					} else if (
+						scene_checks_undiscovered <= 0 &&
+						scene_entrances_undiscovered <= 0
+					) {
+						summary_block.classList.add("hidden");
+						breakdown_block.classList.add("hidden");
+					}
+					new_summary_list.firstElementChild.appendChild(
+						summary_block.cloneNode(true)
+					);
+					new_breakdown_list.appendChild(breakdown_block.cloneNode(true));
+				});
+
+				// Replace with new data.
+				summary_list.replaceWith(new_summary_list.cloneNode(true));
+				breakdown_list.replaceWith(new_breakdown_list.cloneNode(true));
+				document
+					.getElementById("breakdown-current")
+					.replaceWith(breakdown_current.cloneNode(true));
+			},
+			(error) => {
+				return error;
+			}
+		);
+}
+
+// Outdated funcion to log the data gathered from the backend.
 function log_elements() {
 	console.log(overview.checks.textContent);
 	console.log(overview.entrances.textContent);

tunictracker/tracker/templates/index.html

@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Tunic Tracker Redux</title>
+    <meta name="description" content="Tunic Transition Tracker">
+    <meta name="keywords" content="HTML, CSS, JavaScript">
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="UTF-8" />
@@ -9,11 +11,10 @@
     {% load static tailwind_tags %}
     {% tailwind_css %}
     {% load static %}
-    <script src="{% static 'tracker/assets/refresh.js' %}"></script>
+    <script src="{% static "tracker/assets/refresh.js" %}"></script>
   </head>
   <body class="bg-[#242424]">
     {% block content %}
-
+    {% endblock content %}
-    {% endblock %}
   </body>
 </html>

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

@@ -0,0 +1,60 @@
+<div class="p-4 flex flex-col max-w-full rounded-md ring-4 bg-bluelight-translucent ring-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">
+      <div class="my-2 flex flex-col space-y-2">
+        <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" />
+      </div>
+      <div class="pb-4 flex flex-col space-y-2 overflow-x-scroll breakdown-block-checks-list">
+        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 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">
+              ❌ {{ check_name }}
+            </ul>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+    <div class="flex flex-col basis-1/2 overflow-hidden">
+      <div class="my-2 flex flex-col space-y-2">
+        <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" />
+      </div>
+      <div class="pb-4 flex flex-col space-y-2 overflow-x-scroll breakdown-block-entrances-list">
+        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 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">
+              ❌ {{ entrance_origin }}
+            </ul>
+          {% else %}
+            <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
+              ❌ {{ entrance_origin }}
+            </ul>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  <div class="overflow-x-scroll">
+    <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>
+      {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
+        {% if entrance_destination %}
+          <ul class="bg-bluelight rounded-md px-1">
+            ✔️ {{ entrance_origin }} -> {{ entrance_destination }}
+          </ul>
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</div>

tunictracker/tracker/templates/tracker/index.html

@@ -1,134 +1,80 @@
-{% extends 'index.html' %}
+{% 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">
             {% if debug != '' %}
                 <div class="p-4 flex flex-col space-y-4">
                     <div class="flex pt-4 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." /></span>
+                        <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
                     </div>
                     <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
-          <div class="p-4 flex flex-col max-w-full space-y-2 md:space-y-4 text-md rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
+                    <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"
+                         id="overview">
                         <div class="text-lg">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" id="overview_checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
+                            <div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
-              <div class="flex basis-1/2" id="overview_entrances">Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.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 p-2 flex flex-col space-y-4 rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
+                        <details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-              <summary class="text-lg">Breakdown</summary>
+                            <summary class="justify-start p-2 text-lg">Summary</summary>
-              <div class="grid gap-4 md:grid-cols-3 grid-flow-row" id="summary">
+                            <div class="p-4 summary-list">{% include "tracker/summary/list.html" %}</div>
-                {% for scene, scene_totals in totals.items %}
+                        </details>
-                  {% if scene == current_scene %}
+                        <details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-                    <div class="p-2 flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 hidden">
+                            <summary class="justify-start p-2 text-lg">Breakdown</summary>
-                      <div>{{ scene }}:</div>
+                            <div class="p-4 flex flex-col space-y-4 breakdown-list">
-                      <div>Checks: {{ scene_totals.Checks.Undiscovered }}/{{ scene_totals.Checks.Total }}</div>
+                                {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
-                      <div>Entrances: {{ scene_totals.Entrances.Undiscovered }}/{{ scene_totals.Entrances.Total }}</div>
+                                {% for scene_title, scene_data in scenes.items %}
-                    </div>
+                                    {% include "tracker/breakdown/block.html" %}
-                  {% elif scene != 'Entrances' and scene != 'Checks' %}
-                    {% if scene_totals.Checks.Undiscovered > 0 and scene_totals.Entrances.Undiscovered > 0 %}
-                      {% if scene_totals.Entrances.Undiscovered == scene_totals.Entrances.Total %}
-                        <div class="p-2 flex flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 bg-red-900">
-                          <div>{{ scene }}:</div>
-                          <div>Checks: {{ scene_totals.Checks.Undiscovered }}/{{ scene_totals.Checks.Total }}</div>
-                          <div>Entrances: {{ scene_totals.Entrances.Undiscovered }}/{{ scene_totals.Entrances.Total }}</div>
-                        </div>
-                      {% endif %}
-                      <div class="p-2 flex flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 bg-green-900">
-                        <div>{{ scene }}:</div>
-                        <div>Checks: {{ scene_totals.Checks.Undiscovered }}/{{ scene_totals.Checks.Total }}</div>
-                        <div>Entrances: {{ scene_totals.Entrances.Undiscovered }}/{{ scene_totals.Entrances.Total }}</div>
-                      </div>
-                    {% elif scene_totals.Checks.Undiscovered > 0 %}
-                      <div class="p-2 flex flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 bg-yellow-900">
-                        <div>{{ scene }}:</div>
-                        <div>Checks: {{ scene_totals.Checks.Undiscovered }}/{{ scene_totals.Checks.Total }}</div>
-                        <div>Entrances: {{ scene_totals.Entrances.Undiscovered }}/{{ scene_totals.Entrances.Total }}</div>
-                      </div>
-                    {% elif scene_totals.Entrances.Undiscovered > 0 %}
-                      <div class="p-2 flex flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 bg-blue-900">
-                        <div>{{ scene }}:</div>
-                        <div>Checks: {{ scene_totals.Checks.Undiscovered }}/{{ scene_totals.Checks.Total }}</div>
-                        <div>Entrances: {{ scene_totals.Entrances.Undiscovered }}/{{ scene_totals.Entrances.Total }}</div>
-                      </div>
-                    {% endif %}
-                  {% endif %}
                                 {% endfor %}
                             </div>
                         </details>
                     </div>
-          <div class="p-4 flex flex-col max-w-full rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
+                    <div id="breakdown-current">
-            <div class="flex text-lg" id="current_scene_text">{{ current_scene }}</div>
+                        {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
-            <div class="flex flex-col md:flex-row justify-center md:space-x-4">
-              <div class="flex flex-col basis-1/2 overflow-hidden">
-                <div class="my-2 flex flex-col space-y-2">
-                  <div class="text-md" id="current_scene_checks_title">Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}</div>
-                  <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
-                </div>
-                <div class="pb-4 flex flex-col space-y-2 overflow-x-scroll" id="current_scene_checks_list">
-                  {% if scene_data.Totals.Checks.Total > 0 %}
-                    {% for check_name, check in scene_data.Checks.items %}
-                      {% if not check.Check %}
-                        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1">❌ {{ check_name }}</ul>
-                      {% endif %}
-                    {% endfor %}
-                  {% else %}
-                    <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden"></ul>
-                  {% endif %}
-                </div>
-              </div>
-              <div class="flex flex-col basis-1/2 overflow-hidden">
-                <div class="my-2 flex flex-col space-y-2">
-                  <div class="text-md" id="current_scene_entrances_title">Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}</div>
-                  <hr class="border-2 border-bluelight-translucent-dark rounded-md" />
-                </div>
-                <div class="pb-4 flex flex-col space-y-2 overflow-x-scroll" id="current_scene_entrances_list">
-                  {% if scene_data.Totals.Entrances.Total > 0 %}
-                    {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
-                      {% if not entrance_destination.Entrance != '' %}
-                        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1">❌ {{ entrance_origin }}</ul>
-                      {% else %}
-                        <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">❌ {{ entrance_origin }}</ul>
-                      {% endif %}
-                    {% endfor %}
-                  {% else %}
-                    <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden"></ul>
-                  {% endif %}
-                </div>
-              </div>
-            </div>
-            <div class="overflow-x-scroll">
-              <div class="flex flex-col space-y-2 mx-auto min-w-max" id="current_scene_entrances_mapped">
-                {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
-                  {% if entrance_destination.Entrance %}
-                    <ul class="bg-bluelight rounded-md px-1">✔️ {{ entrance_origin }} -> {{ entrance_destination.Entrance }}</ul>
-                  {% endif %}
-                {% endfor %}
-              </div>
-            </div>
                     </div>
                     <details class="group 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 pl-4 pr-4 flex flex-col space-y-2">
                             <div>
-                <ul>Name: {{ debug.Name }}</ul>
+                                <ul>
-                <ul>Seed: {{ debug.Seed }}</ul>
+                                    Name: {{ debug.Name }}
-                <ul>Spoiler Seed: {{ debug.SpoilerSeed }}</ul>
+                                </ul>
-                <ul>Archipelago: {{ debug.Archipelago }}</ul>
+                                <ul>
-                <ul>Randomized: {{ debug.Randomized }}</ul>
+                                    Seed: {{ debug.Seed }}
-                <ul>Hex Quest: {{ debug.HexQuest }}</ul>
+                                </ul>
-                <ul>Entrance Randomizer: {{ debug.EntranceRando }}</ul>
+                                <ul>
-                <ul>Fixed Shops: {{ debug.FixedShops }}</ul>
+                                    Spoiler Seed: {{ debug.SpoilerSeed }}
+                                </ul>
+                                <ul>
+                                    Archipelago: {{ debug.Archipelago }}
+                                </ul>
+                                <ul>
+                                    Randomized: {{ debug.Randomized }}
+                                </ul>
+                                <ul>
+                                    Hex Quest: {{ debug.HexQuest }}
+                                </ul>
+                                <ul>
+                                    Entrance Randomizer: {{ debug.EntranceRando }}
+                                </ul>
+                                <ul>
+                                    Fixed Shops: {{ debug.FixedShops }}
+                                </ul>
                             </div>
                         </div>
                     </details>
                 </div>
             {% else %}
-        <div id="no_data" />
+                <div id="no_data" />{% endif %}</div>
-      {% endif %}
     </div>
-  </div>
+{% endblock content %}
-{% endblock %}

tunictracker/tracker/templates/tracker/summary/block.html

@@ -0,0 +1,9 @@
+<div class="p-2 flex flex-col rounded-md ring-4 ring-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 }}
+  </div>
+  <div class="summary-entrances">
+    Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
+  </div>
+</div>

tunictracker/tracker/templates/tracker/summary/list.html

@@ -0,0 +1,20 @@
+<div class="grid gap-4 md:grid-cols-3 grid-flow-row">
+  {% include "tracker/summary/block.html" with extra_classes="hidden" %}
+  {% for scene, scene_data in scenes.items %}
+    {% if scene == current_scene.title %}
+      {% include "tracker/summary/block.html" with extra_classes="hidden" %}
+    {% elif scene != "Entrances" and scene != "Checks" %}
+      {% if scene_data.Totals.Checks.Undiscovered > 0 and scene_data.Totals.Entrances.Undiscovered > 0 %}
+        {% if scene_data.Totals.Entrances.Undiscovered == scene_data.Totals.Entrances.Total %}
+          {% include "tracker/summary/block.html" with extra_classes="bg-red-900" %}
+        {% else %}
+          {% include "tracker/summary/block.html" with extra_classes="bg-green-900" %}
+        {% endif %}
+      {% elif scene_data.Totals.Checks.Undiscovered > 0 %}
+        {% include "tracker/summary/block.html" with extra_classes="bg-yellow-900" %}
+      {% elif scene_data.Totals.Entrances.Undiscovered > 0 %}
+        {% include "tracker/summary/block.html" with extra_classes="bg-blue-900" %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+</div>

tunictracker/tracker/views.py

@@ -13,58 +13,32 @@ def index(request):
     try:
         request_data = requests.get('http://localhost:8000/spoiler').text
     except:
-        context = {
+        with open('empty_spoiler.json', 'r') as t:
-            "debug": "",
+            try:
-            "totals": "",
+                tracker_output = loads(t.read())
-            "scene": "",
+            except:
-            "scene_data": ""
+                return
-        }
+    try:
-        template = loader.get_template("tracker/index.html")
-        return HttpResponse(template.render(context, request))
         tracker_output = loads(request_data)
-    # with open('spoiler.json', 'r') as t:
+    except:
-    #     tracker_output = loads(t.read())
+        with open('empty_spoiler.json', 'r') as t:
+            try:
+                tracker_output = loads(t.read())
+            except:
+                return
     tracker_debug = tracker_output["Debug"]
     tracker_totals = tracker_output["Totals"]
     tracker_current_scene = tracker_output["Current"]["Scene"]
-    tracker_current_scene_data = tracker_output["Scenes"][tracker_current_scene]
+    tracker_current_scane_data = tracker_output["Scenes"][tracker_current_scene]
+    tracker_scenes = tracker_output["Scenes"]
     template = loader.get_template("tracker/index.html")
-    for i in tracker_output["Scenes"]:
-        checks_total = tracker_output["Scenes"][i]["Totals"]["Checks"]["Total"]
-        checks_undiscovered = tracker_output["Scenes"][i]["Totals"]["Checks"]["Undiscovered"]
-        entrances_total = tracker_output["Scenes"][i]["Totals"]["Entrances"]["Total"]
-        entrances_undiscovered = tracker_output["Scenes"][i]["Totals"]["Entrances"]["Undiscovered"]
-        temp_data = {
-            "Checks": {
-                "Total": checks_total,
-                "Undiscovered": checks_undiscovered
-            },
-            "Entrances": {
-                "Total": entrances_total,
-                "Undiscovered": entrances_undiscovered
-            }
-        }
-        tracker_totals[i] = temp_data
-    temp_tracker_checks = tracker_current_scene_data["Checks"]
-    for i, check in enumerate(temp_tracker_checks.keys()):
-        temp_data = {
-            "Check": temp_tracker_checks[check],
-            "CheckNum": floor(int(i) % 3)
-        }
-        temp_tracker_checks[check] = temp_data
-    tracker_current_scene_data["Checks"] = temp_tracker_checks
-    temp_tracker_entrances = tracker_current_scene_data["Entrances"]
-    for i, entrance in enumerate(temp_tracker_entrances.keys()):
-        temp_data = {
-            "Entrance": temp_tracker_entrances[entrance],
-            "EntranceNum": floor(int(i) % 3)
-        }
-        temp_tracker_entrances[entrance] = temp_data
-    tracker_current_scene_data["Entrances"] = temp_tracker_entrances
     context = {
         "debug": tracker_debug,
         "totals": tracker_totals,
-        "current_scene": tracker_current_scene,
+        "scenes": tracker_scenes,
-        "scene_data": tracker_current_scene_data
+        "current_scene": {
+            "title": tracker_current_scene,
+            "data": tracker_current_scane_data
+        }
     }
     return HttpResponse(template.render(context, request))