147 lines
3.5 KiB
Vue
147 lines
3.5 KiB
Vue
<script setup >
|
|
import {ref, onMounted} from 'vue';
|
|
import WishPanel from './WishPanel.vue';
|
|
|
|
const panelOn = ref(false);
|
|
const hover = ref(false);
|
|
|
|
const props = defineProps({
|
|
wish: Object,
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
small: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
index: {
|
|
type: Number,
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
function openWish() {
|
|
panelOn.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="small">
|
|
<div class="wish-main" @click="openWish">
|
|
<img :src="'/skonk/small/quest_backdrop_' + wish.icon_type + '.png'">
|
|
<div class="wish-sub" v-if="wish.icon_type <= 1">
|
|
<img :src="'/skonk/small/quest_backdrop_' + wish.icon_type + '_filter.png'" :style="'filter: hue-rotate(' + wish.color + 'deg) saturate(0.5);'">
|
|
</div>
|
|
<div class="wish-sub" v-if="wish.icon_type <= 1">
|
|
<img :src="'/skonk/small/quest_rune_' + wish.icon_rune + '.png'" >
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="large-container" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('selectedWish', index)">
|
|
<div style="position: relative; width: 100%; height: 100%;">
|
|
|
|
<div class="backdrop" >
|
|
<img v-if="hover || selected" :src="'/skonk/large/backdrop_filter.png'" :style="'height: 100%; width: 100%; filter: hue-rotate(' + wish.color + 'deg) saturate(0.8)'">
|
|
</div>
|
|
<template v-if="hover || selected">
|
|
<img :src="'/skonk/cursor_corner.png'" class="cursor">
|
|
<img :src="'/skonk/cursor_corner.png'" class="opposite-corner cursor ">
|
|
</template>
|
|
<div class="large-flex">
|
|
<img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon z-index-normal">
|
|
<div class="large-text">
|
|
<div class="large-text-title z-index-normal" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
|
|
Lorem Ipsum
|
|
</div>
|
|
<div class="z-index-normal">
|
|
{{ wish.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.backdrop {
|
|
position: absolute;
|
|
z-index: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
filter: opacity(20%);
|
|
}
|
|
.z-index-normal {
|
|
z-index: 10;
|
|
}
|
|
img.cursor{
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.opposite-corner {
|
|
rotate: 180deg;
|
|
right: 10px;
|
|
bottom: 0px;
|
|
}
|
|
.cursor {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.large-flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
}
|
|
.large-container {
|
|
display: absolute;
|
|
height: 100px;
|
|
margin: 10px;
|
|
}
|
|
.large-absolute {
|
|
display: absolute;
|
|
height: 100px;;
|
|
}
|
|
.large-text-title {
|
|
text-transform: uppercase;
|
|
font-size: 2.3vh;
|
|
margin-top: 15px;
|
|
}
|
|
.large-icon {
|
|
text-align: center;
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
|
|
margin: 10px;
|
|
}
|
|
.large-text {
|
|
display: flex;
|
|
font-size: 2vh;
|
|
flex-direction: column;
|
|
margin-left: 15px;
|
|
margin-bottom: 15px;
|
|
|
|
}
|
|
img.large {
|
|
width: 80px;
|
|
}
|
|
.wish-main {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
}
|
|
.wish-sub {
|
|
position: absolute;
|
|
}
|
|
.wish-filter {
|
|
filter: saturate(0.2);
|
|
}
|
|
</style> |