tunictracker/tracker/static/tracker/assets/main.js

@@ -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;

tunictracker/tracker/templates/tracker/about/index.html

@@ -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>

tunictracker/tracker/templates/tracker/howto/index.html

@@ -1,37 +1,22 @@
 <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" />
+    <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>
+        <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> for your OS.
+    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>
+    class="underline text-bluelight-link">here</a>)
-        <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>
+            <li>Launch the game, and this site should begin tracking it.</li>
         </ul>
-        </li>
+    </details>
-    </ul>
+    <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">
-    <div class="px-2 text-md">Usage</div>
+        <summary class="px-2">Usage</summary>
         <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.
+                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.
@@ -54,30 +39,21 @@
                 </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.*
+                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>
-            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.
+                Click/tap any "Summary" block to get a breakdown of that area alongside your current area.
-            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.
+                You can also click/tap any mapped entrance to get a breakdown of the scene that entrance would take you to.
-        </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.**
+                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.
+                * 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>
-            ** 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>

tunictracker/tracker/templates/tracker/index.html

@@ -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>