Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove old stuff

Browse source
This commit is contained in:
Valentin Kaelin 2019-03-23 21:28:10 +01:00
parent 12e03718dc
commit 34a99fd799
9 changed files with 9 additions and 1383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
home.html
View file

@ -47,10 +47,6 @@
<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>

112
index.html.old
View file

@ -1,112 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Riot Api Node</title>
<!-- Bootstrap CSS -->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">-->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="public/style.css">
</head>
<body class="font-sans bg-grey-lighter">
<div class="loader--overlay">
<div class="loader-container">
<div class="LoaderBalls">
<div class="LoaderBalls__item"></div>
<div class="LoaderBalls__item"></div>
<div class="LoaderBalls__item"></div>
</div>
</div>
</div>
<button class="debug"></button>
<div class="search">
<div class="container mx-auto">
<form class="flex items-center mb-6" id="changeName" method="POST" action="api">
<input type="text" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="playerName" placeholder="Pseudo du Joueur">
<button class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
Chercher
</button>
</form>
</div>
</div>
<div class="container mx-auto pb-16">
<div class="player shadow-md">
<div class="player__pp"></div>
<h1 class="player__name">Default name</h1>
<h3 class="player__level">Default level</h3>
<h3 class="player__rank">Default division</h3>
<div class="player__rank-img"></div>
<h3 class="player__ratio">Default ratio</h3>
<!--<ul class="list-matches--debug">
<li class="match">
<div class="content-container">
<div class="first">
<img src="/public/img/champions/Vayne.png" class="champion-img" alt="example design">
<span class="level">17</span>
<div class="summonerSpells">
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png" alt="Flash">
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png" alt="Ignite">
</div>
<span class="champion-name">Vayne</span>
</div>
<div class="second">
<div class="map">Summoner's Rift</div>
<div class="gamemode">Normal (Draft Mode)</div>
</div>
<div class="third">
<img src="https://cdn.valentinkaelin.ch/riot/items/3140.png" class="item" alt="example design">
<img src="https://cdn.valentinkaelin.ch/riot/items/3153.png" class="item" alt="example design">
<img src="https://cdn.valentinkaelin.ch/riot/items/3031.png" class="item" alt="example design">
<img src="https://cdn.valentinkaelin.ch/riot/items/3124.png" class="item" alt="example design">
<img src="https://cdn.valentinkaelin.ch/riot/items/3094.png" class="item" alt="example design">
<img src="https://cdn.valentinkaelin.ch/riot/items/3006.png" class="item" alt="example design">
<img src="https://cdn.valentinkaelin.ch/riot/items/3363.png" class="item" alt="example design">
</div>
<div class="fourth">
<div class="score">8/6/9</div>
<div class="gold-farm">
<div class="gold">16.2k</div>
<div class="farm">227</div>
</div>
<div class="duration-date">
<div class="duration">40:31</div>
<div class="date">1/12/2018</div>
</div>
</div>
</div>
</li>
</ul>-->
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>-->
<script src="public/data.js"></script>
<script src="public/functions.js"></script>
<script src="public/client.js"></script>
</body>
</html>

355
public/client.1.js
View file

@ -1,355 +0,0 @@
var req = new XMLHttpRequest();
var url = '/api';
var params = 'playerName=Kalane';
var nameChosen = '';
var infos = {};
var itemsJSON;
async function getJSON() {
return fetch('public/item.json').then(resp => resp.json() ).then( json => { return json });
}
async function CallGetJSON() {
itemsJSON = await getJSON();
console.log(itemsJSON);
}
CallGetJSON();
//await fetch('public/item.json').then(resp => resp.json() ).then( json => { itemsJSON = json; });
req.addEventListener('load', onLoad);
req.addEventListener('error', onError);
/* Check on the load of the page if the content is already cached */
if (localStorage['currentPage']) {
console.log('cached on page load');
console.log(localStorage['currentPage']);
document.querySelector('#refresh').style.display = 'block';
displayContent(localStorage[localStorage['currentPage']]);
} else {
console.log('not cached on page load');
req.open('POST', url, true);
document.querySelector('.loader--overlay').style.display = 'block';
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send(params);
}
/* Debug button to reset localstorage */
document.querySelector('.debug').addEventListener('click', () => {
console.log('CLEAR LOCALSTORAGE');
localStorage.clear();
});
function onLoad() {
document.querySelector('.loader--overlay').style.display = 'none';
var response = this.responseText;
// If username isn't found
if (!response) {
document.querySelector('#refresh').style.display = 'none';
displayPlayerNotFound('Joueur introuvable');
return;
}
document.querySelector('#refresh').style.display = 'block';
var parsedEntireResponse = JSON.parse(response);
parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
createObject(parsedEntireResponse);
}
function onError() {
console.log('error receiving async AJAX call');
}
/* Form to change username */
var changeName = document.querySelector('#changeName');
var nameToPick = document.querySelector('#name')
changeName.addEventListener('submit', function (e) {
e.preventDefault();
nameChosen = nameToPick.value;
if (localStorage[nameChosen]) {
console.log('cached on search');
document.querySelector('#refresh').style.display = 'block';
displayContent(localStorage[nameChosen]);
} else {
document.querySelector('.loader--overlay').style.display = 'block';
req.open('POST', url, true);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send('playerName=' + nameToPick.value);
}
});
/* Refresh button */
var refreshBtn = document.querySelector('#refresh');
refreshBtn.addEventListener('click', (e) => {
e.preventDefault();
document.querySelector('.loader--overlay').style.display = 'block';
req.open('POST', url, true);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send('playerName=' + localStorage['currentPage']);
})
/**
* Create an object in LocalStorage with the data we need to display
* @param JSONData : big JSON with all the data of the request to the server
*/
function createObject(JSONData) {
console.log('--- ALL INFOS ---')
console.log(JSONData);
var userStats = JSONData[0];
var rankedStats = JSONData[1];
var soloQStats = rankedStats.length !== 0 ? (rankedStats[0].queueType == 'RANKED_SOLO_5x5' ? rankedStats[0] : rankedStats[1]) : false;
var matches = JSONData[2].matches;
var matchesInfos = [];
// Loop on all matches
for (let i = 0; i < matches.length; i++) {
var currentMatch = matches[i];
var participantId;
for (let i = 0; i < currentMatch.participantIdentities.length; i++) {
if (currentMatch.participantIdentities[i].player.accountId === userStats.accountId)
participantId = currentMatch.participantIdentities[i].participantId;
}
var teamId = currentMatch.participants[participantId - 1].teamId;
var win = false;
for (let i = 0; i < currentMatch.teams.length; i++) {
if (currentMatch.teams[i].teamId === teamId) {
if (currentMatch.teams[i].win === 'Win')
win = true;
}
}
var map = maps[currentMatch.mapId];
var mode = gameModes[currentMatch.queueId];
if (!mode)
mode = 'Undefinded gamemode';
var champion = currentMatch.participants[participantId - 1].championId;
var role = currentMatch.participants[participantId - 1].timeline.lane;
var timeAgo = timeDifference(currentMatch.gameCreation);
var time = secToTime(currentMatch.gameDuration);
var kills = currentMatch.participants[participantId - 1].stats.kills;
var deaths = currentMatch.participants[participantId - 1].stats.deaths;
var assists = currentMatch.participants[participantId - 1].stats.assists;
var level = currentMatch.participants[participantId - 1].stats.champLevel;
var items = [];
for (let i = 0; i < 6; i++) {
var currentItem = 'item' + i;
items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
}
var gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
var minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
matchesInfos.push({
result: win,
map: map,
gamemode: mode,
champ: champion,
role: role,
date: timeAgo,
time: time,
kills: kills,
deaths: deaths,
assists: assists,
level: level,
items: items,
gold: gold,
minions: minions
});
}
console.log(matchesInfos);
infos.accountId = userStats.accountId;
infos.matches = matchesInfos;
infos.profileIconId = userStats.profileIconId;
infos.name = userStats.name;
infos.level = userStats.summonerLevel;
infos.rank = soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé';
infos.rankImgLink = getRankImg(soloQStats);
infos.rankedWins = soloQStats.wins;
infos.rankedLosses = soloQStats.losses;
nameChosen = userStats.name;
console.log('====== Saved infos ======');
console.log(infos);
localStorage[nameChosen] = JSON.stringify(infos);
displayContent(localStorage[nameChosen]);
}
/**
* Display on the page all the dynamic content
* @param stringData : Stringify object with all datas
*/
function displayContent(stringData) {
var data = JSON.parse(stringData);
localStorage['currentPage'] = data.name;
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
document.querySelector('.player__name').innerHTML = data.name;
document.querySelector('.player__level').innerHTML = data.level;
document.querySelector('.player__rank').innerHTML = data.rank;
document.querySelector('.player__rank-img').style.background = 'url(' + data.rankImgLink + ') center/cover';
document.querySelector('.player__ratio').innerHTML = data.rankedWins ? data.rankedWins + ' wins / ' + data.rankedLosses + ' losses' : "Joueur non classé";
var playerContainer = document.querySelector('.player');
var oldList = document.querySelector('.list-matches');
if (oldList)
oldList.parentNode.removeChild(oldList);
var matchesList = document.createElement('ul');
matchesList.className = 'list-matches';
playerContainer.appendChild(matchesList);
/* Loop on all matches */
data.matches.forEach(e => {
var li = createHTMLOneMatch(e);
matchesList.appendChild(li);
});
}
/**
* Return the HTML of one match
* @param e : Infos in JSON of the match
*/
function createHTMLOneMatch(e) {
var li = document.createElement('li');
li.className = e.result ? 'match win' : 'match lose';
var container = document.createElement('div');
container.className = 'content-container';
/* First col */
var first = document.createElement('div');
first.className = 'first';
var imgChamp = document.createElement('img');
var championName = championsId[e.champ];
imgChamp.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/champions/' + championName + '.png');
imgChamp.className = 'champion-icon';
var level = document.createElement('span');
level.className = 'level';
level.innerText = e.level;
var summonerSpells = document.createElement('div');
summonerSpells.className = 'summonerSpells';
var firstSpell = document.createElement('img');
firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png');
firstSpell.className = 'spell-icon';
summonerSpells.appendChild(firstSpell);
var secondSpell = document.createElement('img');
secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png');
secondSpell.className = 'spell-icon';
summonerSpells.appendChild(secondSpell);
var name = document.createElement('span');
name.className = 'champion-name';
name.innerText = championName;
first.appendChild(imgChamp);
first.appendChild(level);
first.appendChild(summonerSpells);
first.appendChild(name);
/* Second col */
var second = document.createElement('div');
second.className = 'second';
var map = document.createElement('div');
map.className = 'map';
map.innerText = e.map;
var gamemode = document.createElement('div');
gamemode.className = 'gamemode';
gamemode.innerText = e.gamemode;
second.appendChild(map);
second.appendChild(gamemode);
/* Third col */
var third = document.createElement('div');
third.className = 'third';
e.items.forEach(e => {
var img = document.createElement('img');
img.className = 'item';
// TODO
// var itemSprite = itemsJSON.data.e.image.sprite;
var itemSprite = itemsJSON;
console.log(itemSprite);
img.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/items/' + e + '.png');
third.appendChild(img);
});
/* Fourth col */
var fourth = document.createElement('div');
fourth.className = 'fourth';
var score = document.createElement('div');
score.className = 'score';
score.innerText = e.kills + '/' + e.deaths + '/' + e.assists;
var goldFarm = document.createElement('div');
goldFarm.className = 'gold-farm';
var gold = document.createElement('div');
gold.className = 'gold';
gold.innerText = e.gold;
var farm = document.createElement('div');
farm.className = 'farm';
farm.innerText = e.minions;
goldFarm.appendChild(gold);
goldFarm.appendChild(farm);
var durationDate = document.createElement('div');
durationDate.className = 'duration-date';
var duration = document.createElement('div');
duration.className = 'duration';
duration.innerText = e.time;
var date = document.createElement('div');
date.className = 'date';
date.innerText = e.date;
durationDate.appendChild(duration);
durationDate.appendChild(date);
fourth.appendChild(score);
fourth.appendChild(goldFarm);
fourth.appendChild(durationDate);
/* End */
container.appendChild(first);
container.appendChild(second);
container.appendChild(third);
container.appendChild(fourth);
li.appendChild(container);
return li;
}
/**
* Display the information that the player has not be found
* @param text : String to display - error message
*/
function displayPlayerNotFound(text) {
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/29.png) center/cover';
document.querySelector('.player__name').innerHTML = '';
document.querySelector('.player__level').innerHTML = '';
document.querySelector('.player__rank').innerHTML = '';
document.querySelector('.player__rank-img').style.background = 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
document.querySelector('.player__ratio').innerHTML = text;
document.querySelector('.list-matches').innerHTML = '';
}

354
public/client.js
View file

@ -1,354 +0,0 @@
// var req = new XMLHttpRequest();
// var url = '/api';
// var params = 'playerName=Kalane';
// var nameChosen = '';
// var infos = {};
// var itemsJSON;
// /**
// * Get the JSON file of all the items
// */
// async function getItemsJSON() {
// return fetch('public/item.json').then(resp => resp.json()).then(json => { return json });
// }
// /**
// * Main function of the program
// */
// async function main() {
// req.addEventListener('load', onLoad);
// req.addEventListener('error', onError);
// itemsJSON = await getItemsJSON();
// console.log(itemsJSON);
// /* Check on the load of the page if the content is already cached */
// if (localStorage['currentPage']) {
// console.log('cached on page load');
// console.log(localStorage['currentPage']);
// document.querySelector('#refresh').style.display = 'block';
// displayContent(localStorage[localStorage['currentPage']]);
// } else {
// console.log('not cached on page load');
// req.open('POST', url, true);
// document.querySelector('.loader--overlay').style.display = 'block';
// req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// req.send(params);
// }
// /* Debug button to reset localstorage */
// document.querySelector('.debug').addEventListener('click', () => {
// console.log('CLEAR LOCALSTORAGE');
// localStorage.clear();
// });
// /* Form to change username */
// var changeName = document.querySelector('#changeName');
// var nameToPick = document.querySelector('#name')
// changeName.addEventListener('submit', function (e) {
// e.preventDefault();
// console.log('here')
// nameChosen = nameToPick.value;
// if (localStorage[nameChosen]) {
// console.log('cached on search');
// document.querySelector('#refresh').style.display = 'block';
// displayContent(localStorage[nameChosen]);
// } else {
// document.querySelector('.loader--overlay').style.display = 'block';
// req.open('POST', url, true);
// req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// req.send('playerName=' + nameToPick.value);
// }
// });
// /* Refresh button */
// var refreshBtn = document.querySelector('#refresh');
// refreshBtn.addEventListener('click', (e) => {
// e.preventDefault();
// document.querySelector('.loader--overlay').style.display = 'block';
// req.open('POST', url, true);
// req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// req.send('playerName=' + localStorage['currentPage']);
// })
// }
// // Call main function
// main();
// function onLoad() {
// document.querySelector('.loader--overlay').style.display = 'none';
// var response = this.responseText;
// // If username isn't found
// if (!response) {
// document.querySelector('#refresh').style.display = 'none';
// displayPlayerNotFound('Joueur introuvable');
// return;
// }
// document.querySelector('#refresh').style.display = 'block';
// var parsedEntireResponse = JSON.parse(response);
// parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
// createObject(parsedEntireResponse);
// }
// function onError() {
// console.log('error receiving async AJAX call');
// }
// /**
// * Create an object in LocalStorage with the data we need to display
// * @param JSONData : big JSON with all the data of the request to the server
// */
// function createObject(JSONData) {
// console.log('--- ALL INFOS ---')
// console.log(JSONData);
// var userStats = JSONData[0];
// var rankedStats = JSONData[1];
// var soloQStats = rankedStats.length !== 0 ? (rankedStats[0].queueType == 'RANKED_SOLO_5x5' ? rankedStats[0] : rankedStats[1]) : false;
// var matches = JSONData[2].matches;
// var matchesInfos = [];
// // Loop on all matches
// for (let i = 0; i < matches.length; i++) {
// var currentMatch = matches[i];
// var participantId;
// for (let i = 0; i < currentMatch.participantIdentities.length; i++) {
// if (currentMatch.participantIdentities[i].player.accountId === userStats.accountId)
// participantId = currentMatch.participantIdentities[i].participantId;
// }
// var teamId = currentMatch.participants[participantId - 1].teamId;
// var win = false;
// for (let i = 0; i < currentMatch.teams.length; i++) {
// if (currentMatch.teams[i].teamId === teamId) {
// if (currentMatch.teams[i].win === 'Win')
// win = true;
// }
// }
// var map = maps[currentMatch.mapId];
// var mode = gameModes[currentMatch.queueId];
// if (!mode)
// mode = 'Undefinded gamemode';
// var champion = currentMatch.participants[participantId - 1].championId;
// var role = currentMatch.participants[participantId - 1].timeline.lane;
// var timeAgo = timeDifference(currentMatch.gameCreation);
// var time = secToTime(currentMatch.gameDuration);
// var kills = currentMatch.participants[participantId - 1].stats.kills;
// var deaths = currentMatch.participants[participantId - 1].stats.deaths;
// var assists = currentMatch.participants[participantId - 1].stats.assists;
// var level = currentMatch.participants[participantId - 1].stats.champLevel;
// var items = [];
// for (let i = 0; i < 6; i++) {
// var currentItem = 'item' + i;
// items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
// }
// var gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
// var minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
// matchesInfos.push({
// result: win,
// map: map,
// gamemode: mode,
// champ: champion,
// role: role,
// date: timeAgo,
// time: time,
// kills: kills,
// deaths: deaths,
// assists: assists,
// level: level,
// items: items,
// gold: gold,
// minions: minions
// });
// }
// console.log(matchesInfos);
// infos.accountId = userStats.accountId;
// infos.matches = matchesInfos;
// infos.profileIconId = userStats.profileIconId;
// infos.name = userStats.name;
// infos.level = userStats.summonerLevel;
// infos.rank = soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé';
// infos.rankImgLink = getRankImg(soloQStats);
// infos.rankedWins = soloQStats.wins;
// infos.rankedLosses = soloQStats.losses;
// nameChosen = userStats.name;
// console.log('====== Saved infos ======');
// console.log(infos);
// localStorage[nameChosen] = JSON.stringify(infos);
// displayContent(localStorage[nameChosen]);
// }
// /**
// * Display on the page all the dynamic content
// * @param stringData : Stringify object with all datas
// */
// function displayContent(stringData) {
// var data = JSON.parse(stringData);
// localStorage['currentPage'] = data.name;
// document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
// document.querySelector('.player__name').innerHTML = data.name;
// document.querySelector('.player__level').innerHTML = data.level;
// document.querySelector('.player__rank').innerHTML = data.rank;
// document.querySelector('.player__rank-img').style.background = 'url(' + data.rankImgLink + ') center/cover';
// document.querySelector('.player__ratio').innerHTML = data.rankedWins ? data.rankedWins + ' wins / ' + data.rankedLosses + ' losses' : "Joueur non classé";
// var playerContainer = document.querySelector('.player');
// var oldList = document.querySelector('.list-matches');
// if (oldList)
// oldList.parentNode.removeChild(oldList);
// var matchesList = document.createElement('ul');
// matchesList.className = 'list-matches';
// playerContainer.appendChild(matchesList);
// /* Loop on all matches */
// data.matches.forEach(e => {
// var li = createHTMLOneMatch(e);
// matchesList.appendChild(li);
// });
// }
// /**
// * Return the HTML of one match
// * @param e : Infos in JSON of the match
// */
// function createHTMLOneMatch(e) {
// var li = document.createElement('li');
// li.className = e.result ? 'match win' : 'match lose';
// var container = document.createElement('div');
// container.className = 'content-container';
// /* First col (champion/summoners) */
// var first = document.createElement('div');
// first.className = 'first';
// var imgChamp = document.createElement('img');
// var championName = championsId[e.champ];
// imgChamp.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/champions/' + championName + '.png');
// imgChamp.className = 'champion-icon';
// var level = document.createElement('span');
// level.className = 'level';
// level.innerText = e.level;
// var summonerSpells = document.createElement('div');
// summonerSpells.className = 'summonerSpells';
// var firstSpell = document.createElement('img');
// firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png');
// firstSpell.className = 'spell-icon';
// summonerSpells.appendChild(firstSpell);
// var secondSpell = document.createElement('img');
// secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png');
// secondSpell.className = 'spell-icon';
// summonerSpells.appendChild(secondSpell);
// var name = document.createElement('span');
// name.className = 'champion-name';
// name.innerText = championName;
// first.appendChild(imgChamp);
// first.appendChild(level);
// first.appendChild(summonerSpells);
// first.appendChild(name);
// /* Second col (gamemode) */
// var second = document.createElement('div');
// second.className = 'second';
// var map = document.createElement('div');
// map.className = 'map';
// map.innerText = e.map;
// var gamemode = document.createElement('div');
// gamemode.className = 'gamemode';
// gamemode.innerText = e.gamemode;
// second.appendChild(map);
// second.appendChild(gamemode);
// /* Third col (items) */
// var third = document.createElement('div');
// third.className = 'third';
// e.items.forEach(e => {
// var img = document.createElement('div');
// img.className = 'item ' + e;
// if(e !== 0) {
// var itemImage = itemsJSON.data[e].image;
// var itemSprite = itemImage.sprite;
// var itemSpriteX = itemImage.x;
// var itemSpriteY = itemImage.y;
// img.style.background = `url('https://cdn.valentinkaelin.ch/riot/${itemSprite}') -${itemSpriteX}px -${itemSpriteY}px`;
// } else {
// img.style.background = "url('https://cdn.valentinkaelin.ch/riot/items/0.png') 0% 0% / cover";
// }
// third.appendChild(img);
// });
// /* Fourth col (stats) */
// var fourth = document.createElement('div');
// fourth.className = 'fourth';
// var score = document.createElement('div');
// score.className = 'score';
// score.innerText = e.kills + '/' + e.deaths + '/' + e.assists;
// var goldFarm = document.createElement('div');
// goldFarm.className = 'gold-farm';
// var gold = document.createElement('div');
// gold.className = 'gold';
// gold.innerText = e.gold;
// var farm = document.createElement('div');
// farm.className = 'farm';
// farm.innerText = e.minions;
// goldFarm.appendChild(gold);
// goldFarm.appendChild(farm);
// var durationDate = document.createElement('div');
// durationDate.className = 'duration-date';
// var duration = document.createElement('div');
// duration.className = 'duration';
// duration.innerText = e.time;
// var date = document.createElement('div');
// date.className = 'date';
// date.innerText = e.date;
// durationDate.appendChild(duration);
// durationDate.appendChild(date);
// fourth.appendChild(score);
// fourth.appendChild(goldFarm);
// fourth.appendChild(durationDate);
// /* End */
// container.appendChild(first);
// container.appendChild(second);
// container.appendChild(third);
// container.appendChild(fourth);
// li.appendChild(container);
// return li;
// }
// /**
// * Display the information that the player has not be found
// * @param text : String to display - error message
// */
// function displayPlayerNotFound(text) {
// document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/29.png) center/cover';
// document.querySelector('.player__name').innerHTML = '';
// document.querySelector('.player__level').innerHTML = '';
// document.querySelector('.player__rank').innerHTML = '';
// document.querySelector('.player__rank-img').style.background = 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
// document.querySelector('.player__ratio').innerHTML = text;
// document.querySelector('.list-matches').innerHTML = '';
// }

314
public/client.js.old
View file

@ -1,314 +0,0 @@
var req = new XMLHttpRequest();
var url = '/api';
var params = 'playerName=Kalane';
var nameChosen = '';
var infos = {};
req.addEventListener('load', onLoad);
req.addEventListener('error', onError);
/* Check on the load of the page if the content is already cached */
if (localStorage['currentPage']) {
console.log('cached on page load');
console.log(localStorage['currentPage']);
displayContent(localStorage[localStorage['currentPage']]);
} else {
console.log('not cached on page load');
req.open('POST', url, true);
document.querySelector('.loader--overlay').style.display = 'block';
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send(params);
}
/* Debug button to reset localstorage */
document.querySelector('.debug').addEventListener('click', () => {
console.log('CLEAR LOCALSTORAGE');
localStorage.clear();
});
function onLoad() {
document.querySelector('.loader--overlay').style.display = 'none';
var response = this.responseText;
// If username isn't found
if (!response) {
displayPlayerNotFound('Joueur introuvable');
return;
}
var parsedEntireResponse = JSON.parse(response);
parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
createObject(parsedEntireResponse);
}
function onError() {
console.log('error receiving async AJAX call');
}
/* Form to change username */
var changeName = document.querySelector('#changeName');
var nameToPick = document.querySelector('#name')
changeName.addEventListener('submit', function (e) {
e.preventDefault();
nameChosen = nameToPick.value;
if (localStorage[nameChosen]) {
console.log('cached on search');
displayContent(localStorage[nameChosen]);
} else {
document.querySelector('.loader--overlay').style.display = 'block';
req.open('POST', url, true);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send('playerName=' + nameToPick.value);
}
});
/**
* Create an object in LocalStorage with the data we need to display
* @param JSONData : big JSON with all the data of the request to the server
*/
function createObject(JSONData) {
console.log('--- ALL INFOS ---')
console.log(JSONData);
var userStats = JSONData[0];
var rankedStats = JSONData[1];
var soloQStats = rankedStats.length !== 0 ? (rankedStats[0].queueType == 'RANKED_SOLO_5x5' ? rankedStats[0] : rankedStats[1]) : false;
var matches = JSONData[2].matches;
var matchesInfos = [];
// Loop on all matches
for (let i = 0; i < matches.length; i++) {
var currentMatch = matches[i];
var participantId;
for (let i = 0; i < currentMatch.participantIdentities.length; i++) {
if (currentMatch.participantIdentities[i].player.accountId === userStats.accountId)
participantId = currentMatch.participantIdentities[i].participantId;
}
var teamId = currentMatch.participants[participantId - 1].teamId;
var win = false;
for (let i = 0; i < currentMatch.teams.length; i++) {
if (currentMatch.teams[i].teamId === teamId) {
if (currentMatch.teams[i].win === 'Win')
win = true;
}
}
var map = maps[currentMatch.mapId];
var mode = gameModes[currentMatch.queueId];
if (!mode)
mode = 'Undefinded gamemode';
var champion = currentMatch.participants[participantId - 1].championId;
var role = currentMatch.participants[participantId - 1].timeline.lane;
var timeAgo = timeDifference(currentMatch.gameCreation);
var time = secToTime(currentMatch.gameDuration);
var kills = currentMatch.participants[participantId - 1].stats.kills;
var deaths = currentMatch.participants[participantId - 1].stats.deaths;
var assists = currentMatch.participants[participantId - 1].stats.assists;
var level = currentMatch.participants[participantId - 1].stats.champLevel;
var items = [];
for (let i = 0; i < 6; i++) {
var currentItem = 'item' + i;
items.push(currentMatch.participants[participantId - 1].stats[currentItem]);
}
var gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k';
var minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled;
matchesInfos.push({
result: win,
map: map,
gamemode: mode,
champ: champion,
role: role,
date: timeAgo,
time: time,
kills: kills,
deaths: deaths,
assists: assists,
level: level,
items: items,
gold: gold,
minions: minions
});
}
console.log(matchesInfos);
infos.accountId = userStats.accountId;
infos.matches = matchesInfos;
infos.profileIconId = userStats.profileIconId;
infos.name = userStats.name;
infos.level = userStats.summonerLevel;
infos.rank = soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé';
infos.rankImgLink = getRankImg(soloQStats);
infos.rankedWins = soloQStats.wins;
infos.rankedLosses = soloQStats.losses;
nameChosen = userStats.name;
console.log('====== Saved infos ======');
console.log(infos);
localStorage[nameChosen] = JSON.stringify(infos);
displayContent(localStorage[nameChosen]);
}
/**
* Display on the page all the dynamic content
* @param stringData : Stringify object with all datas
*/
function displayContent(stringData) {
var data = JSON.parse(stringData);
localStorage['currentPage'] = data.name;
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/' + data.profileIconId + '.png) center/cover';
document.querySelector('.player__name').innerHTML = data.name;
document.querySelector('.player__level').innerHTML = data.level;
document.querySelector('.player__rank').innerHTML = data.rank;
document.querySelector('.player__rank-img').style.background = 'url(' + data.rankImgLink + ') center/cover';
document.querySelector('.player__ratio').innerHTML = data.rankedWins ? data.rankedWins + ' wins / ' + data.rankedLosses + ' losses' : "Joueur non classé";
var playerContainer = document.querySelector('.player');
var oldList = document.querySelector('.list-matches--debug');
if (oldList)
oldList.parentNode.removeChild(oldList);
var matchesList = document.createElement('ul');
matchesList.className = 'list-matches--debug';
playerContainer.appendChild(matchesList);
/* Loop on all matches */
data.matches.forEach(e => {
var li = createHTMLOneMatch(e);
matchesList.appendChild(li);
});
}
/**
* Return the HTML of one match
* @param e : Infos in JSON of the match
*/
function createHTMLOneMatch(e) {
var li = document.createElement('li');
li.className = e.result ? 'match win' : 'match lose';
var container = document.createElement('div');
container.className = 'content-container';
/* First col */
var first = document.createElement('div');
first.className = 'first';
var imgChamp = document.createElement('img');
var championName = championsId[e.champ];
imgChamp.setAttribute('src', '/public/img/champions/' + championName + '.png');
imgChamp.className = 'champion-img';
var level = document.createElement('span');
level.className = 'level';
level.innerText = e.level;
var summonerSpells = document.createElement('div');
summonerSpells.className = 'summonerSpells';
var firstSpell = document.createElement('img');
firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png');
firstSpell.className = 'spell-icon';
summonerSpells.appendChild(firstSpell);
var secondSpell = document.createElement('img');
secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png');
secondSpell.className = 'spell-icon';
summonerSpells.appendChild(secondSpell);
var name = document.createElement('span');
name.className = 'champion-name';
name.innerText = championName;
first.appendChild(imgChamp);
first.appendChild(level);
first.appendChild(summonerSpells);
first.appendChild(name);
/* Second col */
var second = document.createElement('div');
second.className = 'second';
var map = document.createElement('div');
map.className = 'map';
map.innerText = e.map;
var gamemode = document.createElement('div');
gamemode.className = 'gamemode';
gamemode.innerText = e.gamemode;
second.appendChild(map);
second.appendChild(gamemode);
/* Third col */
var third = document.createElement('div');
third.className = 'third';
e.items.forEach(e => {
var img = document.createElement('img');
img.className = 'item';
img.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/items/' + e + '.png');
third.appendChild(img);
});
/* Fourth col */
var fourth = document.createElement('div');
fourth.className = 'fourth';
var score = document.createElement('div');
score.className = 'score';
score.innerText = e.kills + '/' + e.deaths + '/' + e.assists;
var goldFarm = document.createElement('div');
goldFarm.className = 'gold-farm';
var gold = document.createElement('div');
gold.className = 'gold';
gold.innerText = e.gold;
var farm = document.createElement('div');
farm.className = 'farm';
farm.innerText = e.minions;
goldFarm.appendChild(gold);
goldFarm.appendChild(farm);
var durationDate = document.createElement('div');
durationDate.className = 'duration-date';
var duration = document.createElement('div');
duration.className = 'duration';
duration.innerText = e.time;
var date = document.createElement('div');
date.className = 'date';
date.innerText = e.date;
durationDate.appendChild(duration);
durationDate.appendChild(date);
fourth.appendChild(score);
fourth.appendChild(goldFarm);
fourth.appendChild(durationDate);
/* End */
container.appendChild(first);
container.appendChild(second);
container.appendChild(third);
container.appendChild(fourth);
li.appendChild(container);
return li;
}
/**
* Display the information that the player has not be found
* @param text : String to display - error message
*/
function displayPlayerNotFound(text) {
document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/29.png) center/cover';
document.querySelector('.player__name').innerHTML = '';
document.querySelector('.player__level').innerHTML = '';
document.querySelector('.player__rank').innerHTML = '';
document.querySelector('.player__rank-img').style.background = 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
document.querySelector('.player__ratio').innerHTML = text;
document.querySelector('.list-matches--debug').innerHTML = '';
}

15
public/functions.js
View file

@ -43,13 +43,14 @@ function secToTime(sec) {
* @param soloQStats : stats in soloQ of the player
*/
function getRankImg(soloQStats) {
if (soloQStats) {
if (soloQStats.tier != 'MASTER' && soloQStats.tier != 'CHALLENGER') {
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '_' + soloQStats.rank.toLowerCase() + '.png';
} else {
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '.png';
}
} else {
if (!soloQStats) {
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png';
}
if (soloQStats.tier != 'MASTER' && soloQStats.tier != 'CHALLENGER') {
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '_' + soloQStats.rank.toLowerCase() + '.png';
} else {
return 'https://cdn.valentinkaelin.ch/riot/tier-icons/' + soloQStats.tier.toLowerCase() + '.png';
}
}

235
public/style.css.old
View file

@ -1,235 +0,0 @@
html {
height: 100%;
}
body {
background: #F1F5F8;
position: relative;
min-height: 100%;
}
.debug {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
border: none;
z-index: 9999999999;
}
.debug:hover {
background: #EF5753;
}
.search {
background: #4DC0B5;
}
.search .container {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 0;
}
.player {
text-align: center;
margin: 16px auto 0;
border: 1px solid #ebebeb;
padding: 16px;
background: #fff;
}
.player__pp {
width: 75px;
height: 75px;
background: #ebebeb;
margin: 0 auto;
}
.player__rank-img {
width: 75px;
height: 75px;
background: #ebebeb;
margin: 0 auto;
}
.list-matches {
list-style-type: none;
padding: 0;
}
.list-matches li {
padding: 10px 0;
background: #51D88A;
}
.list-matches li.lose {
background: #EF5753;
}
.champion-icon {
width: 48px;
height: 48px;
display: block;
margin: 0 auto;
}
.champion-img {
width: 48px;
height: 48px;
display: block;
margin: 0 2px 0 0;
}
.spell-icon {
width: 23px;
height: 23px;
display: block;
}
/* ############## */
.list-matches--debug {
list-style-type: none;
padding: 0;
}
.match {
background: #fff;
padding: 10px 0;
border-bottom: 1px solid #DAE1E7;
}
.match .content-container {
display: flex;
flex-wrap: wrap;
padding: 16px;
min-width: 1150px;
}
.match.win .content-container {
border-left: 10px solid #51D88A;
}
.match.lose .content-container {
border-left: 10px solid #EF5753;
}
/* First col */
.match .first {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
flex: 1 0 0;
}
.match .level {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
font-weight: bold;
}
.match .summonerSpells {
margin: 0 8px 0 0;
}
.match .spell-icon:first-child {
margin: 0 0 2px 0;
}
/* Second col */
.match .second {
flex: 1 0 0;
text-align: left;
}
/* Third col */
.match .third {
flex: 1 0 0;
display: flex;
}
.third .item {
width: 48px;
height: 48px;
margin: 0 2px 0 0;
}
/* Fourth col */
.match .fourth {
flex: 1 0 0;
display: flex;
justify-content: space-around;
align-items: center;
}
/* #######LOADER####### */
.loader--overlay {
position: absolute;
z-index: 9997;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
}
.loader-container {
position: absolute;
z-index: 9998;
width: 100%;
height: 100vh;
}
.LoaderBalls {
width: 90px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
z-index: 9999;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.LoaderBalls__item {
width: 20px;
height: 20px;
border-radius: 50%;
background: #00f1ca;
}
.LoaderBalls__item:nth-child(1) {
animation: bouncing 0.4s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95);
}
.LoaderBalls__item:nth-child(2) {
animation: bouncing 0.4s 0.1s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
}
.LoaderBalls__item:nth-child(3) {
animation: bouncing 0.4s 0.2s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
}
@keyframes bouncing {
0% {
transform: translate3d(0, 10px, 0) scale(1.2, 0.85);
}
100% {
transform: translate3d(0, -20px, 0) scale(0.9, 1.1);
}
}

2
server.js
View file

@ -27,7 +27,7 @@ app.get('/', function (request, response) {
app.get('/summoners', function (request, response) {
response.sendFile(path.join(__dirname, 'index.html'));
response.sendFile(path.join(__dirname, 'summoner.html'));
});
/* Public assets folder */

1
index.html → summoner.html
View file

@ -102,7 +102,6 @@
<script src="public/data.js"></script>
<script src="public/functions.js"></script>
<script src="public/client.js"></script>
<script src="public/summoner.js"></script>
</body>