mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
Remove old stuff
This commit is contained in:
Valentin Kaelin
parent
12e03718dc
commit
34a99fd799
9 changed files with 9 additions and 1383 deletions
|
|
@ -47,10 +47,6 @@
|
||||||
<h1>Welcome on KLN's RIOT API Test</h1>
|
<h1>Welcome on KLN's RIOT API Test</h1>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="public/data.js"></script>
|
|
||||||
<script src="public/functions.js"></script>
|
|
||||||
<script src="public/client.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
112
index.html.old
112
index.html.old
|
|
@ -1,112 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<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 href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<!-- Custom CSS -->
|
|
||||||
<link rel="stylesheet" href="public/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<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 mx-auto">
|
|
||||||
|
|
||||||
<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 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>
|
|
||||||
<h3 class="player__rank">Default division</h3>
|
|
||||||
<div class="player__rank-img"></div>
|
|
||||||
<h3 class="player__ratio">Default ratio</h3>
|
|
||||||
|
|
||||||
|
|
||||||
<!--<ul class="list-matches--debug">
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="second">
|
|
||||||
<div class="map">Summoner's Rift</div>
|
|
||||||
<div class="gamemode">Normal (Draft Mode)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="third">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3140.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3153.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3031.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3124.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3094.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3006.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3363.png" class="item" alt="example design">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fourth">
|
|
||||||
<div class="score">8/6/9</div>
|
|
||||||
<div class="gold-farm">
|
|
||||||
<div class="gold">16.2k</div>
|
|
||||||
<div class="farm">227</div>
|
|
||||||
</div>
|
|
||||||
<div class="duration-date">
|
|
||||||
<div class="duration">40:31</div>
|
|
||||||
<div class="date">1/12/2018</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>-->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Optional JavaScript -->
|
|
||||||
<!-- 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="public/data.js"></script>
|
|
||||||
<script src="public/functions.js"></script>
|
|
||||||
<script src="public/client.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,355 +0,0 @@
|
||||||
var req = new XMLHttpRequest();
|
|
||||||
var url = '/api';
|
|
||||||
var params = 'playerName=Kalane';
|
|
||||||
var nameChosen = '';
|
|
||||||
var infos = {};
|
|
||||||
var itemsJSON;
|
|
||||||
|
|
||||||
async function getJSON() {
|
|
||||||
return fetch('public/item.json').then(resp => resp.json() ).then( json => { return json });
|
|
||||||
}
|
|
||||||
|
|
||||||
async function CallGetJSON() {
|
|
||||||
itemsJSON = await getJSON();
|
|
||||||
|
|
||||||
console.log(itemsJSON);
|
|
||||||
}
|
|
||||||
|
|
||||||
CallGetJSON();
|
|
||||||
|
|
||||||
|
|
||||||
//await fetch('public/item.json').then(resp => resp.json() ).then( json => { itemsJSON = json; });
|
|
||||||
|
|
||||||
req.addEventListener('load', onLoad);
|
|
||||||
req.addEventListener('error', onError);
|
|
||||||
|
|
||||||
/* Check on the load of the page if the content is already cached */
|
|
||||||
if (localStorage['currentPage']) {
|
|
||||||
console.log('cached on page load');
|
|
||||||
console.log(localStorage['currentPage']);
|
|
||||||
document.querySelector('#refresh').style.display = 'block';
|
|
||||||
displayContent(localStorage[localStorage['currentPage']]);
|
|
||||||
} else {
|
|
||||||
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) {
|
|
||||||
document.querySelector('#refresh').style.display = 'none';
|
|
||||||
displayPlayerNotFound('Joueur introuvable');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
document.querySelector('#refresh').style.display = 'block';
|
|
||||||
var parsedEntireResponse = JSON.parse(response);
|
|
||||||
parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
|
|
||||||
createObject(parsedEntireResponse);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function onError() {
|
|
||||||
console.log('error receiving async AJAX call');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 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 on search');
|
|
||||||
document.querySelector('#refresh').style.display = 'block';
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/* Refresh button */
|
|
||||||
var refreshBtn = document.querySelector('#refresh');
|
|
||||||
refreshBtn.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
document.querySelector('.loader--overlay').style.display = 'block';
|
|
||||||
req.open('POST', url, true);
|
|
||||||
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
||||||
req.send('playerName=' + localStorage['currentPage']);
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create an object in LocalStorage with the data we need to display
|
|
||||||
* @param JSONData : big JSON with all the data of the request to the server
|
|
||||||
*/
|
|
||||||
function createObject(JSONData) {
|
|
||||||
console.log('--- ALL INFOS ---')
|
|
||||||
console.log(JSONData);
|
|
||||||
|
|
||||||
var userStats = JSONData[0];
|
|
||||||
var rankedStats = JSONData[1];
|
|
||||||
var soloQStats = rankedStats.length !== 0 ? (rankedStats[0].queueType == 'RANKED_SOLO_5x5' ? rankedStats[0] : rankedStats[1]) : false;
|
|
||||||
var matches = JSONData[2].matches;
|
|
||||||
|
|
||||||
var matchesInfos = [];
|
|
||||||
// Loop on all matches
|
|
||||||
for (let i = 0; i < matches.length; i++) {
|
|
||||||
var currentMatch = matches[i];
|
|
||||||
var participantId;
|
|
||||||
for (let i = 0; i < currentMatch.participantIdentities.length; i++) {
|
|
||||||
if (currentMatch.participantIdentities[i].player.accountId === userStats.accountId)
|
|
||||||
participantId = currentMatch.participantIdentities[i].participantId;
|
|
||||||
}
|
|
||||||
|
|
||||||
var teamId = currentMatch.participants[participantId - 1].teamId;
|
|
||||||
var win = false;
|
|
||||||
for (let i = 0; i < currentMatch.teams.length; i++) {
|
|
||||||
if (currentMatch.teams[i].teamId === teamId) {
|
|
||||||
if (currentMatch.teams[i].win === 'Win')
|
|
||||||
win = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var map = maps[currentMatch.mapId];
|
|
||||||
var mode = gameModes[currentMatch.queueId];
|
|
||||||
if (!mode)
|
|
||||||
mode = 'Undefinded gamemode';
|
|
||||||
var champion = currentMatch.participants[participantId - 1].championId;
|
|
||||||
var role = currentMatch.participants[participantId - 1].timeline.lane;
|
|
||||||
var timeAgo = timeDifference(currentMatch.gameCreation);
|
|
||||||
var time = secToTime(currentMatch.gameDuration);
|
|
||||||
var kills = currentMatch.participants[participantId - 1].stats.kills;
|
|
||||||
var deaths = currentMatch.participants[participantId - 1].stats.deaths;
|
|
||||||
var assists = currentMatch.participants[participantId - 1].stats.assists;
|
|
||||||
var level = currentMatch.participants[participantId - 1].stats.champLevel;
|
|
||||||
|
|
||||||
var items = [];
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
var currentItem = 'item' + i;
|
|
||||||
items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
|
|
||||||
}
|
|
||||||
|
|
||||||
var gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
|
|
||||||
var minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
|
|
||||||
|
|
||||||
matchesInfos.push({
|
|
||||||
result: win,
|
|
||||||
map: map,
|
|
||||||
gamemode: mode,
|
|
||||||
champ: champion,
|
|
||||||
role: role,
|
|
||||||
date: timeAgo,
|
|
||||||
time: time,
|
|
||||||
kills: kills,
|
|
||||||
deaths: deaths,
|
|
||||||
assists: assists,
|
|
||||||
level: level,
|
|
||||||
items: items,
|
|
||||||
gold: gold,
|
|
||||||
minions: minions
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log(matchesInfos);
|
|
||||||
|
|
||||||
infos.accountId = userStats.accountId;
|
|
||||||
infos.matches = matchesInfos;
|
|
||||||
infos.profileIconId = userStats.profileIconId;
|
|
||||||
infos.name = userStats.name;
|
|
||||||
infos.level = userStats.summonerLevel;
|
|
||||||
infos.rank = soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé';
|
|
||||||
infos.rankImgLink = getRankImg(soloQStats);
|
|
||||||
infos.rankedWins = soloQStats.wins;
|
|
||||||
infos.rankedLosses = soloQStats.losses;
|
|
||||||
|
|
||||||
nameChosen = userStats.name;
|
|
||||||
|
|
||||||
console.log('====== Saved infos ======');
|
|
||||||
console.log(infos);
|
|
||||||
|
|
||||||
localStorage[nameChosen] = JSON.stringify(infos);
|
|
||||||
displayContent(localStorage[nameChosen]);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Display on the page all the dynamic content
|
|
||||||
* @param stringData : Stringify object with all datas
|
|
||||||
*/
|
|
||||||
function displayContent(stringData) {
|
|
||||||
var data = JSON.parse(stringData);
|
|
||||||
localStorage['currentPage'] = data.name;
|
|
||||||
|
|
||||||
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
|
|
||||||
document.querySelector('.player__name').innerHTML = data.name;
|
|
||||||
document.querySelector('.player__level').innerHTML = data.level;
|
|
||||||
document.querySelector('.player__rank').innerHTML = data.rank;
|
|
||||||
document.querySelector('.player__rank-img').style.background = 'url(' + data.rankImgLink + ') center/cover';
|
|
||||||
document.querySelector('.player__ratio').innerHTML = data.rankedWins ? data.rankedWins + ' wins / ' + data.rankedLosses + ' losses' : "Joueur non classé";
|
|
||||||
|
|
||||||
var playerContainer = document.querySelector('.player');
|
|
||||||
var oldList = document.querySelector('.list-matches');
|
|
||||||
if (oldList)
|
|
||||||
oldList.parentNode.removeChild(oldList);
|
|
||||||
var matchesList = document.createElement('ul');
|
|
||||||
matchesList.className = 'list-matches';
|
|
||||||
playerContainer.appendChild(matchesList);
|
|
||||||
|
|
||||||
/* Loop on all matches */
|
|
||||||
data.matches.forEach(e => {
|
|
||||||
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', 'https://cdn.valentinkaelin.ch/riot/champions/' + championName + '.png');
|
|
||||||
imgChamp.className = 'champion-icon';
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
// TODO
|
|
||||||
|
|
||||||
// var itemSprite = itemsJSON.data.e.image.sprite;
|
|
||||||
var itemSprite = itemsJSON;
|
|
||||||
console.log(itemSprite);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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').innerHTML = '';
|
|
||||||
}
|
|
||||||
354
public/client.js
354
public/client.js
|
|
@ -1,354 +0,0 @@
|
||||||
// var req = new XMLHttpRequest();
|
|
||||||
// var url = '/api';
|
|
||||||
// var params = 'playerName=Kalane';
|
|
||||||
// var nameChosen = '';
|
|
||||||
// var infos = {};
|
|
||||||
// var itemsJSON;
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Get the JSON file of all the items
|
|
||||||
// */
|
|
||||||
// async function getItemsJSON() {
|
|
||||||
// return fetch('public/item.json').then(resp => resp.json()).then(json => { return json });
|
|
||||||
// }
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Main function of the program
|
|
||||||
// */
|
|
||||||
// async function main() {
|
|
||||||
// req.addEventListener('load', onLoad);
|
|
||||||
// req.addEventListener('error', onError);
|
|
||||||
|
|
||||||
// itemsJSON = await getItemsJSON();
|
|
||||||
// console.log(itemsJSON);
|
|
||||||
|
|
||||||
// /* Check on the load of the page if the content is already cached */
|
|
||||||
// if (localStorage['currentPage']) {
|
|
||||||
// console.log('cached on page load');
|
|
||||||
// console.log(localStorage['currentPage']);
|
|
||||||
// document.querySelector('#refresh').style.display = 'block';
|
|
||||||
// displayContent(localStorage[localStorage['currentPage']]);
|
|
||||||
// } else {
|
|
||||||
// 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();
|
|
||||||
// });
|
|
||||||
|
|
||||||
// /* Form to change username */
|
|
||||||
// var changeName = document.querySelector('#changeName');
|
|
||||||
// var nameToPick = document.querySelector('#name')
|
|
||||||
// changeName.addEventListener('submit', function (e) {
|
|
||||||
// e.preventDefault();
|
|
||||||
|
|
||||||
// console.log('here')
|
|
||||||
|
|
||||||
// nameChosen = nameToPick.value;
|
|
||||||
// if (localStorage[nameChosen]) {
|
|
||||||
// console.log('cached on search');
|
|
||||||
// document.querySelector('#refresh').style.display = 'block';
|
|
||||||
// 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);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// /* Refresh button */
|
|
||||||
// var refreshBtn = document.querySelector('#refresh');
|
|
||||||
// refreshBtn.addEventListener('click', (e) => {
|
|
||||||
// e.preventDefault();
|
|
||||||
// document.querySelector('.loader--overlay').style.display = 'block';
|
|
||||||
// req.open('POST', url, true);
|
|
||||||
// req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
||||||
// req.send('playerName=' + localStorage['currentPage']);
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Call main function
|
|
||||||
// main();
|
|
||||||
|
|
||||||
// function onLoad() {
|
|
||||||
|
|
||||||
// document.querySelector('.loader--overlay').style.display = 'none';
|
|
||||||
// var response = this.responseText;
|
|
||||||
|
|
||||||
// // If username isn't found
|
|
||||||
// if (!response) {
|
|
||||||
// document.querySelector('#refresh').style.display = 'none';
|
|
||||||
// displayPlayerNotFound('Joueur introuvable');
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// document.querySelector('#refresh').style.display = 'block';
|
|
||||||
// var parsedEntireResponse = JSON.parse(response);
|
|
||||||
// parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
|
|
||||||
// createObject(parsedEntireResponse);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function onError() {
|
|
||||||
// console.log('error receiving async AJAX call');
|
|
||||||
// }
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Create an object in LocalStorage with the data we need to display
|
|
||||||
// * @param JSONData : big JSON with all the data of the request to the server
|
|
||||||
// */
|
|
||||||
// function createObject(JSONData) {
|
|
||||||
// console.log('--- ALL INFOS ---')
|
|
||||||
// console.log(JSONData);
|
|
||||||
|
|
||||||
// var userStats = JSONData[0];
|
|
||||||
// var rankedStats = JSONData[1];
|
|
||||||
// var soloQStats = rankedStats.length !== 0 ? (rankedStats[0].queueType == 'RANKED_SOLO_5x5' ? rankedStats[0] : rankedStats[1]) : false;
|
|
||||||
// var matches = JSONData[2].matches;
|
|
||||||
|
|
||||||
// var matchesInfos = [];
|
|
||||||
// // Loop on all matches
|
|
||||||
// for (let i = 0; i < matches.length; i++) {
|
|
||||||
// var currentMatch = matches[i];
|
|
||||||
// var participantId;
|
|
||||||
// for (let i = 0; i < currentMatch.participantIdentities.length; i++) {
|
|
||||||
// if (currentMatch.participantIdentities[i].player.accountId === userStats.accountId)
|
|
||||||
// participantId = currentMatch.participantIdentities[i].participantId;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// var teamId = currentMatch.participants[participantId - 1].teamId;
|
|
||||||
// var win = false;
|
|
||||||
// for (let i = 0; i < currentMatch.teams.length; i++) {
|
|
||||||
// if (currentMatch.teams[i].teamId === teamId) {
|
|
||||||
// if (currentMatch.teams[i].win === 'Win')
|
|
||||||
// win = true;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// var map = maps[currentMatch.mapId];
|
|
||||||
// var mode = gameModes[currentMatch.queueId];
|
|
||||||
// if (!mode)
|
|
||||||
// mode = 'Undefinded gamemode';
|
|
||||||
// var champion = currentMatch.participants[participantId - 1].championId;
|
|
||||||
// var role = currentMatch.participants[participantId - 1].timeline.lane;
|
|
||||||
// var timeAgo = timeDifference(currentMatch.gameCreation);
|
|
||||||
// var time = secToTime(currentMatch.gameDuration);
|
|
||||||
// var kills = currentMatch.participants[participantId - 1].stats.kills;
|
|
||||||
// var deaths = currentMatch.participants[participantId - 1].stats.deaths;
|
|
||||||
// var assists = currentMatch.participants[participantId - 1].stats.assists;
|
|
||||||
// var level = currentMatch.participants[participantId - 1].stats.champLevel;
|
|
||||||
|
|
||||||
// var items = [];
|
|
||||||
// for (let i = 0; i < 6; i++) {
|
|
||||||
// var currentItem = 'item' + i;
|
|
||||||
// items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// var gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
|
|
||||||
// var minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
|
|
||||||
|
|
||||||
// matchesInfos.push({
|
|
||||||
// result: win,
|
|
||||||
// map: map,
|
|
||||||
// gamemode: mode,
|
|
||||||
// champ: champion,
|
|
||||||
// role: role,
|
|
||||||
// date: timeAgo,
|
|
||||||
// time: time,
|
|
||||||
// kills: kills,
|
|
||||||
// deaths: deaths,
|
|
||||||
// assists: assists,
|
|
||||||
// level: level,
|
|
||||||
// items: items,
|
|
||||||
// gold: gold,
|
|
||||||
// minions: minions
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// console.log(matchesInfos);
|
|
||||||
|
|
||||||
// infos.accountId = userStats.accountId;
|
|
||||||
// infos.matches = matchesInfos;
|
|
||||||
// infos.profileIconId = userStats.profileIconId;
|
|
||||||
// infos.name = userStats.name;
|
|
||||||
// infos.level = userStats.summonerLevel;
|
|
||||||
// infos.rank = soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé';
|
|
||||||
// infos.rankImgLink = getRankImg(soloQStats);
|
|
||||||
// infos.rankedWins = soloQStats.wins;
|
|
||||||
// infos.rankedLosses = soloQStats.losses;
|
|
||||||
|
|
||||||
// nameChosen = userStats.name;
|
|
||||||
|
|
||||||
// console.log('====== Saved infos ======');
|
|
||||||
// console.log(infos);
|
|
||||||
|
|
||||||
// localStorage[nameChosen] = JSON.stringify(infos);
|
|
||||||
// displayContent(localStorage[nameChosen]);
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Display on the page all the dynamic content
|
|
||||||
// * @param stringData : Stringify object with all datas
|
|
||||||
// */
|
|
||||||
// function displayContent(stringData) {
|
|
||||||
// var data = JSON.parse(stringData);
|
|
||||||
// localStorage['currentPage'] = data.name;
|
|
||||||
|
|
||||||
// document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
|
|
||||||
// document.querySelector('.player__name').innerHTML = data.name;
|
|
||||||
// document.querySelector('.player__level').innerHTML = data.level;
|
|
||||||
// document.querySelector('.player__rank').innerHTML = data.rank;
|
|
||||||
// document.querySelector('.player__rank-img').style.background = 'url(' + data.rankImgLink + ') center/cover';
|
|
||||||
// document.querySelector('.player__ratio').innerHTML = data.rankedWins ? data.rankedWins + ' wins / ' + data.rankedLosses + ' losses' : "Joueur non classé";
|
|
||||||
|
|
||||||
// var playerContainer = document.querySelector('.player');
|
|
||||||
// var oldList = document.querySelector('.list-matches');
|
|
||||||
// if (oldList)
|
|
||||||
// oldList.parentNode.removeChild(oldList);
|
|
||||||
// var matchesList = document.createElement('ul');
|
|
||||||
// matchesList.className = 'list-matches';
|
|
||||||
// playerContainer.appendChild(matchesList);
|
|
||||||
|
|
||||||
// /* Loop on all matches */
|
|
||||||
// data.matches.forEach(e => {
|
|
||||||
// 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 (champion/summoners) */
|
|
||||||
// var first = document.createElement('div');
|
|
||||||
// first.className = 'first';
|
|
||||||
// var imgChamp = document.createElement('img');
|
|
||||||
// var championName = championsId[e.champ];
|
|
||||||
// imgChamp.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/champions/' + championName + '.png');
|
|
||||||
// imgChamp.className = 'champion-icon';
|
|
||||||
|
|
||||||
// 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 (gamemode) */
|
|
||||||
// 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 (items) */
|
|
||||||
// var third = document.createElement('div');
|
|
||||||
// third.className = 'third';
|
|
||||||
// e.items.forEach(e => {
|
|
||||||
// var img = document.createElement('div');
|
|
||||||
// img.className = 'item ' + e;
|
|
||||||
// if(e !== 0) {
|
|
||||||
// var itemImage = itemsJSON.data[e].image;
|
|
||||||
// var itemSprite = itemImage.sprite;
|
|
||||||
// var itemSpriteX = itemImage.x;
|
|
||||||
// var itemSpriteY = itemImage.y;
|
|
||||||
// img.style.background = `url('https://cdn.valentinkaelin.ch/riot/${itemSprite}') -${itemSpriteX}px -${itemSpriteY}px`;
|
|
||||||
// } else {
|
|
||||||
// img.style.background = "url('https://cdn.valentinkaelin.ch/riot/items/0.png') 0% 0% / cover";
|
|
||||||
// }
|
|
||||||
// third.appendChild(img);
|
|
||||||
// });
|
|
||||||
|
|
||||||
// /* Fourth col (stats) */
|
|
||||||
// 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').innerHTML = '';
|
|
||||||
// }
|
|
||||||
|
|
@ -1,314 +0,0 @@
|
||||||
var req = new XMLHttpRequest();
|
|
||||||
var url = '/api';
|
|
||||||
var params = 'playerName=Kalane';
|
|
||||||
var nameChosen = '';
|
|
||||||
var infos = {};
|
|
||||||
|
|
||||||
req.addEventListener('load', onLoad);
|
|
||||||
req.addEventListener('error', onError);
|
|
||||||
|
|
||||||
/* Check on the load of the page if the content is already cached */
|
|
||||||
if (localStorage['currentPage']) {
|
|
||||||
console.log('cached on page load');
|
|
||||||
console.log(localStorage['currentPage']);
|
|
||||||
displayContent(localStorage[localStorage['currentPage']]);
|
|
||||||
} else {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function onError() {
|
|
||||||
console.log('error receiving async AJAX call');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 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 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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create an object in LocalStorage with the data we need to display
|
|
||||||
* @param JSONData : big JSON with all the data of the request to the server
|
|
||||||
*/
|
|
||||||
function createObject(JSONData) {
|
|
||||||
console.log('--- ALL INFOS ---')
|
|
||||||
console.log(JSONData);
|
|
||||||
|
|
||||||
var userStats = JSONData[0];
|
|
||||||
var rankedStats = JSONData[1];
|
|
||||||
var soloQStats = rankedStats.length !== 0 ? (rankedStats[0].queueType == 'RANKED_SOLO_5x5' ? rankedStats[0] : rankedStats[1]) : false;
|
|
||||||
var matches = JSONData[2].matches;
|
|
||||||
|
|
||||||
var matchesInfos = [];
|
|
||||||
// Loop on all matches
|
|
||||||
for (let i = 0; i < matches.length; i++) {
|
|
||||||
var currentMatch = matches[i];
|
|
||||||
var participantId;
|
|
||||||
for (let i = 0; i < currentMatch.participantIdentities.length; i++) {
|
|
||||||
if (currentMatch.participantIdentities[i].player.accountId === userStats.accountId)
|
|
||||||
participantId = currentMatch.participantIdentities[i].participantId;
|
|
||||||
}
|
|
||||||
|
|
||||||
var teamId = currentMatch.participants[participantId - 1].teamId;
|
|
||||||
var win = false;
|
|
||||||
for (let i = 0; i < currentMatch.teams.length; i++) {
|
|
||||||
if (currentMatch.teams[i].teamId === teamId) {
|
|
||||||
if (currentMatch.teams[i].win === 'Win')
|
|
||||||
win = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var map = maps[currentMatch.mapId];
|
|
||||||
var mode = gameModes[currentMatch.queueId];
|
|
||||||
if (!mode)
|
|
||||||
mode = 'Undefinded gamemode';
|
|
||||||
var champion = currentMatch.participants[participantId - 1].championId;
|
|
||||||
var role = currentMatch.participants[participantId - 1].timeline.lane;
|
|
||||||
var timeAgo = timeDifference(currentMatch.gameCreation);
|
|
||||||
var time = secToTime(currentMatch.gameDuration);
|
|
||||||
var kills = currentMatch.participants[participantId - 1].stats.kills;
|
|
||||||
var deaths = currentMatch.participants[participantId - 1].stats.deaths;
|
|
||||||
var assists = currentMatch.participants[participantId - 1].stats.assists;
|
|
||||||
var level = currentMatch.participants[participantId - 1].stats.champLevel;
|
|
||||||
|
|
||||||
var items = [];
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
var currentItem = 'item' + i;
|
|
||||||
items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
|
|
||||||
}
|
|
||||||
|
|
||||||
var gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
|
|
||||||
var minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
|
|
||||||
|
|
||||||
matchesInfos.push({
|
|
||||||
result: win,
|
|
||||||
map: map,
|
|
||||||
gamemode: mode,
|
|
||||||
champ: champion,
|
|
||||||
role: role,
|
|
||||||
date: timeAgo,
|
|
||||||
time: time,
|
|
||||||
kills: kills,
|
|
||||||
deaths: deaths,
|
|
||||||
assists: assists,
|
|
||||||
level: level,
|
|
||||||
items: items,
|
|
||||||
gold: gold,
|
|
||||||
minions: minions
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log(matchesInfos);
|
|
||||||
|
|
||||||
infos.accountId = userStats.accountId;
|
|
||||||
infos.matches = matchesInfos;
|
|
||||||
infos.profileIconId = userStats.profileIconId;
|
|
||||||
infos.name = userStats.name;
|
|
||||||
infos.level = userStats.summonerLevel;
|
|
||||||
infos.rank = soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé';
|
|
||||||
infos.rankImgLink = getRankImg(soloQStats);
|
|
||||||
infos.rankedWins = soloQStats.wins;
|
|
||||||
infos.rankedLosses = soloQStats.losses;
|
|
||||||
|
|
||||||
nameChosen = userStats.name;
|
|
||||||
|
|
||||||
console.log('====== Saved infos ======');
|
|
||||||
console.log(infos);
|
|
||||||
|
|
||||||
localStorage[nameChosen] = JSON.stringify(infos);
|
|
||||||
displayContent(localStorage[nameChosen]);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Display on the page all the dynamic content
|
|
||||||
* @param stringData : Stringify object with all datas
|
|
||||||
*/
|
|
||||||
function displayContent(stringData) {
|
|
||||||
var data = JSON.parse(stringData);
|
|
||||||
localStorage['currentPage'] = data.name;
|
|
||||||
|
|
||||||
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
|
|
||||||
document.querySelector('.player__name').innerHTML = data.name;
|
|
||||||
document.querySelector('.player__level').innerHTML = data.level;
|
|
||||||
document.querySelector('.player__rank').innerHTML = data.rank;
|
|
||||||
document.querySelector('.player__rank-img').style.background = 'url(' + data.rankImgLink + ') center/cover';
|
|
||||||
document.querySelector('.player__ratio').innerHTML = data.rankedWins ? data.rankedWins + ' wins / ' + data.rankedLosses + ' losses' : "Joueur non classé";
|
|
||||||
|
|
||||||
var playerContainer = document.querySelector('.player');
|
|
||||||
var oldList = document.querySelector('.list-matches--debug');
|
|
||||||
if (oldList)
|
|
||||||
oldList.parentNode.removeChild(oldList);
|
|
||||||
var matchesList = document.createElement('ul');
|
|
||||||
matchesList.className = 'list-matches--debug';
|
|
||||||
playerContainer.appendChild(matchesList);
|
|
||||||
|
|
||||||
/* Loop on all matches */
|
|
||||||
data.matches.forEach(e => {
|
|
||||||
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 = '';
|
|
||||||
}
|
|
||||||
|
|
@ -43,13 +43,14 @@ function secToTime(sec) {
|
||||||
* @param soloQStats : stats in soloQ of the player
|
* @param soloQStats : stats in soloQ of the player
|
||||||
*/
|
*/
|
||||||
function getRankImg(soloQStats) {
|
function getRankImg(soloQStats) {
|
||||||
if (soloQStats) {
|
|
||||||
if (soloQStats.tier != 'MASTER' && soloQStats.tier != 'CHALLENGER') {
|
if (!soloQStats) {
|
||||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '_' + soloQStats.rank.toLowerCase() + '.png';
|
|
||||||
} else {
|
|
||||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '.png';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
|
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (soloQStats.tier != 'MASTER' && soloQStats.tier != 'CHALLENGER') {
|
||||||
|
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '_' + soloQStats.rank.toLowerCase() + '.png';
|
||||||
|
} else {
|
||||||
|
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '.png';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,235 +0,0 @@
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #F1F5F8;
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: none;
|
|
||||||
z-index: 9999999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug:hover {
|
|
||||||
background: #EF5753;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
background: #4DC0B5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search .container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
padding: 32px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player {
|
|
||||||
text-align: center;
|
|
||||||
margin: 16px auto 0;
|
|
||||||
border: 1px solid #ebebeb;
|
|
||||||
padding: 16px;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player__pp {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
background: #ebebeb;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player__rank-img {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
background: #ebebeb;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-matches {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-matches li {
|
|
||||||
padding: 10px 0;
|
|
||||||
background: #51D88A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-matches li.lose {
|
|
||||||
background: #EF5753;
|
|
||||||
}
|
|
||||||
|
|
||||||
.champion-icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.champion-img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
display: block;
|
|
||||||
margin: 0 2px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spell-icon {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ############## */
|
|
||||||
|
|
||||||
|
|
||||||
.list-matches--debug {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match {
|
|
||||||
background: #fff;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-bottom: 1px solid #DAE1E7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match .content-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 16px;
|
|
||||||
min-width: 1150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match.win .content-container {
|
|
||||||
border-left: 10px solid #51D88A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match.lose .content-container {
|
|
||||||
border-left: 10px solid #EF5753;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* First col */
|
|
||||||
.match .first {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
flex: 1 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match .level {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match .summonerSpells {
|
|
||||||
margin: 0 8px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match .spell-icon:first-child {
|
|
||||||
margin: 0 0 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Second col */
|
|
||||||
.match .second {
|
|
||||||
flex: 1 0 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Third col */
|
|
||||||
.match .third {
|
|
||||||
flex: 1 0 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.third .item {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
margin: 0 2px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fourth col */
|
|
||||||
.match .fourth {
|
|
||||||
flex: 1 0 0;
|
|
||||||
display: flex;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -27,7 +27,7 @@ app.get('/', function (request, response) {
|
||||||
|
|
||||||
|
|
||||||
app.get('/summoners', function (request, response) {
|
app.get('/summoners', function (request, response) {
|
||||||
response.sendFile(path.join(__dirname, 'index.html'));
|
response.sendFile(path.join(__dirname, 'summoner.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Public assets folder */
|
/* Public assets folder */
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,6 @@
|
||||||
|
|
||||||
<script src="public/data.js"></script>
|
<script src="public/data.js"></script>
|
||||||
<script src="public/functions.js"></script>
|
<script src="public/functions.js"></script>
|
||||||
<script src="public/client.js"></script>
|
|
||||||
<script src="public/summoner.js"></script>
|
<script src="public/summoner.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
Loading…
Reference in a new issue