Moved holy cross codes to their own div, fixed "hide completed areas" checkbox.

This commit is contained in:
Ada Werefox 2024-03-20 15:27:58 -05:00
parent a8e9c19afb
commit 28e3da069f
5 changed files with 133 additions and 126 deletions

View File

@ -20,22 +20,11 @@ window.onload = () => {
); );
}; };
function banana(event) { function open_breakdown(event) {
show_breakdown(event.dataset.scene); let scene = event.dataset.scene;
}
function show_breakdown(scene) {
console.log(scene);
Array.from(document.getElementById("breakdown-list").children).forEach( Array.from(document.getElementById("breakdown-list").children).forEach(
(breakdown) => { (breakdown) => {
if (breakdown.id == `${scene}-breakdown`) { if (breakdown.id == `${scene}-breakdown`) {
console.log(
`${
document
.getElementById("breakdown-current")
.querySelector(".breakdown-block-title").textContent
}, ${scene}`
);
if ( if (
!( !(
document document
@ -52,6 +41,28 @@ function show_breakdown(scene) {
); );
} }
function hide_empty_summaries() {
let summary_divs =
document.getElementById("summary-list").firstElementChild.children;
Array.from(summary_divs).forEach((summary) => {
let checks_undiscovered =
summary.querySelector(".summary-checks").dataset.checksUndiscovered;
let entrances_undiscovered =
summary.querySelector(".summary-entrances").dataset.entrancesUndiscovered;
if (
!(
summary.querySelector(".summary-title").textContent == "Posterity" ||
summary.querySelector(".summary-title").textContent == "Resurrection"
) &&
(checks_undiscovered <= 0 &&
entrances_undiscovered <= 0)
) {
console.log(`${checks_undiscovered} and ${entrances_undiscovered}`)
summary.classList.toggle("hidden");
}
});
}
function notices_ur_debug() { function notices_ur_debug() {
document.getElementById("debug-block").classList.toggle("hidden"); document.getElementById("debug-block").classList.toggle("hidden");
} }
@ -140,18 +151,14 @@ async function refresh_elements(cross_codes) {
let summary_block = document let summary_block = document
.getElementById("summary-list") .getElementById("summary-list")
.firstElementChild.firstElementChild.cloneNode(true); .firstElementChild.firstElementChild.cloneNode(true);
summary_block.id = "";
let breakdown_block = document let breakdown_block = document
.getElementById("breakdown-list") .getElementById("breakdown-list")
.firstElementChild.cloneNode(true); .firstElementChild.cloneNode(true);
breakdown_block.id = ""; breakdown_block.id = "";
let cross_codes_block = document
.getElementById("breakdown-list")
.firstElementChild.querySelector(".codes-block")
.cloneNode(true);
breakdown_block.classList.remove("hidden"); breakdown_block.classList.remove("hidden");
let debug_item = document let debug_item = document
.getElementById("debug-block") .getElementById("debug-block")
.querySelector(".debug-list")
.firstElementChild.cloneNode(true); .firstElementChild.cloneNode(true);
debug_item.classList.remove("hidden"); debug_item.classList.remove("hidden");
let new_breakdown_list = document let new_breakdown_list = document
@ -162,6 +169,7 @@ async function refresh_elements(cross_codes) {
.cloneNode(true); .cloneNode(true);
let new_debug_block = document let new_debug_block = document
.getElementById("debug-block") .getElementById("debug-block")
.querySelector(".debug-list")
.cloneNode(true); .cloneNode(true);
let current_open_breakdown = ""; let current_open_breakdown = "";
Array.from(new_breakdown_list.children).forEach((scene) => { Array.from(new_breakdown_list.children).forEach((scene) => {
@ -222,22 +230,10 @@ async function refresh_elements(cross_codes) {
.querySelector(".breakdown-block-mapped-list") .querySelector(".breakdown-block-mapped-list")
.firstElementChild.cloneNode(true); .firstElementChild.cloneNode(true);
cross_codes_block = document
.getElementById("breakdown-list")
.firstElementChild.querySelector(".codes-block")
.cloneNode(true);
let new_cross_codes_block_list = cross_codes_block
.querySelector(".codes-list")
.cloneNode(true);
let cross_codes_block_list_item = cross_codes_block
.querySelector(".codes-list")
.firstElementChild.cloneNode(true);
// Clear out current list content. // Clear out current list content.
new_breakdown_block_checks_list.innerHTML = ""; new_breakdown_block_checks_list.innerHTML = "";
new_breakdown_block_entrances_list.innerHTML = ""; new_breakdown_block_entrances_list.innerHTML = "";
new_breakdown_block_mapped_list.innerHTML = ""; new_breakdown_block_mapped_list.innerHTML = "";
new_cross_codes_block_list.innerHTML = "";
new_breakdown_block_checks_list.appendChild( new_breakdown_block_checks_list.appendChild(
breakdown_block_checks_list_item.cloneNode(true) breakdown_block_checks_list_item.cloneNode(true)
); );
@ -263,7 +259,12 @@ async function refresh_elements(cross_codes) {
// Set textContent. // Set textContent.
summary_title.textContent = scene; summary_title.textContent = scene;
summary_checks.textContent = `Checks: ${scene_checks_undiscovered}/${scene_checks_total}`; summary_checks.textContent = `Checks: ${scene_checks_undiscovered}/${scene_checks_total}`;
summary_checks.dataset.checksUndiscovered = scene_checks_undiscovered;
summary_checks.dataset.checksTotal = scene_checks_undiscovered;
summary_entrances.textContent = `Entrances: ${scene_entrances_undiscovered}/${scene_entrances_total}`; summary_entrances.textContent = `Entrances: ${scene_entrances_undiscovered}/${scene_entrances_total}`;
summary_entrances.dataset.entrancesUndiscovered =
scene_entrances_undiscovered;
summary_entrances.dataset.entrancesTotal = scene_entrances_total;
breakdown_block_title.textContent = scene; 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_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}`; breakdown_block_entrances_title.textContent = `Entrances: ${all_scenes[scene].Totals.Entrances.Undiscovered}/${all_scenes[scene].Totals.Entrances.Total}`;
@ -288,71 +289,11 @@ async function refresh_elements(cross_codes) {
breakdown_block_mapped_list_item.id = `${entrances}-mapped`; breakdown_block_mapped_list_item.id = `${entrances}-mapped`;
breakdown_block_mapped_list_item.dataset.scene = breakdown_block_mapped_list_item.dataset.scene =
all_scenes[scene].Entrances[entrances].Scene; all_scenes[scene].Entrances[entrances].Scene;
// breakdown_block_mapped_list_item.onclick = () => {
// show_breakdown(all_scenes[scene].Entrances[entrances].Scene);
// };
new_breakdown_block_mapped_list.appendChild( new_breakdown_block_mapped_list.appendChild(
breakdown_block_mapped_list_item.cloneNode(true) breakdown_block_mapped_list_item.cloneNode(true)
); );
} }
}); });
Object.keys(default_cross_codes).forEach((code) => {
cross_codes_block_list_item.querySelector(
".codes-list-item-title"
).textContent = code;
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = default_cross_codes[code]
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
});
Object.keys(global_cross_codes).forEach((code) => {
cross_codes_block_list_item.querySelector(
".codes-list-item-title"
).textContent = code;
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = global_cross_codes[code]
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
if (cross_codes_entered.Global[code]) {
cross_codes_block_list_item.classList.add("hidden");
} else {
cross_codes_block_list_item.classList.remove("hidden");
}
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
});
if (scene_has_codes) {
Object.keys(cross_codes[scene]).forEach((code) => {
cross_codes_block_list_item.querySelector(
".codes-list-item-title"
).textContent = code;
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = cross_codes[scene][code]
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
if (cross_codes_entered[scene][code]) {
cross_codes_block_list_item.classList.add("hidden");
} else {
cross_codes_block_list_item.classList.remove("hidden");
}
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
});
}
// Apply color coding to summary block // Apply color coding to summary block
summary_block.firstElementChild.classList.remove( summary_block.firstElementChild.classList.remove(
@ -422,17 +363,10 @@ async function refresh_elements(cross_codes) {
breakdown_block breakdown_block
.querySelector(".breakdown-block-mapped-list") .querySelector(".breakdown-block-mapped-list")
.replaceWith(new_breakdown_block_mapped_list); .replaceWith(new_breakdown_block_mapped_list);
breakdown_block.querySelector(".codes-block").classList.add("hidden");
breakdown_block
.querySelector(".codes-list")
.replaceWith(new_cross_codes_block_list);
breakdown_block.id = `${ breakdown_block.id = `${
breakdown_block.querySelector(".breakdown-block-title").textContent breakdown_block.querySelector(".breakdown-block-title").textContent
}-breakdown`; }-breakdown`;
summary_block.id = `${
summary_block.querySelector(".summary-title").textContent
}-summary`;
breakdown_block.classList.add("hidden"); breakdown_block.classList.add("hidden");
// Append relevant elements to lists. // Append relevant elements to lists.
@ -442,29 +376,103 @@ async function refresh_elements(cross_codes) {
if (scene == current_scene_name) { if (scene == current_scene_name) {
summary_block.classList.add("hidden"); summary_block.classList.add("hidden");
breakdown_block.classList.remove("hidden"); breakdown_block.classList.remove("hidden");
breakdown_block
.querySelector(".codes-block")
.classList.remove("hidden");
document document
.getElementById("breakdown-current") .getElementById("breakdown-current")
.firstElementChild.replaceWith(breakdown_block.cloneNode(true)); .firstElementChild.replaceWith(breakdown_block.cloneNode(true));
breakdown_block.classList.add("hidden"); breakdown_block.classList.add("hidden");
breakdown_block
.querySelector(".codes-block")
.classList.add("hidden");
} else if ( } else if (
scene_checks_undiscovered <= 0 && scene_checks_undiscovered <= 0 &&
scene_entrances_total <= 0 scene_entrances_total <= 0
) { ) {
summary_block.classList.add("hidden"); summary_block.classList.add("hidden");
} }
if (document.getElementById("hideDone").checked) {
if (
scene_checks_undiscovered <= 0 &&
scene_entrances_undiscovered <= 0
) {
summary_block.classList.add("hidden");
}
}
summary_block.dataset.scene = scene;
new_summary_list.firstElementChild.appendChild( new_summary_list.firstElementChild.appendChild(
summary_block.cloneNode(true) summary_block.cloneNode(true)
); );
new_breakdown_list.appendChild(breakdown_block.cloneNode(true)); new_breakdown_list.appendChild(breakdown_block.cloneNode(true));
}); });
let new_cross_codes_block_list = document
.getElementById("codes-list")
.cloneNode(true);
let cross_codes_block_list_item = document
.getElementById("codes-list")
.firstElementChild.cloneNode(true);
new_cross_codes_block_list.innerHTML = "";
Object.keys(default_cross_codes).forEach((code) => {
cross_codes_block_list_item.querySelector(
".codes-list-item-title"
).textContent = code;
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = default_cross_codes[code]
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
});
Object.keys(global_cross_codes).forEach((code) => {
cross_codes_block_list_item.querySelector(
".codes-list-item-title"
).textContent = code;
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = global_cross_codes[code]
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
if (cross_codes_entered.Global[code]) {
cross_codes_block_list_item.classList.add("hidden");
} else {
cross_codes_block_list_item.classList.remove("hidden");
}
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
});
if (!(typeof cross_codes[current_scene_name] === "undefined")) {
Object.keys(cross_codes[current_scene_name]).forEach((code) => {
cross_codes_block_list_item.querySelector(
".codes-list-item-title"
).textContent = code;
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = cross_codes[current_scene_name][code]
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
if (cross_codes_entered[current_scene_name][code]) {
cross_codes_block_list_item.classList.add("hidden");
} else {
cross_codes_block_list_item.classList.remove("hidden");
}
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
});
}
document
.getElementById("codes-list")
.replaceWith(new_cross_codes_block_list);
Object.keys(debug_info).forEach((item) => { Object.keys(debug_info).forEach((item) => {
debug_item.textContent = `${item}: ${debug_info[item]}`; debug_item.querySelector(
".debug-item"
).textContent = `${item}: ${debug_info[item]}`;
new_debug_block.appendChild(debug_item.cloneNode(true)); new_debug_block.appendChild(debug_item.cloneNode(true));
}); });
@ -477,13 +485,8 @@ async function refresh_elements(cross_codes) {
.replaceWith(new_breakdown_list.cloneNode(true)); .replaceWith(new_breakdown_list.cloneNode(true));
document document
.getElementById("debug-block") .getElementById("debug-block")
.querySelector(".debug-list")
.replaceWith(new_debug_block.cloneNode(true)); .replaceWith(new_debug_block.cloneNode(true));
Object.keys(all_scenes).forEach((scene) => {
document.getElementById(`${scene}-summary`).onclick = () => {
show_breakdown(scene);
};
});
}, },
(error) => { (error) => {
document.getElementById("status-block").classList.remove("hidden"); document.getElementById("status-block").classList.remove("hidden");

View File

@ -50,13 +50,13 @@
<div class="p-1 flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list"> <div class="p-1 flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
<button type="button" <button type="button"
class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm hidden" class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm hidden"
onclick="banana(this)"></button> onclick="open_breakdown(this)"></button>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %} {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination %} {% if entrance_destination %}
<button type="button" <button type="button"
class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]" class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]"
id="{{ entrance_origin }}-mapped" id="{{ entrance_origin }}-mapped"
onclick="banana(this)" onclick="open_breakdown(this)"
data-scene="{{ entrance_destination.Scene }}"> data-scene="{{ entrance_destination.Scene }}">
✔️ {{ entrance_origin }} -> {{ entrance_destination.Door }} ✔️ {{ entrance_origin }} -> {{ entrance_destination.Door }}
</button> </button>
@ -64,7 +64,6 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% include "tracker/codes/index.html" %}
</div> </div>
<hr class="px-2 border-2 border-bluelight-translucent-dark rounded-xl" /> <hr class="px-2 border-2 border-bluelight-translucent-dark rounded-xl" />
</div> </div>

View File

@ -1,8 +1,8 @@
<details class="py-2 px-2 mt-2 flex flex-col space-y-4 max-w-full text-holy-cross text-base [text-shadow:_1px_1px_4px_rgb(0_0_0_/_100%)] rounded-xl bg-gradient-to-br from-[#ffe28530] to-[#ffffff30] drop-shadow-[0px_0px_4px_rgba(255,255,255,1)] justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block"> <details class="py-2 px-2 mt-2 flex flex-col space-y-4 max-w-full text-holy-cross text-base [text-shadow:_1px_1px_4px_rgb(0_0_0_/_100%)] rounded-xl bg-gradient-to-br from-[#ffe28530] to-[#ffffff30] drop-shadow-[0px_0px_4px_rgba(255,255,255,1)] justify-start">
<summary>Holy Cross Codes</summary> <summary>Holy Cross Codes</summary>
<hr class="border-2 border-holy-cross opacity-30 rounded-xl" /> <hr class="border-2 border-holy-cross opacity-30 rounded-xl" />
<div class="flex flex-col space-y-2 max-h-96 rounded-xl overflow-y-scroll"> <div class="flex flex-col space-y-2 max-h-96 rounded-xl overflow-y-scroll">
<ul class="grid grid-flow-row md:grid-cols-3 xl:grid-cols-5 gap-2 rounded-xl codes-list"> <div class="grid grid-flow-row md:grid-cols-3 xl:grid-cols-5 gap-2 rounded-xl" id="codes-list">
{% for name, code in default_codes.items %} {% for name, code in default_codes.items %}
{% include "tracker/codes/block.html" with is_entered=False %} {% include "tracker/codes/block.html" with is_entered=False %}
{% endfor %} {% endfor %}
@ -17,6 +17,6 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul> </div>
</div> </div>
</details> </details>

View File

@ -53,13 +53,14 @@
<div id="breakdown-current"> <div id="breakdown-current">
{% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %} {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
</div> </div>
{% include "tracker/codes/index.html" %}
</div> </div>
<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-br from-bluelight-background-light to-bluelight-background"> <details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-br from-bluelight-background-light to-bluelight-background">
<summary class="justify-start">Settings</summary> <summary class="justify-start">Settings</summary>
{% include "tracker/settings/index.html" %} {% include "tracker/settings/index.html" %}
{% include "tracker/address/index.html" %} {% include "tracker/address/index.html" %}
<div class="p-2 m-auto justify-center align-middle flex flex-row space-x-2"> <div class="p-2 m-auto justify-center align-middle flex flex-row space-x-2">
<input onclick="[].forEach.call(document.getElementsByClassName('from-highlight-empty-light'), x => x.classList[document.getElementById('hideDone').checked ? 'add' : 'remove']('hidden'))" <input onclick="hide_empty_summaries()"
type="checkbox" type="checkbox"
id="hideDone" id="hideDone"
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" /> class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
@ -85,17 +86,16 @@
<div class="p-2 flex flex-col space-y-2 max-w-full rounded-lg bg-white bg-opacity-10 shadow-lg shadow-bluelight-background-dark hidden" <div class="p-2 flex flex-col space-y-2 max-w-full rounded-lg bg-white bg-opacity-10 shadow-lg shadow-bluelight-background-dark hidden"
id="debug-block"> id="debug-block">
<div class="px-2 text-lg">Tracker Debug</div> <div class="px-2 text-lg">Tracker Debug</div>
<div class="grid grid-flow-row md:grid-cols-2 xl:grid-cols-3 gap-2 space-y-2 max-w-full break-words" <div class="grid grid-flow-row md:grid-cols-2 xl:grid-cols-3 gap-2 space-y-2 max-w-full break-words debug-list">
id="debug-block"> <div class="max-h-full align-bottom flex flex-col-reverse hidden">
<div class="max-h-full hidden"> <hr class="mt-1 border-2 border-[#24242480] rounded-xl" />
<ul class="px-2"> <ul class="px-2 break-all sm:break-word debug-item">
</ul> </ul>
<hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
</div> </div>
{% for name, value in debug.items %} {% for name, value in debug.items %}
<div class="max-h-full align-bottom flex flex-col-reverse"> <div class="max-h-full align-bottom flex flex-col-reverse">
<hr class="mt-1 border-2 border-[#24242480] rounded-xl" /> <hr class="mt-1 border-2 border-[#24242480] rounded-xl" />
<ul class="px-2"> <ul class="px-2 break-all sm:break-word debug-item">
{{ name }}: {{ value }} {{ name }}: {{ value }}
</ul> </ul>
</div> </div>

View File

@ -1,12 +1,17 @@
<button type="button" <button type="button"
class="rounded-xl {{ is_hidden }}" class="rounded-xl {{ is_hidden }}"
id="{{ scene }}-summary"> onclick="open_breakdown(this)"
data-scene="{{ scene }}">
<div class="p-2 *:mr-auto *:justify-start *:text-left min-h-full flex flex-col rounded-lg bg-gradient-to-tl shadow-sm shadow-[#242424] {{ extra_classes }}"> <div class="p-2 *:mr-auto *:justify-start *:text-left min-h-full flex flex-col rounded-lg bg-gradient-to-tl shadow-sm shadow-[#242424] {{ extra_classes }}">
<div class="summary-title">{{ scene }}:</div> <div class="summary-title">{{ scene }}:</div>
<div class="summary-checks"> <div class="summary-checks"
data-checks-undiscovered="{{ scene_data.Totals.Checks.Undiscovered }}"
data-checks-total="{{ scene_data.Totals.Checks.Total }}">
Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }} Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
</div> </div>
<div class="summary-entrances"> <div class="summary-entrances"
data-entrances-undiscovered="{{ scene_data.Totals.Entrances.Undiscovered }}"
data-entrances-total="{{ scene_data.Totals.Entrances.Total }}">
Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }} Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
</div> </div>
</div> </div>