some frontend changes

resources/js/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
  <footer>
-    <img :src="'skonk/board/bottom/Quest_Board_bottom_fleur0005.png'">
+    <img :src="'skonk/board/bottom/Quest_Board_bottom_fleur0005.png'" style="width: 100%;">
  </footer>
 </template>
 
@@ -11,7 +11,9 @@
 <style scoped>
 footer {
     position: fixed;
+    width: 100%;
     bottom: 0;
+    z-index: 300;
     padding: 0;
     background: var(--background-color);
     background: linear-gradient(0deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);

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>

resources/js/components/WishPanel.vue

@@ -1,10 +1,17 @@
-<script setup lang="ts">
+<script setup>
 import { onMounted } from 'vue';
 
-const panelOn = defineModel({default: false});
+const emit = defineEmits(['closeWish']);
+const props = defineProps({
+    selected: {
+        type: Boolean,
+        default: false,
+    },
+    wish: Object,
+});
 
-function handleClose(event:KeyboardEvent) {
-    if (panelOn.value) if (event.key == 'Escape') panelOn.value = false;;
+function handleClose(event) {
+   if (event.key == 'Escape') emit('closeWish');
 }
 
 onMounted(() => {
@@ -13,46 +20,29 @@ onMounted(() => {
 </script>
 
 <template>
-    <template v-if="panelOn">
-        <div class="panel-container background" >
-
-        </div>
         <div class="panel-container main-panel">
-
+            <h1>{{ wish.title }}</h1>
 
         </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%);
+    width: 100%;
+    margin: 30px;
 
     border-radius: 10px;
-
-    background-color: black;
 }
 
-.panel-container {
-    position: absolute;
+h1 {
+    font-size: 2vh;
+}
 
+
+.panel-container {
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
 
     z-index: 100;
 }

resources/js/pages/HomeView.vue

@@ -3,10 +3,12 @@ import Wish from '../components/Wish.vue';
 import {ref, onMounted} from 'vue';
 import axios from 'axios';
 import TopFleur from '../components/TopFleur.vue';
+import WishPanel from '../components/WishPanel.vue';
 
 let interval;
 
 const wishes = ref([]);
+const selected = ref(-1);
 
 const call = () => {
     axios
@@ -16,6 +18,10 @@ const call = () => {
     })
 }
 
+function selectedWish(index) {
+    selected.value = index;
+}
+
 onMounted(() => {
     call();
     interval = setInterval(call, 10000);
@@ -26,8 +32,9 @@ onMounted(() => {
 <template>
     <TopFleur></TopFleur>
     <body>
-        <template v-for="wish in wishes">
-            <Wish :wish="wish"/>
+        <template v-for="(wish, i) in wishes">
+            <Wish :wish="wish" :selected="selected==i" :index="i"  @selectedWish="selectedWish" v-if="selected == i || selected == -1"/>
+            <WishPanel :wish="wish" v-if="selected == i" @closeWish="selected = -1"></WishPanel>
         </template>
     </body>
 </template>