add new assets and refactor public folder

resources/js/components/Wish.vue

@@ -1,42 +1,43 @@
 <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">
+    <div class="wish-main" @click="openWish">
         <img :src="'/skonk/quest_backdrop_' + type + '.png'">
-        <div class="wish-sub" v-if="type <= 2">
+        <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 <= 2">
-            <img :src="'/skonk/quest_rune_' + rune + '.png'">
+        <div class="wish-sub" v-if="type <= 1">
+            <img :src="'/skonk/quest_rune_' + rune + '.png'" >
         </div>
     </div>
+
+    <WishPanel v-model="panelOn"/>
 </template>
 
-<script lang="ts">
-    const types = ref(['/skonk/quest_backdrop_1.png'], )
-
-    export default {
-        props: {
-            type: {
-                type: Number,
-                default: 1,
-            },
-            rune: {
-                type: Number,
-                default: 1,
-            }, 
-            color: {
-                type: Number,
-                default: 0,
-            }
-        },
-        setup(props) {
-        }
-    }
-</script>
-
 <style scoped>
 .wish-main {
     position: relative;