feat: extend card hover preview to all card names in coach UI

This commit is contained in:
KoalaTrapLord authored and GitHub committed 2026-03-26 23:48:27 -04:00
1 parent a01a70f725
commit 4e90337f54
2 files changed
+13 -7

No files matched your search

+5 -1
View File
@@ -1132,7 +1132,11 @@
height: auto;
border-radius: 10px;
}
td[data-card-name] .coach-card-name {
td[data-card-name] .coach-card-name,
[data-card-name].coach-replacement-chip,
[data-card-name].coach-synergy-chip,
[data-card-name].coach-pill,
[data-card-name].coach-cl-name {
cursor: pointer;
border-bottom: 1px dashed var(--text-secondary, #888);
}
+8 -6
View File
@@ -63,7 +63,7 @@
}
function _attachCardHover(container) {
container.querySelectorAll('td[data-card-name]').forEach(td => {
container.querySelectorAll('[data-card-name]').forEach(td => {
td.addEventListener('mouseenter', e => _showCardPreview(td.dataset.cardName, e));
td.addEventListener('mousemove', e => _positionPreview(e));
td.addEventListener('mouseleave', _hideCardPreview);
@@ -433,7 +433,7 @@
html += '<span class="coach-session-detail-label">Cuts:</span>';
html += '<div class="coach-session-pills">';
for (const cut of cuts) {
html += '<span class="coach-pill coach-pill-cut" title="' + escHtml(cut.reason || '') + '">' + escHtml(cut.cardName) + '</span>';
html += '<span class="coach-pill coach-pill-cut" data-card-name="' + escHtml(cut.cardName) + '" title="' + escHtml(cut.reason || '') + '">' + escHtml(cut.cardName) + '</span>';
}
html += '</div></div>';
}
@@ -444,7 +444,7 @@
html += '<span class="coach-session-detail-label">Adds:</span>';
html += '<div class="coach-session-pills">';
for (const add of adds) {
html += '<span class="coach-pill coach-pill-add" title="' + escHtml(add.reason || '') + '">' + escHtml(add.cardName) + '</span>';
html += '<span class="coach-pill coach-pill-add" data-card-name="' + escHtml(add.cardName) + '" title="' + escHtml(add.reason || '') + '">' + escHtml(add.cardName) + '</span>';
}
html += '</div></div>';
}
@@ -457,6 +457,7 @@
html += '</div>';
detailEl.innerHTML = html;
_attachCardHover(detailEl);
// Bind buttons
detailEl.querySelector('.coach-load-chat-btn')?.addEventListener('click', (e) => {
@@ -599,7 +600,7 @@
'<td>' + escHtml(cut.reason) + '</td>' +
'<td><div class="coach-replacements">' +
(cut.replacementOptions || []).map(r =>
'<span class="coach-replacement-chip">' + escHtml(r) + '</span>'
'<span class="coach-replacement-chip" data-card-name="' + escHtml(r) + '">' + escHtml(r) + '</span>'
).join('') +
'</div></td>' +
'<td>' + formatImpact(cut.currentImpactScore) + '</td>';
@@ -622,7 +623,7 @@
'<td>' + escHtml(add.reason) + '</td>' +
'<td><div class="coach-replacements">' +
(add.synergyWith || []).map(s =>
'<span class="coach-synergy-chip">' + escHtml(s) + '</span>'
'<span class="coach-synergy-chip" data-card-name="' + escHtml(s) + '">' + escHtml(s) + '</span>'
).join('') +
'</div></td>';
tr.querySelector('.coach-card-name').parentElement.dataset.cardName = add.cardName;
@@ -918,7 +919,7 @@
div.innerHTML =
'<div class="coach-cl-top">' +
'<span class="coach-cl-name">' + escHtml(card.name) + '</span>' +
'<span class="coach-cl-name" data-card-name="' + escHtml(card.name) + '">' + escHtml(card.name) + '</span>' +
'<span class="coach-cl-sim">' + simPct + '%</span>' +
'</div>' +
'<div class="coach-cl-meta">' +
@@ -939,6 +940,7 @@
});
cardslikeResults.appendChild(div);
_attachCardHover(div);
}
} catch (e) {
cardslikeResults.innerHTML = '<div class="coach-cardslike-empty">Error: ' + escHtml(e.message) + '</div>';