ada/tunic-tracker-redux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the menu have an x button and do a shakey

Browse Source
This commit is contained in:
Ada Werefox 2024-04-14 23:33:36 -05:00
parent fe94dfeb3b
commit 157763876b
3 changed files with 84 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
tunictracker/tracker/static/tracker/images/x_mark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

20
tunictracker/tracker/templates/tracker/about/index.html
View File

@ -1,8 +1,13 @@
{% 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" />
<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>
@ -13,7 +18,9 @@
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>
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()"
@ -25,4 +32,5 @@
</div>
</details>
{% include "tracker/howto/index.html" %}
</details>
</details>
</div>

14
tunictracker/tracker/templates/tracker/howto/index.html
View File

@ -5,15 +5,20 @@
<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>
<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.
@ -55,5 +60,6 @@
* 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>