101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import {ref, onMounted} from 'vue';
|
|
import WishPanel from './WishPanel.vue';
|
|
|
|
const panelOn = ref(false);
|
|
const hover = ref(false);
|
|
|
|
const props = defineProps(
|
|
['wish']
|
|
);
|
|
|
|
function openWish() {
|
|
panelOn.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="wish.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">
|
|
<div class="backdrop" v-if="hover">
|
|
</div>
|
|
<img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon">
|
|
<div class="large-text">
|
|
<div class="large-text-title" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
|
|
Lorem Ipsum
|
|
</div>
|
|
<div>
|
|
{{ wish.title }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<WishPanel v-model="panelOn"/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.backdrop {
|
|
position: absolute;
|
|
background-color: red;
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: opacity(10%);
|
|
z-index: -1;
|
|
}
|
|
.large-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
margin: 10px;
|
|
}
|
|
.large-container:hover {
|
|
scale: 1.01;
|
|
|
|
}
|
|
.large-text-title {
|
|
text-transform: uppercase;
|
|
font-size: 2.3vh;
|
|
margin-top: 15px;
|
|
}
|
|
.large-icon {
|
|
text-align: center;
|
|
|
|
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> |