{% extends "bare_base.html" %} {% block title %}{{ profile.username }}{%
endblock %} {% block toolbar_attrs %}style="position: fixed; top: 0; background:
transparent;"{% endblock %} {% block content%}
<div class="flex flex-col gap-2">
<div id="ignored-vars" class="hidden">
{% let skill_manager = starstraw::model::SkillManager(profile.skills.to_owned()) %}
{% let stats = skill_manager.get_stats() %}
</div>
<main class="small flex flex-col gap-2">
<h2 class="no-margin">{{ profile.username }}</h2>
<details class="w-full" open>
<summary>Info</summary>
<div
class="card secondary more_padding round gap-4 flex-col w-full"
>
<ul>
<li>
Title: {{ crate::starstraw::serialize(stats.title).replace("\"", "") }}
</li>
<li>
Power: {{ stats.power }}
</li>
</ul>
<hr class="my-2" />
{% if !skill_manager.has_skill(starstraw::model::SkillName::Vanish) %}
<ul id="skills">
{% for skill in skill_manager.0 %}
<li>
<span>
{{ crate::starstraw::serialize(skill.0.0).replace("\"", "") }}
<b>
{{ crate::starstraw::serialize(skill.0.1).replace("\"", "") }}
</b>
</span>
<span class="opacity-75">({{ skill.1 }})</span>
</li>
{% endfor %}
</ul>
{% else %}
<span class="opacity-75">
Unable to read this user's skills.
</span>
{% endif %} {% if god_mode_allowed == true %}
<button
data-dialog="upper:god_mode"
class="round theme:primary"
>
God Mode
</button>
{% endif %}
</div>
</details>
<div class="footernav w-full justify-center">
<div class="item">
<a href="/">Homepage</a>
</div>
<div class="item">
<a data-dialog="upper:settings" href="#dialog:settings">
Config
</a>
</div>
<div class="item flex items-center">
<a
id="theme_button"
href="javascript:trigger('app:toggle_theme')"
title="Toggle Theme"
style="color: var(--text-color-faded)"
>
<div id="theme_icon_sun" class="align-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
</div>
<div id="theme_icon_moon" class="align-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-moon"
>
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
</svg>
</div>
</a>
</div>
</div>
{% if god_mode_allowed == true %}
<dialog id="upper:god_mode" class="animate-fade-in">
<div style="width: 25rem; max-width: 100%" class="p-4">
<div class="flex flex-col gap-2">
<details>
<summary>Grant Skill</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
id="grant_skill"
>
<input
type="text"
name="type"
placeholder="Type"
required
/>
<input
type="text"
name="name"
placeholder="Name"
required
/>
<input
type="number"
name="level"
placeholder="Level"
value="1"
required
/>
<hr class="my-2" />
<button class="green w-full">Grant</button>
</form>
</details>
<details>
<summary>Revoke Skill</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
id="revoke_skill"
>
<input
type="text"
name="name"
placeholder="Name"
required
/>
<hr class="my-2" />
<button class="red w-full">Revoke</button>
</form>
</details>
<details>
<summary>Grant Title</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
id="grant_title"
>
<input
type="text"
name="name"
placeholder="Name"
required
/>
<hr class="my-2" />
<button class="blue w-full">Set Title</button>
</form>
</details>
</div>
<hr class="my-4" />
<div class="w-full flex justify-end gap-2">
<a
class="button round red"
href="javascript:document.getElementById('query_builder_dialog').close();"
>
Close
</a>
</div>
</div>
</dialog>
{% endif %}
<script>
use("starstraw", (mod) => {
if ("{{ god_mode_allowed }}" === "true") {
mod.init_god_mode(
"{{ profile.username }}",
document.getElementById("grant_skill"),
document.getElementById("revoke_skill"),
document.getElementById("grant_title"),
);
}
});
</script>
</main>
</div>
{% call super() %} {% endblock %}