diff --git a/src/apps/dashboard/static/apps/dashboard/game-kit.js b/src/apps/dashboard/static/apps/dashboard/game-kit.js index 1369eed..36cbaeb 100644 --- a/src/apps/dashboard/static/apps/dashboard/game-kit.js +++ b/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'); }); - - 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 = ''; - }); + attachTooltip(card); }); + + dialog.querySelectorAll('.kit-bag-deck').forEach(attachTooltip); } diff --git a/src/functional_tests/test_game_kit.py b/src/functional_tests/test_game_kit.py index 488d2e0..0610639 100644 --- a/src/functional_tests/test_game_kit.py +++ b/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) diff --git a/src/static_src/scss/_wallet-tokens.scss b/src/static_src/scss/_wallet-tokens.scss index e154a50..57af2ba 100644 --- a/src/static_src/scss/_wallet-tokens.scss +++ b/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 { diff --git a/src/templates/core/_partials/_kit_bag_panel.html b/src/templates/core/_partials/_kit_bag_panel.html index 422d83d..f4031e3 100644 --- a/src/templates/core/_partials/_kit_bag_panel.html +++ b/src/templates/core/_partials/_kit_bag_panel.html @@ -4,6 +4,13 @@
{{ equipped_deck.card_count }}-card Tarot deck
+ placeholder comment +active
+Stock version
+