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

View File

@ -5,9 +5,9 @@ from json import loads
class ServerAddressForm(forms.Form): class ServerAddressForm(forms.Form):
server_address_form = forms.URLField( server_address_form = forms.URLField(
max_length=1312, initial="http://localhost:8000/", empty_value="http://localhost:8000/", label="") 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): class BackendFilepathForm(forms.Form):
backend_filepath_form = forms.CharField() 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"

View File

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

View File

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

View File

@ -1,7 +1,7 @@
<form action="{% url "set_address" %}" <form action="{% url "set_address" %}"
method="post" method="post"
class="flex flex-row space-x-2"> 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> hidden></div>
{% csrf_token %} {% csrf_token %}
<label for="server-address-form" <label for="server-address-form"
@ -9,6 +9,6 @@
{% for field in server_address_form %}{{ field }}{% endfor %} {% for field in server_address_form %}{{ field }}{% endfor %}
<input type="submit" <input type="submit"
value="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" /> id="server-address-form" />
</form> </form>

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 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 md:flex-row justify-center md:space-x-4">
<div class="flex flex-col basis-1/2 overflow-hidden"> <div class="flex flex-col basis-1/2 overflow-hidden">
@ -6,14 +6,14 @@
<div class="text-md breakdown-block-checks-title"> <div class="text-md breakdown-block-checks-title">
Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }} Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
</div> </div>
<hr class="border-2 border-bluelight-translucent-dark rounded-md" /> <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
</div> </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"> <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-md px-1 hidden"> <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
</ul> </ul>
{% for check_name, check in scene_data.Checks.items %} {% for check_name, check in scene_data.Checks.items %}
{% if not check %} {% 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 }} ❌ {{ check_name }}
</ul> </ul>
{% endif %} {% endif %}
@ -25,18 +25,18 @@
<div class="text-md breakdown-block-entrances-title"> <div class="text-md breakdown-block-entrances-title">
Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }} Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
</div> </div>
<hr class="border-2 border-bluelight-translucent-dark rounded-md" /> <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
</div> </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"> <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-md px-1 hidden"> <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
</ul> </ul>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %} {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination == "" %} {% 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 }} ❌ {{ entrance_origin }}
</ul> </ul>
{% else %} {% 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 }} ❌ {{ entrance_origin }}
</ul> </ul>
{% endif %} {% endif %}
@ -44,13 +44,13 @@
</div> </div>
</div> </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"> <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> </ul>
{% for entrance_origin, entrance_destination in scene_data.Entrances.items %} {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
{% if entrance_destination %} {% 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 }} ✔️ {{ entrance_origin }} -> {{ entrance_destination }}
</ul> </ul>
{% endif %} {% endif %}

View File

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

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"> <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">
<div class="text-md">Holy Cross Codes</div> <summary>Holy Cross Codes</summary>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2 max-h-96 overflow-y-scroll">
<ul class="flex flex-col space-y-4 rounded-md codes-list"> <ul class="flex flex-col space-y-2 rounded-xl codes-list">
{% for name, code in default_codes.items %} {% for name, code in default_codes.items %}
{% include "tracker/codes/block.html" with is_entered=False %} {% include "tracker/codes/block.html" with is_entered=False %}
{% endfor %} {% endfor %}
@ -18,4 +18,4 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div> </details>

View File

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

View File

@ -1,7 +1,7 @@
<form action="{% url "set_settings" %}" <form action="{% url "set_settings" %}"
method="post" method="post"
class="flex flex-row space-x-2"> 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> hidden></div>
{% csrf_token %} {% csrf_token %}
<label for="backend-filepath-form" <label for="backend-filepath-form"
@ -9,6 +9,6 @@
{% for field in backend_filepath_form %}{{ field }}{% endfor %} {% for field in backend_filepath_form %}{{ field }}{% endfor %}
<input type="submit" <input type="submit"
value="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" /> id="backend-filepath-form" />
</form> </form>

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-xl">Oh no!</div>
<div class="text-lg">It looks like the backend can't be accessed...</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> <div class="text-lg">Are you sure there is one running at {{ server_address }}?</div>

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-title">{{ scene }}:</div>
<div class="summary-checks"> <div class="summary-checks">
Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }} Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}

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" %} {% include "tracker/summary/block.html" with extra_classes="hidden" %}
{% for scene, scene_data in scenes.items %} {% for scene, scene_data in scenes.items %}
{% if scene == current_scene.title %} {% if scene == current_scene.title %}

View File

@ -58,7 +58,8 @@ def index(request):
return return
with open('tracker/static/tracker/data/holy_cross_codes.json', 'r') as t: with open('tracker/static/tracker/data/holy_cross_codes.json', 'r') as t:
try: 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: except:
return return
tracker_debug = tracker_output['Debug'] tracker_debug = tracker_output['Debug']