+
+
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;
}