Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formatted data calls and removed svg bg

Browse Source
This commit is contained in:
Alexis
2025-02-28 17:25:03 +01:00
parent d04cee2d12
commit 04940aacc3
4 changed files with 13 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
pages/my/index.vue
View File

@@ -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>

26
pages/my/worlds/[id].vue
View File

@@ -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>