Fix PurgeCSS, fix backend, use localStorage

This commit is contained in:
Valentin Kaelin 2019-03-31 20:56:48 +02:00
parent cc630f002b
commit c26b7a2191
14 changed files with 242 additions and 142 deletions

View file

@ -8,7 +8,8 @@ module.exports = {
'eslint:recommended' 'eslint:recommended'
], ],
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', //'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-console': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}, },
parserOptions: { parserOptions: {

View file

@ -8228,6 +8228,18 @@
} }
} }
}, },
"postcss-import": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
"integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
"dev": true,
"requires": {
"postcss": "^7.0.1",
"postcss-value-parser": "^3.2.3",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
}
},
"postcss-js": { "postcss-js": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.0.tgz",
@ -8995,6 +9007,23 @@
} }
} }
}, },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
"dev": true,
"requires": {
"pify": "^2.3.0"
},
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
}
},
"read-file-stdin": { "read-file-stdin": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz", "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz",
@ -10970,6 +10999,12 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==" "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
}, },
"vue-awesome": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-3.5.1.tgz",
"integrity": "sha512-oWPAoC1B/0aTxrw04MFxjVsXFsTz6f26KRxF5ItP59BM7uaAdJ8toHp7iFE5rpS/NOJJBheGPJIelfA5nzU4aA==",
"dev": true
},
"vue-axios": { "vue-axios": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.4.tgz", "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.4.tgz",

View file

@ -21,8 +21,10 @@
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"eslint": "^5.8.0", "eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.0.0",
"postcss-import": "^12.0.1",
"purgecss": "^1.1.0", "purgecss": "^1.1.0",
"tailwindcss": "^1.0.0-beta.3", "tailwindcss": "^1.0.0-beta.3",
"vue-awesome": "^3.5.1",
"vue-template-compiler": "^2.5.21" "vue-template-compiler": "^2.5.21"
} }
} }

View file

@ -1,20 +1,29 @@
const tailwindcss = require("tailwindcss"); const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer"); const autoprefixer = require("autoprefixer");
const purgecss = require("@fullhuman/postcss-purgecss"); const purgecss = require("@fullhuman/postcss-purgecss");
const postcssImport = require('postcss-import')
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}
module.exports = { module.exports = {
plugins: [ plugins: [
tailwindcss("./tailwind.config.js"), postcssImport,
autoprefixer({ tailwindcss('./tailwind.config.js'),
add: true, purgecss({
grid: true content: ['./src/**/*.vue'],
}), whitelist: ['html', 'body'],
//Only add purgecss in production extractors: [
process.env.NODE_ENV === "production"? purgecss({ {
content: [ extractor: TailwindExtractor,
"./src/**/*.html",
"./src/**/*.vue" extensions: ['html', 'js', 'vue']
] }
}): "" ]
] }),
}; autoprefixer
]
}

View file

@ -1,5 +1,5 @@
<template> <template>
<div id="app"> <div id="app" class="font-sans bg-gray-200">
<div class="nav"> <div class="nav">
<router-link to="/">Accueil</router-link> | <router-link to="/">Accueil</router-link> |
<router-link :to="`/summoner/${summoner}`"> <router-link :to="`/summoner/${summoner}`">
@ -14,12 +14,8 @@
<style> <style>
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} }
</style> </style>

View file

@ -1,5 +1,5 @@
<template> <template>
<li class="match"> <li class="match" :class="data.result ? 'win' : 'lose'">
<div class="content-container"> <div class="content-container">
<div class="first"> <div class="first">
@ -62,7 +62,6 @@ export default {
<style scoped> <style scoped>
/* --- MATCHES --- */
.match { .match {
background: #fff; background: #fff;
padding: 10px 0; padding: 10px 0;
@ -148,4 +147,3 @@ export default {
align-items: center; align-items: center;
} }
</style> </style>

View file

@ -1,13 +1,3 @@
// import json from '@/data/item.json'
// export default {
// data() {
// return {
// myJson: json
// }
// }
// }
export const 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" }; export const 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" };
export const maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" }; export const maps = { 10: "The Twisted Treeline", 11: "Summoner's Rift", 12: "Howling Abyss" };

View file

@ -0,0 +1,55 @@
/**
* Return the relative time betweeen a chosen moment and the current time
* @param previous : time we want to get difference
*/
export function timeDifference(previous) {
var current = new Date();
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var msPerWeek = msPerDay * 7;
var elapsed = current - previous;
if (elapsed < msPerMinute) {
return Math.round(elapsed / 1000) + 's';
} else if (elapsed < msPerHour) {
return Math.round(elapsed / msPerMinute) + 'm';
} else if (elapsed < msPerDay) {
return Math.round(elapsed / msPerHour) + 'h';
} else if (elapsed < msPerWeek) {
return Math.round(elapsed / msPerDay) + 'j';
} else {
var oldDate = new Date(previous);
var day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate();
var month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1);
return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2);
}
}
/**
* Return time in a formatted way
* @param sec : time in seconds to convert
*/
export function secToTime(sec) {
var min = Math.floor(sec / 60);
var newSec = sec - min * 60;
return min + ':' + (newSec < 10 ? '0' + newSec : newSec); //
}
/**
* Return the link of the rank image
* @param soloQStats : stats in soloQ of the player
*/
export function getRankImg(soloQStats) {
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';
}
}

View file

@ -3,13 +3,15 @@ import axios from 'axios'
import VueAxios from 'vue-axios' import VueAxios from 'vue-axios'
import '@/assets/css/tailwind.css' import '@/assets/css/tailwind.css'
import 'vue-awesome/icons'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import Icon from 'vue-awesome/components/Icon'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueAxios, axios) Vue.use(VueAxios, axios)
Vue.component('v-icon', Icon)
new Vue({ new Vue({

View file

@ -13,7 +13,7 @@
export default { export default {
data() { data() {
return { return {
search: "" search: ''
}; };
}, },
methods: { methods: {

View file

@ -1,40 +1,50 @@
<template> <template>
<div> <div>
<button class="debug"></button> <button class="debug" @click="this.resetLocalStorage"></button>
<div class="search"> <div class="search">
<div class="container mx-auto"> <div class="container mx-auto">
<form class="flex items-center mb-6" id="changeName" method="get" action="summoners"> <form @submit.prevent="redirect" class="flex items-center">
<input type="search" 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="username" placeholder="Pseudo du Joueur"> <input type="text" placeholder="Entre un pseudo" class="bg-gray-300 p-2 rounded-l outline-none focus:bg-gray-400" v-model="search">
<button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">Chercher</button> <button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
<button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
<i class="fas fa-sync"></i> <button
v-if="summonerFound"
id="refresh"
class="block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-2"
>
<v-icon name="sync"/>
</button> </button>
</form> </form>
</div> </div>
</div> </div>
<div class="container mx-auto pb-16"> <template v-if="summonerFound">
<div class="player shadow-md" v-if="localInfos.name"> <div class="container mx-auto pb-16">
<div class="player__pp" :style="{background: `url(https://cdn.valentinkaelin.ch/riot/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div> <div class="player shadow-md" v-if="localInfos.name">
<h1 class="player__name">{{ localInfos.name }}</h1> <div class="player__pp" :style="{background: `url(https://cdn.valentinkaelin.ch/riot/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div>
<h3 class="player__level">{{ localInfos.level }}</h3> <h1 class="player__name">{{ localInfos.name }}</h1>
<h3 class="player__rank">{{ localInfos.rank }}</h3> <h3 class="player__level">{{ localInfos.level }}</h3>
<div class="player__rank-img" :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"></div> <h3 class="player__rank">{{ localInfos.rank }}</h3>
<h3 class="player__ratio">{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3> <div class="player__rank-img" :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"></div>
<h3 class="player__ratio">{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
<ul class="list-matches--debug"> <ul class="list-matches--debug">
<Match <Match
v-for="(match, index) in localInfos.matches" :key="index" v-for="(match, index) in localInfos.matches" :key="index"
:data="localInfos.matches[index]" :data="localInfos.matches[index]"
/> />
</ul> </ul>
</div>
<div v-else>
<p>Loading player's information...</p>
</div>
</div> </div>
<div v-else> </template>
<p>Loading player's information...</p> <template v-else>
</div> <p>Le joueur est introuvable.</p>
</div> </template>
</div> </div>
</template> </template>
@ -42,6 +52,7 @@
<script> <script>
import Match from '@/components/Match.vue'; import Match from '@/components/Match.vue';
import { championsId, maps, gameModes } from "@/data/data.js"; import { championsId, maps, gameModes } from "@/data/data.js";
import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
export default { export default {
components: { components: {
@ -50,10 +61,50 @@ export default {
data() { data() {
return { return {
localInfos: {}, localInfos: {},
nameChosen: this.$route.params.name nameChosen: this.$route.params.name,
search: '',
summonerFound: true
}; };
}, },
methods: { methods: {
apiCall() {
const summoner = this.$route.params.name;
this.axios({
method: "POST",
//url: "https://vue.valentinkaelin.ch/api",
url: "http://localhost:5000/api",
headers: {
"Content-Type": "application/json"
},
data: {
summoner
}
})
.then(response => {
return response.data;
})
.then(jsonData => {
if(jsonData) {
this.summonerFound = true
this.createObject(jsonData)
} else {
this.summonerFound = false
console.log('Summoner not found')
}
})
.catch(err => {
console.log(err);
});
},
checkLocalStorage() {
if (localStorage[this.$route.params.name]) {
console.log('cached')
this.summonerFound = true
this.localInfos = JSON.parse(localStorage[this.$route.params.name])
} else {
this.apiCall()
}
},
createObject(JSONData) { createObject(JSONData) {
//console.log('--- ALL INFOS ---') //console.log('--- ALL INFOS ---')
//console.log(JSONData); //console.log(JSONData);
@ -88,8 +139,8 @@ export default {
mode = 'Undefined gamemode'; mode = 'Undefined gamemode';
const champion = championsId[currentMatch.participants[participantId - 1].championId]; const champion = championsId[currentMatch.participants[participantId - 1].championId];
const role = currentMatch.participants[participantId - 1].timeline.lane; const role = currentMatch.participants[participantId - 1].timeline.lane;
const timeAgo = this.timeDifference(currentMatch.gameCreation); const timeAgo = timeDifference(currentMatch.gameCreation);
const time = this.secToTime(currentMatch.gameDuration); const time = secToTime(currentMatch.gameDuration);
const kills = currentMatch.participants[participantId - 1].stats.kills; const kills = currentMatch.participants[participantId - 1].stats.kills;
const deaths = currentMatch.participants[participantId - 1].stats.deaths; const deaths = currentMatch.participants[participantId - 1].stats.deaths;
const assists = currentMatch.participants[participantId - 1].stats.assists; const assists = currentMatch.participants[participantId - 1].stats.assists;
@ -130,7 +181,7 @@ export default {
name: userStats.name, name: userStats.name,
level: userStats.summonerLevel, level: userStats.summonerLevel,
rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé', rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé',
rankImgLink: this.getRankImg(soloQStats), rankImgLink: getRankImg(soloQStats),
rankedWins: soloQStats ? soloQStats.wins : undefined, rankedWins: soloQStats ? soloQStats.wins : undefined,
rankedLosses: soloQStats ? soloQStats.losses : undefined rankedLosses: soloQStats ? soloQStats.losses : undefined
} }
@ -141,68 +192,23 @@ export default {
console.log(this.localInfos); console.log(this.localInfos);
localStorage[this.nameChosen] = JSON.stringify(this.localInfos); localStorage[this.nameChosen] = JSON.stringify(this.localInfos);
//displayContent(localStorage[this.nameChosen]);
}, },
getRankImg(soloQStats) { redirect() {
if (!soloQStats) { this.$router.push("/summoner/" + this.search)
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");
}
return ("https://cdn.valentinkaelin.ch/riot/tier-icons/" + soloQStats.tier.toLowerCase() + ".png");
}, },
secToTime(sec) { resetLocalStorage() {
var min = Math.floor(sec / 60); console.log('CLEAR LOCALSTORAGE')
var newSec = sec - min * 60; localStorage.clear()
return min + ":" + (newSec < 10 ? "0" + newSec : newSec);
},
timeDifference(previous) {
var current = new Date();
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var msPerWeek = msPerDay * 7;
var elapsed = current - previous;
if (elapsed < msPerMinute) {
return Math.round(elapsed / 1000) + 's';
} else if (elapsed < msPerHour) {
return Math.round(elapsed / msPerMinute) + 'm';
} else if (elapsed < msPerDay) {
return Math.round(elapsed / msPerHour) + 'h';
} else if (elapsed < msPerWeek) {
return Math.round(elapsed / msPerDay) + 'j';
} else {
var oldDate = new Date(previous);
var day = oldDate.getDate() < 10 ? '0' + oldDate.getDate() : oldDate.getDate();
var month = oldDate.getMonth() < 9 ? '0' + (oldDate.getMonth() + 1) : (oldDate.getMonth() + 1);
return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2);
}
} }
}, },
mounted: function () { mounted: function () {
const summoner = this.$route.params.name; this.checkLocalStorage()
this.axios({ },
method: "POST", watch: {
url: "http://localhost:5000/api", $route() {
headers: { console.log('route changed')
"Content-Type": "application/json" this.checkLocalStorage()
}, }
data: {
summoner
}
})
.then(response => {
return response.data;
})
.then(jsonData => {
console.log(jsonData);
this.createObject(jsonData);
})
.catch(err => {
console.log(err);
});
} }
}; };
</script> </script>
@ -234,10 +240,6 @@ export default {
padding: 32px 0; padding: 32px 0;
} }
#refresh {
display: none;
}
.player { .player {
text-align: center; text-align: center;
margin: 16px auto 0; margin: 16px auto 0;

View file

@ -105,6 +105,12 @@
"delayed-stream": "~1.0.0" "delayed-stream": "~1.0.0"
} }
}, },
"connect-history-api-fallback": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
"integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
"dev": true
},
"content-disposition": { "content-disposition": {
"version": "0.5.2", "version": "0.5.2",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",

View file

@ -16,5 +16,8 @@
"express": "^4.16.4", "express": "^4.16.4",
"request": "^2.88.0", "request": "^2.88.0",
"request-promise": "^4.2.2" "request-promise": "^4.2.2"
},
"devDependencies": {
"connect-history-api-fallback": "^1.6.0"
} }
} }

View file

@ -6,10 +6,7 @@ const bodyParser = require('body-parser');
const rp = require('request-promise'); const rp = require('request-promise');
const Promise = require("bluebird"); const Promise = require("bluebird");
const app = express() const app = express()
const history = require('connect-history-api-fallback');
// DEV
var cors = require('cors');
app.use(cors({origin: '*'}));
/* Global Variables */ /* Global Variables */
const key = process.env.API_KEY; const key = process.env.API_KEY;
@ -22,25 +19,29 @@ let finalJSON = [];
/* Set Port */ /* Set Port */
app.set('port', (process.env.PORT || 5000)) app.set('port', (process.env.PORT || 5000))
/* DEV */
var cors = require('cors');
app.use(cors({origin: '*'}));
/* PRODUCTION */
/*const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
app.use(staticFileMiddleware);
app.use(history({
disableDotRule: true,
verbose: true
}));
app.use(staticFileMiddleware);
app.get('/', function (req, res) {
res.render(path.join(__dirname + '/dist/index.html'));
});*/
/* To retrieve data of post request */ /* To retrieve data of post request */
app.use(bodyParser.json()); // to support JSON-encoded bodies app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true extended: true
})); }));
// /* Homepage */
// app.get('/', function (request, response) {
// response.sendFile(path.join(__dirname, 'home.html'));
// });
// /* Summoners pages */
// app.get('/summoners', function (request, response) {
// response.sendFile(path.join(__dirname, 'summoner.html'));
// });
// /* Public assets folder */
// app.use('/public', express.static(__dirname + '/public'));
/* Launch app */ /* Launch app */
app.listen(app.get('port'), () => console.log(`RiotAPI app listening on port ${app.get('port')}!`)) app.listen(app.get('port'), () => console.log(`RiotAPI app listening on port ${app.get('port')}!`))