54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import {ref, onMounted} from 'vue';
|
|
import WishPanel from './WishPanel.vue';
|
|
|
|
const panelOn = ref(false);
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
rune: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
color: {
|
|
type: Number,
|
|
default: 0,
|
|
}
|
|
});
|
|
|
|
function openWish() {
|
|
panelOn.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="wish-main" @click="openWish">
|
|
<img :src="'/skonk/quest_backdrop_' + type + '.png'">
|
|
<div class="wish-sub" v-if="type <= 1">
|
|
<img :src="'/skonk/quest_backdrop_' + type + '_filter.png'" :style="'filter: hue-rotate(' + color + 'deg) saturate(0.5);'">
|
|
</div>
|
|
<div class="wish-sub" v-if="type <= 1">
|
|
<img :src="'/skonk/quest_rune_' + rune + '.png'" >
|
|
</div>
|
|
</div>
|
|
|
|
<WishPanel v-model="panelOn"/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wish-main {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
}
|
|
.wish-sub {
|
|
position: absolute;
|
|
}
|
|
.wish-filter {
|
|
filter: saturate(0.2);
|
|
}
|
|
</style> |