diff --git a/home.html b/home.html index 2bfa155..28b1f0c 100644 --- a/home.html +++ b/home.html @@ -47,10 +47,6 @@

Welcome on KLN's RIOT API Test

- - - - \ No newline at end of file diff --git a/index.html.old b/index.html.old deleted file mode 100644 index 5eac299..0000000 --- a/index.html.old +++ /dev/null @@ -1,112 +0,0 @@ - - - - - - - Riot Api Node - - - - - - - - - -
-
-
-
-
-
-
-
-
- - - -
-
- -
- - -
- -
-
- -
-
-
-

Default name

-

Default level

-

Default division

-
-

Default ratio

- - - - -
-
- - - - - - - - - - \ No newline at end of file diff --git a/public/client.1.js b/public/client.1.js deleted file mode 100644 index 63d9ad3..0000000 --- a/public/client.1.js +++ /dev/null @@ -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 = ''; -} \ No newline at end of file diff --git a/public/client.js b/public/client.js deleted file mode 100644 index 418829f..0000000 --- a/public/client.js +++ /dev/null @@ -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 = ''; -// } \ No newline at end of file diff --git a/public/client.js.old b/public/client.js.old deleted file mode 100644 index db008eb..0000000 --- a/public/client.js.old +++ /dev/null @@ -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 = ''; -} \ No newline at end of file diff --git a/public/functions.js b/public/functions.js index 1976cd8..af07c02 100644 --- a/public/functions.js +++ b/public/functions.js @@ -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'; + } } \ No newline at end of file diff --git a/public/style.css.old b/public/style.css.old deleted file mode 100644 index 81f416f..0000000 --- a/public/style.css.old +++ /dev/null @@ -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); - } -} diff --git a/server.js b/server.js index 01b1479..fd79597 100644 --- a/server.js +++ b/server.js @@ -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 */ diff --git a/index.html b/summoner.html similarity index 98% rename from index.html rename to summoner.html index 824e3b8..76f2636 100644 --- a/index.html +++ b/summoner.html @@ -102,7 +102,6 @@ -