mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
refactor: start the new design of the matches
This commit is contained in:
Valentin Kaelin
parent
3324fc09ce
commit
c442d3ac1f
18 changed files with 238 additions and 127 deletions
3
client/src/assets/img/icons/Creep.svg
Normal file
3
client/src/assets/img/icons/Creep.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.04 1.04912C7.97335 0.971025 7.89055 0.908316 7.79733 0.865316C7.7041 0.822316 7.60266 0.800049 7.5 0.800049C7.39734 0.800049 7.2959 0.822316 7.20267 0.865316C7.10945 0.908316 7.02665 0.971025 6.96 1.04912C5.5 2.79946 2.5 7.60041 2.5 8.42057C2.5 9.24073 5.74 12.9315 7.09 14.0717C7.20224 14.1736 7.34841 14.23 7.5 14.23C7.65159 14.23 7.79776 14.1736 7.91 14.0717C9.26 12.9315 12.5 9.26074 12.5 8.42057C12.5 7.58041 9.5 2.79946 8.04 1.04912ZM7.32 12.1813L4.58 8.53059C4.55791 8.49446 4.54621 8.45292 4.54621 8.41057C4.54621 8.36821 4.55791 8.32668 4.58 8.29054L5.38 6.69023C5.40154 6.66315 5.42891 6.64127 5.46008 6.62624C5.49124 6.6112 5.5254 6.60339 5.56 6.60339C5.5946 6.60339 5.62876 6.6112 5.65992 6.62624C5.69109 6.64127 5.71846 6.66315 5.74 6.69023L7.34 8.26054C7.36057 8.28233 7.38536 8.2997 7.41288 8.31157C7.44039 8.32343 7.47004 8.32956 7.5 8.32956C7.52996 8.32956 7.55961 8.32343 7.58712 8.31157C7.61464 8.2997 7.63943 8.28233 7.66 8.26054L9.28 6.64022C9.30154 6.61314 9.32891 6.59126 9.36008 6.57623C9.39124 6.56119 9.4254 6.55338 9.46 6.55338C9.4946 6.55338 9.52876 6.56119 9.55992 6.57623C9.59109 6.59126 9.61846 6.61314 9.64 6.64022L10.44 8.24054C10.4621 8.27667 10.4738 8.3182 10.4738 8.36056C10.4738 8.40291 10.4621 8.44445 10.44 8.48058L7.68 12.1813C7.6597 12.2102 7.63275 12.2338 7.60142 12.2501C7.57009 12.2663 7.5353 12.2748 7.5 12.2748C7.4647 12.2748 7.42991 12.2663 7.39858 12.2501C7.36725 12.2338 7.3403 12.2102 7.32 12.1813Z" fill="#81E6D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
4
client/src/assets/img/icons/Damage.svg
Normal file
4
client/src/assets/img/icons/Damage.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.0714 1.92857V1H12.1429V1.92857L11.2143 2.85714H9.35714V1.92857H8.42857V2.85714H6.57143V1.92857H5.64286V2.85714H3.78571L2.85714 1.92857V1H1.92857V1.92857H1V2.85714H1.92857L2.85714 3.78571V5.64286H1.92857V6.57143H2.85714V7.5H3.78571V6.57143H5.64286L6.57143 5.64286V3.78571H8.42857V5.64286L1 11.2143V14H3.78571L9.35714 6.57143H11.2143V7.5H12.1429V6.57143H13.0714V5.64286H12.1429V3.78571L13.0714 2.85714H14V1.92857H13.0714Z" fill="#E25656"/>
|
||||
<path d="M8.02929 9.75643L11.2143 14H14V11.2143L9.75643 8.02929L8.02929 9.75643Z" fill="#E25656"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 653 B |
3
client/src/assets/img/icons/Gold.svg
Normal file
3
client/src/assets/img/icons/Gold.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" fill="#F3A05A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
3
client/src/assets/img/icons/KillParticipation.svg
Normal file
3
client/src/assets/img/icons/KillParticipation.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 1.5C4.18594 1.5 1.5 3.85078 1.5 6.75C1.5 8.39297 2.36484 9.85781 3.71484 10.8211C3.93984 10.9828 4.07109 11.2453 4.03125 11.5219L3.81094 13.0734C3.77813 13.2984 3.95156 13.5 4.17891 13.5H6V12.1875C6 12.0844 6.08437 12 6.1875 12H6.5625C6.66563 12 6.75 12.0844 6.75 12.1875V13.5H8.25V12.1875C8.25 12.0844 8.33437 12 8.4375 12H8.8125C8.91563 12 9 12.0844 9 12.1875V13.5H10.8211C11.0484 13.5 11.2219 13.2984 11.1891 13.0734L10.9688 11.5219C10.9289 11.2477 11.0578 10.9828 11.2852 10.8211C12.6352 9.85781 13.5 8.39297 13.5 6.75C13.5 3.85078 10.8141 1.5 7.5 1.5ZM5.25 9C4.42266 9 3.75 8.32734 3.75 7.5C3.75 6.67266 4.42266 6 5.25 6C6.07734 6 6.75 6.67266 6.75 7.5C6.75 8.32734 6.07734 9 5.25 9ZM9.75 9C8.92266 9 8.25 8.32734 8.25 7.5C8.25 6.67266 8.92266 6 9.75 6C10.5773 6 11.25 6.67266 11.25 7.5C11.25 8.32734 10.5773 9 9.75 9Z" fill="#B78787"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 959 B |
BIN
client/src/assets/img/roles/Bot.png
Normal file
BIN
client/src/assets/img/roles/Bot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 520 B |
BIN
client/src/assets/img/roles/Jungle.png
Normal file
BIN
client/src/assets/img/roles/Jungle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
client/src/assets/img/roles/Mid.png
Normal file
BIN
client/src/assets/img/roles/Mid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 B |
BIN
client/src/assets/img/roles/Support.png
Normal file
BIN
client/src/assets/img/roles/Support.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
client/src/assets/img/roles/Top.png
Normal file
BIN
client/src/assets/img/roles/Top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 B |
|
|
@ -1,69 +1,105 @@
|
|||
<template>
|
||||
<li class="match mt-4 bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
|
||||
<li :class="matchResultClass" class="match mt-4 rounded-lg text-white text-sm md:text-base">
|
||||
<div class="match-container">
|
||||
<!-- Responsive -->
|
||||
<div
|
||||
class="flex justify-between lg:hidden text-sm text-gray-800 px-2 border-gray-300 border-b"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="gamemode mr-1">{{ data.gamemode }}</div>
|
||||
<span>•</span>
|
||||
<div class="date ml-1">Il y a {{ data.date }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="date">{{ data.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap px-5 py-3">
|
||||
<div class="first w-1/3 text-left">
|
||||
<div>
|
||||
<div
|
||||
class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
|
||||
>{{ data.champ }}</div>
|
||||
|
||||
<div class="flex-container">
|
||||
<div class="first col w-1/3 lg:w-1/4">
|
||||
<div class="icon-and-sums flex flex-col sm:flex-row">
|
||||
<div class="relative">
|
||||
<img
|
||||
:src="`https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png`"
|
||||
class="champion-icon mb-2px sm:mb-0 sm:mr-2px"
|
||||
alt="example design"
|
||||
/>
|
||||
<span class="level absolute bottom-0 left-0 text-white font-bold">{{ data.level }}</span>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<div
|
||||
class="w-10 h-10 bg-blue-1000"
|
||||
:style="{background: `url(${require('@/assets/img/roles/Bot.png')}) center/cover`}"
|
||||
></div>
|
||||
<span class="text-xs text-teal-500 font-extrabold">LVL {{ data.level }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg mb-2px sm:mb-0 sm:mr-2px"
|
||||
:style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png')`}"
|
||||
></div>
|
||||
<div class="ml-2 flex flex-row sm:flex-col sm:justify-around">
|
||||
<div
|
||||
class="w-6 h-6 bg-blue-1000 rounded-md"
|
||||
:style="{background: `url(${data.firstSum}) center/cover`}"
|
||||
></div>
|
||||
<div
|
||||
class="w-6 h-6 bg-blue-1000 rounded-md"
|
||||
:style="{background: `url(${data.secondSum}) center/cover`}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="ml-1 flex flex-row sm:flex-col sm:justify-around">
|
||||
<div
|
||||
class="w-6 h-6 bg-blue-1000 rounded-md"
|
||||
:style="{background: `url(${data.primaryRune}) center/cover`}"
|
||||
></div>
|
||||
<div
|
||||
class="w-6 h-6 bg-blue-1000 rounded-md"
|
||||
:style="{background: `url(${data.secondaryRune}) center/cover`}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="ml-12 flex items-center">
|
||||
<div class="text-3xl font-extrabold text-teal-500">
|
||||
<span class>{{ data.kills }}</span>
|
||||
<span class>/</span>
|
||||
<span class>{{ data.deaths }}</span>
|
||||
<span class>/</span>
|
||||
<span class>{{ data.assists }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summonerSpells flex flex-row sm:flex-col">
|
||||
<img class="spell-icon mr-2px sm:mr-0 sm:mb-2px" :src="data.firstSum" alt="Ignite" />
|
||||
<img class="spell-icon" :src="data.secondSum" alt="Ignite" />
|
||||
|
||||
<div
|
||||
class="h-6 flex items-end text-sm text-white font-extrabold leading-none"
|
||||
>{{ data.gamemode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="second w-1/3 py-6 flex items-center">
|
||||
<div class="items flex flex-wrap">
|
||||
<div
|
||||
v-for="(item, index) in data.items"
|
||||
:key="index"
|
||||
:style="{background: item}"
|
||||
class="ml-1 w-8 h-8 rounded-md bg-blue-1000"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="ml-12 leading-none">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/img/icons/Creep.svg" alt="Minions" />
|
||||
<div class="ml-1 text-teal-300 text-lg font-bold">
|
||||
{{ data.minions }}
|
||||
<span class="font-normal">cs</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/img/icons/Gold.svg" alt="Gold" />
|
||||
<div class="ml-1 gold text-lg font-bold">
|
||||
{{ data.gold }}
|
||||
<span class="font-normal">gold</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/img/icons/Damage.svg" alt="Damage" />
|
||||
<div class="ml-1 damage text-lg font-bold">
|
||||
{{ data.damage }}
|
||||
<span class="font-normal">damage</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
|
||||
<div class="ml-1 kp text-lg font-bold">
|
||||
{{ data.kp }}
|
||||
<span class="font-normal">kp</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="champion-name hidden sm:block">{{ data.champ }}</span>
|
||||
</div>
|
||||
|
||||
<div class="second col hidden lg:block lg:w-1/4">
|
||||
<div class="map">{{ data.map }}</div>
|
||||
<div class="gamemode">{{ data.gamemode }}</div>
|
||||
</div>
|
||||
|
||||
<div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap">
|
||||
<div
|
||||
v-for="(item, index) in data.items"
|
||||
:key="index"
|
||||
:style="{background: item}"
|
||||
class="item"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="fourth w-1/6 lg:w-1/4 flex-col items-center justify-center sm:flex-row sm:justify-around"
|
||||
>
|
||||
<div
|
||||
class="score mb-2 sm:mb-0 font-bold"
|
||||
>{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</div>
|
||||
<div class="gold-farm text-center">
|
||||
<div class="gold flex items-center justify-center mb-2 sm:mb-0">
|
||||
{{ data.gold }}
|
||||
<v-icon name="coins" class="h-3 ml-1 text-blue-800" />
|
||||
</div>
|
||||
<div class="farm flex items-center justify-center">
|
||||
{{ data.minions }}
|
||||
<v-icon name="skull-crossbones" class="h-3 ml-1 text-blue-800" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="third w-1/3 py-6 flex items-center justify-around">
|
||||
<div class="duration-date hidden lg:block">
|
||||
<div class="duration">{{ data.time }}</div>
|
||||
<div class="date">{{ data.date }}</div>
|
||||
|
|
@ -82,6 +118,16 @@ export default {
|
|||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
matchResultClass() {
|
||||
return {
|
||||
'win': this.data.result === 'Win',
|
||||
'loss': this.data.result === 'Fail',
|
||||
'remake': this.data.result === 'Remake',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,66 +135,52 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.match {
|
||||
border-bottom: 1px solid #dae1e7;
|
||||
.loss {
|
||||
background-image: linear-gradient(
|
||||
89.21deg,
|
||||
rgba(140, 0, 0, 0.38) 0.09%,
|
||||
rgba(44, 82, 130, 0) 68.58%
|
||||
),
|
||||
linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
|
||||
}
|
||||
|
||||
.match .flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 8px;
|
||||
.win {
|
||||
background-image: linear-gradient(
|
||||
89.45deg,
|
||||
rgba(1, 97, 28, 0.38) -18.36%,
|
||||
rgba(44, 82, 130, 0) 85.07%
|
||||
),
|
||||
linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
|
||||
}
|
||||
|
||||
.match.win .match-container {
|
||||
border-left: 10px solid #48bb78;
|
||||
.remake {
|
||||
background-image: linear-gradient(
|
||||
89.45deg,
|
||||
rgba(233, 169, 75, 0.38) -1.14%,
|
||||
rgba(44, 82, 130, 0) 58.83%
|
||||
),
|
||||
linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
|
||||
}
|
||||
|
||||
.match.lose .match-container {
|
||||
border-left: 10px solid #f56565;
|
||||
.crop-champion {
|
||||
background-size: 74px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* First col */
|
||||
.match .first {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.items {
|
||||
width: 7rem;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
.champion-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: block;
|
||||
.gold {
|
||||
color: #f3a05a;
|
||||
}
|
||||
|
||||
.match .summonerSpells {
|
||||
margin: 0 8px 0 0;
|
||||
.damage {
|
||||
color: #e25656;
|
||||
}
|
||||
|
||||
.spell-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Second col */
|
||||
.match .second {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Third col */
|
||||
.match .third {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.third .item {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
|
||||
/* Fourth col */
|
||||
.match .fourth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.kp {
|
||||
color: #b78787;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
export const maps = { 10: 'The Twisted Treeline', 11: "Summoner's Rift", 12: 'Howling Abyss' }
|
||||
|
||||
export const 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)' }
|
||||
export const gameModes = { 76: 'URF', 100: 'ARAM', 400: 'DRAFT 5vs5', 420: 'Solo/Duo', 430: 'BLIND 5v5', 440: 'FLEX 5vs5', 460: 'BLIND 3vs3', 470: 'FLEX 3vs3', 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)' }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import summonersJSON from '@/data/summoner.json'
|
|||
* @param {Object} RiotData : all data from the Riot API
|
||||
* @param {Object} championsInfos : champions data from the Riot API
|
||||
*/
|
||||
export function createSummonerData(RiotData, championsInfos) {
|
||||
export function createSummonerData(RiotData, championsInfos, runesInfos) {
|
||||
console.log('--- ALL INFOS ---')
|
||||
console.log(RiotData)
|
||||
|
||||
|
|
@ -21,43 +21,71 @@ export function createSummonerData(RiotData, championsInfos) {
|
|||
soloQ.rankImgLink = getRankImg(soloQStats)
|
||||
soloQ.wins = soloQStats.wins
|
||||
soloQ.losses = soloQStats.losses
|
||||
soloQ.winrate = (soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
|
||||
soloQ.lp = soloQStats.leaguePoints
|
||||
soloQ.winrate = (soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
|
||||
soloQ.lp = soloQStats.leaguePoints
|
||||
}
|
||||
|
||||
const matchesInfos = []
|
||||
// Loop on all matches
|
||||
for (let i = 0; i < matches.length; i++) {
|
||||
const currentMatch = matches[i]
|
||||
const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
|
||||
const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId - 1
|
||||
|
||||
const teamId = currentMatch.participants[participantId - 1].teamId
|
||||
const win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
|
||||
const teamId = currentMatch.participants[participantId].teamId
|
||||
let win = currentMatch.teams.find((t) => t.teamId === teamId).win
|
||||
|
||||
// Match less than 5min
|
||||
if (currentMatch.gameDuration < 300) {
|
||||
win = 'Remake'
|
||||
}
|
||||
|
||||
const map = maps[currentMatch.mapId]
|
||||
let mode = gameModes[currentMatch.queueId]
|
||||
if (!mode)
|
||||
mode = 'Undefined gamemode'
|
||||
const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
|
||||
const role = currentMatch.participants[participantId - 1].timeline.lane
|
||||
const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId].championId)[0]
|
||||
const role = currentMatch.participants[participantId].timeline.lane
|
||||
const timeAgo = timeDifference(currentMatch.gameCreation)
|
||||
const time = secToTime(currentMatch.gameDuration)
|
||||
const kills = currentMatch.participants[participantId - 1].stats.kills
|
||||
const deaths = currentMatch.participants[participantId - 1].stats.deaths
|
||||
const assists = currentMatch.participants[participantId - 1].stats.assists
|
||||
const level = currentMatch.participants[participantId - 1].stats.champLevel
|
||||
const kills = currentMatch.participants[participantId].stats.kills
|
||||
const deaths = currentMatch.participants[participantId].stats.deaths
|
||||
const assists = currentMatch.participants[participantId].stats.assists
|
||||
const kda = ((kills + assists) / deaths).toFixed(2)
|
||||
const level = currentMatch.participants[participantId].stats.champLevel
|
||||
const damage = (currentMatch.participants[participantId].stats.totalDamageDealtToChampions / 1000).toFixed(1) + 'k'
|
||||
|
||||
const primaryRuneCategory = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkPrimaryStyle)
|
||||
let primaryRune
|
||||
for (const subCat of primaryRuneCategory.slots) {
|
||||
primaryRune = subCat.runes.find(r => r.id === currentMatch.participants[participantId].stats.perk0)
|
||||
if (primaryRune) {
|
||||
break
|
||||
}
|
||||
}
|
||||
primaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${primaryRune.icon}`
|
||||
let secondaryRune = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkSubStyle)
|
||||
secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
|
||||
|
||||
|
||||
const totalKills = currentMatch.participants.reduce((prev, current) => {
|
||||
if (current.teamId !== teamId) {
|
||||
return prev
|
||||
}
|
||||
return prev + current.stats.kills
|
||||
}, 0)
|
||||
const kp = ((kills + assists) * 100 / totalKills).toFixed(1) + '%'
|
||||
|
||||
const items = []
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const currentItem = 'item' + i
|
||||
items.push(getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
|
||||
items.push(getItemLink(currentMatch.participants[participantId].stats[currentItem]))
|
||||
}
|
||||
|
||||
const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'
|
||||
const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
|
||||
const gold = (currentMatch.participants[participantId].stats.goldEarned / 1000).toFixed(1) + 'k'
|
||||
const minions = currentMatch.participants[participantId].stats.totalMinionsKilled + currentMatch.participants[participantId].stats.neutralMinionsKilled
|
||||
|
||||
const firstSum = currentMatch.participants[participantId - 1].spell1Id
|
||||
const secondSum = currentMatch.participants[participantId - 1].spell2Id
|
||||
const firstSum = currentMatch.participants[participantId].spell1Id
|
||||
const secondSum = currentMatch.participants[participantId].spell2Id
|
||||
|
||||
matchesInfos.push({
|
||||
result: win,
|
||||
|
|
@ -65,12 +93,17 @@ export function createSummonerData(RiotData, championsInfos) {
|
|||
gamemode: mode,
|
||||
champ: champion,
|
||||
role: role,
|
||||
primaryRune,
|
||||
secondaryRune,
|
||||
date: timeAgo,
|
||||
time: time,
|
||||
kills: kills,
|
||||
deaths: deaths,
|
||||
assists: assists,
|
||||
kda,
|
||||
level: level,
|
||||
damage,
|
||||
kp,
|
||||
items: items,
|
||||
gold: gold,
|
||||
minions: minions,
|
||||
|
|
|
|||
|
|
@ -3,12 +3,16 @@ import { axios } from '@/plugins/axios'
|
|||
export const namespaced = true
|
||||
|
||||
export const state = {
|
||||
champions: []
|
||||
champions: [],
|
||||
runes: []
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
PUSH_CHAMPIONS(state, champions) {
|
||||
state.champions = champions
|
||||
},
|
||||
PUSH_RUNES(state, runes) {
|
||||
state.runes = runes
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +22,14 @@ export const actions = {
|
|||
const endpoint = 'Champion'
|
||||
const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
|
||||
commit('PUSH_CHAMPIONS', resp.data.data)
|
||||
}
|
||||
},
|
||||
|
||||
async getRunes({ commit }) {
|
||||
console.log('API CALL FOR RUNES')
|
||||
const endpoint = 'Rune'
|
||||
const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
|
||||
commit('PUSH_RUNES', resp.data)
|
||||
},
|
||||
}
|
||||
|
||||
export const getters = {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const actions = {
|
|||
try {
|
||||
const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
|
||||
if (resp.data) {
|
||||
const infos = createSummonerData(resp.data, rootState.ddragon.champions)
|
||||
const infos = createSummonerData(resp.data, rootState.ddragon.champions, rootState.ddragon.runes)
|
||||
commit('SUMMONER_FOUND', infos)
|
||||
} else {
|
||||
commit('SUMMONER_NOT_FOUND')
|
||||
|
|
|
|||
|
|
@ -152,12 +152,14 @@ export default {
|
|||
if (!this.areChampionsLoaded)
|
||||
await this.getChampions()
|
||||
|
||||
await this.getRunes()
|
||||
|
||||
this.summonerRequest({ summoner: this.summoner, region: this.region })
|
||||
},
|
||||
redirect(summoner, region) {
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
...mapActions('ddragon', ['getChampions']),
|
||||
...mapActions('ddragon', ['getChampions', 'getRunes']),
|
||||
...mapActions('summoner', ['summonerRequest'])
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,6 +248,7 @@ module.exports = {
|
|||
none: '0',
|
||||
sm: '.125rem',
|
||||
default: '.25rem',
|
||||
md: '.375rem',
|
||||
lg: '.5rem',
|
||||
full: '9999px',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
const DDragonRequest = require('../../DDragonRequest')
|
||||
|
||||
class DDragonRuneEndpoint {
|
||||
constructor(version) {
|
||||
this.version = version
|
||||
}
|
||||
|
||||
list() {
|
||||
return new DDragonRequest(
|
||||
`runesReforged.json`,
|
||||
'cdn',
|
||||
this.version
|
||||
).execute()
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DDragonRuneEndpoint
|
||||
|
|
@ -7,6 +7,7 @@ const SummonerEndpoint = require('./Endpoints/SummonerEndpoint')
|
|||
|
||||
const DDragonVersionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonVersionEndpoint')
|
||||
const DDragonChampionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonChampionEndpoint')
|
||||
const DDragonRuneEndpoint = require('./Endpoints/DDragonEndpoints/DDragonRuneEndpoint')
|
||||
|
||||
class Jax {
|
||||
constructor(key, env) {
|
||||
|
|
@ -30,6 +31,7 @@ class Jax {
|
|||
|
||||
this.DDragon = {
|
||||
Champion: new DDragonChampionEndpoint(this.version),
|
||||
Rune: new DDragonRuneEndpoint(this.version),
|
||||
Version: this.version
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue