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

feat(matches): highlight mythic items

Browse source
This commit is contained in:
Valentin Kaelin 2020-12-13 20:06:17 +01:00
parent 50fbd1053a
commit 6bff24869d
1 changed files with 50 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
client/src/components/Match/MatchItems.vue
View file

@ -5,14 +5,26 @@
> >
<Tooltip v-for="(item, index) in items" :key="index"> <Tooltip v-for="(item, index) in items" :key="index">
<template v-slot:trigger> <template v-slot:trigger>
<div <div class="relative">
:style="{ backgroundImage: itemLink(item) }" <div
:class="[ :style="{ backgroundImage: itemLink(item) }"
oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', :class="[
{ 'cursor-pointer': item !== null }, oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8',
]" { 'cursor-pointer': item !== null },
class="bg-center bg-cover rounded-md bg-blue-1000" ]"
></div> class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000"
>
<div
v-if="isMythic(item)"
class="w-full h-full rounded-md mythic-inside"
></div>
</div>
<div
v-if="isMythic(item)"
class="absolute rounded-md mythic"
:class="oneRow ? 'mythic-sm' : 'mythic-xl'"
></div>
</div>
</template> </template>
<template v-if="item !== null" v-slot:default> <template v-if="item !== null" v-slot:default>
<div class="flex max-w-md p-2 text-xs text-left text-white select-none"> <div class="flex max-w-md p-2 text-xs text-left text-white select-none">
@ -59,6 +71,9 @@ export default {
}, },
methods: { methods: {
isMythic(item) {
return item && item.image.includes('t4')
},
itemLink(item) { itemLink(item) {
if (!item) { if (!item) {
return null return null
@ -78,6 +93,33 @@ export default {
</script> </script>
<style scoped> <style scoped>
.mythic {
background: linear-gradient(
195deg,
rgb(255, 197, 47) 0%,
rgb(255, 231, 146) 50%,
rgb(214, 128, 0) 100%
);
}
.mythic-sm {
top: -1px;
left: 1px;
width: calc(1.5rem + 2px);
height: calc(1.5rem + 2px);
}
.mythic-xl {
top: -2px;
left: 2px;
width: calc(2rem + 4px);
height: calc(2rem + 4px);
}
.mythic-inside {
box-shadow: rgb(26, 32, 44) 0px 0px 0px 1px inset;
}
.items-2-rows { .items-2-rows {
width: 7rem; width: 7rem;
height: 4.5rem; height: 4.5rem;