Moved settings and how-to into a top-right menu that displays over the tracker.
This commit is contained in:
parent
852a591684
commit
fe94dfeb3b
|
|
@ -963,22 +963,16 @@ async function update_scene(scene) {
|
||||||
current_summary_old.querySelector(".summary-checks").dataset.checksRemaining
|
current_summary_old.querySelector(".summary-checks").dataset.checksRemaining
|
||||||
);
|
);
|
||||||
const old_entrances_remaining = parseInt(
|
const old_entrances_remaining = parseInt(
|
||||||
current_summary_old.querySelector(".summary-entrances").dataset.entrancesRemaining
|
current_summary_old.querySelector(".summary-entrances").dataset
|
||||||
|
.entrancesRemaining
|
||||||
|
);
|
||||||
|
const old_checks_total = parseInt(
|
||||||
|
current_summary_old.querySelector(".summary-checks").dataset.checksTotal
|
||||||
);
|
);
|
||||||
const old_checks_total = parseInt(current_summary_old.querySelector(".summary-checks").dataset.checksTotal);
|
|
||||||
const old_entrances_total = parseInt(
|
const old_entrances_total = parseInt(
|
||||||
current_summary_old.querySelector(".summary-entrances").dataset.entrancesTotal
|
current_summary_old.querySelector(".summary-entrances").dataset
|
||||||
|
.entrancesTotal
|
||||||
);
|
);
|
||||||
// const current_checks_remaining = parseInt(
|
|
||||||
// current_summary.dataset.checksRemaining
|
|
||||||
// );
|
|
||||||
// const current_entrances_remaining = parseInt(
|
|
||||||
// current_summary.dataset.entrancesRemaining
|
|
||||||
// );
|
|
||||||
// const current_checks_total = parseInt(current_summary.dataset.checksTotal);
|
|
||||||
// const current_entrances_total = parseInt(
|
|
||||||
// current_summary.dataset.entrancesTotal
|
|
||||||
// );
|
|
||||||
|
|
||||||
// Update the current summary
|
// Update the current summary
|
||||||
current_summary_old.dataset.current = false;
|
current_summary_old.dataset.current = false;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 MiB |
|
|
@ -0,0 +1,28 @@
|
||||||
|
{% load static %}
|
||||||
|
<details class="absolute flex p-2 ml-10 space-y-2 rounded-md sm:ml-2 group w-fit h-fit max-w-fit sm:top-4 sm:right-2 top-8 right-10 bg-bluelight-background">
|
||||||
|
<summary class="flex p-2 content-none min-w-4 min-h-4 group-open:mt-4">
|
||||||
|
<img class="group-open:hidden" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
|
||||||
|
<img class="hidden w-8 h-8 group-open:flex group-open:right-2 group-open:top-2 group-open:absolute" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="16" height="16" />
|
||||||
|
</summary>
|
||||||
|
<details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
||||||
|
<summary class="justify-start">Settings</summary>
|
||||||
|
{% include "tracker/address/index.html" %}
|
||||||
|
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
||||||
|
<input onclick="hide_empty_summaries()"
|
||||||
|
type="checkbox"
|
||||||
|
id="hideDone"
|
||||||
|
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
|
||||||
|
<label for="hideDone"
|
||||||
|
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Hide completed areas</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
||||||
|
<input onclick="notices_ur_debug()"
|
||||||
|
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
|
||||||
|
type="checkbox"
|
||||||
|
id="show-debug" />
|
||||||
|
<label for="show-debug"
|
||||||
|
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
{% include "tracker/howto/index.html" %}
|
||||||
|
</details>
|
||||||
|
|
@ -1,83 +1,59 @@
|
||||||
<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 shadow-sm shadow-[#242424]">
|
<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 shadow-sm shadow-[#242424]">
|
||||||
<summary class="justify-start">How To Use This Tracker</summary>
|
<summary class="justify-start">How To Use This Tracker</summary>
|
||||||
<hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
|
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||||
<div class="px-2 text-lg">Setup</div>
|
<details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
|
||||||
<ul class="flex flex-col px-4 ml-4 space-y-1 text-sm break-all list-decimal">
|
<summary class="px-2">Setup</summary>
|
||||||
<li>
|
<ul class="flex flex-col px-4 ml-4 space-y-1 text-sm break-words list-decimal">
|
||||||
Download the latest release at <a href="https://github.com/spaceglace/TunicTransitionTracker/releases"
|
<li>
|
||||||
class="underline text-bluelight-link">https://github.com/spaceglace/TunicTransitionTracker/releases</a> for your OS.
|
Download the latest release at <a href="https://github.com/spaceglace/TunicTransitionTracker/releases"
|
||||||
</li>
|
class="underline text-bluelight-link">https://github.com/spaceglace/TunicTransitionTracker/releases</a>, install it how you would the normal randomizer. (which you can refer to <a href="https://github.com/silent-destroyer/tunic-randomizer#installation"
|
||||||
<li>Run the program you just downloaded.</li>
|
class="underline text-bluelight-link">here</a>)
|
||||||
<li>
|
</li>
|
||||||
Click/tap "Settings" and in the "AppData Path" section, enter the path to your "SAVES" directory.
|
<li>Launch the game, and this site should begin tracking it.</li>
|
||||||
<ul class="flex flex-col p-2 text-sm">
|
</ul>
|
||||||
<li>
|
</details>
|
||||||
It should look something like:
|
<details class="overflow-y-scroll max-h-96 py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
|
||||||
<br />
|
<summary class="px-2">Usage</summary>
|
||||||
<code>C:\\users\[username]\AppData\LocalLow\Andrew Shouldice\Secret Legend\</code>
|
<ul class="flex flex-col px-4 space-y-2 text-sm list-disc list-inside">
|
||||||
<br />
|
<li>
|
||||||
Or, on linux:
|
You will always be shown the current, total, and remaining checks/entrances in the game left to discover, and a breakdown of the current area you're in.
|
||||||
<br />
|
</li>
|
||||||
<code>/home/[username]/.steam/steam/steamapps/compatdata/553420/pfx/drive_c/users/steamuser/AppData/LocalLow/Andrew Shouldice/Secret Legend/</code>
|
<li>
|
||||||
</li>
|
Click/tap "Summary" to look at all the totals for each area, which get color coded depending on what you still need.
|
||||||
<li>
|
<ul class="flex flex-col p-2 text-sm leading-loose">
|
||||||
If you aren't sure where it is on Windows, open a file explorer window and type:
|
<li>
|
||||||
<br />
|
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-undiscovered-light to-highlight-undiscovered-dark text-highlight-undiscovered-text">Gray</span>: You haven't discovered this area
|
||||||
<code>%AppData%\LocalLow\Andrew Shouldice\Secret Legend\</code>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
</ul>
|
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-both-light to-highlight-both-dark text-highlight-both-text">Green</span>: You know where this is, and there are entrances and checks still left
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<li>
|
||||||
<div class="px-2 text-md">Usage</div>
|
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-checks-light to-highlight-checks-dark text-highlight-checks-text">Purple</span>: You know where this is, and all the entrances, but there are still checks left
|
||||||
<ul class="flex flex-col px-4 space-y-2 text-sm list-disc list-inside">
|
</li>
|
||||||
<li>
|
<li>
|
||||||
The ratios count down, so if you have 3 out of 5 total checks, that means you still need to get 3 checks out of the 5 that are in the area.
|
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-entrances-light to-highlight-entrances-dark text-highlight-entrances-text">Orange</span>: You know where this is, and all the checks, but there are still entrances left
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Click/tap "Summary" to look at all the totals for each area, which get color coded depending on what you still need.
|
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">Clear</span>: You've fully discovered this area
|
||||||
<ul class="flex flex-col p-2 text-sm leading-loose">
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-undiscovered-light to-highlight-undiscovered-dark text-highlight-undiscovered-text">Gray</span>: You haven't discovered this area
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
Click/tap "Holy Cross Codes" to see the codes you can do in the current area, ordered by distance. Codes will highlight when you are in range to do them, and disappear when you've input them.
|
||||||
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-both-light to-highlight-both-dark text-highlight-both-text">Green</span>: You know where this is, and there are entrances and checks still left
|
Spells will always be at the bottom.
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-checks-light to-highlight-checks-dark text-highlight-checks-text">Purple</span>: You know where this is, and all the entrances, but there are still checks left
|
Click/tap any "Summary" block to get a breakdown of that area alongside your current area.
|
||||||
</li>
|
You can also click/tap any mapped entrance to get a breakdown of the scene that entrance would take you to.
|
||||||
<li>
|
This acts as a way to traverse the discovered areas in your game. For example, if I want to find how to get to "The Heir", I can click/tap that summary block to get a breakdown of that area,
|
||||||
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-entrances-light to-highlight-entrances-dark text-highlight-entrances-text">Orange</span>: You know where this is, and all the checks, but there are still entrances left
|
and then click the mapped entrances until I get to the Overworld.*
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</ul>
|
||||||
<span class="p-1 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">Clear</span>: You've fully discovered this area
|
<hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
|
||||||
</li>
|
<div class="flex flex-col px-2 pb-2 text-sm list-none">
|
||||||
</ul>
|
<li>
|
||||||
</li>
|
* Ideally, this would eventually be something more straightforward, like simply listing the path to an area. That will hopefully be added later down the line.
|
||||||
<li>
|
</li>
|
||||||
Click/tap "Holy Cross Codes" to see the codes you can do in the current area, this includes one-time spells. Codes/spells will be removed as you use them.*
|
</div>
|
||||||
</li>
|
</details>
|
||||||
<li>
|
|
||||||
Breakdown: You will always be shown the ratios of entrances and checks in the game left to discover, and a breakdown of the current area you're in.
|
|
||||||
In the breakdown, you'll be shown the ratio of totals for that area, a list of the checks and a list of the entrances still needed, and a list of the entrances that have already been discovered, alongside where they lead.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Traversal: Click/tap any mapped entrance, or any of the "Summary" blocks for an area to get another breakdown of that area alongside your current one.
|
|
||||||
This acts as a way to traverse the discovered areas in your game. For example, if I want to find how to get to "The Heir", I can click/tap that summary block to get a breakdown of that area,
|
|
||||||
and then click the mapped entrances until I get to the Overworld.**
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Settings: You may have noticed there are buttons in the "Settings" section that aren't used in setup.
|
|
||||||
You can click/tap "Hide completed areas" to hide areas in the "Summary" section that have been fully cleared.
|
|
||||||
You can click/tap "Sh-OwO Debug" to show a panel that gives some debug information... if you want to.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
|
|
||||||
<div class="flex flex-col px-2 pb-2 text-sm list-none">
|
|
||||||
<li>
|
|
||||||
* Since tunic doesn't save when you do a code, it won't update until you do something that causes the game to make a new save, like pausing, going to another area, or clearing a check.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
** Ideally, this would eventually be something more straightforward, like simply listing the path to an area. That will hopefully be added later down the line.
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</details>
|
</details>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="min-h-screen font-nerd bg-gradient-to-br from-bluelight-background-dark to-bluelight-background">
|
<div class="min-h-screen font-nerd bg-gradient-to-br from-bluelight-background-dark to-bluelight-background">
|
||||||
<div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
|
<div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
|
||||||
|
{% include "tracker/about/index.html" %}
|
||||||
<div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
|
<div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
|
||||||
{% if debug != '' %}
|
{% if debug != '' %}
|
||||||
<div class="px-2 space-y-2">
|
<div class="px-2 space-y-2">
|
||||||
|
|
@ -87,31 +88,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
|
|
||||||
<summary class="justify-start">Settings</summary>
|
|
||||||
{% include "tracker/address/index.html" %}
|
|
||||||
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
|
||||||
<input onclick="hide_empty_summaries()"
|
|
||||||
type="checkbox"
|
|
||||||
id="hideDone"
|
|
||||||
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
|
|
||||||
<label for="hideDone"
|
|
||||||
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">
|
|
||||||
Hide completed areas
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
|
|
||||||
<input onclick="notices_ur_debug()"
|
|
||||||
class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
|
|
||||||
type="checkbox"
|
|
||||||
id="show-debug" />
|
|
||||||
<label for="show-debug"
|
|
||||||
class="my-auto align-top justify-left min-w-fit text-md text-nowrap">
|
|
||||||
Sh-OwO Debug
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
{% include "tracker/howto/index.html" %}
|
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div id="no_data" />{% endif %}</div>
|
<div id="no_data" />{% endif %}</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue