some frontend changes

resources/js/components/Wish.vue

@@ -1,13 +1,25 @@
-<script setup lang="ts">
+<script setup >
 import {ref, onMounted} from 'vue';
 import WishPanel from './WishPanel.vue';
 
 const panelOn = ref(false);
 const hover = ref(false);
 
-const props = defineProps(
-    ['wish']
-);
+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;
@@ -15,7 +27,7 @@ function openWish() {
 </script>
 
 <template>
-    <template v-if="wish.small">
+    <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">
@@ -27,8 +39,8 @@ function openWish() {
     </div>
     </template>
     <template v-else>
-        <div class="large-container" @mouseover="hover = true" @mouseleave="hover = false">
-            <div class="backdrop" v-if="hover">
+        <div class="large-container" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('selectedWish', index)">
+            <div class="backdrop" v-if="hover || selected">
                 <img :src="'/skonk/large/backdrop_filter.png'" :style="'width: 100%; height: 100%; filter: hue-rotate(' + wish.color + 'deg) saturate(0.8)'">
             </div>
             <img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon">
@@ -47,8 +59,6 @@ function openWish() {
             
         </div>
     </template>
-
-    <WishPanel v-model="panelOn"/>
 </template>
 
 <style scoped>