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
|
||||
);
|
||||
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(
|
||||
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
|
||||
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]">
|
||||
<summary class="justify-start">How To Use This Tracker</summary>
|
||||
<hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
|
||||
<div class="px-2 text-lg">Setup</div>
|
||||
<ul class="flex flex-col px-4 ml-4 space-y-1 text-sm break-all list-decimal">
|
||||
<li>
|
||||
Download the latest release at <a href="https://github.com/spaceglace/TunicTransitionTracker/releases"
|
||||
class="underline text-bluelight-link">https://github.com/spaceglace/TunicTransitionTracker/releases</a> for your OS.
|
||||
</li>
|
||||
<li>Run the program you just downloaded.</li>
|
||||
<li>
|
||||
Click/tap "Settings" and in the "AppData Path" section, enter the path to your "SAVES" directory.
|
||||
<ul class="flex flex-col p-2 text-sm">
|
||||
<li>
|
||||
It should look something like:
|
||||
<br />
|
||||
<code>C:\\users\[username]\AppData\LocalLow\Andrew Shouldice\Secret Legend\</code>
|
||||
<br />
|
||||
Or, on linux:
|
||||
<br />
|
||||
<code>/home/[username]/.steam/steam/steamapps/compatdata/553420/pfx/drive_c/users/steamuser/AppData/LocalLow/Andrew Shouldice/Secret Legend/</code>
|
||||
</li>
|
||||
<li>
|
||||
If you aren't sure where it is on Windows, open a file explorer window and type:
|
||||
<br />
|
||||
<code>%AppData%\LocalLow\Andrew Shouldice\Secret Legend\</code>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="px-2 text-md">Usage</div>
|
||||
<ul class="flex flex-col px-4 space-y-2 text-sm list-disc list-inside">
|
||||
<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.
|
||||
</li>
|
||||
<li>
|
||||
Click/tap "Summary" to look at all the totals for each area, which get color coded depending on what you still need.
|
||||
<ul class="flex flex-col p-2 text-sm leading-loose">
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<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
|
||||
</li>
|
||||
</ul>
|
||||
</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.*
|
||||
</li>
|
||||
<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>
|
||||
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
<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">
|
||||
<summary class="px-2">Setup</summary>
|
||||
<ul class="flex flex-col px-4 ml-4 space-y-1 text-sm break-words list-decimal">
|
||||
<li>
|
||||
Download the latest release at <a href="https://github.com/spaceglace/TunicTransitionTracker/releases"
|
||||
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"
|
||||
class="underline text-bluelight-link">here</a>)
|
||||
</li>
|
||||
<li>Launch the game, and this site should begin tracking it.</li>
|
||||
</ul>
|
||||
</details>
|
||||
<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">
|
||||
<summary class="px-2">Usage</summary>
|
||||
<ul class="flex flex-col px-4 space-y-2 text-sm list-disc list-inside">
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
Click/tap "Summary" to look at all the totals for each area, which get color coded depending on what you still need.
|
||||
<ul class="flex flex-col p-2 text-sm leading-loose">
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<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
|
||||
</li>
|
||||
</ul>
|
||||
</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.
|
||||
Spells will always be at the bottom.
|
||||
</li>
|
||||
<li>
|
||||
Click/tap any "Summary" block to get a breakdown of that area alongside your current area.
|
||||
You can also click/tap any mapped entrance to get a breakdown of the scene that entrance would take you to.
|
||||
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>
|
||||
</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>
|
||||
* 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 %}
|
||||
<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%)]">
|
||||
{% include "tracker/about/index.html" %}
|
||||
<div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
|
||||
{% if debug != '' %}
|
||||
<div class="px-2 space-y-2">
|
||||
|
|
@ -87,31 +88,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
{% else %}
|
||||
<div id="no_data" />{% endif %}</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue