Added links to source code, reformatted link in the summary.

README.md

@@ -28,7 +28,7 @@ I think we can do better with Tunic tracking so I'm gonna make something and if
 
 ## Requirements
 
-You'll need `python` and `npm` to use this for now, so make sure you have those installed.
+You'll need `python` and `npm` to run this for now, so make sure you have those installed.
 
 ## Setup
 
@@ -36,9 +36,7 @@ Install necessary modules with:
 
 `pip install -r requirements.txt`
 
-Consider making a venv for this.
+Note: Consider making a venv for this - `python -m venv "./.venv"`
-
-`python -m venv "./.venv"`
 
 Install the node modules with:
 

tunictracker/requirements.txt

@@ -0,0 +1,31 @@
+asgiref==3.7.2
+autopep8==2.0.4
+certifi==2024.2.2
+charset-normalizer==3.3.2
+click==8.1.7
+colorama==0.4.6
+cssbeautifier==1.15.1
+Django==5.0.3
+django-browser-reload==1.12.1
+django-tailwind==3.8.0
+djlint==1.34.1
+EditorConfig==0.12.4
+gunicorn==21.2.0
+html-tag-names==0.1.2
+html-void-elements==0.1.0
+idna==3.6
+jsbeautifier==1.15.1
+json5==0.9.22
+numpy==1.26.4
+packaging==23.2
+pathspec==0.12.1
+pyarrow==15.0.1
+pycodestyle==2.11.1
+pylance==0.10.2
+PyYAML==6.0.1
+regex==2023.12.25
+requests==2.31.0
+six==1.16.0
+sqlparse==0.4.4
+tqdm==4.66.2
+urllib3==2.2.1

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

@@ -0,0 +1,82 @@
+<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">
+    <summary class="justify-start">How To Use This Tracker</summary>
+    <hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
+    <div class="text-lg px-2">Setup</div>
+    <ul class="flex flex-col space-y-1 px-4 list-decimal list-inside text-sm break-all">
+        <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="text-md px-2">Usage</div>
+    <ul class="flex flex-col space-y-2 px-4 list-inside list-disc text-sm">
+        <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 discoverd 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 list-none text-sm">
+        <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>
+</details>

tunictracker/tracker/templates/tracker/index.html

@@ -18,14 +18,12 @@
                                  alt="A trans pride fox emoji."
                                  width=""
                                  height="" />
-                            {% comment %} <span class="max-h-12 max-w-64 my-auto align-middle invert drop-shadow-[1px_2px_2px_rgba(0,0,0,1)] ">
-                                    <img src="{% static 'tracker/images/trunic_title.png' %}" alt="A trans pride fox emoji." width="365" height="64" />
-                            </span> {% endcomment %}
                         </div>
                         <div class="mt-auto text-sm max-w-fit">(Tunic Transition Tracker)</div>
                     </div>
                 </div>
                 <div class="space-y-1">
+                    {% include "tracker/howto/index.html" %}
                     <hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
                     <div class="px-2 flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0 text-lg bg-gradient-to-r from-bluelight-light to-bluelight-dark rounded-sm"
                          id="overview-totals">
@@ -104,5 +102,6 @@
                 {% endfor %}
             </div>
         </div>
+        {% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux" tracker_be_link="https://github.com/spaceglace/TunicTransitionTracker" %}
     </div>
 {% endblock content %}

tunictracker/tracker/templates/tracker/src/index.html

@@ -0,0 +1,4 @@
+<div class="flex flex-col md:flex-row min-w-max space-y-2 md:space-y-0 space-x-0 md:space-x-2 *:flex *:min-w-max *:justify-center basis-1 *:md:basis-1/2 *:p-1 *:rounded-md *:bg-gradient-to-tl *:shadow-sm *:shadow-[#242424] *:from-highlight-empty-light *:to-highlight-empty-dark *:text-highlight-empty-text">
+    <a href={{ tracker_fe_link }} target="_blank">Front-end Source Code</a>
+    <a href={{ tracker_be_link }} target="_blank">Back-end Source Code</a>
+</div>

tunictracker/werefoxtheme/static_src/tailwind.config.js

@@ -68,6 +68,7 @@ module.exports = {
 						DEFAULT: "#26638c",
 						dark: "#1b4764",
 					},
+					link: "hsl(203.91, 56.64%, 75%)",
 				},
 				"trans-pride": {
 					cyan: {