font: 700 1.2em Eurostile Extd,Source Sans Pro,sans-serif;
text-transform: uppercase;
}
-h2 {
+.ladders {
font: 700 .8em Eurostile, sans-serif;
text-transform: uppercase;
}
font-size: 100%;
}
+ul {
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+li {
+ float: left;
+ margin-right: .8em;
+}
+
figure {
text-align: center;
display: inline-block;
- margin: 0 .5em 0 0;
+ margin: 0;
}
figcaption {
margin-top: .2ex;
}
.rank:before {
- background-image: url("https://static.starcraft2.com/dist/images/none.c8b435f5900fab1ac7981cc9b56f6f44.png");
- background-repeat: no-repeat;
+ background: url("https://static.starcraft2.com/dist/images/none.c8b435f5900fab1ac7981cc9b56f6f44.png") no-repeat;
background-position: -100px 0;
width: 45px;
height: 45px;
display: inline-block;
content: '';
vertical-align: middle;
- margin-right: .2em;
}
.rank.silver:before {
background-image: url("https://static.starcraft2.com/dist/images/silver.57bb73a131314d657135d2acf533d5e5.png");
# find largest group consisting entirely of clan members
# prefer deprecated interface to prevent costly ladder search
-my $ladders = blizget(legacy => profile => 2 => 1 => $profileid => 'ladders');
-my ($ladder) = (
+my $ladderdata = blizget(legacy => profile => 2 => 1 => $profileid => 'ladders');
+my @ladders = (
sort { $b->{characters}->@* <=> $a->{characters}->@* } # population desc
grep {
!$clanmatch or
all { fc $_->{clanName} eq fc $clanmatch } $_->{characters}->@*
} # members
- $ladders->{currentSeason}->@*
+ grep { $_->{ladder}->[0]->{division} }
+ $ladderdata->{currentSeason}->@*
) or die "No matching groups found\n";
+my @members = $ladders[0]->{characters}->@*;
+my %memberidx = map { $members[$_]->{id} => $_ } 0 .. $#members;
say JSON->new->canonical->pretty->encode({
- league => ucfirst lc $ladder->{ladder}->[0]->{league},
- division => $ladder->{ladder}->[0]->{ladderName},
- rank => $ladder->{ladder}->[0]->{rank},
- tag => $ladder->{characters}->[0]->{clanTag},
- members => [map { blizget(metadata => profile => 2 => 1 => $_->{id}) } $ladder->{characters}->@*],
- # lacks mmr, fav race (available in new api)
+ name => $members[0]->{clanName},
+ tag => $members[0]->{clanTag},
+ ladders => [map {{
+ league => lc $_->{ladder}->[0]->{league},
+ division => $_->{ladder}->[0]->{ladderName},
+ rank => $_->{ladder}->[0]->{rank},
+ members => [map { $memberidx{$_->{id}} } $_->{characters}->@*],
+ }} @ladders],
+ members => [map {
+ blizget(metadata => profile => 2 => 1 => $_->{id})
+ # lacks mmr, fav race (available in new api)
+ } @members],
});
<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>
+ .then(clan => {
+ document.getElementById('clan').outerHTML = `
+ <h1>${clan.tag}</h1>
+ <ul class=ladders>
+ ${clan.ladders.map(ladder => `
+ <li title="Division ${ladder.division}" class="rank ${ladder.league}">
+ ${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>
`
})
.catch(error => console.log(error))