feat: centralize all screen related callbacks in useScreen

app/components/Home/BottomScreen/Background.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const store = useHomeStore();
 const app = useAppStore();
-
 const { assets } = useAssets();
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
   ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
 });

app/components/Home/BottomScreen/Button.vue

@@ -6,7 +6,9 @@ const props = defineProps<{
   image: HTMLImageElement;
 }>();
 
-useRender((ctx) => {
+const { onRender } = useScreen();
+
+onRender((ctx) => {
   ctx.globalAlpha = props.opacity;
   ctx.drawImage(props.image, props.x, props.y);
 });

app/components/Home/BottomScreen/Buttons.vue

@@ -2,6 +2,8 @@
 import Button from "./Button.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
+const { onRender } = useScreen();
+
 const store = useHomeStore();
 const { assets } = useAssets();
 
@@ -66,7 +68,7 @@ const getOpacity = (button?: (typeof selectedButton)["value"]) => {
   return 1;
 };
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.globalAlpha = getOpacity();
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#a2a2a2";

app/components/Home/TopScreen/Background.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const store = useHomeStore();
 const app = useAppStore();
-
 const { assets } = useAssets();
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
   ctx.drawImage(assets.home.topScreen.background, 0, 0);
 });

app/components/Home/TopScreen/Calendar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 // NOTE: calendar background is handled by TopScreenBackground
 const app = useAppStore();
 const store = useHomeStore();
-
 const { assets } = useAssets();
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 

app/components/Home/TopScreen/Clock.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-const CENTER_X = 63;
-const CENTER_Y = 95;
+const { onRender } = useScreen();
 
 const app = useAppStore();
 const store = useHomeStore();
-
 const { assets } = useAssets();
 
+const CENTER_X = 63;
+const CENTER_Y = 95;
+
 function drawLine(
   ctx: CanvasRenderingContext2D,
   x0: number,
@@ -52,7 +53,7 @@ function drawLine(
   }
 }
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.isOutro && store.outro.animateTop

app/components/Home/TopScreen/StatusBar.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
+const { onRender } = useScreen();
+
 const app = useAppStore();
 const store = useHomeStore();
-
 const { assets } = useAssets();
 
 const BAR_WIDTH = 256;
 const BAR_HEIGHT = 16;
 
-useRender((ctx) => {
+onRender((ctx) => {
   const TEXT_Y = 11;
 
   ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);