JSFiddle - React, Tailwind, and code Playground

by Ronny Amarante

HTML

<label>
  <input type="text" name="nome" id="nome" placeholder="Summoner Name" />
  <select id="server" name="server" title="Server">
    <option value="EUW">EUW</option>
    <option value="EUNE">EUNE</option>
    <option value="NA">NA</option>
    <option value="TR">TR</option>
    <option value="RU">RU</option>
    <option value="OCE">OCE</option>
    <option value="LES">LES</option>
    <option value="LAN">LAN</option>
    <option value="BR" selected>BR</option>
  </select>
  <button>Search</button>
</label>
	<div id="timeUm"></div>
	<div id="timeDois"></div>

CSS

body{background:#333;font-family:Arial;color:#eee;}
input,button,select{padding:5px;font-size:20px;}
label,h1,h2, #timeUm, #timeDois{text-align:center;display:block;}
h1{font-size:50px;font-weight:bold;text-shadow: -1px -1px 1px rgba(0,0,0,0.5);}
h2 strong{color: #6C0;}
#timeUm, #timeDois{clear:both;}
#timeUm .summoner{background-color: #06a;background: -webkit-gradient(linear,0% 0,0% 100%,color-stop(0,#06a),color-stop(1.0,#00416d));}
#timeDois .summoner{background-color: #B31262;background: -webkit-gradient(linear,0% 0,0% 100%,color-stop(0,#B31262),color-stop(1.0,#6D0E2E));}
.summoner{position:relative; text-decoration:none; background-position: 355px 0; padding:10px; border-radius:5px; width:200px; height:150px; overflow:hidden; margin:2px; display: inline-block;}
.champ{width:30px;height:30px;float:left;margin-right:10px;position:relative;}
.summoner *{color:#fff; text-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.5);}
.summoner h3{margin:0;text-align: left;}
.summoner h3{font-size:25px;white-space: nowrap;text-overflow: ellipsis;}
.summoner h4{font-size: 12px;clear: both;margin: 0;}
.summoner ul{list-style:none;margin:5px;padding:0;}
.summoner li{float:left;text-align:center;width:33%;}
.summoner strong{display:inline-block;display:block;}
.summoner li span{color:green;display:block;font-size:20px;}
.summoner li span + span{color:red;display:none;}
.summoner .percent{color:#fff;font-size:13px;margin-top:-15px;font-weight:bold;}
.summoner .vit{margin-top:15px;}
.summoner .champ .percent{position:absolute;margin-top:20px;right:-5px;}
.grande .vitorias{font-size:23px;font-weight:bold;color: #6C0;}
#server{width:90px;}

.liga{position:absolute;right:5px;top:0;width:50px;height:50px; -webkit-background-size: 100% 100%;background-size:100% 100%;}
.liga span{position:absolute;bottom:0;right:0;font-size:20px;font-weight:bold;}

.liga.BRONZE{background-image:...

JavaScript

function requisicao(acao, id, callback, erro)
{
  var url = '';
  if(acao == 'time') url = "retrieveInProgressSpectatorGameInfo/";
  else if(acao == 'liga') url = "getLeagueForPlayer/";
  else if(acao == 'stats') url = "retrievePlayerStatsByAccountId/";
  else if(acao == 'nivel') url = "getSummonerByName/";
  else if(acao == 'champs') url = "retrieveTopPlayedChampions/";
  
  var server = $('#server').val();
  
  $.ajax({
    type: "GET",
    url: "https://community-league-of-legends.p.mashape.com/api/v1.0/"+server+"/summoner/"+url+"/"+id,
    headers: {"X-Mashape-Authorization" : "SsNckuwRAv3hFUeM6LHwrG8Ub3WEKXBP"}
  })
  .done(function( result ) {
    callback(result);
  })
  .error(function(){
    erro();
  });
}

var contaLiga = 0;
var contaStats = 0;

function ordenarPlayers()
{
	if(contaLiga == 10 && contaStats == 10)
	{
		$('.summoner').tsort({sortFunction:function(a,b){
			var order = ["CHALLENGER", "DIAMOND", "PLATINUM", "GOLD", "SILVER", "BRONZE", ""];
			
			var valorA = a.e.find('.liga').attr('title');
			var valorB = b.e.find('.liga').attr('title');				
			
			if(valorA == valorB) 
			{
				var divA = a.e.find('.liga span').attr('title');
				var divB = b.e.find('.liga span').attr('title');
				
				if(divA == divB)
				{
					var vitA = a.e.find('.pvp .vitorias').text();
					var vitB = b.e.find('.pvp .vitorias').text();
					
					return parseInt(vitA) - parseInt(vitB) < 0;
				}
				
				return parseInt(divA) - parseInt(divB) < 0;
			}
			
			return order.indexOf(valorA) - order.indexOf(valorB) > 0;
		}});
	}
	else window.setTimeout(function(){ordenarPlayers();}, 1000);
}

function salvarCache()
{
  localStorage.setItem('TimeUm', $('#timeUm').html());
  localStorage.setItem('TimeDois', $('#timeDois').html());
  localStorage.setItem('Invocador', $('#nome').val());
  localStorage.setItem('Servidor', $('#server').val());
}

function traduz(string)
{
	switch(string)
	{
		case 'Unranked': return 'PvP';
		case 'AramUnranked5x5': return 'ARAM';
		case...