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;

resources/js/components/WishPanel.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const panelOn = defineModel({default: false});
+
+function handleClose(event:KeyboardEvent) {
+    if (panelOn.value) if (event.key == 'Escape') panelOn.value = false;;
+}
+
+onMounted(() => {
+    window.addEventListener('keydown', handleClose);
+});
+</script>
+
+<template >
+    <template v-if="panelOn">
+        <div class="panel-container background" >
+
+        </div>
+        <div class="panel-container main-panel">
+
+
+        </div>
+    </template>
+</template>
+
+<style lang="css" scoped>
+
+.background {
+    height: 100%;
+    width: 100%;
+
+    filter: opacity(30%);
+
+    background-color: black;
+    z-index: 90;
+}
+
+.main-panel {
+    height: 90%;
+    width: 90%;
+
+    filter: opacity(85%);
+
+    border-radius: 10px;
+
+    background-color: black;
+}
+
+.panel-container {
+    position: absolute;
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    z-index: 100;
+}
+</style>