feat: centralize all screen related callbacks in useScreen

app/components/Settings/BottomScreen/Background.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const { assets } = useAssets();
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
 });
 

app/components/Settings/BottomScreen/Menus/Clock/Menu.vue

@@ -4,6 +4,8 @@ const props = defineProps<{
   y: number;
 }>();
 
+const { onRender } = useScreen();
+
 const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
@@ -27,7 +29,7 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("clock", isOpen);
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {

app/components/Settings/BottomScreen/Menus/Options/GbaMode.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-useRender((ctx) => {
+const { onRender } = useScreen();
+
+onRender((ctx) => {
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#000000";
   ctx.fillText("GBA Mode", 10, 20);

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-useRender((ctx) => {
+const { onRender } = useScreen();
+
+onRender((ctx) => {
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#000000";
   ctx.fillText("Language", 10, 20);

app/components/Settings/BottomScreen/Menus/Options/Menu.vue

@@ -4,6 +4,8 @@ const props = defineProps<{
   y: number;
 }>();
 
+const { onRender } = useScreen();
+
 const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
@@ -27,7 +29,7 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("options", isOpen);
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {

app/components/Settings/BottomScreen/Menus/Options/StartUp.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-useRender((ctx) => {
+const { onRender } = useScreen();
+
+onRender((ctx) => {
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#000000";
   ctx.fillText("Startup", 10, 20);

app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue

@@ -4,6 +4,8 @@ const props = defineProps<{
   y: number;
 }>();
 
+const { onRender } = useScreen();
+
 const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
@@ -23,7 +25,7 @@ const isAnyOtherMenuOpen = computed(() => {
   return false;
 });
 
-useRender((ctx) => {
+onRender((ctx) => {
   if (isAnyOtherMenuOpen.value) {
     ctx.drawImage(
       assets.settings.topScreen.touchScreen.touchScreenDisabled,

app/components/Settings/BottomScreen/Menus/User/Color.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+const { onRender, onClick } = useScreen();
+
+const app = useAppStore();
+const store = useSettingsStore();
+const { assets } = useAssets();
+
 const GRID_SIZE = 4;
 const GRID_START_X = 32;
 const GRID_START_Y = 40;
@@ -6,10 +12,6 @@ const CELL_SIZE = 16;
 const SPACING = 16;
 const ANIMATION_SPEED = 475;
 
-const app = useAppStore();
-const store = useSettingsStore();
-const { assets } = useAssets();
-
 const originalSelectedCol = app.color.col;
 const originalSelectedRow = app.color.row;
 
@@ -41,7 +43,7 @@ useKeyDown((key) => {
   }
 });
 
-useScreenClick((x, y) => {
+onClick((x, y) => {
   const relativeX = x - GRID_START_X;
   const relativeY = y - GRID_START_Y;
 
@@ -59,7 +61,7 @@ useScreenClick((x, y) => {
   }
 });
 
-useRender((ctx, deltaTime) => {
+onRender((ctx, deltaTime) => {
   ctx.drawImage(assets.settings.bottomScreen.user.colorPalette, 16, 32);
 
   // animate
@@ -109,7 +111,6 @@ const handleConfirm = () => {
   app.save();
   openModal({
     text: "hey",
-    showButtons: false,
   });
   setTimeout(() => {
     closeModal();

app/components/Settings/BottomScreen/Menus/User/Menu.vue

@@ -4,6 +4,8 @@ const props = defineProps<{
   y: number;
 }>();
 
+const { onRender } = useScreen();
+
 const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
@@ -27,7 +29,7 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("user", isOpen);
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {

app/components/Settings/TopScreen/Background.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const { assets } = useAssets();
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.drawImage(assets.home.topScreen.background, 0, 0);
 });
 

app/components/Settings/TopScreen/Calendar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const app = useAppStore();
 const { assets } = useAssets();
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 

app/components/Settings/TopScreen/Clock.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-const CENTER_X = 63;
-const CENTER_Y = 95;
+const { onRender } = useScreen();
 
 const app = useAppStore();
 const { assets } = useAssets();
 
+const CENTER_X = 63;
+const CENTER_Y = 95;
+
 function drawLine(
   ctx: CanvasRenderingContext2D,
   x0: number,
@@ -50,7 +52,7 @@ function drawLine(
   }
 }
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.translate(0, -16);
 
   ctx.drawImage(assets.home.topScreen.clock, 13, 45);

app/components/Settings/TopScreen/Notifications.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const store = useSettingsStore();
+const { onRender } = useScreen();
 
+const store = useSettingsStore();
 const { assets } = useAssets();
 
 const renderNotification = (
@@ -76,7 +77,7 @@ const submenuNotification = computed(() => {
   };
 });
 
-useRender((ctx) => {
+onRender((ctx) => {
   let count = 1;
   if (menuNotification.value) count++;
   if (submenuNotification.value) count++;

app/components/Settings/TopScreen/StatusBar.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const app = useAppStore();
 const { assets } = useAssets();
 
 const BAR_WIDTH = 256;
 const BAR_HEIGHT = 16;
 
-useRender((ctx) => {
+onRender((ctx) => {
   const TEXT_Y = 11;
 
   ctx.drawImage(