omit previous season ladders with listed players
[sc2-widget] / widget.html
index 3fb38c32ccb155535275c03d8a88a9d3e4d1ecdc..4264127a747297a49840fd9a56abb4c739f4b1be 100644 (file)
 <body>
 <p id="clan">No clan data</p>
 <script>
-       fetch('/schtarr/inno.json')
-       .then(res => res.json())
-       .then(json => {
-               document.getElementById('clan').innerHTML = `
-                       <h1>${json.tag}</h1>
-                       <h2 title="Division ${json.division}" class="rank ${json.league}">
-                               ${json.league} <small>#${json.rank}</small>
-                       </h2>
-                       ${json.members.map(member => `
-                               <a href="${member.profileUrl}"><figure>
+       let outcont = document.getElementById('clan')
+       let request = this.location.pathname.split('/').pop()
+       outcont.innerHTML = `Loading clan data for <q>${request}</q>`
+       fetch('/schtarr/data/' + request + '.json')
+       .then(res => {
+               if (res.status != 200) {
+                       console.log('got %o', res)
+                       throw `include ${res.status}`
+               }
+               return res.json()
+       })
+       .then(clan => {
+               let laddercmp = {}
+               clan.ladders = clan.ladders.filter(l => !(
+                       laddercmp[l.members] = l.members in laddercmp
+               ))
+               let tiernum = (rank) => rank <= 8 ? 1 : rank <= 25 ? 2 : rank <= 50 ? 3 : 4;
+               let matchtime = (d) => d.getDate() + '/' + (d.getMonth() + 1) +
+                       ' ' + d.getHours() + ":" + ('0' + d.getMinutes()).slice(-2);
+               outcont.outerHTML = `
+                       <h1>${clan.tag || clan.members[0].name}</h1>
+                       <ul class=ladders>
+                       ${clan.ladders.map(ladder => `
+                               <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>
+                       `).join('')}
+                       </ul>
+                       <ul class=members>
+                       ${clan.members.map(member => `
+                               <li><a href="${member.profileUrl}"><figure>
                                        <img src="${member.avatarUrl}" title="${member.name}" />
                                        <figcaption>${member.name}</figcaption>
-                               </figure></a>
+                               </figure></a></li>
+                       `).join('')}
+                       </ul>
+                       <ul class=matches>
+                       ${clan.matches.splice(0, 3).map(match => `
+                               <li data-members="${match.players}" class=${match.decision.toLowerCase()}>
+                                       ${matchtime(new Date(match.date * 1000))} ${match.type}
+                               </li>
                        `).join('')}
+                       </ul>
                `
+
+               document.querySelectorAll('[data-members]').forEach(li => {
+                       let momberids = li.dataset.members.split(',')
+                       let membercont = document.querySelector('.members')
+                       li.onmouseover = e => {
+                               membercont.classList.add('select')
+                               momberids.forEach(member => {
+                                       membercont.children[member].classList.add('select')
+                               })
+                       }
+                       li.onmouseout = e => {
+                               membercont.classList.remove('select')
+                               momberids.forEach(member => {
+                                       membercont.children[member].classList.remove('select')
+                               })
+                       }
+               })
+       })
+       .catch(msg => {
+               outcont.innerHTML = `Error loading clan data: ${msg}`
+               console.error('include failure:', msg)
        })
-       .catch(error => console.log(error))
 </script>
 </body>