mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 21:07:27 +00:00
First commit
This commit is contained in:
Valentin Kaelin
parent
585068e7d5
commit
c5793303c8
12 changed files with 16989 additions and 355 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/node_modules
|
||||||
|
/Patch9.5
|
||||||
56
home.html
Normal file
56
home.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Riot Api Node</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
|
||||||
|
<!-- 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">
|
||||||
|
<h2>Homepage</h2>
|
||||||
|
<form class="flex items-center" id="changeName" method="get" action="summoners">
|
||||||
|
<input type="search" 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="username" placeholder="Pseudo du Joueur">
|
||||||
|
<button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">
|
||||||
|
Chercher
|
||||||
|
</button>
|
||||||
|
<button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
|
||||||
|
<i class="fas fa-sync"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center w-full" style="height: calc(100vh - 153px);">
|
||||||
|
<h1>Welcome on KLN's RIOT API Test</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="public/data.js"></script>
|
||||||
|
<script src="public/functions.js"></script>
|
||||||
|
<script src="public/client.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
21
index.html
21
index.html
|
|
@ -3,11 +3,10 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Riot Api Node</title>
|
<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">
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
|
||||||
<!-- Custom CSS -->
|
<!-- Custom CSS -->
|
||||||
<link rel="stylesheet" href="public/style.css">
|
<link rel="stylesheet" href="public/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -29,11 +28,14 @@
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
|
|
||||||
<form class="flex items-center mb-6" id="changeName" method="POST" action="api">
|
<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">
|
<input type="search" 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">
|
<button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">
|
||||||
Chercher
|
Chercher
|
||||||
</button>
|
</button>
|
||||||
|
<button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
|
||||||
|
<i class="fas fa-sync"></i>
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -98,15 +100,10 @@
|
||||||
</div>
|
</div>
|
||||||
</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/data.js"></script>
|
||||||
<script src="public/functions.js"></script>
|
<script src="public/functions.js"></script>
|
||||||
<script src="public/client.js"></script>
|
<script src="public/client.js"></script>
|
||||||
|
<script src="public/summoner.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
112
index.html.old
Normal file
112
index.html.old
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
<!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>
|
||||||
355
public/client.1.js
Normal file
355
public/client.1.js
Normal file
|
|
@ -0,0 +1,355 @@
|
||||||
|
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 = '';
|
||||||
|
}
|
||||||
644
public/client.js
644
public/client.js
|
|
@ -1,314 +1,354 @@
|
||||||
var req = new XMLHttpRequest();
|
// var req = new XMLHttpRequest();
|
||||||
var url = '/api';
|
// var url = '/api';
|
||||||
var params = 'playerName=Kalane';
|
// var params = 'playerName=Kalane';
|
||||||
var nameChosen = '';
|
// var nameChosen = '';
|
||||||
var infos = {};
|
// var infos = {};
|
||||||
|
// var itemsJSON;
|
||||||
|
|
||||||
req.addEventListener('load', onLoad);
|
// /**
|
||||||
req.addEventListener('error', onError);
|
// * Get the JSON file of all the items
|
||||||
|
// */
|
||||||
|
// async function getItemsJSON() {
|
||||||
|
// return fetch('public/item.json').then(resp => resp.json()).then(json => { return json });
|
||||||
|
// }
|
||||||
|
|
||||||
/* Check on the load of the page if the content is already cached */
|
// /**
|
||||||
if (localStorage['currentPage']) {
|
// * Main function of the program
|
||||||
console.log('cached on page load');
|
// */
|
||||||
console.log(localStorage['currentPage']);
|
// async function main() {
|
||||||
displayContent(localStorage[localStorage['currentPage']]);
|
// req.addEventListener('load', onLoad);
|
||||||
} else {
|
// req.addEventListener('error', onError);
|
||||||
console.log('not cached on page load');
|
|
||||||
req.open('POST', url, true);
|
// itemsJSON = await getItemsJSON();
|
||||||
document.querySelector('.loader--overlay').style.display = 'block';
|
// console.log(itemsJSON);
|
||||||
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
||||||
req.send(params);
|
// /* 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 */
|
// /* Debug button to reset localstorage */
|
||||||
document.querySelector('.debug').addEventListener('click', () => {
|
// document.querySelector('.debug').addEventListener('click', () => {
|
||||||
console.log('CLEAR LOCALSTORAGE');
|
// console.log('CLEAR LOCALSTORAGE');
|
||||||
localStorage.clear();
|
// 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]);
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
function onLoad() {
|
// /**
|
||||||
document.querySelector('.loader--overlay').style.display = 'none';
|
// * Display on the page all the dynamic content
|
||||||
var response = this.responseText;
|
// * @param stringData : Stringify object with all datas
|
||||||
|
// */
|
||||||
|
// function displayContent(stringData) {
|
||||||
|
// var data = JSON.parse(stringData);
|
||||||
|
// localStorage['currentPage'] = data.name;
|
||||||
|
|
||||||
// If username isn't found
|
// document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
|
||||||
if (!response) {
|
// document.querySelector('.player__name').innerHTML = data.name;
|
||||||
displayPlayerNotFound('Joueur introuvable');
|
// document.querySelector('.player__level').innerHTML = data.level;
|
||||||
return;
|
// 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 parsedEntireResponse = JSON.parse(response);
|
// var playerContainer = document.querySelector('.player');
|
||||||
parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
|
// var oldList = document.querySelector('.list-matches');
|
||||||
createObject(parsedEntireResponse);
|
// 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);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
function onError() {
|
// /**
|
||||||
console.log('error receiving async AJAX call');
|
// * 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;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
/* Form to change username */
|
// /**
|
||||||
var changeName = document.querySelector('#changeName');
|
// * Display the information that the player has not be found
|
||||||
var nameToPick = document.querySelector('#name')
|
// * @param text : String to display - error message
|
||||||
changeName.addEventListener('submit', function (e) {
|
// */
|
||||||
e.preventDefault();
|
// function displayPlayerNotFound(text) {
|
||||||
nameChosen = nameToPick.value;
|
// document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/29.png) center/cover';
|
||||||
if (localStorage[nameChosen]) {
|
// document.querySelector('.player__name').innerHTML = '';
|
||||||
console.log('cached on search');
|
// document.querySelector('.player__level').innerHTML = '';
|
||||||
displayContent(localStorage[nameChosen]);
|
// document.querySelector('.player__rank').innerHTML = '';
|
||||||
} else {
|
// document.querySelector('.player__rank-img').style.background = 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
|
||||||
document.querySelector('.loader--overlay').style.display = 'block';
|
// document.querySelector('.player__ratio').innerHTML = text;
|
||||||
req.open('POST', url, true);
|
// document.querySelector('.list-matches').innerHTML = '';
|
||||||
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 = '';
|
|
||||||
}
|
|
||||||
314
public/client.js.old
Normal file
314
public/client.js.old
Normal file
|
|
@ -0,0 +1,314 @@
|
||||||
|
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 = '';
|
||||||
|
}
|
||||||
15177
public/item.json
Normal file
15177
public/item.json
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -29,11 +29,15 @@ body {
|
||||||
.search .container {
|
.search .container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: space-around;
|
||||||
|
|
||||||
padding: 32px 0;
|
padding: 32px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#refresh {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.player {
|
.player {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 16px auto 0;
|
margin: 16px auto 0;
|
||||||
|
|
@ -56,49 +60,13 @@ body {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- MATCHES --- */
|
||||||
.list-matches {
|
.list-matches {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
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 {
|
.match {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
|
@ -109,7 +77,6 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
min-width: 1150px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.match.win .content-container {
|
.match.win .content-container {
|
||||||
|
|
@ -129,6 +96,13 @@ body {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.champion-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 2px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
.match .level {
|
.match .level {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -142,6 +116,12 @@ body {
|
||||||
margin: 0 8px 0 0;
|
margin: 0 8px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spell-icon {
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.match .spell-icon:first-child {
|
.match .spell-icon:first-child {
|
||||||
margin: 0 0 2px 0;
|
margin: 0 0 2px 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
235
public/style.css.old
Normal file
235
public/style.css.old
Normal file
|
|
@ -0,0 +1,235 @@
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
358
public/summoner.js
Normal file
358
public/summoner.js
Normal file
|
|
@ -0,0 +1,358 @@
|
||||||
|
var req = new XMLHttpRequest();
|
||||||
|
var url = '/api';
|
||||||
|
var params = 'playerName=Kalane';
|
||||||
|
var nameChosen = '';
|
||||||
|
var infos = {};
|
||||||
|
var itemsJSON;
|
||||||
|
|
||||||
|
// Get username from param
|
||||||
|
let fullUrl = new URL(window.location.href);
|
||||||
|
let searchParams = new URLSearchParams(fullUrl.search);
|
||||||
|
nameChosen = searchParams.get('username');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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[nameChosen]) {
|
||||||
|
console.log('cached on page load');
|
||||||
|
document.querySelector('#refresh').style.display = 'block';
|
||||||
|
displayContent(localStorage[nameChosen]);
|
||||||
|
} 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);
|
||||||
|
req.send('playerName=' + nameChosen);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 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=' + nameChosen);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
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 = '';
|
||||||
|
}
|
||||||
10
server.js
10
server.js
|
|
@ -22,6 +22,11 @@ app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
|
||||||
|
|
||||||
/* Homepage */
|
/* Homepage */
|
||||||
app.get('/', function (request, response) {
|
app.get('/', function (request, response) {
|
||||||
|
response.sendFile(path.join(__dirname, 'home.html'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
app.get('/summoners', function (request, response) {
|
||||||
response.sendFile(path.join(__dirname, 'index.html'));
|
response.sendFile(path.join(__dirname, 'index.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -33,7 +38,7 @@ app.listen(app.get('port'), () => console.log(`RiotAPI test app listening on por
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function apicall(urlApi) {
|
async function apicall(urlApi) {
|
||||||
//console.log(urlApi);
|
//console.log(urlApi);
|
||||||
return rp({ url: 'https://euw1.api.riotgames.com/lol/match/v4/matches/' + urlApi + '?api_key=' + key, json: true }).then(function (obj) {
|
return rp({ url: 'https://euw1.api.riotgames.com/lol/match/v4/matches/' + urlApi + '?api_key=' + key, json: true }).then(function (obj) {
|
||||||
return addMatchToJSON(obj);
|
return addMatchToJSON(obj);
|
||||||
|
|
@ -65,6 +70,7 @@ app.post('/api', function (req, res) {
|
||||||
finalJSON.push(account);
|
finalJSON.push(account);
|
||||||
finalJSON.push(ranked);
|
finalJSON.push(ranked);
|
||||||
finalJSON.push(matches);
|
finalJSON.push(matches);
|
||||||
|
console.log('Data sent to front');
|
||||||
res.send(finalJSON);
|
res.send(finalJSON);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -93,6 +99,7 @@ function getAccountInfos(callback) {
|
||||||
|
|
||||||
// Get matches of an accountID
|
// Get matches of an accountID
|
||||||
function getMatches(callback) {
|
function getMatches(callback) {
|
||||||
|
console.time('getMatches');
|
||||||
request('https://euw1.api.riotgames.com/lol/match/v4/matchlists/by-account/' + accountID + '?endIndex=10&api_key=' + key, function (error, response, body) {
|
request('https://euw1.api.riotgames.com/lol/match/v4/matchlists/by-account/' + accountID + '?endIndex=10&api_key=' + key, function (error, response, body) {
|
||||||
if (!error && response.statusCode == 200) {
|
if (!error && response.statusCode == 200) {
|
||||||
JSONMatches = JSON.parse(body);
|
JSONMatches = JSON.parse(body);
|
||||||
|
|
@ -105,6 +112,7 @@ function getMatches(callback) {
|
||||||
Promise.mapSeries(matchsId, function (item) {
|
Promise.mapSeries(matchsId, function (item) {
|
||||||
return apicall(item);
|
return apicall(item);
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
|
console.timeEnd('getMatches');
|
||||||
console.log('Finished');
|
console.log('Finished');
|
||||||
callback(JSONMatches);
|
callback(JSONMatches);
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue