Make the menu have an x button and do a shakey
This commit is contained in:
parent
fe94dfeb3b
commit
157763876b
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -1,28 +1,36 @@
|
|||
{% 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>
|
||||
<div class="absolute inset-x-0 right-0 sm:top-2 top-4">
|
||||
<details class="group absolute right-2 open:w-auto open:static w-fit open:mx-4 flex p-2 space-y-2 open:rounded-md h-fit open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
|
||||
<summary class="flex mt-2 mr-6 sm:m-0 group-open:m-0 content-none group-open:justify-end shake-trigger">
|
||||
<img class="p-2 w-12 h-12 group-open:hidden shake rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
|
||||
<div class="hidden group-open:flex group-open:w-full group-open:flex-col group-open:space-y-2">
|
||||
<p class="flex justify-start w-full text-lg">About this tracker</p>
|
||||
<hr class="flex w-full border-2 border-bluelight-translucent-dark rounded-xl" />
|
||||
</div>
|
||||
<img class="hidden w-10 h-10 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
|
||||
</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>
|
||||
{% include "tracker/howto/index.html" %}
|
||||
</details>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,55 +5,61 @@
|
|||
<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"
|
||||
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>Launch the game, and this site should begin tracking it.</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="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">
|
||||
<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>
|
||||
<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 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue