From 92af1d613649d1023da9c65b2eede62a2e591689 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 18 Nov 2025 14:56:28 +0100
Subject: [PATCH] feat(projects): scrolling projects

---
 .../projects/bottom-screen/background.png     | Bin 0 -> 197467 bytes
 .../projects/bottom-screen/project-square.png | Bin 0 -> 11959 bytes
 .../projects/bottom-screen/selector.png       | Bin 0 -> 16709 bytes
 .../Home/BottomScreen/Buttons/Buttons.vue     |  30 ++++----
 .../Projects/BottomScreen/Background.vue      |  17 +++++
 .../Projects/BottomScreen/BottomScreen.vue    |  10 +++
 .../Projects/BottomScreen/Projects.vue        |  71 ++++++++++++++++++
 .../Projects/TopScreen/TopScreen.vue          |   3 +
 app/pages/projects.vue                        |  17 +++++
 9 files changed, 131 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/images/projects/bottom-screen/background.png
 create mode 100644 app/assets/images/projects/bottom-screen/project-square.png
 create mode 100644 app/assets/images/projects/bottom-screen/selector.png
 create mode 100644 app/components/Projects/BottomScreen/Background.vue
 create mode 100644 app/components/Projects/BottomScreen/BottomScreen.vue
 create mode 100644 app/components/Projects/BottomScreen/Projects.vue
 create mode 100644 app/components/Projects/TopScreen/TopScreen.vue
 create mode 100644 app/pages/projects.vue

diff --git a/app/assets/images/projects/bottom-screen/background.png b/app/assets/images/projects/bottom-screen/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..de50e2c87e4aa4b459202523a1e8b574bc681d60
GIT binary patch
literal 197467
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

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/project-square.png b/app/assets/images/projects/bottom-screen/project-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbd000de79300b7802d86d7d4a764cbf9f84d542
GIT binary patch
literal 11959
zcmeHNJ!lj`6n+ynW-l=*Y;stMVhT}7qlg6LjtjX%F6e0!tB8e`fvAW@3}Pb$(kj^6
z3br<uYNZGYHrlGyVWEc#=gfvT?99#V&)ePE<Gh7qcHX?7@0&OCGB>%07gkqhrw>j8
zz-+78=<xQm`1tz(*q{29^Sr}0J1cee>CN$byyIQ3wQB&+cW3@yo#g#P*P5L+z}*Fa
z?FRtAxoG<<z^z4q@9O|(9|6p7Jb7_(i4RmZnroW?Cy$5^yYuwiZ7!U;*=jFOeVaM3
ze{ufkJMSfT39Ux$@{LLM^F-x6<0^grF+QG<_Tj_eVE-6Q3`+MTy<X2g*zI;R3<iK+
zzxrVe9ZjX*=QP>JK}$hJK(;*-0<!I)4_c|5;jscL0b*NVi#+fu*!Y#t78O<8`*j$6
z-`~qg6jRj<0Cj_9fE``Q)JNTHh9=K(GV-iOt}I(rkDR~2qiLy{Lh<G6;qvuO3I<u^
z4mIdYk%!5vN>TKS(6<(fDAN)m0n9}ql4E2}w28pDwz7xg;g<2WXRYdC#qc|MdxV`N
zeJ9ODQs=r}P!$zn(%q#PMRfQs#7CB36eQi1s2|tL-Hv5D&LFSxfEiW*;WTL#ND2Ub
zSF2T8)kqph*ZYr{C9QJ$6xsTiGcoRTQ#%bdP(jjEW82i(<fP+<%~_nBbWDkJY8q#Z
zjrszSl{w+z+cZrknK-0}AE!%ybb~2Xzo@@un77fLMyJfiIl~2&sdbvOaj;CeLgVo?
z;!I>}l?qbiX;`3inlt5)TI2!MIWy9I24$6qL#oqz5DG|&jq}qt1titR=`N#!q}a(F
zExuWZYkH;4`CA4BV5AMd6jShW{P>J)#uQ@seGpq@Kddd{)LVg9AvUZ8D7YjsyvfpA
zic^<1HoTIUOE4~CDa35-T>zoP(D7nl_)>^boTspP%$E3ni07F2EkFvh?5ZwFW=EUC
zgCvG2)!P)lN>R1pmBdOxRbWtsn2mjb@iV#B@nT;%RfuJZGGxYMVnddYSU5_?aE)Rc
zYhAJe;?!FKOCeS=&RoNfiRC(-4xGu1>FX5x4lra2fjF^6XY&371>v^n8_sa7yx(QU
k@^)OdzmX;8^hX&kvv}$4!l|t<J8L3lYk9TttiFE#AF41@LI3~&

literal 0
HcmV?d00001

diff --git a/app/assets/images/projects/bottom-screen/selector.png b/app/assets/images/projects/bottom-screen/selector.png
new file mode 100644
index 0000000000000000000000000000000000000000..48749ba148fce4a96c920c5f46658c872bd18653
GIT binary patch
literal 16709
zcmeI4O=uHA6vy9`Xl-jRDhQqg!Hc3Er3f}9G07oSgBNcVQEyVHN)WWA5yX=>5$n~X
zg4YUq_MmqUo)r85@h(c8xAJ6mI=ef&>1H?Se<7KjnfKnj_nVpQ&Q6jC=jI#JlLsb=
zXu8#`b#yw*uU$Kd)W_@9rp~CPPGe4eczbkNXDZjK?JCjBhf}{V?a=vymz$k7(e1-T
zEBA<g>7tddL^n?meP1A&c}%o_@#*^cQ@Ubev3YTc=-45CsqVAWw{+q7jaIup{%vZ{
z?&EuZetCaVo1|8)dZDXSclQ1pEkU%QkKn|53(BJ^E!mQ16QhU|;JUH60MA^#8&_ST
zy0|dwSMF>mQ$Xp%*LT(%9t^%w4Xa$xjnW;j)_UIE$YX$m&NL3pu`?#EXF<ri!Gz-x
z$cL|yf71T)zIGu80!0##X_>_b)(s{TpO{lL$r#H^!=VopQCxqrN@-@N=q07nXh@Dd
zPa8qVK*o$v$n=SrvCWWLnl1||A_D>-00N^&py+Es>|$^bxC_4=hpvVaaUS;quB#un
zQ|V`YArAYdc3Xi{a$~?5IeZPKkrUgJ%1uy3jO2k`Y;$VbXD6ht9J9doP`t}4H3{U^
z2JC_W2!H?xfB*=900@A9KLJ^o_-php$#=!FFe!XpP`Cq%QP@z^Y{S{QQF+F0FHZTX
zd@_NvjpsA+U4SU-TU73RSmCmr*M5Slt$xc~<XtxXdc&nTLS_FSRY*)xJ+0PyB2xO)
zd@N!*>lzu!^U<_0g6G>FzzFs!LIMF0009sH0T2KI5C8!X009sH0T2KI5C8!X0D))%
z1N#<fv<ri);e7$SwP0h!+`!|Fkx@SEShxMYz^1J+?tRx#;qs_0C$1~g5#_(j$4vmt
zAz~^F+ti4P!;Fc~gCDp063b--ynghF|5%{M{|jJyw*~n$vAz4eul-}<&k=66RiCfD
Im|Ix=3;Xa#tN;K2

literal 0
HcmV?d00001

diff --git a/app/components/Home/BottomScreen/Buttons/Buttons.vue b/app/components/Home/BottomScreen/Buttons/Buttons.vue
index ffe5519..3049093 100644
--- a/app/components/Home/BottomScreen/Buttons/Buttons.vue
+++ b/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,
-  initialButton: "game",
+  buttons: {
+    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')"
-    :opacity="getOpacity('game')"
+    :y="25 + getButtonOffset('projects')"
+    :opacity="getOpacity('projects')"
   />
   <DownloadPlayButton
     :x="128"
diff --git a/app/components/Projects/BottomScreen/Background.vue b/app/components/Projects/BottomScreen/Background.vue
new file mode 100644
index 0000000..933d6b1
--- /dev/null
+++ b/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>
diff --git a/app/components/Projects/BottomScreen/BottomScreen.vue b/app/components/Projects/BottomScreen/BottomScreen.vue
new file mode 100644
index 0000000..3d0edc0
--- /dev/null
+++ b/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>
diff --git a/app/components/Projects/BottomScreen/Projects.vue b/app/components/Projects/BottomScreen/Projects.vue
new file mode 100644
index 0000000..fe6598d
--- /dev/null
+++ b/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>
diff --git a/app/components/Projects/TopScreen/TopScreen.vue b/app/components/Projects/TopScreen/TopScreen.vue
new file mode 100644
index 0000000..e519b41
--- /dev/null
+++ b/app/components/Projects/TopScreen/TopScreen.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template></template>
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
new file mode 100644
index 0000000..ab98a1e
--- /dev/null
+++ b/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>