hover members from data attribute

Not specific to ladders.

diff --git a/battle.css b/battle.css
index 6568fdc8e93cb5028981fb03edaf3d88167bb933..cf7c4d0b255246be6f990122527bc02d9136a270 100644 (file)
--- a/battle.css
+++ b/battle.css
@@ -89,7 +89,7 @@ li, li img {
 .select > .select img {
        border-color: #055CB3;
 }
-.ladders li:hover {
+[data-members]:hover {
        background: #0C2643;
        cursor: help;
 }

diff --git a/widget.html b/widget.html
index c070def7b3363db632c73eb244fa65e1f16a0984..1184ab1c506ecd96774219d5f6e749cd4c1a1162 100644 (file)
--- a/widget.html
+++ b/widget.html
@@ -34,6 +34,7 @@
                                        ' tier' + tiernum(ladder.rank),
                                        ladder.season ? ' old' : null,
                                ].join('')}"
+                                data-members="${ladder.members}"
                                 title="Division ${ladder.division} (${ladder.wins}:${ladder.losses})">
                                        ${ladder.league} <small>#${ladder.rank}</small>
                                </li>
@@ -49,19 +50,18 @@
                        </ul>
                `
 
-               let i = 0
-               document.querySelectorAll('.ladders li').forEach(ladder => {
-                       let laddermembers = clan.ladders[i++].members
+               document.querySelectorAll('[data-members]').forEach(li => {
+                       let momberids = li.dataset.members.split(',')
                        let membercont = document.querySelector('.members')
-                       ladder.onmouseover = e => {
+                       li.onmouseover = e => {
                                membercont.classList.add('select')
-                               laddermembers.forEach(member => {
+                               momberids.forEach(member => {
                                        membercont.children[member].classList.add('select')
                                })
                        }
-                       ladder.onmouseout = e => {
+                       li.onmouseout = e => {
                                membercont.classList.remove('select')
-                               laddermembers.forEach(member => {
+                               momberids.forEach(member => {
                                        membercont.children[member].classList.remove('select')
                                })
                        }