feat: centralize all screen related callbacks in useScreen

app/components/Common/Buttons.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const { assets } = useAssets();
-
 const props = defineProps<{
   yOffset: number;
   opacity?: number;
@@ -13,6 +11,10 @@ const emit = defineEmits<{
   activateB: [];
 }>();
 
+const { onRender, onClick } = useScreen();
+
+const { assets } = useAssets();
+
 const BUTTON_WIDTH = assets.common.button.width;
 const BUTTON_HEIGHT = assets.common.button.height;
 const LETTER_WIDTH = assets.common.B.width;
@@ -20,7 +22,7 @@ const LETTER_WIDTH = assets.common.B.width;
 const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
 const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.globalAlpha = props.opacity ?? 1;
   ctx.font = "10px NDS10";
 
@@ -46,7 +48,7 @@ useRender((ctx) => {
   drawButton(assets.common.A, props.aLabel, 144, 0);
 });
 
-useScreenClick((x, y) => {
+onClick((x, y) => {
   if (props.yOffset !== 0) return;
   if (rectContains(B_BUTTON, [x, y])) {
     emit("activateB");