From f60b9b21f47c60f4efece33aed189853f9c35f00 Mon Sep 17 00:00:00 2001 From: Pihkaal Date: Wed, 14 Jan 2026 16:13:44 +0100 Subject: [PATCH] fix: use LOGICAL_WIDTH,HEIGHT instead of SCREEN_WIDTH,HEIGHT beucase screen is scaled --- app/components/Common/ConfirmationModal.vue | 8 ++++---- app/components/Gallery/BottomScreen/BottomScreen.vue | 2 +- app/components/Gallery/TopScreen/TopScreen.vue | 2 +- app/components/Projects/BottomScreen/Buttons.vue | 2 +- .../Projects/BottomScreen/LinkConfirmationPopup.vue | 2 +- app/components/Projects/TopScreen/Project.vue | 2 +- app/components/Screen.vue | 2 +- app/stores/contact.ts | 6 +++--- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/components/Common/ConfirmationModal.vue b/app/components/Common/ConfirmationModal.vue index 3f1aa2b..18944d2 100644 --- a/app/components/Common/ConfirmationModal.vue +++ b/app/components/Common/ConfirmationModal.vue @@ -8,13 +8,13 @@ const confirmationModal = useConfirmationModal(); const BG_WIDTH = assets.images.common.confirmationModal.rect.width; const BG_HEIGHT = assets.images.common.confirmationModal.rect.height; -const BG_X = Math.floor((SCREEN_WIDTH - BG_WIDTH) / 2); -const BG_Y = Math.floor((SCREEN_HEIGHT - BG_HEIGHT) / 2); +const BG_X = Math.floor((LOGICAL_WIDTH - BG_WIDTH) / 2); +const BG_Y = Math.floor((LOGICAL_HEIGHT - BG_HEIGHT) / 2); const TEXT_Y = BG_Y + Math.floor(BG_HEIGHT / 2) - 8 - 16 + 2 + 2; const BOTTOM_BAR_HEIGHT = 24; -const CLIP_HEIGHT = SCREEN_HEIGHT - BOTTOM_BAR_HEIGHT; +const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT; const handleActivateA = () => { confirmationModal.onConfirm?.(); @@ -29,7 +29,7 @@ onRender((ctx) => { if (!confirmationModal.isVisible) return; ctx.beginPath(); - ctx.rect(0, 0, SCREEN_WIDTH, CLIP_HEIGHT); + ctx.rect(0, 0, LOGICAL_WIDTH, CLIP_HEIGHT); ctx.clip(); ctx.translate(0, confirmationModal.offsetY); diff --git a/app/components/Gallery/BottomScreen/BottomScreen.vue b/app/components/Gallery/BottomScreen/BottomScreen.vue index 7315e53..20edc4c 100644 --- a/app/components/Gallery/BottomScreen/BottomScreen.vue +++ b/app/components/Gallery/BottomScreen/BottomScreen.vue @@ -12,7 +12,7 @@ onRender((ctx) => { : store.isOutro ? store.outro.fadeOpacity : 0; - ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); }); diff --git a/app/components/Gallery/TopScreen/TopScreen.vue b/app/components/Gallery/TopScreen/TopScreen.vue index 03e1c34..293395b 100644 --- a/app/components/Gallery/TopScreen/TopScreen.vue +++ b/app/components/Gallery/TopScreen/TopScreen.vue @@ -22,7 +22,7 @@ onRender((ctx) => { : store.isOutro ? store.outro.fadeOpacity : 0; - ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); }); diff --git a/app/components/Projects/BottomScreen/Buttons.vue b/app/components/Projects/BottomScreen/Buttons.vue index 0ded17b..06c83c4 100644 --- a/app/components/Projects/BottomScreen/Buttons.vue +++ b/app/components/Projects/BottomScreen/Buttons.vue @@ -160,7 +160,7 @@ onRender((ctx) => { } ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`; - ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); }); useKeyDown((key) => { if ( diff --git a/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue index 195cb76..88e2902 100644 --- a/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue +++ b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue @@ -121,7 +121,7 @@ onRender((ctx) => { // frame ctx.strokeStyle = "#0000007f"; ctx.lineWidth = 1; - ctx.strokeRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + ctx.strokeRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); // text assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146); diff --git a/app/components/Projects/TopScreen/Project.vue b/app/components/Projects/TopScreen/Project.vue index abe00da..72b8001 100644 --- a/app/components/Projects/TopScreen/Project.vue +++ b/app/components/Projects/TopScreen/Project.vue @@ -150,7 +150,7 @@ onRender((ctx) => { ); ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`; - ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); }); defineOptions({ diff --git a/app/components/Screen.vue b/app/components/Screen.vue index 20f05d2..25d8ad2 100644 --- a/app/components/Screen.vue +++ b/app/components/Screen.vue @@ -59,7 +59,7 @@ const renderFrame = (timestamp: number) => { const start = Date.now(); // render - ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + ctx.clearRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); ctx.save(); ctx.scale(SCREEN_SCALE, SCREEN_SCALE); diff --git a/app/stores/contact.ts b/app/stores/contact.ts index 388ea12..290aa22 100644 --- a/app/stores/contact.ts +++ b/app/stores/contact.ts @@ -7,7 +7,7 @@ export const useContactStore = defineStore("contact", { stage2Opacity: 0, stage3Opacity: 0, - titleY: SCREEN_HEIGHT, + titleY: LOGICAL_HEIGHT, barOffsetY: 20, }, @@ -35,11 +35,11 @@ export const useContactStore = defineStore("contact", { this.intro, { stage1Opacity: 0, - titleY: SCREEN_HEIGHT, + titleY: LOGICAL_HEIGHT, }, { stage1Opacity: 1, - titleY: SCREEN_HEIGHT - 23, + titleY: LOGICAL_HEIGHT - 23, duration: 0.1, ease: "none", },