Reworking the user interface.
This commit is contained in:
parent
5f4e8985f2
commit
d022243e5a
@ -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"
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
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>
|
||||
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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user