discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TOOLTIPS: game kit applet refactor — .token-tooltip → .tt + double-tooltip fix

Browse Source 
- _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>
This commit is contained in:
Disco DeDisco
2026-04-15 22:39:01 -04:00
parent de4ac60aec
commit 10a6809dcf
3 changed files with 37 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/apps/gameboard/static/apps/gameboard/gameboard.js
View File

@@ -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);

3
src/static_src/scss/_gameboard.scss
View File

@@ -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; }

72
src/templates/apps/gameboard/_partials/_applet-game-kit.html
View File

@@ -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 %}