Improve states UI

src/character/forms.py

@@ -24,8 +24,10 @@ class AddPathForm(forms.Form):
     def __init__(self, character: Character, *args, **kwargs):
         super().__init__(*args, **kwargs)
         paths = {cap.path_id for cap in character.capabilities.all()}
-        paths = Path.objects.exclude(pk__in=paths).order_by(
-            "profile__name", "race__name"
+        paths = (
+            Path.objects.exclude(pk__in=paths)
+            .order_by("profile__name", "race__name")
+            .select_related("profile", "race")
         )
         character_paths = paths.filter(
             Q(profile=character.profile) | Q(race=character.race)

src/character/migrations/0031_alter_harmfulstate_options.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.1.2 on 2022-11-02 21:01
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("character", "0030_alter_character_states"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="harmfulstate",
+            options={
+                "ordering": ["name"],
+                "verbose_name": "État préjudiciable",
+                "verbose_name_plural": "États préjudiciables",
+            },
+        ),
+    ]

src/character/migrations/max_migration.txt

@@ -1 +1 @@
-0030_alter_character_states
+0031_alter_harmfulstate_options

src/character/models/character.py

@@ -1,4 +1,5 @@
 import collections
+from collections.abc import Iterable
 
 import markdown
 from django.db import models
@@ -56,6 +57,7 @@ class HarmfulState(DocumentedModel, UniquelyNamedModel, TimeStampedModel, models
     class Meta:
         verbose_name = "État préjudiciable"
         verbose_name_plural = "États préjudiciables"
+        ordering = ["name"]
 
 
 def modifier(value: int) -> int:
@@ -318,3 +320,8 @@ class Character(models.Model):
     def get_formatted_notes(self) -> str:
         md = markdown.Markdown(extensions=["extra", "nl2br"])
         return md.convert(self.notes)
+
+    def get_missing_states(self) -> Iterable[HarmfulState]:
+        return HarmfulState.objects.exclude(
+            pk__in=self.states.all().values_list("pk", flat=True)
+        )

src/character/static/character/style.css

@@ -0,0 +1,3 @@
+.state-enabled {
+    filter: invert(50%) sepia(100%) saturate(3000%) hue-rotate(325deg);
+}

src/character/templates/character/states.html

@@ -1,15 +1,20 @@
 <p id="states">
     États :
-    {% for state in character.states.all %}
-        <img src="{{ state.icon_url }}" alt="{{ state.name }}" height="25" width="25"
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            data-bs-title="{{ state.name }} : {{ state.description }}"
-            hx-get="{% url "character:remove_state" pk=character.pk state_pk=state.pk %}"
-            hx-target="#states"
-            hx-swap="outerHTML"
-        >
-    {% empty %}
-        Aucun
-    {% endfor %}
+    {% with character.states.all as character_states %}
+        {% for state in all_states %}
+            <img src="{{ state.icon_url }}" alt="{{ state.name }}" height="25" width="25"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                data-bs-title="{{ state.name }} : {{ state.description }}"
+                {% if state in character_states %}
+                    class="state-enabled"
+                    hx-get="{% url "character:remove_state" pk=character.pk state_pk=state.pk %}"
+                {% else %}
+                    hx-get="{% url "character:add_state" pk=character.pk state_pk=state.pk %}"
+                {% endif %}
+                hx-target="#states"
+                hx-swap="outerHTML"
+            >
+        {% endfor %}
+    {% endwith %}
 </p>

src/character/templates/character/view.html

@@ -1,9 +1,14 @@
 {% extends "common/base.html" %}
+{% load static %}
 {% load django_bootstrap5 %}
 {% load character_extras %}
 
 {% block title %}{{ character.name }}{% endblock %}
 
+{% block head_end %}
+    <link rel="stylesheet" href="{% static "character/style.css" %}">
+{% endblock %}
+
 {% block content %}
     <h1>{{ character.name }}</h1>
     <p>

src/character/urls.py

@@ -72,4 +72,5 @@ urlpatterns = [
     path(
         "<int:pk>/remove_state/<int:state_pk>/", views.remove_state, name="remove_state"
     ),
+    path("<int:pk>/add_state/<int:state_pk>/", views.add_state, name="add_state"),
 ]

src/character/views.py

@@ -32,7 +32,11 @@ def character_view(request, pk: int):
         pk=pk,
     )
     add_path_form = AddPathForm(character)
-    context = {"character": character, "add_path_form": add_path_form}
+    context = {
+        "character": character,
+        "add_path_form": add_path_form,
+        "all_states": HarmfulState.objects.all(),
+    }
     return render(request, "character/view.html", context)
 
 
@@ -274,6 +278,18 @@ def remove_state(request, pk: int, state_pk: int):
     )
     state = get_object_or_404(HarmfulState, pk=state_pk)
     character.states.remove(state)
-    context = {"character": character}
+    context = {"character": character, "all_states": HarmfulState.objects.all()}
+    response = render(request, "character/states.html", context)
+    return trigger_client_event(response, "refresh_tooltips", {})
+
+
+@login_required
+def add_state(request, pk: int, state_pk: int):
+    character: Character = get_object_or_404(
+        Character.objects.filter(player=request.user), pk=pk
+    )
+    state = get_object_or_404(HarmfulState, pk=state_pk)
+    character.states.add(state)
+    context = {"character": character, "all_states": HarmfulState.objects.all()}
     response = render(request, "character/states.html", context)
     return trigger_client_event(response, "refresh_tooltips", {})

src/common/templates/common/base.html

@@ -16,6 +16,8 @@
                 touch-action: manipulation;
             }
         </style>
+        {% block head_end %}
+        {% endblock %}
     </head>
     <body>
         {% include "common/navbar.html" %}