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

Lots of changes

Browse source
This commit is contained in:
Kalaneee 2018-12-11 23:17:33 +01:00
parent 6f1ae41fb4
commit 12455fa3bf
5 changed files with 273 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
index.html
View file

@ -6,27 +6,41 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Riot Api Node</title> <title>Riot Api Node</title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.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 --> <!-- Custom CSS -->
<link rel="stylesheet" href="public/style.css"> <link rel="stylesheet" href="public/style.css">
</head> </head>
<body> <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> <button class="debug"></button>
<div class="search"> <div class="search">
<div class="container"> <div class="container mx-auto">
<form class="form-inline" id="changeName" method="POST" action="api"> <form class="flex items-center mb-6" id="changeName" method="POST" action="api">
<input type="text" class="form-control mb-2 mr-sm-2" id="name" name="playerName" placeholder="Pseudo du Joueur"> <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 type="submit" class="btn btn-primary mb-2">Chercher</button> <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> </form>
</div> </div>
</div> </div>
<div class="container"> <div class="container mx-auto pb-16">
<div class="player"> <div class="player shadow-md">
<div class="player__pp"></div> <div class="player__pp"></div>
<h1 class="player__name">Default name</h1> <h1 class="player__name">Default name</h1>
<h3 class="player__level">Default level</h3> <h3 class="player__level">Default level</h3>
@ -35,11 +49,8 @@
<h3 class="player__ratio">Default ratio</h3> <h3 class="player__ratio">Default ratio</h3>
<ul class="list-matches--debug"> <!--<ul class="list-matches--debug">
<!--<li class="lose">
Vayne - BOTTOM
</li>-->
<li class="match"> <li class="match">
<div class="content-container"> <div class="content-container">
@ -82,17 +93,18 @@
</div> </div>
</li> </li>
</ul> </ul>-->
</div> </div>
</div> </div>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- 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://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://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="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/functions.js"></script>
<script src="public/client.js"></script> <script src="public/client.js"></script>
</body> </body>

92
public/client.js
View file

@ -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 req = new XMLHttpRequest();
var url = '/api'; var url = '/api';
var params = 'playerName=Kalane'; 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 */ /* Check on the load of the page if the content is already cached */
if (localStorage['currentPage']) { if (localStorage['currentPage']) {
console.log('cached earlier'); console.log('cached on page load');
console.log(localStorage['currentPage']); console.log(localStorage['currentPage']);
displayContent(localStorage[localStorage['currentPage']]); displayContent(localStorage[localStorage['currentPage']]);
} else { } else {
console.log('nop'); console.log('not cached on page load');
req.open('POST', url, true); req.open('POST', url, true);
document.querySelector('.loader--overlay').style.display = 'block';
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send(params); req.send(params);
} }
/* Debug button to reset localstorage */
document.querySelector('.debug').addEventListener('click', () => {
console.log('CLEAR LOCALSTORAGE');
localStorage.clear();
});
function onLoad() { function onLoad() {
document.querySelector('.loader--overlay').style.display = 'none';
var response = this.responseText; var response = this.responseText;
// If username isn't found
if (!response) {
displayPlayerNotFound('Joueur introuvable');
return;
}
var parsedEntireResponse = JSON.parse(response); var parsedEntireResponse = JSON.parse(response);
parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]); parsedEntireResponse[1] = JSON.parse(parsedEntireResponse[1]);
createObject(parsedEntireResponse); createObject(parsedEntireResponse);
@ -59,16 +49,17 @@ function onError() {
} }
/* Form */ /* Form to change username */
var changeName = document.querySelector('#changeName'); var changeName = document.querySelector('#changeName');
var nameToPick = document.querySelector('#name') var nameToPick = document.querySelector('#name')
changeName.addEventListener('submit', function (e) { changeName.addEventListener('submit', function (e) {
e.preventDefault(); e.preventDefault();
nameChosen = nameToPick.value; nameChosen = nameToPick.value;
if (localStorage[nameChosen]) { if (localStorage[nameChosen]) {
console.log('cached'); console.log('cached on search');
displayContent(localStorage[nameChosen]); displayContent(localStorage[nameChosen]);
} else { } else {
document.querySelector('.loader--overlay').style.display = 'block';
req.open('POST', url, true); req.open('POST', url, true);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send('playerName=' + nameToPick.value); req.send('playerName=' + nameToPick.value);
@ -192,12 +183,21 @@ function displayContent(stringData) {
matchesList.className = 'list-matches--debug'; matchesList.className = 'list-matches--debug';
playerContainer.appendChild(matchesList); playerContainer.appendChild(matchesList);
/* Loop on all matches */
data.matches.forEach(e => { 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'); var li = document.createElement('li');
if (e.result) li.className = e.result ? 'match win' : 'match lose';
li.className = 'match win';
else
li.className = 'match lose';
var container = document.createElement('div'); var container = document.createElement('div');
container.className = 'content-container'; container.className = 'content-container';
@ -215,12 +215,10 @@ function displayContent(stringData) {
var summonerSpells = document.createElement('div'); var summonerSpells = document.createElement('div');
summonerSpells.className = 'summonerSpells'; summonerSpells.className = 'summonerSpells';
var firstSpell = document.createElement('img'); var firstSpell = document.createElement('img');
firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png'); firstSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png');
firstSpell.className = 'spell-icon'; firstSpell.className = 'spell-icon';
summonerSpells.appendChild(firstSpell); summonerSpells.appendChild(firstSpell);
var secondSpell = document.createElement('img'); var secondSpell = document.createElement('img');
secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png'); secondSpell.setAttribute('src', 'https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png');
secondSpell.className = 'spell-icon'; secondSpell.className = 'spell-icon';
@ -235,7 +233,6 @@ function displayContent(stringData) {
first.appendChild(summonerSpells); first.appendChild(summonerSpells);
first.appendChild(name); first.appendChild(name);
/* Second col */ /* Second col */
var second = document.createElement('div'); var second = document.createElement('div');
second.className = 'second'; second.className = 'second';
@ -249,7 +246,6 @@ function displayContent(stringData) {
second.appendChild(map); second.appendChild(map);
second.appendChild(gamemode); second.appendChild(gamemode);
/* Third col */ /* Third col */
var third = document.createElement('div'); var third = document.createElement('div');
third.className = 'third'; third.className = 'third';
@ -260,7 +256,6 @@ function displayContent(stringData) {
third.appendChild(img); third.appendChild(img);
}); });
/* Fourth col */ /* Fourth col */
var fourth = document.createElement('div'); var fourth = document.createElement('div');
fourth.className = 'fourth'; fourth.className = 'fourth';
@ -294,13 +289,26 @@ function displayContent(stringData) {
fourth.appendChild(goldFarm); fourth.appendChild(goldFarm);
fourth.appendChild(durationDate); fourth.appendChild(durationDate);
/* End */ /* End */
container.appendChild(first); container.appendChild(first);
container.appendChild(second); container.appendChild(second);
container.appendChild(third); container.appendChild(third);
container.appendChild(fourth); container.appendChild(fourth);
li.appendChild(container); li.appendChild(container);
matchesList.appendChild(li); 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 = '';
} }

5
public/data.js Normal file
View file

@ -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)' }

82
public/style.css
View file

@ -1,5 +1,11 @@
html {
height: 100%;
}
body { body {
background: #F1F5F8; background: #F1F5F8;
position: relative;
min-height: 100%;
} }
.debug { .debug {
@ -8,12 +14,16 @@ body {
top: 0; top: 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
background: #EF5753;
border: none; border: none;
z-index: 9999999999;
}
.debug:hover {
background: #EF5753;
} }
.search { .search {
background: #ebebeb; background: #4DC0B5;
} }
.search .container { .search .container {
@ -26,10 +36,10 @@ body {
.player { .player {
text-align: center; text-align: center;
margin: 16px auto; margin: 16px auto 0;
/*width: 400px;*/
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
padding: 16px; padding: 16px;
background: #fff;
} }
.player__pp { .player__pp {
@ -99,7 +109,7 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 16px; padding: 16px;
min-width: 1150px;
} }
.match.win .content-container { .match.win .content-container {
@ -161,3 +171,65 @@ body {
justify-content: space-around; justify-content: space-around;
align-items: center; 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);
}
}

10
server.js
View file

@ -8,7 +8,7 @@ var Promise = require("bluebird");
const app = express() const app = express()
app.set('port', (process.env.PORT || 5000)) 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 summonerID = 'HMOiIUvzYtfgPk5X53zWTeOZo52T-HYJQhwvhkPNh0BWxZ0';
var accountID = 'V1xNS14bjVeP54hg03JeMxkXJB29K4TfUMvijDB85nxbD4Y'; var accountID = 'V1xNS14bjVeP54hg03JeMxkXJB29K4TfUMvijDB85nxbD4Y';
var pseudo = 'Chil'; var pseudo = 'Chil';
@ -57,6 +57,8 @@ app.post('/api', function (req, res) {
pseudo = req.body.playerName; pseudo = req.body.playerName;
getAccountInfos(function (account) { getAccountInfos(function (account) {
if (!account)
res.send(null)
getRanked(function (ranked) { getRanked(function (ranked) {
getMatches(function (matches) { getMatches(function (matches) {
var finalJSON = new Array(); var finalJSON = new Array();
@ -81,6 +83,10 @@ function getAccountInfos(callback) {
accountID = JSONBody.accountId; accountID = JSONBody.accountId;
callback(JSONBody); callback(JSONBody);
} }
else {
console.log('username not found');
callback(null);
}
}); });
} }
@ -114,7 +120,7 @@ function addMatchToJSON(obj) {
//console.log(obj.gameId); //console.log(obj.gameId);
for (var i = 0; i < JSONMatches.matches.length; i++) { 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'); //console.log('yes');
JSONMatches.matches[i] = obj; JSONMatches.matches[i] = obj;
} }