From 12455fa3bfe91ed94217cdbfb9ddca4977c96fbe Mon Sep 17 00:00:00 2001 From: Kalaneee Date: Tue, 11 Dec 2018 23:17:33 +0100 Subject: [PATCH] Lots of changes --- index.html | 58 ++++++---- public/client.js | 284 ++++++++++++++++++++++++----------------------- public/data.js | 5 + public/style.css | 84 +++++++++++++- server.js | 12 +- 5 files changed, 273 insertions(+), 170 deletions(-) create mode 100644 public/data.js diff --git a/index.html b/index.html index b484902..5eac299 100644 --- a/index.html +++ b/index.html @@ -6,27 +6,41 @@ Riot Api Node - + + - + + +
+
+
+
+
+
+
+
+
+
-
+
-
- - + + +
-
-
+
+

Default name

Default level

@@ -35,22 +49,19 @@

Default ratio

-
    - +
- + + diff --git a/public/client.js b/public/client.js index 42e63ba..db008eb 100644 --- a/public/client.js +++ b/public/client.js @@ -1,29 +1,3 @@ -var championsId = { 266: "Aatrox", 103: "Ahri", 84: "Akali", 12: "Alistar", 32: "Amumu", 34: "Anivia", 1: "Annie", 22: "Ashe", 136: "AurelionSol", 268: "Azir", 432: "Bard", 53: "Blitzcrank", 63: "Brand", 201: "Braum", 51: "Caitlyn", 164: "Camille", 69: "Cassiopeia", 31: "Chogath", 42: "Corki", 122: "Darius", 131: "Diana", 119: "Draven", 36: "DrMundo", 245: "Ekko", 60: "Elise", 28: "Evelynn", 81: "Ezreal", 9: "Fiddlesticks", 114: "Fiora", 105: "Fizz", 3: "Galio", 41: "Gangplank", 86: "Garen", 150: "Gnar", 79: "Gragas", 104: "Graves", 120: "Hecarim", 74: "Heimerdinger", 420: "Illaoi", 39: "Irelia", 427: "Ivern", 40: "Janna", 59: "JarvanIV", 24: "Jax", 126: "Jayce", 202: "Jhin", 222: "Jinx", 145: "Kaisa", 429: "Kalista", 43: "Karma", 30: "Karthus", 38: "Kassadin", 55: "Katarina", 10: "Kayle", 141: "Kayn", 85: "Kennen", 121: "Khazix", 203: "Kindred", 240: "Kled", 96: "KogMaw", 7: "Leblanc", 64: "LeeSin", 89: "Leona", 127: "Lissandra", 236: "Lucian", 117: "Lulu", 99: "Lux", 54: "Malphite", 90: "Malzahar", 57: "Maokai", 11: "MasterYi", 21: "MissFortune", 62: "MonkeyKing", 82: "Mordekaiser", 25: "Morgana", 267: "Nami", 75: "Nasus", 111: "Nautilus", 76: "Nidalee", 56: "Nocturne", 20: "Nunu", 2: "Olaf", 61: "Orianna", 516: "Ornn", 80: "Pantheon", 78: "Poppy", 555: "Pyke", 133: "Quinn", 497: "Rakan", 33: "Rammus", 421: "RekSai", 58: "Renekton", 107: "Rengar", 92: "Riven", 68: "Rumble", 13: "Ryze", 113: "Sejuani", 35: "Shaco", 98: "Shen", 102: "Shyvana", 27: "Singed", 14: "Sion", 15: "Sivir", 72: "Skarner", 37: "Sona", 16: "Soraka", 50: "Swain", 134: "Syndra", 223: "TahmKench", 163: "Taliyah", 91: "Talon", 44: "Taric", 17: "Teemo", 412: "Thresh", 18: "Tristana", 48: "Trundle", 23: "Tryndamere", 4: "TwistedFate", 29: "Twitch", 77: "Udyr", 6: "Urgot", 110: "Varus", 67: "Vayne", 45: "Veigar", 161: "Velkoz", 254: "Vi", 112: "Viktor", 8: "Vladimir", 106: "Volibear", 19: "Warwick", 498: "Xayah", 101: "Xerath", 5: "XinZhao", 157: "Yasuo", 83: "Yorick", 154: "Zac", 238: "Zed", 115: "Ziggs", 26: "Zilean", 142: "Zoe", 143: "Zyra" }; -var maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" }; - -var gameModes = { - 76: 'URF', - 100: 'ARAM', - 400: 'Normal (Draft)', - 420: 'Ranked (Solo)', - 430: 'Normal (Blind)', - 440: 'Ranked (Flex)', - 460: '3v3 Blind', - 470: '3v3 Ranked (Flex)', - 800: '3v3 Co-op vs. AI (Intermediate)', - 810: '3v3 Co-op vs. AI (Intro)', - 820: '3v3 Co-op vs. AI (Beginner)', - 830: 'Co-op vs. AI (Intro)', - 840: 'Co-op vs. AI (Beginner)', - 850: 'Co-op vs. AI (Intermediate)' -}; - -/* Debug button to reset localstorage */ -document.querySelector('.debug').addEventListener('click', () => { - console.log('CLEAR LOCALSTORAGE'); - localStorage.clear(); -}); - var req = new XMLHttpRequest(); var url = '/api'; var params = 'playerName=Kalane'; @@ -35,19 +9,35 @@ req.addEventListener('error', onError); /* Check on the load of the page if the content is already cached */ if (localStorage['currentPage']) { - console.log('cached earlier'); + console.log('cached on page load'); console.log(localStorage['currentPage']); displayContent(localStorage[localStorage['currentPage']]); } else { - console.log('nop'); + console.log('not cached on page load'); req.open('POST', url, true); + document.querySelector('.loader--overlay').style.display = 'block'; req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); req.send(params); } +/* Debug button to reset localstorage */ +document.querySelector('.debug').addEventListener('click', () => { + console.log('CLEAR LOCALSTORAGE'); + localStorage.clear(); +}); + + function onLoad() { + document.querySelector('.loader--overlay').style.display = 'none'; var response = this.responseText; + + // If username isn't found + if (!response) { + displayPlayerNotFound('Joueur introuvable'); + return; + } + var parsedEntireResponse = JSON.parse(response); parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]); createObject(parsedEntireResponse); @@ -59,16 +49,17 @@ function onError() { } -/* Form */ +/* Form to change username */ var changeName = document.querySelector('#changeName'); var nameToPick = document.querySelector('#name') changeName.addEventListener('submit', function (e) { e.preventDefault(); nameChosen = nameToPick.value; if (localStorage[nameChosen]) { - console.log('cached'); + console.log('cached on search'); displayContent(localStorage[nameChosen]); } else { + document.querySelector('.loader--overlay').style.display = 'block'; req.open('POST', url, true); req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); req.send('playerName=' + nameToPick.value); @@ -192,115 +183,132 @@ function displayContent(stringData) { matchesList.className = 'list-matches--debug'; playerContainer.appendChild(matchesList); + /* Loop on all matches */ data.matches.forEach(e => { - var li = document.createElement('li'); - if (e.result) - li.className = 'match win'; - else - li.className = 'match lose'; - var container = document.createElement('div'); - container.className = 'content-container'; - - /* First col */ - var first = document.createElement('div'); - first.className = 'first'; - var imgChamp = document.createElement('img'); - var championName = championsId[e.champ]; - imgChamp.setAttribute('src', '/public/img/champions/' + championName + '.png'); - imgChamp.className = 'champion-img'; - - var level = document.createElement('span'); - level.className = 'level'; - level.innerText = e.level; - - var summonerSpells = document.createElement('div'); - summonerSpells.className = 'summonerSpells'; - - var firstSpell = document.createElement('img'); - firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png'); - firstSpell.className = 'spell-icon'; - summonerSpells.appendChild(firstSpell); - - var secondSpell = document.createElement('img'); - secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png'); - secondSpell.className = 'spell-icon'; - summonerSpells.appendChild(secondSpell); - - var name = document.createElement('span'); - name.className = 'champion-name'; - name.innerText = championName; - - first.appendChild(imgChamp); - first.appendChild(level); - first.appendChild(summonerSpells); - first.appendChild(name); - - - /* Second col */ - var second = document.createElement('div'); - second.className = 'second'; - var map = document.createElement('div'); - map.className = 'map'; - map.innerText = e.map; - var gamemode = document.createElement('div'); - gamemode.className = 'gamemode'; - gamemode.innerText = e.gamemode; - - second.appendChild(map); - second.appendChild(gamemode); - - - /* Third col */ - var third = document.createElement('div'); - third.className = 'third'; - e.items.forEach(e => { - var img = document.createElement('img'); - img.className = 'item'; - img.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/items/' + e + '.png'); - third.appendChild(img); - }); - - - /* Fourth col */ - var fourth = document.createElement('div'); - fourth.className = 'fourth'; - var score = document.createElement('div'); - score.className = 'score'; - score.innerText = e.kills + '/' + e.deaths + '/' + e.assists; - - var goldFarm = document.createElement('div'); - goldFarm.className = 'gold-farm'; - var gold = document.createElement('div'); - gold.className = 'gold'; - gold.innerText = e.gold; - var farm = document.createElement('div'); - farm.className = 'farm'; - farm.innerText = e.minions; - goldFarm.appendChild(gold); - goldFarm.appendChild(farm); - - var durationDate = document.createElement('div'); - durationDate.className = 'duration-date'; - var duration = document.createElement('div'); - duration.className = 'duration'; - duration.innerText = e.time; - var date = document.createElement('div'); - date.className = 'date'; - date.innerText = e.date; - durationDate.appendChild(duration); - durationDate.appendChild(date); - - fourth.appendChild(score); - fourth.appendChild(goldFarm); - fourth.appendChild(durationDate); - - - /* End */ - container.appendChild(first); - container.appendChild(second); - container.appendChild(third); - container.appendChild(fourth); - li.appendChild(container); + var li = createHTMLOneMatch(e); matchesList.appendChild(li); }); +} + + +/** + * Return the HTML of one match + * @param e : Infos in JSON of the match + */ +function createHTMLOneMatch(e) { + var li = document.createElement('li'); + li.className = e.result ? 'match win' : 'match lose'; + var container = document.createElement('div'); + container.className = 'content-container'; + + /* First col */ + var first = document.createElement('div'); + first.className = 'first'; + var imgChamp = document.createElement('img'); + var championName = championsId[e.champ]; + imgChamp.setAttribute('src', '/public/img/champions/' + championName + '.png'); + imgChamp.className = 'champion-img'; + + var level = document.createElement('span'); + level.className = 'level'; + level.innerText = e.level; + + var summonerSpells = document.createElement('div'); + summonerSpells.className = 'summonerSpells'; + var firstSpell = document.createElement('img'); + firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png'); + firstSpell.className = 'spell-icon'; + summonerSpells.appendChild(firstSpell); + var secondSpell = document.createElement('img'); + secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png'); + secondSpell.className = 'spell-icon'; + summonerSpells.appendChild(secondSpell); + + var name = document.createElement('span'); + name.className = 'champion-name'; + name.innerText = championName; + + first.appendChild(imgChamp); + first.appendChild(level); + first.appendChild(summonerSpells); + first.appendChild(name); + + /* Second col */ + var second = document.createElement('div'); + second.className = 'second'; + var map = document.createElement('div'); + map.className = 'map'; + map.innerText = e.map; + var gamemode = document.createElement('div'); + gamemode.className = 'gamemode'; + gamemode.innerText = e.gamemode; + + second.appendChild(map); + second.appendChild(gamemode); + + /* Third col */ + var third = document.createElement('div'); + third.className = 'third'; + e.items.forEach(e => { + var img = document.createElement('img'); + img.className = 'item'; + img.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/items/' + e + '.png'); + third.appendChild(img); + }); + + /* Fourth col */ + var fourth = document.createElement('div'); + fourth.className = 'fourth'; + var score = document.createElement('div'); + score.className = 'score'; + score.innerText = e.kills + '/' + e.deaths + '/' + e.assists; + + var goldFarm = document.createElement('div'); + goldFarm.className = 'gold-farm'; + var gold = document.createElement('div'); + gold.className = 'gold'; + gold.innerText = e.gold; + var farm = document.createElement('div'); + farm.className = 'farm'; + farm.innerText = e.minions; + goldFarm.appendChild(gold); + goldFarm.appendChild(farm); + + var durationDate = document.createElement('div'); + durationDate.className = 'duration-date'; + var duration = document.createElement('div'); + duration.className = 'duration'; + duration.innerText = e.time; + var date = document.createElement('div'); + date.className = 'date'; + date.innerText = e.date; + durationDate.appendChild(duration); + durationDate.appendChild(date); + + fourth.appendChild(score); + fourth.appendChild(goldFarm); + fourth.appendChild(durationDate); + + /* End */ + container.appendChild(first); + container.appendChild(second); + container.appendChild(third); + container.appendChild(fourth); + li.appendChild(container); + return li; +} + + +/** + * Display the information that the player has not be found + * @param text : String to display - error message + */ +function displayPlayerNotFound(text) { + document.querySelector('.player__pp').style.background = 'url(https://cdn.valentinkaelin.ch/riot/profileicon/29.png) center/cover'; + document.querySelector('.player__name').innerHTML = ''; + document.querySelector('.player__level').innerHTML = ''; + document.querySelector('.player__rank').innerHTML = ''; + document.querySelector('.player__rank-img').style.background = 'https://cdn.valentinkaelin.ch/riot/tier-icons/provisional.png'; + document.querySelector('.player__ratio').innerHTML = text; + document.querySelector('.list-matches--debug').innerHTML = ''; } \ No newline at end of file diff --git a/public/data.js b/public/data.js new file mode 100644 index 0000000..9115d57 --- /dev/null +++ b/public/data.js @@ -0,0 +1,5 @@ +var championsId = { 266: "Aatrox", 103: "Ahri", 84: "Akali", 12: "Alistar", 32: "Amumu", 34: "Anivia", 1: "Annie", 22: "Ashe", 136: "AurelionSol", 268: "Azir", 432: "Bard", 53: "Blitzcrank", 63: "Brand", 201: "Braum", 51: "Caitlyn", 164: "Camille", 69: "Cassiopeia", 31: "Chogath", 42: "Corki", 122: "Darius", 131: "Diana", 119: "Draven", 36: "DrMundo", 245: "Ekko", 60: "Elise", 28: "Evelynn", 81: "Ezreal", 9: "Fiddlesticks", 114: "Fiora", 105: "Fizz", 3: "Galio", 41: "Gangplank", 86: "Garen", 150: "Gnar", 79: "Gragas", 104: "Graves", 120: "Hecarim", 74: "Heimerdinger", 420: "Illaoi", 39: "Irelia", 427: "Ivern", 40: "Janna", 59: "JarvanIV", 24: "Jax", 126: "Jayce", 202: "Jhin", 222: "Jinx", 145: "Kaisa", 429: "Kalista", 43: "Karma", 30: "Karthus", 38: "Kassadin", 55: "Katarina", 10: "Kayle", 141: "Kayn", 85: "Kennen", 121: "Khazix", 203: "Kindred", 240: "Kled", 96: "KogMaw", 7: "Leblanc", 64: "LeeSin", 89: "Leona", 127: "Lissandra", 236: "Lucian", 117: "Lulu", 99: "Lux", 54: "Malphite", 90: "Malzahar", 57: "Maokai", 11: "MasterYi", 21: "MissFortune", 62: "MonkeyKing", 82: "Mordekaiser", 25: "Morgana", 267: "Nami", 75: "Nasus", 111: "Nautilus", 76: "Nidalee", 56: "Nocturne", 20: "Nunu", 2: "Olaf", 61: "Orianna", 516: "Ornn", 80: "Pantheon", 78: "Poppy", 555: "Pyke", 133: "Quinn", 497: "Rakan", 33: "Rammus", 421: "RekSai", 58: "Renekton", 107: "Rengar", 92: "Riven", 68: "Rumble", 13: "Ryze", 113: "Sejuani", 35: "Shaco", 98: "Shen", 102: "Shyvana", 27: "Singed", 14: "Sion", 15: "Sivir", 72: "Skarner", 37: "Sona", 16: "Soraka", 50: "Swain", 134: "Syndra", 223: "TahmKench", 163: "Taliyah", 91: "Talon", 44: "Taric", 17: "Teemo", 412: "Thresh", 18: "Tristana", 48: "Trundle", 23: "Tryndamere", 4: "TwistedFate", 29: "Twitch", 77: "Udyr", 6: "Urgot", 110: "Varus", 67: "Vayne", 45: "Veigar", 161: "Velkoz", 254: "Vi", 112: "Viktor", 8: "Vladimir", 106: "Volibear", 19: "Warwick", 498: "Xayah", 101: "Xerath", 5: "XinZhao", 157: "Yasuo", 83: "Yorick", 154: "Zac", 238: "Zed", 115: "Ziggs", 26: "Zilean", 142: "Zoe", 143: "Zyra" }; + +var maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" }; + +var gameModes = { 76: 'URF', 100: 'ARAM', 400: 'Normal (Draft)', 420: 'Ranked (Solo)', 430: 'Normal (Blind)', 440: 'Ranked (Flex)', 460: '3v3 Blind', 470: '3v3 Ranked (Flex)', 800: '3v3 Co-op vs. AI (Intermediate)', 810: '3v3 Co-op vs. AI (Intro)', 820: '3v3 Co-op vs. AI (Beginner)', 830: 'Co-op vs. AI (Intro)', 840: 'Co-op vs. AI (Beginner)', 850: 'Co-op vs. AI (Intermediate)' } diff --git a/public/style.css b/public/style.css index 61a3702..81f416f 100644 --- a/public/style.css +++ b/public/style.css @@ -1,5 +1,11 @@ +html { + height: 100%; +} + body { background: #F1F5F8; + position: relative; + min-height: 100%; } .debug { @@ -8,12 +14,16 @@ body { top: 0; width: 40px; height: 40px; - background: #EF5753; border: none; + z-index: 9999999999; +} + +.debug:hover { + background: #EF5753; } .search { - background: #ebebeb; + background: #4DC0B5; } .search .container { @@ -26,10 +36,10 @@ body { .player { text-align: center; - margin: 16px auto; - /*width: 400px;*/ + margin: 16px auto 0; border: 1px solid #ebebeb; padding: 16px; + background: #fff; } .player__pp { @@ -99,7 +109,7 @@ body { display: flex; flex-wrap: wrap; padding: 16px; - + min-width: 1150px; } .match.win .content-container { @@ -160,4 +170,66 @@ body { display: flex; justify-content: space-around; align-items: center; -} \ No newline at end of file +} + + +/* #######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 f552c68..ebe2b39 100644 --- a/server.js +++ b/server.js @@ -8,7 +8,7 @@ var Promise = require("bluebird"); const app = express() app.set('port', (process.env.PORT || 5000)) -const key = 'RGAPI-858eb2b5-24a7-4a54-bf71-45e8b9f3327a'; +const key = 'RGAPI-fdb09f55-947b-474c-8c87-06bab52f7793'; var summonerID = 'HMOiIUvzYtfgPk5X53zWTeOZo52T-HYJQhwvhkPNh0BWxZ0'; var accountID = 'V1xNS14bjVeP54hg03JeMxkXJB29K4TfUMvijDB85nxbD4Y'; var pseudo = 'Chil'; @@ -57,6 +57,8 @@ app.post('/api', function (req, res) { pseudo = req.body.playerName; getAccountInfos(function (account) { + if (!account) + res.send(null) getRanked(function (ranked) { getMatches(function (matches) { var finalJSON = new Array(); @@ -81,6 +83,10 @@ function getAccountInfos(callback) { accountID = JSONBody.accountId; callback(JSONBody); } + else { + console.log('username not found'); + callback(null); + } }); } @@ -90,7 +96,7 @@ function getMatches(callback) { 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) { JSONMatches = JSON.parse(body); - + var matchsId = new Array(); for (var i = 0; i < JSONMatches.matches.length; i++) { matchsId[i] = JSONMatches.matches[i].gameId; @@ -114,7 +120,7 @@ function addMatchToJSON(obj) { //console.log(obj.gameId); for (var i = 0; i < JSONMatches.matches.length; i++) { - if(JSONMatches.matches[i].gameId == obj.gameId) { + if (JSONMatches.matches[i].gameId == obj.gameId) { //console.log('yes'); JSONMatches.matches[i] = obj; }