feat: centralize all screen related callbacks in useScreen

app/components/Projects/BottomScreen/Background.vue

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

app/components/Projects/BottomScreen/Buttons.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import gsap from "gsap";
 
-const store = useProjectsStore();
+const { onRender, onClick } = useScreen();
 
+const store = useProjectsStore();
 const { assets } = useAssets();
 
 const CLICK_RADIUS = 22;
@@ -78,7 +79,7 @@ const startButtonAnimation = (type: ButtonType) => {
     });
 };
 
-useScreenClick((x, y) => {
+onClick((x, y) => {
   if (
     currentAnimation ||
     store.isIntro ||
@@ -111,7 +112,7 @@ useScreenClick((x, y) => {
   }
 });
 
-useRender((ctx) => {
+onRender((ctx) => {
   // Draw disabled buttons
   if (store.currentProject === 0) {
     ctx.drawImage(

app/components/Projects/BottomScreen/LinkConfirmationPopup.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import gsap from "gsap";
 
+const { onRender, onClick } = useScreen();
+
 const { assets } = useAssets();
 const store = useProjectsStore();
 
@@ -77,7 +79,7 @@ useKeyUp((key) => {
   }
 });
 
-useScreenClick((x, y) => {
+onClick((x, y) => {
   if (
     !store.showConfirmationPopup ||
     textProgress.value < 1 ||
@@ -113,7 +115,7 @@ const drawTextWithShadow = (
   ctx.fillText(text, x, y);
 };
 
-useRender((ctx) => {
+onRender((ctx) => {
   if (!store.showConfirmationPopup) return;
 
   // frame

app/components/Projects/TopScreen/Background.vue

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

app/components/Projects/TopScreen/Project.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const store = useProjectsStore();
+const { onRender } = useScreen();
 
+const store = useProjectsStore();
 const { assets } = useAssets();
 
 const drawTextWithShadow = (
@@ -54,7 +55,7 @@ const drawTextWithShadow2Lines = (
   drawTextWithShadow(ctx, line2Color, secondLine, x, y + 16);
 };
 
-useRender((ctx) => {
+onRender((ctx) => {
   ctx.drawImage(assets.projects.topScreen.background, 0, 0);
 
   ctx.textBaseline = "hanging";