pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use LOGICAL_WIDTH,HEIGHT instead of SCREEN_WIDTH,HEIGHT beucase screen is scaled

Browse Source
This commit is contained in:
Stevan
2026-01-14 16:13:44 +01:00
parent 0a8017e34e
commit 5dd43c7814
8 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/Common/ConfirmationModal.vue
View File

@@ -8,13 +8,13 @@ const confirmationModal = useConfirmationModal();
const BG_WIDTH = assets.images.common.confirmationModal.rect.width; const BG_WIDTH = assets.images.common.confirmationModal.rect.width;
const BG_HEIGHT = assets.images.common.confirmationModal.rect.height; const BG_HEIGHT = assets.images.common.confirmationModal.rect.height;
const BG_X = Math.floor((SCREEN_WIDTH - BG_WIDTH) / 2); const BG_X = Math.floor((LOGICAL_WIDTH - BG_WIDTH) / 2);
const BG_Y = Math.floor((SCREEN_HEIGHT - BG_HEIGHT) / 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 TEXT_Y = BG_Y + Math.floor(BG_HEIGHT / 2) - 8 - 16 + 2 + 2;
const BOTTOM_BAR_HEIGHT = 24; const BOTTOM_BAR_HEIGHT = 24;
const CLIP_HEIGHT = SCREEN_HEIGHT - BOTTOM_BAR_HEIGHT; const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT;
const handleActivateA = () => { const handleActivateA = () => {
confirmationModal.onConfirm?.(); confirmationModal.onConfirm?.();
@@ -29,7 +29,7 @@ onRender((ctx) => {
if (!confirmationModal.isVisible) return; if (!confirmationModal.isVisible) return;
ctx.beginPath(); ctx.beginPath();
ctx.rect(0, 0, SCREEN_WIDTH, CLIP_HEIGHT); ctx.rect(0, 0, LOGICAL_WIDTH, CLIP_HEIGHT);
ctx.clip(); ctx.clip();
ctx.translate(0, confirmationModal.offsetY); ctx.translate(0, confirmationModal.offsetY);

2
app/components/Gallery/BottomScreen/BottomScreen.vue
View File

@@ -12,7 +12,7 @@ onRender((ctx) => {
: store.isOutro : store.isOutro
? store.outro.fadeOpacity ? store.outro.fadeOpacity
: 0; : 0;
ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
}); });
</script> </script>

2
app/components/Gallery/TopScreen/TopScreen.vue
View File

@@ -22,7 +22,7 @@ onRender((ctx) => {
: store.isOutro : store.isOutro
? store.outro.fadeOpacity ? store.outro.fadeOpacity
: 0; : 0;
ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
}); });
</script> </script>

2
app/components/Projects/BottomScreen/Buttons.vue
View File

@@ -160,7 +160,7 @@ onRender((ctx) => {
} }
ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`; 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) => { useKeyDown((key) => {
if ( if (

2
app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
View File

@@ -121,7 +121,7 @@ onRender((ctx) => {
// frame // frame
ctx.strokeStyle = "#0000007f"; ctx.strokeStyle = "#0000007f";
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.strokeRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); ctx.strokeRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
// text // text
assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146); assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146);

2
app/components/Projects/TopScreen/Project.vue
View File

@@ -150,7 +150,7 @@ onRender((ctx) => {
); );
ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`; 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({ defineOptions({

2
app/components/Screen.vue
View File

@@ -59,7 +59,7 @@ const renderFrame = (timestamp: number) => {
const start = Date.now(); const start = Date.now();
// render // render
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); ctx.clearRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
ctx.save(); ctx.save();
ctx.scale(SCREEN_SCALE, SCREEN_SCALE); ctx.scale(SCREEN_SCALE, SCREEN_SCALE);

6
app/stores/contact.ts
View File

@@ -7,7 +7,7 @@ export const useContactStore = defineStore("contact", {
stage2Opacity: 0, stage2Opacity: 0,
stage3Opacity: 0, stage3Opacity: 0,
titleY: SCREEN_HEIGHT, titleY: LOGICAL_HEIGHT,
barOffsetY: 20, barOffsetY: 20,
}, },
@@ -35,11 +35,11 @@ export const useContactStore = defineStore("contact", {
this.intro, this.intro,
{ {
stage1Opacity: 0, stage1Opacity: 0,
titleY: SCREEN_HEIGHT, titleY: LOGICAL_HEIGHT,
}, },
{ {
stage1Opacity: 1, stage1Opacity: 1,
titleY: SCREEN_HEIGHT - 23, titleY: LOGICAL_HEIGHT - 23,
duration: 0.1, duration: 0.1,
ease: "none", ease: "none",
}, },