Formatted data calls and removed svg bg
This commit is contained in:
Alexis
@@ -5,9 +5,7 @@ import type { World } from "~/models/World";
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const { data: res } = await useFetch("/api/worlds/query")
|
||||
|
||||
const worlds = ref<World[]>(res.value?.data as World[])
|
||||
const { data: worlds } = await useLazyFetch<{ data: World[] }>("/api/worlds/query")
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-guard"]
|
||||
@@ -36,8 +34,10 @@ let worldChannel: RealtimeChannel
|
||||
|
||||
/** Handles world insertion realtime events */
|
||||
function handleInsertedWorld(newWorld: World) {
|
||||
if (!worlds.value?.data) return
|
||||
|
||||
try {
|
||||
worlds.value.push(newWorld)
|
||||
worlds.value?.data.push(newWorld)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
@@ -45,8 +45,10 @@ function handleInsertedWorld(newWorld: World) {
|
||||
|
||||
/** Handles world deletion realtime events */
|
||||
function handleDeletedWorld(id: number) {
|
||||
if (!worlds.value?.data) return
|
||||
|
||||
try {
|
||||
worlds.value.splice(worlds.value.findIndex(w => w.id === id))
|
||||
worlds.value.data.splice(worlds.value.data.findIndex(w => w.id === id))
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
@@ -68,7 +70,9 @@ onMounted(() => {
|
||||
break
|
||||
|
||||
case "UPDATE":
|
||||
worlds.value = (await $fetch("/api/worlds/query")).data as World[]
|
||||
if (!worlds.value?.data) return
|
||||
|
||||
worlds.value.data = (await $fetch("/api/worlds/query")).data as World[]
|
||||
break
|
||||
|
||||
default:
|
||||
@@ -101,7 +105,7 @@ function hideDeleteModal() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="p-8 after:fill-red-400">
|
||||
<main class="p-8">
|
||||
<Head>
|
||||
<Title>{{ $t("entity.world.namePlural") }}</Title>
|
||||
</Head>
|
||||
@@ -131,8 +135,8 @@ function hideDeleteModal() {
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
|
||||
<ul class="grid lg:grid-cols-3 gap-2">
|
||||
<li v-for="world in worlds" :key="world.id">
|
||||
<ul v-if="worlds?.data" class="grid lg:grid-cols-3 gap-2">
|
||||
<li v-for="world in worlds.data" :key="world.id">
|
||||
<UiCard
|
||||
class="w-full transition-all"
|
||||
:link="`/my/worlds/${world.id}`"
|
||||
@@ -179,29 +183,3 @@ function hideDeleteModal() {
|
||||
<WorldDialogDelete :world="markedWorld" :modal-state="isDeleteWorldModalOpen" @on-close="hideDeleteModal" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
main {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: clip;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 2.4rem;
|
||||
bottom: -5%;
|
||||
height: 75%;
|
||||
width: 100%;
|
||||
background-image: url('/images/galaxy.svg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
background-position-x: right;
|
||||
z-index: -1;
|
||||
mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -208,29 +208,3 @@ function hideDeleteModal() {
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
main {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: clip;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 2.4rem;
|
||||
bottom: -5%;
|
||||
height: 75%;
|
||||
width: 100%;
|
||||
background-image: url('/images/planet.svg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
background-position-x: right;
|
||||
z-index: -1;
|
||||
mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#6366f1" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.999 611.999" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M611.502,203.367c-3.889-53.216-30.921-100.838-93.276-125.006c-69.361-26.884-151.96-13.033-216.77,16.813
|
||||
c-67.784,31.216-151.313,93.935-171.682,171.605c-7.962,30.357-5.303,63.94,10.093,91.288
|
||||
c19.789,35.152,59.002,56.863,99.094,61.324c55.248,6.147,112.773-16.493,155.435-50.741c24.317-19.521,46.5-44.992,58.997-73.774
|
||||
c11.212-25.821,13.864-56.419,1.925-81.911c-16.243-34.679-54.683-49.835-91.121-44.132c-4.787,0.735-9.337,1.776-13.657,3.016
|
||||
c-4.322,1.234-8.419,2.662-12.295,4.256c-7.765,3.148-14.653,6.919-20.773,10.925c-6.109,4.03-11.447,8.348-16.022,12.747
|
||||
c-1.037,1.043-2.056,2.067-3.054,3.071c-1.08,1.074-2.021,2.094-2.964,3.1c-1.877,2.012-3.588,3.995-5.207,5.882
|
||||
c-3.208,3.799-5.955,7.307-8.307,10.499c-4.731,6.35-8.047,11.323-10.284,14.671c-1.1,1.684-1.934,2.961-2.494,3.817
|
||||
c-0.55,0.863-0.829,1.301-0.829,1.301c-0.92,1.449-0.97,3.367,0.036,4.894c1.366,2.076,4.157,2.652,6.233,1.285
|
||||
c0,0,0.433-0.285,1.288-0.846c0.846-0.567,2.108-1.413,3.772-2.529c3.307-2.238,8.187-5.589,14.48-9.753
|
||||
c6.333-4.129,14.012-9.048,23.248-13.695c2.175-1.069,4.431-2.096,6.846-3.028c2.399-0.946,4.893-1.86,7.522-2.638
|
||||
c5.229-1.598,10.883-2.863,16.803-3.589c2.961-0.352,5.978-0.597,9.027-0.671c3.05-0.067,6.128,0.03,9.183,0.299
|
||||
c10.759,1.003,24.149,4.372,30.659,13.714c4.245,6.092,4.815,14.123,3.391,21.409c-2.471,12.644-10.28,23.585-18.883,33.174
|
||||
c-30.278,33.744-74.119,56.946-119.526,60.718c-37.814,2.947-73.075-14.422-78.121-55.732
|
||||
c-3.607-29.523,10.253-58.809,29.349-81.612c26.954-32.186,60.518-59.114,98.754-76.011c14.09-6.227,28.7-11.46,43.667-15.311
|
||||
c39.803-10.321,86.856-13.345,125.381,3.353c36.924,16.004,60.458,52.144,59.714,92.483c-0.223,11.808-2.412,23.851-6.114,35.878
|
||||
c-3.66,12.037-8.996,24.017-15.499,35.56c-6.539,11.542-14.238,22.664-22.764,33.124C454.222,364.819,387.62,404.605,326.223,430.7
|
||||
c-74.109,31.498-215.664,68.734-268.588-17.843c-27.588-45.131-17.468-102.863-2.502-150.461c0.541-1.722,0.006-3.684-1.497-4.867
|
||||
c-1.942-1.528-4.754-1.193-6.282,0.748c0,0-1.277,1.622-3.752,4.764c-0.624,0.768-1.287,1.718-2.039,2.741
|
||||
c-0.746,1.027-1.563,2.153-2.451,3.375C17.106,299.452,2.396,336.089,0.264,373.622c-1.962,34.546,6.992,69.97,26.952,98.236
|
||||
c23.939,33.9,62.223,55.79,102.375,66.286c63.644,16.637,134.014,11.022,196.48-7.885c14.716-4.454,29.379-9.645,43.893-15.61
|
||||
c14.505-5.984,28.826-12.8,42.955-20.315c51.202-27.233,99.882-64.099,136.409-109.452
|
||||
C588.79,335.885,616.063,265.779,611.502,203.367z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><path fill="#6366f1" d="M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 817 B |
Reference in New Issue
Block a user