Everything should update in place, and will (hopefully) not break of the front end gets bad data or no data.
This commit is contained in:
parent
fcad6b49a8
commit
87771622cb
33
tunictracker/empty_spoiler.json
Normal file
33
tunictracker/empty_spoiler.json
Normal file
@ -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": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,182 +1,216 @@
|
||||
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"),
|
||||
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);
|
||||
}
|
||||
});
|
||||
//
|
||||
let overview = document.getElementById("overview");
|
||||
let summary_list = overview.querySelector(".summary-list");
|
||||
let breakdown_list = overview.querySelector(".breakdown-list");
|
||||
let breakdown_current = document.getElementById("breakdown-current");
|
||||
const refresh_interval = setInterval(
|
||||
refresh_elements,
|
||||
500,
|
||||
overview,
|
||||
current_scene,
|
||||
line_elem,
|
||||
mapped_line_elem,
|
||||
summary_element
|
||||
summary_list,
|
||||
breakdown_list,
|
||||
breakdown_current
|
||||
);
|
||||
};
|
||||
|
||||
async function refresh_elements(
|
||||
overview,
|
||||
current_scene,
|
||||
line_elem,
|
||||
mapped_line_elem,
|
||||
summary_element
|
||||
summary_list,
|
||||
breakdown_list,
|
||||
breakdown_current
|
||||
) {
|
||||
fetch("http://localhost:8000/spoiler")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const response_object = JSON.parse(JSON.stringify(data));
|
||||
const overview_checks_undiscovered =
|
||||
response_object.Totals.Checks.Undiscovered;
|
||||
const overview_checks_total = response_object.Totals.Checks.Total;
|
||||
const overview_entrances_undiscovered =
|
||||
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}`;
|
||||
overview.entrances.textContent = `Entrances: ${overview_entrances_undiscovered}/${overview_entrances_total}`;
|
||||
current_scene.name.textContent = current_scene_name;
|
||||
current_scene.checks.title.textContent = `Checks: ${current_scene_checks_undiscovered}/${current_scene_checks_total}`;
|
||||
current_scene.entrances.title.textContent = `Entrances: ${current_scene_entrances_undiscovered}/${current_scene_entrances_total}`;
|
||||
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}`;
|
||||
current_scene.checks.list.appendChild(line_elem.cloneNode(true));
|
||||
}
|
||||
});
|
||||
Object.keys(current_scene_entrances_list).forEach((entrances) => {
|
||||
if (current_scene_entrances_list[entrances] == "") {
|
||||
line_elem.textContent = `❌ ${entrances}`;
|
||||
current_scene.entrances.list.appendChild(line_elem.cloneNode(true));
|
||||
} else {
|
||||
mapped_line_elem.textContent = `✔️ ${entrances} -> ${current_scene_entrances_list[entrances]}`;
|
||||
current_scene.entrances.mapped.appendChild(
|
||||
mapped_line_elem.cloneNode(true)
|
||||
.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;
|
||||
const overview_entrances_undiscovered =
|
||||
response_object.Totals.Entrances.Undiscovered;
|
||||
const overview_entrances_total = response_object.Totals.Entrances.Total;
|
||||
const current_scene_name = response_object.Current.Scene;
|
||||
const all_scenes = response_object.Scenes;
|
||||
let new_breakdown_list = overview
|
||||
.querySelector(".breakdown-list")
|
||||
.cloneNode(true);
|
||||
let new_summary_list = overview
|
||||
.querySelector(".summary-list")
|
||||
.cloneNode(true);
|
||||
new_breakdown_list.innerHTML = "";
|
||||
new_summary_list.firstElementChild.innerHTML = "";
|
||||
|
||||
// Refresh elements with new data from the back end.
|
||||
|
||||
// Clone all the needed elements for updating.
|
||||
let overview_checks_title = overview.querySelector(".overview-checks");
|
||||
let overview_entrances_title = overview.querySelector(
|
||||
".overview-entrances"
|
||||
);
|
||||
let summary_block =
|
||||
summary_list.firstElementChild.firstElementChild.cloneNode(true);
|
||||
let breakdown_block = breakdown_list.firstElementChild.cloneNode(true);
|
||||
breakdown_block.classList.remove("hidden");
|
||||
|
||||
// Set content to updated data.
|
||||
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 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"
|
||||
);
|
||||
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)
|
||||
);
|
||||
}
|
||||
});
|
||||
Object.keys(all_scenes[scene].Entrances).forEach((entrances) => {
|
||||
if (all_scenes[scene].Entrances[entrances] == "") {
|
||||
breakdown_block_entrances_list_item.textContent = `❌ ${entrances}`;
|
||||
new_breakdown_block_entrances_list.appendChild(
|
||||
breakdown_block_entrances_list_item.cloneNode(true)
|
||||
);
|
||||
} else {
|
||||
breakdown_block_mapped_list_item.textContent = `✔️ ${entrances} -> ${all_scenes[scene].Entrances[entrances]}`;
|
||||
new_breakdown_block_mapped_list.appendChild(
|
||||
breakdown_block_mapped_list_item.cloneNode(true)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Apply color coding to summary block
|
||||
summary_block.classList.remove(
|
||||
"bg-green-900",
|
||||
"bg-yellow-900",
|
||||
"bg-blue-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_block.classList.add("bg-yellow-900");
|
||||
} else if (scene_entrances_undiscovered > 0) {
|
||||
summary_block.classList.add("bg-blue-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"
|
||||
|
||||
// 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)
|
||||
);
|
||||
} 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);
|
||||
});
|
||||
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);
|
||||
|
||||
@ -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 %}
|
||||
{% endblock content %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
60
tunictracker/tracker/templates/tracker/breakdown/block.html
Normal file
60
tunictracker/tracker/templates/tracker/breakdown/block.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
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="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" id="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">
|
||||
<summary class="text-lg">Breakdown</summary>
|
||||
<div class="grid gap-4 md:grid-cols-3 grid-flow-row" id="summary">
|
||||
{% for scene, scene_totals in totals.items %}
|
||||
{% 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 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."
|
||||
width=""
|
||||
height="" />
|
||||
</span>
|
||||
Tunic Transition Tracker
|
||||
</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>
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-md" />
|
||||
<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 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
|
||||
<div class="flex basis-1/2 overview-entrances">
|
||||
Entrances: {{ totals.Entrances.Undiscovered }}/{{ 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 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">
|
||||
<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" />
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-md" />
|
||||
<details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
|
||||
<summary class="justify-start p-2 text-lg">Summary</summary>
|
||||
<div class="p-4 summary-list">{% include "tracker/summary/list.html" %}</div>
|
||||
</details>
|
||||
<details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
|
||||
<summary class="justify-start p-2 text-lg">Breakdown</summary>
|
||||
<div class="p-4 flex flex-col space-y-4 breakdown-list">
|
||||
{% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
|
||||
{% for scene_title, scene_data in scenes.items %}
|
||||
{% include "tracker/breakdown/block.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div id="breakdown-current">
|
||||
{% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
|
||||
</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>
|
||||
Seed: {{ debug.Seed }}
|
||||
</ul>
|
||||
<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>
|
||||
<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>Seed: {{ debug.Seed }}</ul>
|
||||
<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" />
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div id="no_data" />{% endif %}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock content %}
|
||||
|
||||
@ -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>
|
||||
20
tunictracker/tracker/templates/tracker/summary/list.html
Normal file
20
tunictracker/tracker/templates/tracker/summary/list.html
Normal file
@ -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>
|
||||
@ -13,58 +13,32 @@ def index(request):
|
||||
try:
|
||||
request_data = requests.get('http://localhost:8000/spoiler').text
|
||||
except:
|
||||
context = {
|
||||
"debug": "",
|
||||
"totals": "",
|
||||
"scene": "",
|
||||
"scene_data": ""
|
||||
}
|
||||
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:
|
||||
# tracker_output = loads(t.read())
|
||||
with open('empty_spoiler.json', 'r') as t:
|
||||
try:
|
||||
tracker_output = loads(t.read())
|
||||
except:
|
||||
return
|
||||
try:
|
||||
tracker_output = loads(request_data)
|
||||
except:
|
||||
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,
|
||||
"scene_data": tracker_current_scene_data
|
||||
"scenes": tracker_scenes,
|
||||
"current_scene": {
|
||||
"title": tracker_current_scene,
|
||||
"data": tracker_current_scane_data
|
||||
}
|
||||
}
|
||||
return HttpResponse(template.render(context, request))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user