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

This commit is contained in:
Ada Werefox 2024-03-04 01:46:45 -06:00
parent 0b26b2de62
commit fcad6b49a8
4 changed files with 124 additions and 28 deletions

View File

@ -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);

View File

@ -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 %}

View File

@ -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>

View File

@ -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))