mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
Lots of changes
This commit is contained in:
Kalaneee
parent
6f1ae41fb4
commit
12455fa3bf
5 changed files with 273 additions and 170 deletions
56
index.html
56
index.html
|
|
@ -6,27 +6,41 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Riot Api Node</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="public/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="font-sans bg-grey-lighter">
|
||||
|
||||
<div class="loader--overlay">
|
||||
<div class="loader-container">
|
||||
<div class="LoaderBalls">
|
||||
<div class="LoaderBalls__item"></div>
|
||||
<div class="LoaderBalls__item"></div>
|
||||
<div class="LoaderBalls__item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="debug"></button>
|
||||
|
||||
<div class="search">
|
||||
<div class="container">
|
||||
<div class="container mx-auto">
|
||||
|
||||
<form class="form-inline" id="changeName" method="POST" action="api">
|
||||
<input type="text" class="form-control mb-2 mr-sm-2" id="name" name="playerName" placeholder="Pseudo du Joueur">
|
||||
<button type="submit" class="btn btn-primary mb-2">Chercher</button>
|
||||
<form class="flex items-center mb-6" id="changeName" method="POST" action="api">
|
||||
<input type="text" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="playerName" placeholder="Pseudo du Joueur">
|
||||
<button class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
|
||||
Chercher
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="player">
|
||||
<div class="container mx-auto pb-16">
|
||||
<div class="player shadow-md">
|
||||
<div class="player__pp"></div>
|
||||
<h1 class="player__name">Default name</h1>
|
||||
<h3 class="player__level">Default level</h3>
|
||||
|
|
@ -35,22 +49,19 @@
|
|||
<h3 class="player__ratio">Default ratio</h3>
|
||||
|
||||
|
||||
<ul class="list-matches--debug">
|
||||
<!--<li class="lose">
|
||||
Vayne - BOTTOM
|
||||
<!--<ul class="list-matches--debug">
|
||||
|
||||
</li>-->
|
||||
<li class="match">
|
||||
<div class="content-container">
|
||||
|
||||
<div class="first">
|
||||
<img src="/public/img/champions/Vayne.png" class="champion-img" alt="example design">
|
||||
<span class="level">17</span>
|
||||
<div class="summonerSpells">
|
||||
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png" alt="Flash">
|
||||
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png" alt="Ignite">
|
||||
</div>
|
||||
<span class="champion-name">Vayne</span>
|
||||
<img src="/public/img/champions/Vayne.png" class="champion-img" alt="example design">
|
||||
<span class="level">17</span>
|
||||
<div class="summonerSpells">
|
||||
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png" alt="Flash">
|
||||
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png" alt="Ignite">
|
||||
</div>
|
||||
<span class="champion-name">Vayne</span>
|
||||
</div>
|
||||
|
||||
<div class="second">
|
||||
|
|
@ -82,17 +93,18 @@
|
|||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>-->
|
||||
<script src="public/data.js"></script>
|
||||
<script src="public/functions.js"></script>
|
||||
<script src="public/client.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
284
public/client.js
284
public/client.js
|
|
@ -1,29 +1,3 @@
|
|||
var championsId = { 266: "Aatrox", 103: "Ahri", 84: "Akali", 12: "Alistar", 32: "Amumu", 34: "Anivia", 1: "Annie", 22: "Ashe", 136: "AurelionSol", 268: "Azir", 432: "Bard", 53: "Blitzcrank", 63: "Brand", 201: "Braum", 51: "Caitlyn", 164: "Camille", 69: "Cassiopeia", 31: "Chogath", 42: "Corki", 122: "Darius", 131: "Diana", 119: "Draven", 36: "DrMundo", 245: "Ekko", 60: "Elise", 28: "Evelynn", 81: "Ezreal", 9: "Fiddlesticks", 114: "Fiora", 105: "Fizz", 3: "Galio", 41: "Gangplank", 86: "Garen", 150: "Gnar", 79: "Gragas", 104: "Graves", 120: "Hecarim", 74: "Heimerdinger", 420: "Illaoi", 39: "Irelia", 427: "Ivern", 40: "Janna", 59: "JarvanIV", 24: "Jax", 126: "Jayce", 202: "Jhin", 222: "Jinx", 145: "Kaisa", 429: "Kalista", 43: "Karma", 30: "Karthus", 38: "Kassadin", 55: "Katarina", 10: "Kayle", 141: "Kayn", 85: "Kennen", 121: "Khazix", 203: "Kindred", 240: "Kled", 96: "KogMaw", 7: "Leblanc", 64: "LeeSin", 89: "Leona", 127: "Lissandra", 236: "Lucian", 117: "Lulu", 99: "Lux", 54: "Malphite", 90: "Malzahar", 57: "Maokai", 11: "MasterYi", 21: "MissFortune", 62: "MonkeyKing", 82: "Mordekaiser", 25: "Morgana", 267: "Nami", 75: "Nasus", 111: "Nautilus", 76: "Nidalee", 56: "Nocturne", 20: "Nunu", 2: "Olaf", 61: "Orianna", 516: "Ornn", 80: "Pantheon", 78: "Poppy", 555: "Pyke", 133: "Quinn", 497: "Rakan", 33: "Rammus", 421: "RekSai", 58: "Renekton", 107: "Rengar", 92: "Riven", 68: "Rumble", 13: "Ryze", 113: "Sejuani", 35: "Shaco", 98: "Shen", 102: "Shyvana", 27: "Singed", 14: "Sion", 15: "Sivir", 72: "Skarner", 37: "Sona", 16: "Soraka", 50: "Swain", 134: "Syndra", 223: "TahmKench", 163: "Taliyah", 91: "Talon", 44: "Taric", 17: "Teemo", 412: "Thresh", 18: "Tristana", 48: "Trundle", 23: "Tryndamere", 4: "TwistedFate", 29: "Twitch", 77: "Udyr", 6: "Urgot", 110: "Varus", 67: "Vayne", 45: "Veigar", 161: "Velkoz", 254: "Vi", 112: "Viktor", 8: "Vladimir", 106: "Volibear", 19: "Warwick", 498: "Xayah", 101: "Xerath", 5: "XinZhao", 157: "Yasuo", 83: "Yorick", 154: "Zac", 238: "Zed", 115: "Ziggs", 26: "Zilean", 142: "Zoe", 143: "Zyra" };
|
||||
var maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" };
|
||||
|
||||
var gameModes = {
|
||||
76: 'URF',
|
||||
100: 'ARAM',
|
||||
400: 'Normal (Draft)',
|
||||
420: 'Ranked (Solo)',
|
||||
430: 'Normal (Blind)',
|
||||
440: 'Ranked (Flex)',
|
||||
460: '3v3 Blind',
|
||||
470: '3v3 Ranked (Flex)',
|
||||
800: '3v3 Co-op vs. AI (Intermediate)',
|
||||
810: '3v3 Co-op vs. AI (Intro)',
|
||||
820: '3v3 Co-op vs. AI (Beginner)',
|
||||
830: 'Co-op vs. AI (Intro)',
|
||||
840: 'Co-op vs. AI (Beginner)',
|
||||
850: 'Co-op vs. AI (Intermediate)'
|
||||
};
|
||||
|
||||
/* Debug button to reset localstorage */
|
||||
document.querySelector('.debug').addEventListener('click', () => {
|
||||
console.log('CLEAR LOCALSTORAGE');
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
var url = '/api';
|
||||
var params = 'playerName=Kalane';
|
||||
|
|
@ -35,19 +9,35 @@ req.addEventListener('error', onError);
|
|||
|
||||
/* Check on the load of the page if the content is already cached */
|
||||
if (localStorage['currentPage']) {
|
||||
console.log('cached earlier');
|
||||
console.log('cached on page load');
|
||||
console.log(localStorage['currentPage']);
|
||||
displayContent(localStorage[localStorage['currentPage']]);
|
||||
} else {
|
||||
console.log('nop');
|
||||
console.log('not cached on page load');
|
||||
req.open('POST', url, true);
|
||||
document.querySelector('.loader--overlay').style.display = 'block';
|
||||
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
req.send(params);
|
||||
}
|
||||
|
||||
|
||||
/* Debug button to reset localstorage */
|
||||
document.querySelector('.debug').addEventListener('click', () => {
|
||||
console.log('CLEAR LOCALSTORAGE');
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
|
||||
function onLoad() {
|
||||
document.querySelector('.loader--overlay').style.display = 'none';
|
||||
var response = this.responseText;
|
||||
|
||||
// If username isn't found
|
||||
if (!response) {
|
||||
displayPlayerNotFound('Joueur introuvable');
|
||||
return;
|
||||
}
|
||||
|
||||
var parsedEntireResponse = JSON.parse(response);
|
||||
parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
|
||||
createObject(parsedEntireResponse);
|
||||
|
|
@ -59,16 +49,17 @@ function onError() {
|
|||
}
|
||||
|
||||
|
||||
/* Form */
|
||||
/* Form to change username */
|
||||
var changeName = document.querySelector('#changeName');
|
||||
var nameToPick = document.querySelector('#name')
|
||||
changeName.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
nameChosen = nameToPick.value;
|
||||
if (localStorage[nameChosen]) {
|
||||
console.log('cached');
|
||||
console.log('cached on search');
|
||||
displayContent(localStorage[nameChosen]);
|
||||
} else {
|
||||
document.querySelector('.loader--overlay').style.display = 'block';
|
||||
req.open('POST', url, true);
|
||||
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
req.send('playerName=' + nameToPick.value);
|
||||
|
|
@ -192,115 +183,132 @@ function displayContent(stringData) {
|
|||
matchesList.className = 'list-matches--debug';
|
||||
playerContainer.appendChild(matchesList);
|
||||
|
||||
/* Loop on all matches */
|
||||
data.matches.forEach(e => {
|
||||
var li = document.createElement('li');
|
||||
if (e.result)
|
||||
li.className = 'match win';
|
||||
else
|
||||
li.className = 'match lose';
|
||||
var container = document.createElement('div');
|
||||
container.className = 'content-container';
|
||||
|
||||
/* First col */
|
||||
var first = document.createElement('div');
|
||||
first.className = 'first';
|
||||
var imgChamp = document.createElement('img');
|
||||
var championName = championsId[e.champ];
|
||||
imgChamp.setAttribute('src', '/public/img/champions/' + championName + '.png');
|
||||
imgChamp.className = 'champion-img';
|
||||
|
||||
var level = document.createElement('span');
|
||||
level.className = 'level';
|
||||
level.innerText = e.level;
|
||||
|
||||
var summonerSpells = document.createElement('div');
|
||||
summonerSpells.className = 'summonerSpells';
|
||||
|
||||
var firstSpell = document.createElement('img');
|
||||
firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png');
|
||||
firstSpell.className = 'spell-icon';
|
||||
summonerSpells.appendChild(firstSpell);
|
||||
|
||||
var secondSpell = document.createElement('img');
|
||||
secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png');
|
||||
secondSpell.className = 'spell-icon';
|
||||
summonerSpells.appendChild(secondSpell);
|
||||
|
||||
var name = document.createElement('span');
|
||||
name.className = 'champion-name';
|
||||
name.innerText = championName;
|
||||
|
||||
first.appendChild(imgChamp);
|
||||
first.appendChild(level);
|
||||
first.appendChild(summonerSpells);
|
||||
first.appendChild(name);
|
||||
|
||||
|
||||
/* Second col */
|
||||
var second = document.createElement('div');
|
||||
second.className = 'second';
|
||||
var map = document.createElement('div');
|
||||
map.className = 'map';
|
||||
map.innerText = e.map;
|
||||
var gamemode = document.createElement('div');
|
||||
gamemode.className = 'gamemode';
|
||||
gamemode.innerText = e.gamemode;
|
||||
|
||||
second.appendChild(map);
|
||||
second.appendChild(gamemode);
|
||||
|
||||
|
||||
/* Third col */
|
||||
var third = document.createElement('div');
|
||||
third.className = 'third';
|
||||
e.items.forEach(e => {
|
||||
var img = document.createElement('img');
|
||||
img.className = 'item';
|
||||
img.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/items/' + e + '.png');
|
||||
third.appendChild(img);
|
||||
});
|
||||
|
||||
|
||||
/* Fourth col */
|
||||
var fourth = document.createElement('div');
|
||||
fourth.className = 'fourth';
|
||||
var score = document.createElement('div');
|
||||
score.className = 'score';
|
||||
score.innerText = e.kills + '/' + e.deaths + '/' + e.assists;
|
||||
|
||||
var goldFarm = document.createElement('div');
|
||||
goldFarm.className = 'gold-farm';
|
||||
var gold = document.createElement('div');
|
||||
gold.className = 'gold';
|
||||
gold.innerText = e.gold;
|
||||
var farm = document.createElement('div');
|
||||
farm.className = 'farm';
|
||||
farm.innerText = e.minions;
|
||||
goldFarm.appendChild(gold);
|
||||
goldFarm.appendChild(farm);
|
||||
|
||||
var durationDate = document.createElement('div');
|
||||
durationDate.className = 'duration-date';
|
||||
var duration = document.createElement('div');
|
||||
duration.className = 'duration';
|
||||
duration.innerText = e.time;
|
||||
var date = document.createElement('div');
|
||||
date.className = 'date';
|
||||
date.innerText = e.date;
|
||||
durationDate.appendChild(duration);
|
||||
durationDate.appendChild(date);
|
||||
|
||||
fourth.appendChild(score);
|
||||
fourth.appendChild(goldFarm);
|
||||
fourth.appendChild(durationDate);
|
||||
|
||||
|
||||
/* End */
|
||||
container.appendChild(first);
|
||||
container.appendChild(second);
|
||||
container.appendChild(third);
|
||||
container.appendChild(fourth);
|
||||
li.appendChild(container);
|
||||
var li = createHTMLOneMatch(e);
|
||||
matchesList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return the HTML of one match
|
||||
* @param e : Infos in JSON of the match
|
||||
*/
|
||||
function createHTMLOneMatch(e) {
|
||||
var li = document.createElement('li');
|
||||
li.className = e.result ? 'match win' : 'match lose';
|
||||
var container = document.createElement('div');
|
||||
container.className = 'content-container';
|
||||
|
||||
/* First col */
|
||||
var first = document.createElement('div');
|
||||
first.className = 'first';
|
||||
var imgChamp = document.createElement('img');
|
||||
var championName = championsId[e.champ];
|
||||
imgChamp.setAttribute('src', '/public/img/champions/' + championName + '.png');
|
||||
imgChamp.className = 'champion-img';
|
||||
|
||||
var level = document.createElement('span');
|
||||
level.className = 'level';
|
||||
level.innerText = e.level;
|
||||
|
||||
var summonerSpells = document.createElement('div');
|
||||
summonerSpells.className = 'summonerSpells';
|
||||
var firstSpell = document.createElement('img');
|
||||
firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png');
|
||||
firstSpell.className = 'spell-icon';
|
||||
summonerSpells.appendChild(firstSpell);
|
||||
var secondSpell = document.createElement('img');
|
||||
secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png');
|
||||
secondSpell.className = 'spell-icon';
|
||||
summonerSpells.appendChild(secondSpell);
|
||||
|
||||
var name = document.createElement('span');
|
||||
name.className = 'champion-name';
|
||||
name.innerText = championName;
|
||||
|
||||
first.appendChild(imgChamp);
|
||||
first.appendChild(level);
|
||||
first.appendChild(summonerSpells);
|
||||
first.appendChild(name);
|
||||
|
||||
/* Second col */
|
||||
var second = document.createElement('div');
|
||||
second.className = 'second';
|
||||
var map = document.createElement('div');
|
||||
map.className = 'map';
|
||||
map.innerText = e.map;
|
||||
var gamemode = document.createElement('div');
|
||||
gamemode.className = 'gamemode';
|
||||
gamemode.innerText = e.gamemode;
|
||||
|
||||
second.appendChild(map);
|
||||
second.appendChild(gamemode);
|
||||
|
||||
/* Third col */
|
||||
var third = document.createElement('div');
|
||||
third.className = 'third';
|
||||
e.items.forEach(e => {
|
||||
var img = document.createElement('img');
|
||||
img.className = 'item';
|
||||
img.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/items/' + e + '.png');
|
||||
third.appendChild(img);
|
||||
});
|
||||
|
||||
/* Fourth col */
|
||||
var fourth = document.createElement('div');
|
||||
fourth.className = 'fourth';
|
||||
var score = document.createElement('div');
|
||||
score.className = 'score';
|
||||
score.innerText = e.kills + '/' + e.deaths + '/' + e.assists;
|
||||
|
||||
var goldFarm = document.createElement('div');
|
||||
goldFarm.className = 'gold-farm';
|
||||
var gold = document.createElement('div');
|
||||
gold.className = 'gold';
|
||||
gold.innerText = e.gold;
|
||||
var farm = document.createElement('div');
|
||||
farm.className = 'farm';
|
||||
farm.innerText = e.minions;
|
||||
goldFarm.appendChild(gold);
|
||||
goldFarm.appendChild(farm);
|
||||
|
||||
var durationDate = document.createElement('div');
|
||||
durationDate.className = 'duration-date';
|
||||
var duration = document.createElement('div');
|
||||
duration.className = 'duration';
|
||||
duration.innerText = e.time;
|
||||
var date = document.createElement('div');
|
||||
date.className = 'date';
|
||||
date.innerText = e.date;
|
||||
durationDate.appendChild(duration);
|
||||
durationDate.appendChild(date);
|
||||
|
||||
fourth.appendChild(score);
|
||||
fourth.appendChild(goldFarm);
|
||||
fourth.appendChild(durationDate);
|
||||
|
||||
/* End */
|
||||
container.appendChild(first);
|
||||
container.appendChild(second);
|
||||
container.appendChild(third);
|
||||
container.appendChild(fourth);
|
||||
li.appendChild(container);
|
||||
return li;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Display the information that the player has not be found
|
||||
* @param text : String to display - error message
|
||||
*/
|
||||
function displayPlayerNotFound(text) {
|
||||
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/29.png) center/cover';
|
||||
document.querySelector('.player__name').innerHTML = '';
|
||||
document.querySelector('.player__level').innerHTML = '';
|
||||
document.querySelector('.player__rank').innerHTML = '';
|
||||
document.querySelector('.player__rank-img').style.background = 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
|
||||
document.querySelector('.player__ratio').innerHTML = text;
|
||||
document.querySelector('.list-matches--debug').innerHTML = '';
|
||||
}
|
||||
5
public/data.js
Normal file
5
public/data.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
var championsId = { 266: "Aatrox", 103: "Ahri", 84: "Akali", 12: "Alistar", 32: "Amumu", 34: "Anivia", 1: "Annie", 22: "Ashe", 136: "AurelionSol", 268: "Azir", 432: "Bard", 53: "Blitzcrank", 63: "Brand", 201: "Braum", 51: "Caitlyn", 164: "Camille", 69: "Cassiopeia", 31: "Chogath", 42: "Corki", 122: "Darius", 131: "Diana", 119: "Draven", 36: "DrMundo", 245: "Ekko", 60: "Elise", 28: "Evelynn", 81: "Ezreal", 9: "Fiddlesticks", 114: "Fiora", 105: "Fizz", 3: "Galio", 41: "Gangplank", 86: "Garen", 150: "Gnar", 79: "Gragas", 104: "Graves", 120: "Hecarim", 74: "Heimerdinger", 420: "Illaoi", 39: "Irelia", 427: "Ivern", 40: "Janna", 59: "JarvanIV", 24: "Jax", 126: "Jayce", 202: "Jhin", 222: "Jinx", 145: "Kaisa", 429: "Kalista", 43: "Karma", 30: "Karthus", 38: "Kassadin", 55: "Katarina", 10: "Kayle", 141: "Kayn", 85: "Kennen", 121: "Khazix", 203: "Kindred", 240: "Kled", 96: "KogMaw", 7: "Leblanc", 64: "LeeSin", 89: "Leona", 127: "Lissandra", 236: "Lucian", 117: "Lulu", 99: "Lux", 54: "Malphite", 90: "Malzahar", 57: "Maokai", 11: "MasterYi", 21: "MissFortune", 62: "MonkeyKing", 82: "Mordekaiser", 25: "Morgana", 267: "Nami", 75: "Nasus", 111: "Nautilus", 76: "Nidalee", 56: "Nocturne", 20: "Nunu", 2: "Olaf", 61: "Orianna", 516: "Ornn", 80: "Pantheon", 78: "Poppy", 555: "Pyke", 133: "Quinn", 497: "Rakan", 33: "Rammus", 421: "RekSai", 58: "Renekton", 107: "Rengar", 92: "Riven", 68: "Rumble", 13: "Ryze", 113: "Sejuani", 35: "Shaco", 98: "Shen", 102: "Shyvana", 27: "Singed", 14: "Sion", 15: "Sivir", 72: "Skarner", 37: "Sona", 16: "Soraka", 50: "Swain", 134: "Syndra", 223: "TahmKench", 163: "Taliyah", 91: "Talon", 44: "Taric", 17: "Teemo", 412: "Thresh", 18: "Tristana", 48: "Trundle", 23: "Tryndamere", 4: "TwistedFate", 29: "Twitch", 77: "Udyr", 6: "Urgot", 110: "Varus", 67: "Vayne", 45: "Veigar", 161: "Velkoz", 254: "Vi", 112: "Viktor", 8: "Vladimir", 106: "Volibear", 19: "Warwick", 498: "Xayah", 101: "Xerath", 5: "XinZhao", 157: "Yasuo", 83: "Yorick", 154: "Zac", 238: "Zed", 115: "Ziggs", 26: "Zilean", 142: "Zoe", 143: "Zyra" };
|
||||
|
||||
var maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" };
|
||||
|
||||
var gameModes = { 76: 'URF', 100: 'ARAM', 400: 'Normal (Draft)', 420: 'Ranked (Solo)', 430: 'Normal (Blind)', 440: 'Ranked (Flex)', 460: '3v3 Blind', 470: '3v3 Ranked (Flex)', 800: '3v3 Co-op vs. AI (Intermediate)', 810: '3v3 Co-op vs. AI (Intro)', 820: '3v3 Co-op vs. AI (Beginner)', 830: 'Co-op vs. AI (Intro)', 840: 'Co-op vs. AI (Beginner)', 850: 'Co-op vs. AI (Intermediate)' }
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #F1F5F8;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.debug {
|
||||
|
|
@ -8,12 +14,16 @@ body {
|
|||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #EF5753;
|
||||
border: none;
|
||||
z-index: 9999999999;
|
||||
}
|
||||
|
||||
.debug:hover {
|
||||
background: #EF5753;
|
||||
}
|
||||
|
||||
.search {
|
||||
background: #ebebeb;
|
||||
background: #4DC0B5;
|
||||
}
|
||||
|
||||
.search .container {
|
||||
|
|
@ -26,10 +36,10 @@ body {
|
|||
|
||||
.player {
|
||||
text-align: center;
|
||||
margin: 16px auto;
|
||||
/*width: 400px;*/
|
||||
margin: 16px auto 0;
|
||||
border: 1px solid #ebebeb;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.player__pp {
|
||||
|
|
@ -99,7 +109,7 @@ body {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px;
|
||||
|
||||
min-width: 1150px;
|
||||
}
|
||||
|
||||
.match.win .content-container {
|
||||
|
|
@ -161,3 +171,65 @@ body {
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/* #######LOADER####### */
|
||||
.loader--overlay {
|
||||
position: absolute;
|
||||
z-index: 9997;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
z-index: 9998;
|
||||
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.LoaderBalls {
|
||||
width: 90px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.LoaderBalls__item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #00f1ca;
|
||||
}
|
||||
|
||||
.LoaderBalls__item:nth-child(1) {
|
||||
animation: bouncing 0.4s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95);
|
||||
}
|
||||
|
||||
.LoaderBalls__item:nth-child(2) {
|
||||
animation: bouncing 0.4s 0.1s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
|
||||
}
|
||||
|
||||
.LoaderBalls__item:nth-child(3) {
|
||||
animation: bouncing 0.4s 0.2s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
|
||||
}
|
||||
|
||||
@keyframes bouncing {
|
||||
0% {
|
||||
transform: translate3d(0, 10px, 0) scale(1.2, 0.85);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0) scale(0.9, 1.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
server.js
10
server.js
|
|
@ -8,7 +8,7 @@ var Promise = require("bluebird");
|
|||
const app = express()
|
||||
app.set('port', (process.env.PORT || 5000))
|
||||
|
||||
const key = 'RGAPI-858eb2b5-24a7-4a54-bf71-45e8b9f3327a';
|
||||
const key = 'RGAPI-fdb09f55-947b-474c-8c87-06bab52f7793';
|
||||
var summonerID = 'HMOiIUvzYtfgPk5X53zWTeOZo52T-HYJQhwvhkPNh0BWxZ0';
|
||||
var accountID = 'V1xNS14bjVeP54hg03JeMxkXJB29K4TfUMvijDB85nxbD4Y';
|
||||
var pseudo = 'Chil';
|
||||
|
|
@ -57,6 +57,8 @@ app.post('/api', function (req, res) {
|
|||
pseudo = req.body.playerName;
|
||||
|
||||
getAccountInfos(function (account) {
|
||||
if (!account)
|
||||
res.send(null)
|
||||
getRanked(function (ranked) {
|
||||
getMatches(function (matches) {
|
||||
var finalJSON = new Array();
|
||||
|
|
@ -81,6 +83,10 @@ function getAccountInfos(callback) {
|
|||
accountID = JSONBody.accountId;
|
||||
callback(JSONBody);
|
||||
}
|
||||
else {
|
||||
console.log('username not found');
|
||||
callback(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -114,7 +120,7 @@ function addMatchToJSON(obj) {
|
|||
//console.log(obj.gameId);
|
||||
|
||||
for (var i = 0; i < JSONMatches.matches.length; i++) {
|
||||
if(JSONMatches.matches[i].gameId == obj.gameId) {
|
||||
if (JSONMatches.matches[i].gameId == obj.gameId) {
|
||||
//console.log('yes');
|
||||
JSONMatches.matches[i] = obj;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue