Improve/roadmap page

app/components/ImageCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+  img: string;
+  date?: string;
+}>()
+
+const dateStamp = computed(() => {
+  return props.date ? props.date : "Date not found"
+})
+
+</script>
+
+<template>
+  <div
+    class="flex flex-col bg-white relative w-[280px] px-2 pt-2 pb-10 items-center justify-center -rotate-z-12 gap-10 z-50 right-32">
+    <img :src="props.img" class="size-[280px]">
+    <p>{{ dateStamp }}</p>
+  </div>
+</template>
+
+<style scoped>
+p {
+  color: black
+}
+</style>

app/components/index/Roadmap/RoadmapStack.vue

@@ -2,8 +2,8 @@
 const props = defineProps<{
   isReversed: boolean;
   imgSource: string;
-  header: string;
-  body: string;
+  title: string;
+  description: string;
 }>();
 
 const flexDir = ref(props.isReversed ? "row-reverse" : "row");
@@ -16,8 +16,8 @@ const flexDir = ref(props.isReversed ? "row-reverse" : "row");
   >
     <img :src="props.imgSource" class="flex flex-1 max-w-screen h-[320px] lg:size-[360px] rounded-lg" >
     <div class="flex flex-col justify-center flex-1 lg:w-[360px]">
-      <HeadingGlow :level="3" :text="props.header" class="text-2xl lg:text-4xl text-start" />
-      <p class="text-start">{{ props.body }}</p>
+      <HeadingGlow :level="3" :text="props.title" class="text-2xl lg:text-4xl text-start" />
+      <p class="text-start">{{ props.description }}</p>
     </div>
   </div>
 </template>

app/components/index/RoadmapSection.vue

@@ -1,10 +1,11 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
+import type { MockRoadmap } from "#imports"
 const { userAuth } = useAuthState();
 
-const items = ref([]);
+const items = ref<MockRoadmap | T>([]);
 
 onMounted(async () => {
-  const results = await useFetchRoadmap();
+  const results = await useFetchRoadmapRange("3");
 
   if (!userAuth.value) {
     items.value = getMockRoadmap();
@@ -19,28 +20,28 @@ onMounted(async () => {
     <HeadingGlow :level="2" text="Roadmap" class="text-4xl lg:text-7xl" />
     <p class="text-sm lg:text-lg">Lists of accomplished goals</p>
     <section 
-      v-for="(item, index) in items" 
+      v-for="(item, index) in items"
       :key="index"
       class="px-6 pt-10 lg:px-20 lg:pt-20 mb-10 w-full max-w-screen flex flex-col"
     >
-      <RoadmapStack 
-        v-if="!userAuth" 
-        :is-reversed="evenOrOdd(index)" 
-        :img-source="item.img" 
-        :header="item.header"
-        :body="item.body"
+      <RoadmapStack
+        v-if="!userAuth"
+        :is-reversed="evenOrOdd(index)"
+        :img-source="item.img"
+        :title="item.title"
+        :description="item.description"
       />
       <RoadmapStack
         v-if="userAuth"
-        :is-reversed="evenOrOdd(index)"
+        :is-reversed="evenOrOdd(index)" 
         :img-source="item.images.image_url"
-        :header="item.header" 
-        :body="item.body"
+        :title="item.title"
+        :description="item.description"
       />
     </section>
-    <UButton
+    <UButton 
       label="See More..."
-      trailing-icon="i-lucide-arrow-right" 
+      trailing-icon="i-lucide-arrow-right"
       variant="subtle"
       :block="false"
       @click="navigateTo('/roadmap')"

app/components/roadmap/RoadmapCard.vue

@@ -1,30 +1,19 @@
-<script setup lang="ts">
-const props = defineProps<{
-  headings: string;
-  description: string;
-  imgUrl?: string;
-}>();
+<script setup lang="ts" generic="T">
+import type { MockRoadmap } from '#imports';
+
+const props = defineProps<MockRoadmap>();
 </script>
 
 <template>
-  <UCard
-    variant="solid"
-    class="max-w-screen w-full lg:w-[1000px] bg-mocha-base flex flex-col items-center text-center"
-  >
-    <NuxtImg
-      v-if="props.imgUrl"
-      v-slot="{ src, isLoaded, imgAttrs }"
-      alt="image"
-      :src="imgUrl"
-      width="400"
-      height="400"
-      :custom="true"
-    >
-      <img v-if="isLoaded" v-bind="imgAttrs" :src="src" >
-
-      <USkeleton v-else class="w-[400px] h-[400px]" alt="skeleton loader"/>
-    </NuxtImg>
-    <h2 class="text-3xl font-bold">{{ props.headings }}</h2>
-    <p class="text-sm lg:text-lg">{{ props.description }}</p>
-  </UCard>
+  <div class="flex flex-row justify-between">
+    <ImageCard :img="props.img" :date="props.date" />
+    <UIcon v-if="props.done" name="i-lucide-paw-print" class="size-[150px] z-10 text-latte-peach left-10 top-24 relative -rotate-z-12"/>
+  </div>
+  <div
+    class="relative max-w-screen w-full lg:w-[1000px] bg-mocha-base flex flex-col items-center text-center p-20 bottom-56">
+    <div class="flex flex-col gap-5 px-32">
+      <h2 class="text-3xl font-bold">{{ props.title }}</h2>
+      <p class="text-sm lg:text-lg">{{ props.description }}</p>
+    </div>
+  </div>
 </template>

app/components/visuals/GeneratedStars.vue

@@ -1,24 +1,53 @@
-<script setup lang="ts">
+<script setup>
 import * as THREE from "three";
 
-const stars: THREE.Mesh[] = [];
+let scene, camera, light, renderer
 
-const geometry = new THREE.SphereGeometry(0.1, 32, 16);
-const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+onMounted(async () => {
+  init()
+  animate()
+  document.body.onScroll = moveCamera;
+});
 
-for (let i = 0; i < 200; i++) {
-  const star = new THREE.Mesh(geometry, material);
-  const [x, y, z] = Array(3)
-    .fill(0)
-    .map(() => THREE.MathUtils.randFloatSpread(200));
-  star.position.set(x, y, z);
+function init() {
+  scene = new THREE.Scene()
+  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
+  camera.position.set(0, 0, 12)
 
-  stars.push(star);
+  light = new THREE.AmbientLight(0xffffff, 1)
+
+  scene.add(camera, light)
+
+  const canvas = document.querySelector("#bg")
+  renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(window.innerWidth, window.innerHeight)
+
+  generateStars(scene)
+}
+
+function animate() {
+  requestAnimationFrame(animate)
+
+  renderer.render(scene, camera)
+}
+
+function moveCamera() {
+  const t = document.getBoundingClientRect().top
+
+  camera.position.y = t * 0.017
 }
 </script>
 
 <template>
-  <template v-for="s in stars">
-    <primitive :object="s" />
-  </template>
+  <canvas id="bg" />
 </template>
+
+<style scoped>
+canvas {
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -9999;
+}
+</style>

app/composables/fetch/useFetchRoadmap.ts

@@ -1,14 +1,44 @@
 import type { Database } from "~/types/database.types";
 
+/** 
+ * Use to fetch data via ascending order at roadmap page.
+ *
+ * @returns {any[]} data - Data from the table based on the schema.
+ */
 export async function useFetchRoadmap() {
   const client = useSupabaseClient<Database>();
 
   const { data, error } = await client
-    .from("index_roadmap")
+    .from("roadmap")
     .select(`*, images (id, image_url, unique_id)`)
     .order("index", { ascending: true });
 
   if (error) throw error;
 
   return data;
 }
+
+
+/** 
+ * Use to fetch data in the home page.
+ *  
+ * @param {string} range - Range of items that can be fetched
+ *
+ * @returns {any[]} data - Data from the table based on the schema.
+ *
+ * @example
+ * const foo = useFetchRoadmapRange("4")
+ */
+export async function useFetchRoadmapRange(range: string) {
+  const client = useSupabaseClient<Database>();
+
+  const { data, error } = await client
+    .from("roadmap")
+    .select(`*, images (id, image_url, unique_id)`)
+    .lte("index", range)
+    .order("index", { ascending: true });
+
+  if (error) throw error;
+
+  return data;
+}

app/composables/index.ts

@@ -1,6 +1,6 @@
 export { useFetchImage, useFetchImageWithDate } from "./fetch/useFetchImage";
 export { useFetchDimDate } from "./fetch/useFetchDimDate";
-export { useFetchRoadmap } from "./fetch/useFetchRoadmap";
+export { useFetchRoadmap, useFetchRoadmapRange } from "./fetch/useFetchRoadmap";
 export { useFetchMemories } from "./fetch/useFetchMemories";
 
 export { useInsertDatePlan } from "./insert/useInsertDatePlan";

app/layouts/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="w-full bg-mocha-crust pointer-none">
+  <main class="w-full flex items-center justify-center bg-mocha-crust pointer-none h-screen">
     <slot />
   </main>
 </template>

app/pages/gallery.vue

@@ -6,6 +6,7 @@ definePageMeta({
 
 <template>
   <main class="flex flex-col gap-64">
+    <GeneratedStars/>
     <GalleryHero class="z-10" />
     <section class="flex flex-col gap-2 z-20 pb-24">
       <GalleryImages />

app/pages/roadmap.vue

@@ -1,77 +1,54 @@
-<script setup>
-import * as THREE from "three"
+<script setup lang="ts" generic="T">
+import type { MockRoadmap } from "#imports"
 
 definePageMeta({
   colorMode: "dark"
 })
 
-const items = ref([]);
+const { userAuth } = useAuthState();
 
-let scene, camera, light,  renderer
+const items = ref<MockRoadmap | T>([]);
 
 onMounted(async () => {
-  items.value = getMockRoadmap();
+  const results = await useFetchRoadmap();
 
-  init()
-  animate()
-  document.body.onScroll = moveCamera;
-});
-
-function init() {
-  scene = new THREE.Scene()
-  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
-  camera.position.set(0, 0, 12)
-
-  light = new THREE.AmbientLight(0xffffff, 1)
-
-  scene.add(camera, light)
-
-  const canvas = document.querySelector("#bg")
-  renderer = new THREE.WebGLRenderer({canvas: canvas, alpha: true})
-  renderer.setPixelRatio(window.devicePixelRatio)
-  renderer.setSize(window.innerWidth, window.innerHeight)
-
-  generateStars(scene)
-}
-
-function animate() {
-  requestAnimationFrame(animate)
-
-  renderer.render(scene, camera)
-}
-
-function moveCamera() {
-  const t = document.getBoundingClientRect().top
-
-  camera.position.y = t * 0.017
-}
+  if (!userAuth.value) {
+    items.value = getMockRoadmap();
+  } else {
+    items.value = results
+  }
+})
 </script>
 
 <template>
   <main class="flex flex-col items-center justify-center mt-32 pb-32">
-    <canvas id="bg"/>
-    <section class="text-center mb-10">
+    <GeneratedStars />
+    <section class="text-center gap-5 flex flex-col mb-5">
       <h1 class="text-5xl lg:text-6xl text-latte-primary font-bold">Roadmap</h1>
       <p class="text-sm lg:text-lg">
         A roadmap of our milestones and accomplishments as partner
       </p>
     </section>
-    <section class="px-4">
+    <div v-if="!userAuth">
       <RoadmapCard
         v-for="(item, index) in items"
         :key="index"
-        :headings="item.header"
-        :description="item.body"
-        class="mt-5 lg:mt-10"
+        :img="item.img"
+        :title="item.title"
+        :description="item.description"
+        :done="item.done"
       />
-    </section>
+    </div>
+    <div v-else>
+      <RoadmapCard
+        v-for="(item, index) in items"
+        :key="index"
+        :img="item.images.image_url"
+        :title="item.title"
+        :description="item.description"
+        :done="item.done"
+        :date="item.date"
+      />
+    </div>
   </main>
 </template>
-
-<style scoped>
-canvas {
-  top: 0;
-  left: 0;
-  position: fixed;
-}
-</style>