From 10a6809dcfdc438a965ebe284e48aba5b2896716 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Wed, 15 Apr 2026 22:39:01 -0400
Subject: [PATCH] =?UTF-8?q?TOOLTIPS:=20game=20kit=20applet=20refactor=20?=
 =?UTF-8?q?=E2=80=94=20.token-tooltip=20=E2=86=92=20.tt=20+=20double-toolt?=
 =?UTF-8?q?ip=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- _applet-game-kit.html: all 5 token blocks use .tt + child classes (.tt-title,
  .tt-description, .tt-shoptalk, .tt-expiry); removed .token-tooltip-body wrapper
- gameboard.js: 4× querySelector('.token-tooltip') → querySelector('.tt')
- _gameboard.scss: extend hover suppressor to .tt so CSS hover doesn't show inline
  .tt when JS portal is active (fixed double tooltip visual bug)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../static/apps/gameboard/gameboard.js        |  8 +--
 src/static_src/scss/_gameboard.scss           |  3 +-
 .../gameboard/_partials/_applet-game-kit.html | 72 ++++++++-----------
 3 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/src/apps/gameboard/static/apps/gameboard/gameboard.js b/src/apps/gameboard/static/apps/gameboard/gameboard.js
index 5d735cc..51f3eae 100644
--- a/src/apps/gameboard/static/apps/gameboard/gameboard.js
+++ b/src/apps/gameboard/static/apps/gameboard/gameboard.js
@@ -41,7 +41,7 @@ function initGameKitTooltips() {
             if (!inRect(e.clientX, e.clientY, { left, top, right, bottom })) closePortals();
         } else if (!portal.classList.contains('active')) {
             for (const tokenEl of gameKit.querySelectorAll('.token')) {
-                if (!tokenEl.querySelector('.token-tooltip')) continue;
+                if (!tokenEl.querySelector('.tt')) continue;
                 if (inRect(e.clientX, e.clientY, tokenEl.getBoundingClientRect())) {
                     showPortals(tokenEl);
                     break;
@@ -116,7 +116,7 @@ function initGameKitTooltips() {
     function showPortals(token) {
         equipping = false;
         activeToken = token;
-        const tooltip = token.querySelector('.token-tooltip');
+        const tooltip = token.querySelector('.tt');
         portal.innerHTML = tooltip.innerHTML;
         portal.classList.add('active');
         portal.style.display = 'block';
@@ -161,14 +161,14 @@ function initGameKitTooltips() {
 
     document.addEventListener('mouseover', (e) => {
         const tokenEl = e.target.closest('#id_game_kit .token');
-        if (!tokenEl || !tokenEl.querySelector('.token-tooltip')) return;
+        if (!tokenEl || !tokenEl.querySelector('.tt')) return;
         if (!portal.classList.contains('active') || activeToken !== tokenEl) {
             showPortals(tokenEl);
         }
     });
 
     gameKit.querySelectorAll('.token').forEach(tokenEl => {
-        if (!tokenEl.querySelector('.token-tooltip')) return;
+        if (!tokenEl.querySelector('.tt')) return;
         tokenEl.addEventListener('mouseenter', () => {
             if (!portal.classList.contains('active') || activeToken !== tokenEl) {
                 showPortals(tokenEl);
diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss
index 167c20b..38d4ecd 100644
--- a/src/static_src/scss/_gameboard.scss
+++ b/src/static_src/scss/_gameboard.scss
@@ -78,7 +78,8 @@ body.page-gameboard {
 
         .token { position: static; }
 
-        .token:hover .token-tooltip { display: none; }
+        .token:hover .token-tooltip,
+        .token:hover .tt { display: none; } // JS portal handles show/hide
 
         .token,
         .kit-item { font-size: 1.5rem; }
diff --git a/src/templates/apps/gameboard/_partials/_applet-game-kit.html b/src/templates/apps/gameboard/_partials/_applet-game-kit.html
index 0830a25..23661b2 100644
--- a/src/templates/apps/gameboard/_partials/_applet-game-kit.html
+++ b/src/templates/apps/gameboard/_partials/_applet-game-kit.html
@@ -7,45 +7,39 @@
         {% if pass_token %}
             <div id="id_kit_pass" class="token" data-token-id="{{ pass_token.pk }}">
                 <i class="fa-solid fa-clipboard"></i>
-                <div class="token-tooltip">
-                    <div class="token-tooltip-body">
-                        <h4>{{ pass_token.tooltip_name }}</h4>
-                        <p>{{ pass_token.tooltip_description }}</p>
-                        {% if pass_token.tooltip_shoptalk %}
-                            <small><em>{{ pass_token.tooltip_shoptalk }}</em></small>
-                        {% endif %}
-                        <p class="expiry">{{ pass_token.tooltip_expiry }}</p>
-                    </div>
+                <div class="tt">
+                    <h4 class="tt-title">{{ pass_token.tooltip_name }}</h4>
+                    <p class="tt-description">{{ pass_token.tooltip_description }}</p>
+                    {% if pass_token.tooltip_shoptalk %}
+                        <p class="tt-shoptalk"><em>{{ pass_token.tooltip_shoptalk }}</em></p>
+                    {% endif %}
+                    <p class="tt-expiry">{{ pass_token.tooltip_expiry }}</p>
                 </div>
             </div>
         {% endif %}
         {% if carte %}
             <div id="id_kit_carte_blanche" class="token" data-token-id="{{ carte.pk }}">
                 <i class="fa-solid fa-money-check"></i>
-                <div class="token-tooltip">
-                    <div class="token-tooltip-body">
-                        <h4>{{ carte.tooltip_name }}</h4>
-                        <p>{{ carte.tooltip_description }}</p>
-                        {% if carte.tooltip_shoptalk %}
-                            <small><em>{{ carte.tooltip_shoptalk }}</em></small>
-                        {% endif %}
-                        <p class="expiry">{{ carte.tooltip_expiry }}</p>
-                    </div>
+                <div class="tt">
+                    <h4 class="tt-title">{{ carte.tooltip_name }}</h4>
+                    <p class="tt-description">{{ carte.tooltip_description }}</p>
+                    {% if carte.tooltip_shoptalk %}
+                        <p class="tt-shoptalk"><em>{{ carte.tooltip_shoptalk }}</em></p>
+                    {% endif %}
+                    <p class="tt-expiry">{{ carte.tooltip_expiry }}</p>
                 </div>
             </div>
         {% endif %}
         {% if coin %}
             <div id="id_kit_coin_on_a_string" class="token" data-token-id="{{ coin.pk }}">
                 <i class="fa-solid fa-medal"></i>
-                <div class="token-tooltip">
-                    <div class="token-tooltip-body">
-                        <h4>{{ coin.tooltip_name }}</h4>
-                        <p>{{ coin.tooltip_description }}</p>
-                        {% if coin.tooltip_shoptalk %}
-                            <small><em>{{ coin.tooltip_shoptalk }}</em></small>
-                        {% endif %}
-                        <p class="expiry">{{ coin.tooltip_expiry }}</p>
-                    </div>
+                <div class="tt">
+                    <h4 class="tt-title">{{ coin.tooltip_name }}</h4>
+                    <p class="tt-description">{{ coin.tooltip_description }}</p>
+                    {% if coin.tooltip_shoptalk %}
+                        <p class="tt-shoptalk"><em>{{ coin.tooltip_shoptalk }}</em></p>
+                    {% endif %}
+                    <p class="tt-expiry">{{ coin.tooltip_expiry }}</p>
                 </div>
             </div>
         {% endif %}
@@ -53,15 +47,13 @@
             {% with free_tokens.0 as token %}
             <div id="id_kit_free_token" class="token">
                 <i class="fa-solid fa-coins"></i>
-                <div class="token-tooltip">
-                    <div class="token-tooltip-body">
-                        <h4>{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</span>{% endif %}</h4>
-                        <p>{{ token.tooltip_description }}</p>
-                        {% if token.tooltip_shoptalk %}
-                            <small><em>{{ token.tooltip_shoptalk }}</em></small>
-                        {% endif %}
-                        <p class="expiry">{{ token.tooltip_expiry }}</p>
-                    </div>
+                <div class="tt">
+                    <h4 class="tt-title">{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</span>{% endif %}</h4>
+                    <p class="tt-description">{{ token.tooltip_description }}</p>
+                    {% if token.tooltip_shoptalk %}
+                        <p class="tt-shoptalk"><em>{{ token.tooltip_shoptalk }}</em></p>
+                    {% endif %}
+                    <p class="tt-expiry">{{ token.tooltip_expiry }}</p>
                 </div>
             </div>
             {% endwith %}
@@ -69,11 +61,9 @@
         {% for deck in deck_variants %}
         <div id="id_kit_{{ deck.short_key }}_deck" class="token deck-variant" data-deck-id="{{ deck.pk }}">
             <i class="fa-regular fa-id-badge"></i>
-            <div class="token-tooltip">
-                <div class="token-tooltip-body">
-                    <h4>{{ deck.name }}</h4>
-                    <p>{{ deck.card_count }} cards</p>
-                </div>
+            <div class="tt">
+                <h4 class="tt-title">{{ deck.name }}</h4>
+                <p class="tt-description">{{ deck.card_count }} cards</p>
             </div>
         </div>
         {% empty %}