From 66c5b3e00b67e20a6d51d0ed25c50b15227ae602 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Sun, 30 Oct 2022 18:13:03 +0100
Subject: [PATCH] Add tooltips

---
 src/character/templates/character/view.html   | 30 +++++++++++++++----
 .../templatetags/character_extras.py          |  5 ++++
 src/common/templates/common/base.html         |  4 +++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/character/templates/character/view.html b/src/character/templates/character/view.html
index b78e730..724c28e 100644
--- a/src/character/templates/character/view.html
+++ b/src/character/templates/character/view.html
@@ -67,23 +67,43 @@
                 <tbody class="table-group-divider">
                     <tr>
                         <th scope="row">Initiative</th>
-                        <td>{{ character.initiative }}</td>
+                        <td data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-title="valeur DEX">
+                            {{ character.initiative }}
+                        </td>
                     </tr>
                     <tr>
                         <th scope="row">Att. contact</th>
-                        <td>{{ character.attack_melee|modifier }}</td>
+                        <td data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_strength }} (mod. FOR)">
+                            {{ character.attack_melee|modifier }}
+                        </td>
                     </tr>
                     <tr>
                         <th scope="row">Att. distance</th>
-                        <td>{{ character.attack_range|modifier }}</td>
+                        <td data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_dexterity }} (mod. DEX)">
+                            {{ character.attack_range|modifier }}
+                        </td>
                     </tr>
                     <tr>
                         <th scope="row">Att. magique</th>
-                        <td>{{ character.attack_magic|modifier }}</td>
+                        <td data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-title="{{ character.level }} (niveau) + {{ character.attack_magic|sub:character.level }} (mod. {{ character.profile.magical_strength }})">
+                            {{ character.attack_magic|modifier }}
+                        </td>
                     </tr>
                     <tr>
                         <th scope="row">Défense</th>
-                        <td>{{ character.defense }}</td>
+                        <td data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-title="10 + {{ character.armor }} (armor) + {{ character.shield }} (shield) + {{ character.modifier_dexterity }} (mod. DEX) + {{ character.defense_misc }} (misc)">
+                            {{ character.defense }}
+                        </td>
                     </tr>
                 </tbody>
             </table>
diff --git a/src/character/templatetags/character_extras.py b/src/character/templatetags/character_extras.py
index 4af1ded..ccca227 100644
--- a/src/character/templatetags/character_extras.py
+++ b/src/character/templatetags/character_extras.py
@@ -9,3 +9,8 @@ def modifier(value):
         return f"+{value}"
     else:
         return value
+
+
+@register.filter
+def sub(value, arg):
+    return value - arg
diff --git a/src/common/templates/common/base.html b/src/common/templates/common/base.html
index 43c5f92..340b3ef 100644
--- a/src/common/templates/common/base.html
+++ b/src/common/templates/common/base.html
@@ -40,5 +40,9 @@
         <script src="{% static "vendor/bootstrap-5.2.2.bundle.min.js" %}"
             integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
             crossorigin="anonymous"></script>
+        <script type="application/javascript" defer>
+            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+        </script>
     </body>
 </html>