Breakdown section live refreshes now. Added color to denote undiscovered areas.
This commit is contained in:
parent
0b26b2de62
commit
fcad6b49a8
@ -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);
|
@ -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 %}
|
||||
|
@ -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>
|
||||
|
@ -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))
|
||||
|
Loading…
Reference in New Issue
Block a user