mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
Add the possibility to change Region
This commit is contained in:
Valentin Kaelin
parent
f7c42d3bd7
commit
723a7d2c63
5 changed files with 130 additions and 113 deletions
|
|
@ -74,11 +74,6 @@
|
|||
export default {
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
methods: {
|
||||
tinyItem(link) {
|
||||
return link.replace('item', 'tiny_item')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
76
client/src/components/SearchForm.vue
Normal file
76
client/src/components/SearchForm.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<form @submit.prevent="formSubmit" class="flex">
|
||||
<div class="relative">
|
||||
<v-icon name="search" class="absolute ml-2 vertical-center"></v-icon>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Entre un pseudo."
|
||||
class="bg-gray-300 p-2 rounded-l outline-none focus:bg-gray-400 pl-8 pr-16"
|
||||
v-model="summoner"
|
||||
>
|
||||
<div class="absolute right-0 vertical-center flex items-center h-full mr-1">
|
||||
<div
|
||||
@click="dropdown = !dropdown"
|
||||
class="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-gray-200"
|
||||
>
|
||||
<span class="selected">{{ selectedRegion }}</span>
|
||||
<v-icon name="caret-down" class="ml-1"></v-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dropdown"
|
||||
@click="dropdown = !dropdown"
|
||||
class="absolute right-0 text-white rounded-b-lg shadow cursor-pointer"
|
||||
>
|
||||
<div
|
||||
v-for="(region, index) in regions"
|
||||
:key="region"
|
||||
@click="selectedRegion = region"
|
||||
class="px-4 py-1 text-sm bg-teal-500 hover:bg-teal-400"
|
||||
:class="classRegions(index)"
|
||||
>
|
||||
{{ region }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
summoner: '',
|
||||
dropdown: false,
|
||||
regions: ['BR', 'EUNE', 'EUW', 'JP', 'KR', 'LAN', 'LAS', 'NA', 'OCE', 'TR', 'RU'],
|
||||
selectedRegion: 'EUW'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
classRegions(index) {
|
||||
return {
|
||||
'rounded-t-lg': index === 0,
|
||||
'rounded-b-lg': index === this.regions.length - 1
|
||||
}
|
||||
},
|
||||
formSubmit() {
|
||||
console.log('form submit child');
|
||||
this.$emit('formSubmit', this.summoner, this.selectedRegion.toLowerCase());
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vertical-center {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="h-screen flex flex-col items-center justify-center">
|
||||
<h1>Home page test</h1>
|
||||
|
||||
<form @submit.prevent="redirect">
|
||||
<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 class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
|
||||
</form>
|
||||
<SearchForm @formSubmit="redirect"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchForm from '@/components/SearchForm.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
search: ''
|
||||
};
|
||||
components: {
|
||||
SearchForm
|
||||
},
|
||||
methods: {
|
||||
redirect() {
|
||||
this.$router.push("/summoner/euw/" + this.search)
|
||||
}
|
||||
redirect(summoner, region) {
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,15 +4,8 @@
|
|||
|
||||
<div class="search mb-4">
|
||||
<div class="container mx-auto">
|
||||
<form @submit.prevent="redirect" class="flex items-center">
|
||||
<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
|
||||
class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400"
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
>
|
||||
Rechercher
|
||||
</button>
|
||||
|
||||
<SearchForm @formSubmit="redirect"/>
|
||||
|
||||
<button
|
||||
v-if="summonerFound"
|
||||
|
|
@ -23,7 +16,7 @@
|
|||
>
|
||||
<v-icon name="sync"/>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -63,29 +56,47 @@
|
|||
import itemsJSON from '@/data/item.json'
|
||||
import summonersJSON from '@/data/summoner.json'
|
||||
import Match from '@/components/Match.vue';
|
||||
import SearchForm from '@/components/SearchForm.vue';
|
||||
import { championsId, maps, gameModes } from "@/data/data.js";
|
||||
import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Match
|
||||
Match,
|
||||
SearchForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localInfos: {},
|
||||
search: '',
|
||||
summonerFound: true,
|
||||
loading: false
|
||||
loading: false,
|
||||
regionsList: {
|
||||
'br': 'br1',
|
||||
'eune': 'eun1',
|
||||
'euw': 'euw1',
|
||||
'jp': 'jp1',
|
||||
'kr': 'kr',
|
||||
'lan': 'la1',
|
||||
'las': 'la2',
|
||||
'na': 'na1',
|
||||
'oce': 'oc1',
|
||||
'tr': 'tr1',
|
||||
'ru': 'ru'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
summoner() {
|
||||
return this.$route.params.name
|
||||
},
|
||||
region() {
|
||||
return this.$route.params.region
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
apiCall() {
|
||||
const summoner = this.summoner;
|
||||
const region = this.regionsList[this.region];
|
||||
this.loading = true;
|
||||
this.axios({
|
||||
method: "POST",
|
||||
|
|
@ -94,7 +105,8 @@ export default {
|
|||
"Content-Type": "application/json"
|
||||
},
|
||||
data: {
|
||||
summoner
|
||||
summoner,
|
||||
region
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
|
|
@ -116,10 +128,10 @@ export default {
|
|||
});
|
||||
},
|
||||
checkLocalStorage() {
|
||||
if (localStorage[this.summoner]) {
|
||||
if (localStorage[`${this.summoner}:${this.region}`]) {
|
||||
console.log('cached')
|
||||
this.summonerFound = true
|
||||
this.localInfos = JSON.parse(localStorage[this.summoner])
|
||||
this.localInfos = JSON.parse(localStorage[`${this.summoner}:${this.region}`])
|
||||
} else {
|
||||
this.apiCall()
|
||||
}
|
||||
|
|
@ -200,12 +212,10 @@ export default {
|
|||
rankedLosses: soloQStats ? soloQStats.losses : undefined
|
||||
}
|
||||
|
||||
//this.summoner = userStats.name;
|
||||
|
||||
console.log('====== Saved infos ======');
|
||||
console.log(this.localInfos);
|
||||
|
||||
localStorage[this.summoner] = JSON.stringify(this.localInfos);
|
||||
localStorage[`${this.summoner}:${this.region}`] = JSON.stringify(this.localInfos);
|
||||
},
|
||||
getItemLink(id) {
|
||||
if(id === 0) {
|
||||
|
|
@ -218,8 +228,9 @@ export default {
|
|||
const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
|
||||
return `https://cdn.valentinkaelin.ch/riot/spells/${spellName}.png`;
|
||||
},
|
||||
redirect() {
|
||||
this.$router.push("/summoner/euw/" + this.search)
|
||||
redirect(summoner, region) {
|
||||
// this.$router.push("/summoner/euw/" + this.search)
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
resetLocalStorage() {
|
||||
console.log('CLEAR LOCALSTORAGE')
|
||||
|
|
@ -291,68 +302,4 @@ export default {
|
|||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* #######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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,8 +54,10 @@ app.listen(app.get('port'), () => console.log(`RiotAPI app listening on port ${a
|
|||
app.post('/api', function (req, res) {
|
||||
console.log('API Request');
|
||||
console.log(req.body.summoner);
|
||||
console.log(req.body.region);
|
||||
//console.log(req.body.playerName);
|
||||
console.time('all')
|
||||
data.region = req.body.region;
|
||||
data.username = req.body.summoner;
|
||||
data.finalJSON = [];
|
||||
getAccountInfos(res);
|
||||
|
|
|
|||
Loading…
Reference in a new issue