feat(projects): scrolling projects

app/components/Home/BottomScreen/Buttons/Buttons.vue

@@ -6,44 +6,40 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 
 const store = useHomeStore();
 
-const BUTTONS_CONFIG = {
-  game: [31, 23, 193, 49],
-  contact: [31, 71, 97, 49],
-  downloadPlay: [127, 71, 97, 49],
-} as const satisfies Record<string, ButtonConfig>;
-
-type ButtonType = keyof typeof BUTTONS_CONFIG;
-
 const { selectedButton, selectorPosition } = useButtonNavigation({
-  buttons: BUTTONS_CONFIG,
+  buttons: {
-  initialButton: "game",
+    projects: [31, 23, 193, 49],
+    contact: [31, 71, 97, 49],
+    downloadPlay: [127, 71, 97, 49],
+  },
+  initialButton: "projects",
   onButtonClick: (button) => {
     store.animateOutro(`/${button}`);
   },
   navigation: {
-    game: {
+    projects: {
       down: "last",
       left: "contact",
       right: "downloadPlay",
       horizontalMode: "preview",
     },
     contact: {
-      up: "game",
+      up: "projects",
       right: "downloadPlay",
     },
     downloadPlay: {
-      up: "game",
+      up: "projects",
       left: "contact",
     },
   },
 });
 
-const getButtonOffset = (button: ButtonType) => {
+const getButtonOffset = (button: (typeof selectedButton)["value"]) => {
   if (selectedButton.value === button) return store.outro.buttonOffsetY;
   return 0;
 };
 
-const getOpacity = (button?: ButtonType) => {
+const getOpacity = (button?: (typeof selectedButton)["value"]) => {
   if (store.isIntro) return store.intro.stage1Opacity;
   if (selectedButton.value === button) return 1;
   if (store.isOutro) return store.outro.stage1Opacity;
@@ -54,8 +50,8 @@ const getOpacity = (button?: ButtonType) => {
 <template>
   <GameButton
     :x="33"
-    :y="25 + getButtonOffset('game')"
+    :y="25 + getButtonOffset('projects')"
-    :opacity="getOpacity('game')"
+    :opacity="getOpacity('projects')"
   />
   <DownloadPlayButton
     :x="128"

app/components/Projects/BottomScreen/Background.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/projects/bottom-screen/background.png"
+    hidden
+  />
+</template>

app/components/Projects/BottomScreen/BottomScreen.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Background from "./Background.vue";
+import Projects from "./Projects.vue";
+</script>
+
+<template>
+  <Background />
+
+  <Projects />
+</template>

app/components/Projects/BottomScreen/Projects.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import gsap from "gsap";
+
+const selectorImage = useTemplateRef("selectorImage");
+const projectSquareImage = useTemplateRef("projectSquareImage");
+
+const projects = ["a", "b", "c", "d", "e", "f", "g", "h"];
+let currentProject = 0;
+const offsetX = ref(0);
+
+useRender((ctx) => {
+  if (!selectorImage.value || !projectSquareImage.value) return;
+
+  const startIndex = Math.max(currentProject - 3, 0);
+  const endIndex = Math.min(currentProject + 3 + 1, projects.length);
+
+  for (let i = startIndex; i < endIndex; i += 1) {
+    const offsetFromCenter = i - currentProject;
+    const x = 101 + 69 * offsetFromCenter + offsetX.value;
+
+    ctx.drawImage(projectSquareImage.value, x, 81);
+  }
+
+  ctx.drawImage(selectorImage.value, 96, 76);
+
+  ctx.font = "10px NDS10";
+  ctx.fillText(projects[currentProject]!, 20, 20);
+});
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  let from = 0;
+  if (e.key === "ArrowRight" && currentProject < projects.length - 1) {
+    currentProject += 1;
+    from = 69;
+  }
+  if (e.key === "ArrowLeft" && currentProject > 0) {
+    currentProject -= 1;
+    from = -69;
+  }
+
+  if (from != 0) {
+    gsap.fromTo(
+      offsetX,
+      {
+        value: from,
+      },
+      {
+        value: 0,
+        duration: 0.075,
+        ease: "none",
+      },
+    );
+  }
+};
+
+onMounted(() => window.addEventListener("keydown", handleKeyDown));
+onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
+</script>
+
+<template>
+  <img
+    ref="selectorImage"
+    src="/assets/images/projects/bottom-screen/selector.png"
+    hidden
+  />
+  <img
+    ref="projectSquareImage"
+    src="/assets/images/projects/bottom-screen/project-square.png"
+    hidden
+  />
+</template>

app/components/Projects/TopScreen/TopScreen.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template></template>

app/pages/projects.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <template #top>
+      <ProjectsTopScreen />
+    </template>
+
+    <template #bottom>
+      <ProjectsBottomScreen />
+    </template>
+  </NuxtLayout>
+</template>