feat: centralize all screen related callbacks in useScreen

app/components/Common/Bars.vue

@@ -12,6 +12,8 @@ const props = withDefaults(
   },
 );
 
+const { onRender } = useScreen();
+
 const app = useAppStore();
 const { assets } = useAssets();
 
@@ -19,7 +21,7 @@ const BAR_WIDTH = 256;
 const BAR_HEIGHT = 24;
 const TITLE_Y = 5;
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.globalAlpha = props.opacity;
 
   // top bar

app/components/Common/ButtonSelector.vue

@@ -9,6 +9,8 @@ const props = withDefaults(
   },
 );
 
+const { onRender } = useScreen();
+
 const app = useAppStore();
 const { assets } = useAssets();
 
@@ -17,7 +19,7 @@ const CORNER_SIZE = 11;
 
 let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
-useRender((ctx) => {
+onRender((ctx) => {
   const [targetX, targetY, targetWidth, targetHeight] = props.rect;
   const dx = targetX - currentX;
   const dy = targetY - currentY;

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");

app/components/Common/ConfirmationModal.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import Buttons from "./Buttons.vue";
 
+const { onRender } = useScreen();
+
 const { assets } = useAssets();
 const { close, state } = useConfirmationModal();
 
@@ -23,7 +25,7 @@ const handleActivateB = () => {
   close();
 };
 
-useRender((ctx) => {
+onRender((ctx) => {
   if (!state.value.isVisible) return;
 
   ctx.beginPath();
@@ -39,7 +41,7 @@ useRender((ctx) => {
   ctx.fillStyle = "#ffffff";
 
   fillTextCentered(ctx, state.value.text, BG_X, TEXT_Y, BG_WIDTH);
-});
+}, 100);
 
 onUnmounted(() => {
   close();