add axios, some db changes

resources/js/components/Wish.vue

@@ -6,7 +6,7 @@
     <div class="wish-main">
         <img :src="'/skonk/quest_backdrop_' + type + '.png'">
         <div class="wish-sub" v-if="type <= 2">
-            <img :src="'/skonk/quest_backdrop_' + type + '_filter.png'" :style="'filter: hue-rotate(' + color + 'deg);'">
+            <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'">
@@ -47,4 +47,7 @@
 .wish-sub {
     position: absolute;
 }
+.wish-filter {
+    filter: saturate(0.2);
+}
 </style>

resources/js/pages/HomeView.vue

@@ -1,14 +1,45 @@
-<script lang="ts" setup>
+<script setup>
     import Wish from '../components/Wish.vue';
     import {ref, onMounted} from 'vue';
+    import axios from 'axios';
+
 </script>
-<script lang="ts">
-    const wishes = ref();
+<script>
+    let interval;
+
+    export default {
+        setup()
+        {
+            const wishes = ref([])
+
+            return {
+                wishes,
+            }
+        },
+
+        mounted() { 
+            const call = () => {
+                axios
+                .get('/api/get_wishes')
+                .then(response => {
+                    this.wishes = response.data;
+                })
+            }
+
+            call();
+            interval = setInterval(call, 30000);
+        }
+    }
+
+    
+
 </script>
 
 <template>
     <body>
-        <Wish rune="1" color="200"/>
-        <Wish type="1" rune="1"/>
+        <template v-for="wish in wishes">
+            <Wish :rune="wish.rune" :type="wish.type" :color="wish.color"/>
+            {{ wish.title }}
+        </template>
     </body>
 </template>