tunic-tracker-redux/tunictracker/tracker/templates/tracker/howto/index.html

66 lines
5.1 KiB
HTML

<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="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/tunic-randomizer/releases"
class="underline text-bluelight-link">https://github.com/spaceglace/tunic-randomizer/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>
Run TUNIC, there should now be an "API Server" button on the quick settings panel.
Turn this on, and optionally set it to autoconnect on launch.
</li>
<li>You should be done, and the tracker should start tracking your game once you start one.</li>
</ul>
</details>
<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">Usage</summary>
<div class="overflow-y-scroll max-h-96">
<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>
</div>
</details>
</details>