tolltips added to card deck; supported in game-kit.js, _wallet-tokens.js (we should rename this for broader concept than just wallet)

src/apps/dashboard/static/apps/dashboard/game-kit.js

@@ -58,6 +58,22 @@
         if (dialog.hasAttribute('open')) dialog.removeAttribute('open');
     });
 
+    function attachTooltip(el) {
+        el.addEventListener('mouseenter', function () {
+            var tooltip = el.querySelector('.token-tooltip');
+            if (!tooltip) return;
+            var rect = el.getBoundingClientRect();
+            tooltip.style.position = 'fixed';
+            tooltip.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+            tooltip.style.left = rect.left + 'px';
+            tooltip.style.display = 'block';
+        });
+        el.addEventListener('mouseleave', function () {
+            var tooltip = el.querySelector('.token-tooltip');
+            if (tooltip) tooltip.style.display = '';
+        });
+    }
+
     function attachCardListeners() {
         dialog.querySelectorAll('.token[data-token-id]').forEach(function (card) {
             card.addEventListener('click', function () {
@@ -69,22 +85,10 @@
                 var slot = document.querySelector('.token-slot');
                 if (slot) slot.classList.add('ready');
             });
-
+            attachTooltip(card);
-            card.addEventListener('mouseenter', function () {
-                var tooltip = card.querySelector('.token-tooltip');
-                if (!tooltip) return;
-                var rect = card.getBoundingClientRect();
-                tooltip.style.position = 'fixed';
-                tooltip.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
-                tooltip.style.left = rect.left + 'px';
-                tooltip.style.display = 'block';
-            });
-
-            card.addEventListener('mouseleave', function () {
-                var tooltip = card.querySelector('.token-tooltip');
-                if (tooltip) tooltip.style.display = '';
-            });
         });
+
+        dialog.querySelectorAll('.kit-bag-deck').forEach(attachTooltip);
     }
 
 

src/functional_tests/test_game_kit.py

@@ -1,3 +1,4 @@
+from selenium.webdriver.common.action_chains import ActionChains
 from selenium.webdriver.common.by import By
 from selenium.webdriver.common.keys import Keys
 
@@ -83,3 +84,23 @@ class GameKitTest(FunctionalTest):
                 "#id_kit_bag_dialog .kit-bag-placeholder",
             )
         )
+
+    def test_kit_dialog_deck_tooltip_shows_name_count_availability_and_stock_version(self):
+        self.browser.get(self.gate_url)
+        self.browser.find_element(By.ID, "id_kit_btn").click()
+        deck_el = self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR, "#id_kit_bag_dialog .kit-bag-deck"
+            )
+        )
+        ActionChains(self.browser).move_to_element(deck_el).perform()
+        tooltip = self.browser.find_element(
+            By.CSS_SELECTOR, "#id_kit_bag_dialog .kit-bag-deck .token-tooltip"
+        )
+        self.wait_for(lambda: self.assertTrue(tooltip.is_displayed()))
+        text = tooltip.text
+        self.assertIn("Earthman", text)
+        self.assertIn("(Default)", text)
+        self.assertIn("108", text)
+        self.assertIn("active", text)
+        self.assertIn("Stock version", text)

src/static_src/scss/_wallet-tokens.scss

@@ -35,6 +35,15 @@
         &.expiry {
             color: rgba(var(--priRd), 1);
         }
+
+        &.availability {
+            color: rgba(var(--priRd), 1);
+        }
+
+        &.stock-version {
+            font-weight: 700;
+            color: rgba(var(--terUser), 1);
+        }
     }
 
     small {

src/templates/core/_partials/_kit_bag_panel.html

@@ -4,6 +4,13 @@
     <div class="kit-bag-row">
         <div class="kit-bag-deck" data-deck-id="{{ equipped_deck.pk }}">
             <i class="fa-regular fa-id-badge"></i>
+            <div class="token-tooltip">
+                <h4>{{ equipped_deck.name }}{% if equipped_deck.is_default %} <span class="token-count">(Default)</span>{% endif %}</h4>
+                <p>{{ equipped_deck.card_count }}-card Tarot deck</p>
+                <small><em>placeholder comment</em></small>
+                <p class="availability">active</p>
+                <p class="stock-version">Stock version</p>
+            </div>
         </div>
     </div>
 </div>