Breakdown section live refreshes now. Added color to denote undiscovered areas.

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

@@ -2,6 +2,7 @@ window.onload = () => {
 	let overview = {
 		checks: document.getElementById("overview_checks"),
 		entrances: document.getElementById("overview_entrances"),
+		summary: document.getElementById("summary"),
 	};
 	let current_scene = {
 		name: document.getElementById("current_scene_text"),
@@ -21,14 +22,26 @@ window.onload = () => {
 	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,
-		300,
+		500,
 		overview,
 		current_scene,
 		line_elem,
-		mapped_line_elem
+		mapped_line_elem,
+		summary_element
 	);
 };
 
@@ -36,7 +49,8 @@ async function refresh_elements(
 	overview,
 	current_scene,
 	line_elem,
-	mapped_line_elem
+	mapped_line_elem,
+	summary_element
 ) {
 	fetch("http://localhost:8000/spoiler")
 		.then((response) => response.json())
@@ -62,6 +76,7 @@ async function refresh_elements(
 				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}`;
 			overview.entrances.textContent = `Entrances: ${overview_entrances_undiscovered}/${overview_entrances_total}`;
 			current_scene.name.textContent = current_scene_name;
@@ -70,6 +85,7 @@ async function refresh_elements(
 			current_scene.checks.list.innerHTML = "";
 			current_scene.entrances.list.innerHTML = "";
 			current_scene.entrances.mapped.innerHTML = "";
+			overview.summary.innerHTML = "";
 			Object.keys(current_scene_checks_list).forEach((check) => {
 				if (!current_scene_checks_list[check]) {
 					line_elem.textContent = `❌ ${check}`;
@@ -87,6 +103,74 @@ async function refresh_elements(
 					);
 				}
 			});
+			let scene_div = document.createElement("div");
+			let checks_div = document.createElement("div");
+			let entrances_div = document.createElement("div");
+			let scene_checks_undiscovered = 0;
+			let scene_checks_total = 0;
+			let scene_entrances_undiscovered = 0;
+			let scene_entrances_total = 0;
+			Object.keys(all_scenes).forEach((scene) => {
+				summary_element.innerHTML = "";
+				scene_div.textContent = scene;
+				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;
+				}
+				checks_div.textContent = `Checks: ${scene_checks_undiscovered}/${scene_checks_total}`;
+				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"
+						);
+					}
+				} else if (scene_checks_undiscovered > 0) {
+					summary_element.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_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);

tunictracker/tracker/templates/index.html

@@ -9,7 +9,7 @@
     {% load static tailwind_tags %}
     {% tailwind_css %}
     {% load static %}
-    <script src="{% static 'tracker/assets/test.js' %}"></script>
+    <script src="{% static 'tracker/assets/refresh.js' %}"></script>
   </head>
   <body class="bg-[#242424]">
     {% block content %}

tunictracker/tracker/templates/tracker/index.html

@@ -20,10 +20,23 @@
             <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">
               <summary class="text-lg">Breakdown</summary>
-              <div class="grid gap-4 md:grid-cols-3 grid-flow-row">
+              <div class="grid gap-4 md:grid-cols-3 grid-flow-row" id="summary">
                 {% for scene, scene_totals in totals.items %}
-                  {% if scene != 'Entrances' and scene != 'Checks' %}
+                  {% if scene == current_scene %}
+                    <div class="p-2 flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 hidden">
+                      <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 != '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>
@@ -48,7 +61,7 @@
             </details>
           </div>
           <div class="p-4 flex flex-col max-w-full rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
-            <div class="flex text-lg" id="current_scene_text">{{ scene }}</div>
+            <div class="flex text-lg" id="current_scene_text">{{ current_scene }}</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">
@@ -63,7 +76,7 @@
                       {% endif %}
                     {% endfor %}
                   {% else %}
-                    <ul class="min-w-max bg-bluelight-translucent rounded-md px-1" hidden></ul>
+                    <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden"></ul>
                   {% endif %}
                 </div>
               </div>
@@ -78,11 +91,11 @@
                       {% 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>
+                        <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>
+                    <ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden"></ul>
                   {% endif %}
                 </div>
               </div>

tunictracker/tracker/views.py

@@ -30,7 +30,6 @@ def index(request):
     tracker_current_scene_data = tracker_output["Scenes"][tracker_current_scene]
     template = loader.get_template("tracker/index.html")
     for i in tracker_output["Scenes"]:
-        if i != tracker_current_scene:
         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"]
@@ -65,7 +64,7 @@ def index(request):
     context = {
         "debug": tracker_debug,
         "totals": tracker_totals,
-        "scene": tracker_current_scene,
+        "current_scene": tracker_current_scene,
         "scene_data": tracker_current_scene_data
     }
     return HttpResponse(template.render(context, request))