fez5587/commander-ai-lab
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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