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

Reworking the user interface.

This commit is contained in:
Ada Werefox 2024-03-10 01:36:19 -06:00
parent 5f4e8985f2
commit d022243e5a
13 changed files with 98 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tunictracker/tracker/forms.py
View File

@ -5,9 +5,9 @@ from json import loads
class ServerAddressForm(forms.Form):
server_address_form = forms.URLField(
max_length=1312, initial="http://localhost:8000/", empty_value="http://localhost:8000/", label="")
server_address_form.widget.attrs["class"] = "w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
server_address_form.widget.attrs["class"] = "w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
class BackendFilepathForm(forms.Form):
backend_filepath_form = forms.CharField()
backend_filepath_form.widget.attrs["class"] = "w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
backend_filepath_form.widget.attrs["class"] = "w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"

24
tunictracker/tracker/static/tracker/assets/refresh.js
View File

@ -269,10 +269,10 @@ async function refresh_elements(cross_codes) {
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = default_cross_codes[code]
.replace(/U/g, "⬆️ ")
.replace(/R/g, "➡️ ")
.replace(/D/g, "⬇️ ")
.replace(/L/g, "⬅️ ");
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
new_cross_codes_block_list.appendChild(
cross_codes_block_list_item.cloneNode(true)
);
@ -284,10 +284,10 @@ async function refresh_elements(cross_codes) {
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = global_cross_codes[code]
.replace(/U/g, "⬆️ ")
.replace(/R/g, "➡️ ")
.replace(/D/g, "⬇️ ")
.replace(/L/g, "⬅️ ");
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
if (cross_codes_entered.Global[code]) {
cross_codes_block_list_item.classList.add("hidden");
} else {
@ -305,10 +305,10 @@ async function refresh_elements(cross_codes) {
cross_codes_block_list_item.querySelector(
".codes-list-item-code"
).textContent = cross_codes[scene][code]
.replace(/U/g, "⬆️ ")
.replace(/R/g, "➡️ ")
.replace(/D/g, "⬇️ ")
.replace(/L/g, "⬅️ ");
.replace(/U/g, "⬆️")
.replace(/R/g, "➡️")
.replace(/D/g, "⬇️")
.replace(/L/g, "⬅️");
if (cross_codes_entered[scene][code]) {
cross_codes_block_list_item.classList.add("hidden");
} else {

10
tunictracker/tracker/static/tracker/data/holy_cross_codes.json
View File

@ -1,7 +1,7 @@
{
"Default": {
"Speedrunner Code": "RULDDRULU",
"Seeking Spell": "ULURDL",
"Seeking Spell": "ULURDR",
"Healing Spell": "DRDLURU"
},
"Cathedral": {
@ -46,10 +46,10 @@
"Back To Work Treasure": "RDLULLDRRDD",
"Compass Fairy": "LRDUUDRLURDLUDRL",
"Fire Wand Obelisk Page": "URDLDRUL",
"Fountain Cross Door": "URDLDLU",
"Fountain Cross Door": "DRULUR",
"Fountain Fairy": "DLLDURD",
"Lower Flower Fairy": "URDLDLDLU",
"Moss Fairy": "URULDRURULDLDRULURDRD",
"Lower Flower Fairy": "URDLDLDLDLU",
"Moss Fairy": "URULDLULURDRDRULURDRD",
"Power Up Treasure": "UDRUDLUDLRDLRU",
"Sacred Geometry Treasure": "DLLUURRLDRUD",
"Southeast Cross Door": "DRULUR",
@ -73,7 +73,7 @@
},
"West Garden": {
"Sword Door": "DRULUR",
"Tiles Fairy": "URULURULURDRULRLURULURULU",
"Tiles Fairy": "URULURULURDRULDLURULURULU",
"Tree Fairy": "LDRLUD"
}
}

4
tunictracker/tracker/templates/tracker/address/index.html
View File

@ -1,7 +1,7 @@
<form action="{% url "set_address" %}"
method="post"
class="flex flex-row space-x-2">
<div class="w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
<div class="w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
hidden></div>
{% csrf_token %}
<label for="server-address-form"
@ -9,6 +9,6 @@
{% for field in server_address_form %}{{ field }}{% endfor %}
<input type="submit"
value="Submit"
class="p-2 m-auto text-sm rounded-md ring-2 ring-bluelight-dark bg-bluelight-translucent"
class="p-2 m-auto text-sm rounded-xl border-2 border-bluelight-dark bg-bluelight-translucent"
id="server-address-form" />
</form>

26
tunictracker/tracker/templates/tracker/breakdown/block.html
View File

@ -1,4 +1,4 @@
<div class="p-4 flex flex-col max-w-full rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark {{ extra_classes }}">
<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark {{ extra_classes }}">
<div class="flex text-lg breakdown-block-title">{{ scene_title }}</div>
<div class="flex flex-col md:flex-row justify-center md:space-x-4">
<div class="flex flex-col basis-1/2 overflow-hidden">
@ -6,14 +6,14 @@
<div class="text-md breakdown-block-checks-title">
Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
</div>
<hr class="border-2 border-bluelight-translucent-dark rounded-md" />
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
</div>
<div class="pb-4 flex flex-col space-y-2 overflow-x-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
<ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
<div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
</ul>
{% for check_name, check in scene_data.Checks.items %}
{% if not check %}
<ul class="min-w-max bg-bluelight-translucent rounded-md px-1">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
❌ {{ check_name }}
</ul>
{% endif %}
@ -25,18 +25,18 @@
<div class="text-md breakdown-block-entrances-title">
Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
</div>
<hr class="border-2 border-bluelight-translucent-dark rounded-md" />
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
</div>
<div class="pb-4 flex flex-col space-y-2 overflow-x-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
<ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
<div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
</ul>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination == "" %}
<ul class="min-w-max bg-bluelight-translucent rounded-md px-1">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
❌ {{ entrance_origin }}
</ul>
{% else %}
<ul class="min-w-max bg-bluelight-translucent rounded-md px-1 hidden">
<ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
❌ {{ entrance_origin }}
</ul>
{% endif %}
@ -44,13 +44,13 @@
</div>
</div>
</div>
<div class="overflow-x-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
<div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
<div class="flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
<ul class="bg-bluelight rounded-md px-1 hidden">
<ul class="bg-bluelight rounded-xl px-1 text-sm hidden">
</ul>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination %}
<ul class="bg-bluelight rounded-md px-1">
<ul class="bg-bluelight rounded-xl px-1 text-sm">
✔️ {{ entrance_origin }} -> {{ entrance_destination }}
</ul>
{% endif %}

20
tunictracker/tracker/templates/tracker/codes/block.html
View File

@ -1,20 +1,8 @@
{% if not is_entered %}
<ul class="flex flex-col p-2 rounded-md bg-bluelight-translucent-dark max-w-full">
<div class="p-2 codes-list-item-title">{{ name }}</div>
<div class="p-2 m-auto justify-center align-top">
<div class="max-w-64 codes-list-item-code">
{% for arrow in code %}
{% if arrow == "U" %}
⬆️
{% elif arrow == "D" %}
⬇️
{% elif arrow == "L" %}
⬅️
{% elif arrow == "R" %}
➡️
{% endif %}
{% endfor %}
</div>
<ul class="p-2 flex flex-col rounded-xl bg-bluelight-translucent-dark">
<div class="codes-list-item-title text-md">{{ name }}</div>
<div class="m-auto justify-center align-top">
<div class="max-w-64 codes-list-item-code text-2xl break-all">{{ code }}</div>
</div>
</ul>
{% endif %}

10
tunictracker/tracker/templates/tracker/codes/index.html
View File

@ -1,7 +1,7 @@
<div class="p-4 flex flex-col space-y-2 max-w-full text-lg rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
<div class="text-md">Holy Cross Codes</div>
<div class="flex flex-col space-y-2">
<ul class="flex flex-col space-y-4 rounded-md codes-list">
<details class="p-2 flex flex-col space-y-2 max-w-full text-lg rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
<summary>Holy Cross Codes</summary>
<div class="flex flex-col space-y-2 max-h-96 overflow-y-scroll">
<ul class="flex flex-col space-y-2 rounded-xl codes-list">
{% for name, code in default_codes.items %}
{% include "tracker/codes/block.html" with is_entered=False %}
{% endfor %}
@ -18,4 +18,4 @@
{% endfor %}
</ul>
</div>
</div>
</details>

92
tunictracker/tracker/templates/tracker/index.html
View File

@ -1,66 +1,68 @@
{% extends "index.html" %}
{% load static %}
{% block content %}
<div class="container monospace">
<div class="m-4 ring-4 rounded-md text-[#eee] bg-bluelight-translucent-dark ring-bluelight-dark">
<div class="container monospace py-4">
<div class="border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
{% if debug != '' %}
<div class="p-4 flex flex-col space-y-4">
<h1 class="flex text-2xl mx-2">
<span class="relative inline-block align-middle h-8 w-8">
<img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
alt="A trans pride fox emoji."
width=""
height="" />
</span>
&nbsp;Tunic Transition Tracker
</h1>
<hr class="border-2 border-bluelight-translucent-dark rounded-md" />
<details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
<summary class="justify-start p-2 text-lg">Settings</summary>
<div class="p-2 flex flex-col space-y-2">
{% include "tracker/settings/index.html" %}
{% include "tracker/address/index.html" %}
</div>
</details>
<h1 class="mt-2 px-2 flex text-2xl">
<span class="relative inline-block align-middle h-8 w-8">
<img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
alt="A trans pride fox emoji."
width=""
height="" />
</span>
&nbsp;Tunic Transition Tracker
</h1>
<hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
<div class="p-2 flex flex-col space-y-2">
{% include "tracker/status/index.html" %}
<div class="p-4 flex flex-col max-w-full space-y-4 md:space-y-4 text-md rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark"
<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark"
id="overview">
<div class="text-lg">Overview</div>
<div class="text-lg mb-2">Overview</div>
<div class="flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0">
<div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
<div class="flex basis-1/2 overview-entrances">
Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }}
</div>
</div>
<hr class="border-2 border-bluelight-translucent-dark rounded-md" />
<details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
<summary class="justify-start p-2 text-lg">Summary</summary>
<div class="p-4 summary-list">{% include "tracker/summary/list.html" %}</div>
</details>
<details class="group flex flex-col rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
<summary class="justify-start p-2 text-lg">Breakdown</summary>
<div class="p-4 flex flex-col space-y-4 breakdown-list">
{% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
{% for scene_title, scene_data in scenes.items %}
{% if scene_title == current_scene.title %}
{% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
{% else %}
{% include "tracker/breakdown/block.html" %}
{% endif %}
{% endfor %}
</div>
</details>
<hr class="mt-2 mb-4 border-2 border-bluelight-translucent-dark rounded-xl" />
<div class="flex flex-col space-y-2">
<details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<summary class="justify-start p-2 text-lg">Summary</summary>
<div class="p-2 summary-list">{% include "tracker/summary/list.html" %}</div>
</details>
<details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<summary class="justify-start p-2 text-lg">Breakdown</summary>
<div class="px-2 flex flex-col space-y-2 breakdown-list">
{% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
{% for scene_title, scene_data in scenes.items %}
{% if scene_title == current_scene.title %}
{% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
{% else %}
{% include "tracker/breakdown/block.html" %}
{% endif %}
{% endfor %}
</div>
</details>
</div>
</div>
<div id="breakdown-current">
{% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
</div>
<details class="group p-2 flex max-w-full rounded-md ring-4 bg-bluelight-translucent ring-bluelight-dark">
<summary class="justify-start p-2">Tracker Debug</summary>
<div class="p-2 flex flex-col space-y-2" id="debug-block">
<ul class="p-2 rounded-md bg-bluelight-translucent hidden">
<details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<summary class="justify-start">Settings</summary>
<div class="p-2 flex flex-col space-y-2">
{% include "tracker/settings/index.html" %}
{% include "tracker/address/index.html" %}
</div>
</details>
<details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
<summary class="justify-start">Tracker Debug</summary>
<div class="py-2 flex flex-col space-y-2" id="debug-block">
<ul class="p-2 rounded-xl bg-bluelight-translucent hidden">
</ul>
{% for name, value in debug.items %}
<ul class="p-2 rounded-md bg-bluelight-translucent">
<ul class="p-2 rounded-xl bg-bluelight-translucent">
{{ name }}: {{ value }}
</ul>
{% endfor %}

4
tunictracker/tracker/templates/tracker/settings/index.html
View File

@ -1,7 +1,7 @@
<form action="{% url "set_settings" %}"
method="post"
class="flex flex-row space-x-2">
<div class="w-full text-sm rounded-md border-2 border-bluelight-dark bg-[#242424]/10"
<div class="w-full text-sm rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
hidden></div>
{% csrf_token %}
<label for="backend-filepath-form"
@ -9,6 +9,6 @@
{% for field in backend_filepath_form %}{{ field }}{% endfor %}
<input type="submit"
value="Submit"
class="p-2 m-auto text-sm rounded-md ring-2 ring-bluelight-dark bg-bluelight-translucent"
class="p-2 m-auto text-sm rounded-xl border-2 border-bluelight-dark bg-bluelight-translucent"
id="backend-filepath-form" />
</form>

2
tunictracker/tracker/templates/tracker/status/index.html
View File

@ -1,4 +1,4 @@
<div class="p-2 flex flex-col rounded-md ring-4 ring-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
<div class="p-2 flex flex-col rounded-xl border-4 border-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
<div class="text-xl">Oh no!</div>
<div class="text-lg">It looks like the backend can't be accessed...</div>
<div class="text-lg">Are you sure there is one running at {{ server_address }}?</div>

2
tunictracker/tracker/templates/tracker/summary/block.html
View File

@ -1,4 +1,4 @@
<div class="p-2 flex flex-col rounded-md ring-4 ring-bluelight-dark bg-opacity-50 {{ extra_classes }}">
<div class="p-2 flex flex-col rounded-xl border-4 border-bluelight-dark bg-opacity-50 {{ extra_classes }}">
<div class="summary-title">{{ scene }}:</div>
<div class="summary-checks">
Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}

2
tunictracker/tracker/templates/tracker/summary/list.html
View File

@ -1,4 +1,4 @@
<div class="grid gap-4 md:grid-cols-3 grid-flow-row">
<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-5 grid-flow-row max-h-96 overflow-y-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
{% include "tracker/summary/block.html" with extra_classes="hidden" %}
{% for scene, scene_data in scenes.items %}
{% if scene == current_scene.title %}

5
tunictracker/tracker/views.py
View File

@ -58,7 +58,8 @@ def index(request):
return
with open('tracker/static/tracker/data/holy_cross_codes.json', 'r') as t:
try:
cross_codes = loads(t.read())
temp_codes = loads(t.read())
cross_codes = { x: { k: l.replace('U', '⬆️').replace('D', '⬇️').replace('L', '⬅️').replace('R', '➡️').strip() for k,l in temp_codes[x].items() } for x in temp_codes.keys() }
except:
return
tracker_debug = tracker_output['Debug']
@ -133,4 +134,4 @@ def get_settings(request):
if request.method == 'GET':
return HttpResponse(dumps(request.session['backend_filepath']), content_type="application/json")
else:
return render(request, 'tracker/index.html')
return render(request, 'tracker/index.html')