hover members from data attribute

[sc2-widget] / widget.html

diff --git a/widget.html b/widget.html
index 7fc2389eef13d830d011ebe96976e3d7a944d296..1184ab1c506ecd96774219d5f6e749cd4c1a1162 100644 (file)
--- a/widget.html
+++ b/widget.html
@@ -29,7 +29,12 @@
                        <h1>${clan.tag || clan.members[0].name}</h1>
                        <ul class=ladders>
                        ${clan.ladders.map(ladder => `
-                               <li class="rank ${ladder.league} tier${tiernum(ladder.rank)}"
+                               <li class="rank ${[
+                                       ladder.league,
+                                       ' 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>
@@ -45,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')
                                })
                        }