From 5ac696f11bce24ba7e909eb78ec57110add5fa33 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Wed, 12 Nov 2025 17:57:31 +0100
Subject: [PATCH] feat: animated button selector

---
 .../home/bottom-screen/buttons/corner.png     | Bin 0 -> 687 bytes
 .../bottom-screen/buttons/largeSelector.png   | Bin 38156 -> 0 bytes
 .../bottom-screen/buttons/smallSelector.png   | Bin 19311 -> 0 bytes
 .../Home/BottomScreen/Buttons/Buttons.vue     |  44 +++++++++--
 .../Buttons/DownloadPlayButton.vue            |  20 +----
 .../Home/BottomScreen/Buttons/GameButton.vue  |  20 +----
 .../BottomScreen/Buttons/PictochatButton.vue  |  20 +----
 .../Home/BottomScreen/Buttons/Selector.vue    |  73 ++++++++++++++++++
 8 files changed, 122 insertions(+), 55 deletions(-)
 create mode 100644 app/assets/images/home/bottom-screen/buttons/corner.png
 delete mode 100644 app/assets/images/home/bottom-screen/buttons/largeSelector.png
 delete mode 100644 app/assets/images/home/bottom-screen/buttons/smallSelector.png
 create mode 100644 app/components/Home/BottomScreen/Buttons/Selector.vue

diff --git a/app/assets/images/home/bottom-screen/buttons/corner.png b/app/assets/images/home/bottom-screen/buttons/corner.png
new file mode 100644
index 0000000000000000000000000000000000000000..b392115238ad223678b8a04637ebad26af2525cd
GIT binary patch
literal 687
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s#=yXMZ?*ddAcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxHxIv|hJ|jM83O|otEY=&h=e5LFGkjX4C~gd
z`ws#PU;?NC%wPgB7~w+b945E4I*<x5U;&YgKmevedXQy7g1crlL5y`xtp&;d2MNLe
zsx44sK$0jDaMd6qU>q0?b^(Y3wg@T;7lb(tBo6i$Q~`nly9t}K&^?0Cf?$E{#BMA?
s4GIhHFqkOF1Y}3T#2IHdlV&nW&gkCk?seFE@mi2=p00i_>zopr0IYa%O8@`>

literal 0
HcmV?d00001

diff --git a/app/assets/images/home/bottom-screen/buttons/largeSelector.png b/app/assets/images/home/bottom-screen/buttons/largeSelector.png
deleted file mode 100644
index 6842e110540b170bc7cf766784e968dde2b45dc8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 38156
zcmeI4O=}ZD7=Yg`(bm)=XhHCx1)&EKQ4bzO(Uim{Vyf0&yj4Yew52LVsD|jplO9FA
ziPwN9p*N5H1By4rOBMVBexN%WW;<+mTUuw5-Rv_E=3^)C$1^iKli8g-xim38RNPk-
zk)c|(Jn6^p{m-$1?IPar$3J`gj5j|yKIVN|KK#(n6lO~GlE~YqgTJqB^YbG&s*`n*
z`=cU_$09%dqQ;8I-J>Gkr$tUa7uh@eYU%PR|H6*h>eYFXBL~&TTX=Kko?qC1r&h1@
ze;eF6R2=>M`q_*xQflSW)Pg64=C4I*wOW5w@T*!6q1-TGT}4}<Yx$1M?y6YV%tHBL
z!m_)e+%RETffA==_c@S@$W0Q+d?S0N2c91`37~7$O}o2h1d1V$QUX0Ouruj|d1vZ7
zck4k)JIKanDcgfphME^t*!U~ysL{4IJNBl78dg960uYENP`SD2WH%;Wo83}ndoYoy
zsaXZP;@wGWTidob^J}5Nf#`Z@=|xkrw6t*7)^;VUo)gD9*g8_<K?S=ik+vQI#anaF
z<WOGExvX5H(`TinuoD6hfB*z?Mc~TZg%SNOK&~85v$HH$yVN@7ay8h$i2kDMl3lq|
ztGTm<(ZQxyy<daZYJ=?}b6DsL>>+6qcH=nKg=nkTRf#l{KpbmNZ^o<PpaUa7ldv0`
zBS1GsFc~W~`bjhJ?Ls%D#W4;Wz^q8Ra|FWQ1oZsQL06j0+fipVqYVNOfB*y_009U<
z00Izz00bZa0SMS8aQ5q=54;Otn=0}g6JTf5G2kTedS{f!lSzaem#=v`=2#!%69|M)
z$JCI}A)zkC|4BgeRk0RT&<Q;xbe`BgfjGwDBy6hVQKd=4UfS&WT59Z@a{8hfa{$n!
zK|1XORA-O7<3#ON{W_e7qZi3TATI>MwUBl=>5lKce59)oLm>48l9rQkGXyh1>YEb-
zT@zpsxF(Ez2tWV=5P(2W5m;G1Fu=P2J=LT*0|5v?00Izz00bZa0SG_<0uX=z1Rwwb
z2tWV=5P$##AOHafKmY<cCvbY#yNe>j$7|)%RL)W0{we`)|L!k8R<ooakW&I{&R!;+
zxXCFW-0m>~(GxeEz3j0D#+|JZ;Ka?=xbdwXBCuvTl;j)Bq$Dzwr;$K(*^^`=%b_GP
al;?`TiN@&l+U@hf-%Qjh6Xn*}bn_pt(_V-G

diff --git a/app/assets/images/home/bottom-screen/buttons/smallSelector.png b/app/assets/images/home/bottom-screen/buttons/smallSelector.png
deleted file mode 100644
index e457b6393677c6451267b0c574df26ed92b990c2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 19311
zcmeI4J!lj`6vy9$)#$~u5(FzjNF{!>BFKe1b0=IdhmD1hC~6ysN)Xh12$CvoP%FXG
zQwy6w8ao@Yu@E~ewXl<b2s&?%H|)nOx4G;tvv>c2V|HfWy!pT1?99!u$E{zUnXXoj
zRfwqCYSueCpVyzW2lf-G?TwxHx}X+2(^Klphm((V!Mj~+*NEP3O#GeSr_0B0G&^mg
z`;$b=kBR>1s^#xQch3<0oFh87Npy7K`PS@tedFLl^XekesT2HBOD`|n)0N|QTJ6U8
zkBLLo!`|%cBTuwTYSn93mXvyN>DoK$cDw&LY16*R*qMvIO?n2qwNL3bQ?uP_H1_7A
zj~ruXF8Va!+iW|Q!p?b<+=EuZ9+Xa5Aqo1;$|w9}N1%{_&!v;#lQnkn*2C<WL_D!?
ze-+_*!6|Zo;9}2PcK!wyf`%ZFl0f6;gH*enl<q=i?AxDcJheH6?(U(`^Vaj1`&#68
z5M7V9o~}}sOUE8ygqkuLn^u48#N)v!)WY!s>lNL(40RFlmkoLmOwb1ifPiZRhGL2J
z_Z-o0LDxtp=@H#SvF!*wP7<+;`zF?A`<C`(I7Gb5xlOB*4L<K!C6!?WBp81(vv4_G
zyDC0OqX|Ihmn}Dw*k$rIsJ01hvqK#SfB*=900@A<C=z({_1m`m7GM<PFKNuB-<g)`
zco}?1VyCm<%`#n^(-|KYB)J-Z=;K^8dU7E{B4rnIn?^H<gMwW>Y6i)RUOxa^WMUw>
zt1k^jpKCe8PRrHIW7mQhB|T;>lAx2Gc=c>eOpvD_khC1yW(a0N3ZQwLU=Z>q4F4bi
z0w4eaAOHd&00JNY0w4eaAOHd&00JN|5P_YKzdjRHUh)3|4CDZfKwwA-#9nnKz2F(r
z_zMp!`htgf<K05x!w~NfgAiv@cuj0MN>YGjDv6A}KDzAKt%$H3C6Ot(e$AV_etPB8
PZ|=6$n5lQC=2rg$(ga%?

diff --git a/app/components/Home/BottomScreen/Buttons/Buttons.vue b/app/components/Home/BottomScreen/Buttons/Buttons.vue
index 7601647..b6035d8 100644
--- a/app/components/Home/BottomScreen/Buttons/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons/Buttons.vue
@@ -2,11 +2,29 @@
 import GameButton from "./GameButton.vue";
 import PictochatButton from "./PictochatButton.vue";
 import DownloadPlayButton from "./DownloadPlayButton.vue";
+import Selector from "./Selector.vue";
 
-type ButtonType = "game" | "downloadPlay" | "pictochat";
+type ButtonConfig = {
+  x: number;
+  y: number;
+  sx: number;
+  sy: number;
+  sw: number;
+  sh: number;
+};
+
+const BUTTONS_CONFIG = {
+  game: { x: 33, y: 25, sx: 31, sy: 23, sw: 193, sh: 49 },
+  pictochat: { x: 32, y: 72, sx: 31, sy: 71, sw: 97, sh: 49 },
+  downloadPlay: { x: 128, y: 72, sx: 127, sy: 71, sw: 97, sh: 49 },
+} as const satisfies Record<string, ButtonConfig>;
+
+type ButtonType = keyof typeof BUTTONS_CONFIG;
 
 const selectedButton = ref<ButtonType>("game");
-const nextBottomButton = ref<Exclude<ButtonType, "game">>("downloadPlay");
+const nextBottomButton = ref<"downloadPlay" | "pictochat">("pictochat");
+
+const selectorPosition = computed(() => BUTTONS_CONFIG[selectedButton.value]);
 
 const handleKeyPress = (event: KeyboardEvent) => {
   switch (event.key) {
@@ -49,8 +67,7 @@ const handleKeyPress = (event: KeyboardEvent) => {
 
     case "Enter":
     case " ":
-      event.preventDefault();
-      throw new Error("Not implemented");
+      throw "Not implemented";
   }
 };
 
@@ -64,7 +81,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <GameButton :selected="selectedButton === 'game'" />
-  <DownloadPlayButton :selected="selectedButton === 'downloadPlay'" />
-  <PictochatButton :selected="selectedButton === 'pictochat'" />
+  <GameButton :x="BUTTONS_CONFIG.game.x" :y="BUTTONS_CONFIG.game.y" />
+  <DownloadPlayButton
+    :x="BUTTONS_CONFIG.downloadPlay.x"
+    :y="BUTTONS_CONFIG.downloadPlay.y"
+  />
+  <PictochatButton
+    :x="BUTTONS_CONFIG.pictochat.x"
+    :y="BUTTONS_CONFIG.pictochat.y"
+  />
+
+  <Selector
+    :x="selectorPosition.sx"
+    :y="selectorPosition.sy"
+    :width="selectorPosition.sw"
+    :height="selectorPosition.sh"
+  />
 </template>
diff --git a/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue b/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
index 09721a2..548c36f 100644
--- a/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
+++ b/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
 const props = defineProps<{
-  selected: boolean;
+  x: number;
+  y: number;
 }>();
 
 const buttonImage = useTemplateRef("buttonImage");
-const selectorImage = useTemplateRef("selectorImage");
-
-const x = 128;
-const y = 72;
 
 useRender((ctx) => {
-  if (!buttonImage.value || !selectorImage.value) return;
+  if (!buttonImage.value) return;
 
-  ctx.drawImage(buttonImage.value, x, y);
-
-  if (props.selected) {
-    ctx.drawImage(selectorImage.value, x - 1, y - 1);
-  }
+  ctx.drawImage(buttonImage.value, props.x, props.y);
 });
 </script>
 
@@ -26,9 +19,4 @@ useRender((ctx) => {
     src="/assets/images/home/bottom-screen/buttons/downloadPlay.png"
     hidden
   />
-  <img
-    ref="selectorImage"
-    src="/assets/images/home/bottom-screen/buttons/smallSelector.png"
-    hidden
-  />
 </template>
diff --git a/app/components/Home/BottomScreen/Buttons/GameButton.vue b/app/components/Home/BottomScreen/Buttons/GameButton.vue
index 0b43285..40c912c 100644
--- a/app/components/Home/BottomScreen/Buttons/GameButton.vue
+++ b/app/components/Home/BottomScreen/Buttons/GameButton.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
 const props = defineProps<{
-  selected: boolean;
+  x: number;
+  y: number;
 }>();
 
 const buttonImage = useTemplateRef("buttonImage");
-const selectorImage = useTemplateRef("selectorImage");
-
-const x = 33;
-const y = 25;
 
 useRender((ctx) => {
-  if (!buttonImage.value || !selectorImage.value) return;
+  if (!buttonImage.value) return;
 
-  ctx.drawImage(buttonImage.value, x, y);
-
-  if (props.selected) {
-    ctx.drawImage(selectorImage.value, x - 2, y - 2);
-  }
+  ctx.drawImage(buttonImage.value, props.x, props.y);
 });
 </script>
 
@@ -26,9 +19,4 @@ useRender((ctx) => {
     src="/assets/images/home/bottom-screen/buttons/game.png"
     hidden
   />
-  <img
-    ref="selectorImage"
-    src="/assets/images/home/bottom-screen/buttons/largeSelector.png"
-    hidden
-  />
 </template>
diff --git a/app/components/Home/BottomScreen/Buttons/PictochatButton.vue b/app/components/Home/BottomScreen/Buttons/PictochatButton.vue
index 122875e..23f75e5 100644
--- a/app/components/Home/BottomScreen/Buttons/PictochatButton.vue
+++ b/app/components/Home/BottomScreen/Buttons/PictochatButton.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
 const props = defineProps<{
-  selected: boolean;
+  x: number;
+  y: number;
 }>();
 
 const buttonImage = useTemplateRef("buttonImage");
-const selectorImage = useTemplateRef("selectorImage");
-
-const x = 32;
-const y = 72;
 
 useRender((ctx) => {
-  if (!buttonImage.value || !selectorImage.value) return;
+  if (!buttonImage.value) return;
 
-  ctx.drawImage(buttonImage.value, x, y);
-
-  if (props.selected) {
-    ctx.drawImage(selectorImage.value, x - 1, y - 1);
-  }
+  ctx.drawImage(buttonImage.value, props.x, props.y);
 });
 </script>
 
@@ -26,9 +19,4 @@ useRender((ctx) => {
     src="/assets/images/home/bottom-screen/buttons/pictochat.png"
     hidden
   />
-  <img
-    ref="selectorImage"
-    src="/assets/images/home/bottom-screen/buttons/smallSelector.png"
-    hidden
-  />
 </template>
diff --git a/app/components/Home/BottomScreen/Buttons/Selector.vue b/app/components/Home/BottomScreen/Buttons/Selector.vue
new file mode 100644
index 0000000..01e6fbb
--- /dev/null
+++ b/app/components/Home/BottomScreen/Buttons/Selector.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const props = defineProps<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}>();
+
+const cornerImage = useTemplateRef("cornerImage");
+
+let currentX = props.x;
+let currentY = props.y;
+let currentWidth = props.width;
+let currentHeight = props.height;
+
+const animationSpeed = 0.25;
+
+useRender((ctx) => {
+  if (!cornerImage.value) return;
+
+  const dx = props.x - currentX;
+  const dy = props.y - currentY;
+  const dw = props.width - currentWidth;
+  const dh = props.height - currentHeight;
+
+  if (
+    Math.abs(dx) < 0.5 &&
+    Math.abs(dy) < 0.5 &&
+    Math.abs(dw) < 0.5 &&
+    Math.abs(dh) < 0.5
+  ) {
+    currentX = props.x;
+    currentY = props.y;
+    currentWidth = props.width;
+    currentHeight = props.height;
+  } else {
+    currentX += dx * animationSpeed;
+    currentY += dy * animationSpeed;
+    currentWidth += dw * animationSpeed;
+    currentHeight += dh * animationSpeed;
+  }
+
+  const x = Math.floor(currentX);
+  const y = Math.floor(currentY);
+  const w = Math.floor(currentWidth);
+  const h = Math.floor(currentHeight);
+
+  ctx.drawImage(cornerImage.value, x, y);
+
+  ctx.save();
+  ctx.scale(-1, 1);
+  ctx.drawImage(cornerImage.value, -(x + w), y);
+  ctx.restore();
+
+  ctx.save();
+  ctx.scale(1, -1);
+  ctx.drawImage(cornerImage.value, x, -(y + h));
+  ctx.restore();
+
+  ctx.save();
+  ctx.scale(-1, -1);
+  ctx.drawImage(cornerImage.value, -(x + w), -(y + h));
+  ctx.restore();
+});
+</script>
+
+<template>
+  <img
+    ref="cornerImage"
+    src="/assets/images/home/bottom-screen/buttons/corner.png"
+    hidden
+  />
+</template>