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

feat(assets): new assets loading system (currently only for images)

Browse Source
This commit is contained in:
Stevan
2025-12-17 12:28:48 +01:00
parent a31f72f41d
commit 2f16f382e5
106 changed files with 359 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,37 +1,29 @@
<script setup lang="ts">
import PREV_PRESSED_IMAGE from "~/assets/images/projects/bottom-screen/prev-pressed.webp";
import QUIT_PRESSED_IMAGE from "~/assets/images/projects/bottom-screen/quit-pressed.webp";
import LINK_PRESSED_IMAGE from "~/assets/images/projects/bottom-screen/link-pressed.webp";
import NEXT_PRESSED_IMAGE from "~/assets/images/projects/bottom-screen/next-pressed.webp";
import CIRCLE_SMALL_IMAGE from "~/assets/images/projects/bottom-screen/circle_small.webp";
import CIRCLE_BIG_IMAGE from "~/assets/images/projects/bottom-screen/circle_big.webp";
import gsap from "gsap";
const store = useProjectsStore();
const [
prevPressedImage,
quitPressedImage,
linkPressedImage,
nextPressedImage,
circleSmallImagee,
circleBigImage,
] = useImages(
PREV_PRESSED_IMAGE,
QUIT_PRESSED_IMAGE,
LINK_PRESSED_IMAGE,
NEXT_PRESSED_IMAGE,
CIRCLE_SMALL_IMAGE,
CIRCLE_BIG_IMAGE,
);
const { assets } = useAssets();
const CLICK_RADIUS = 22;
const BUTTONS = {
prev: { position: [36, 100], image: prevPressedImage! },
quit: { position: [88, 156], image: quitPressedImage! },
link: { position: [168, 156], image: linkPressedImage! },
next: { position: [220, 100], image: nextPressedImage! },
prev: {
position: [36, 100],
image: assets.projects.bottomScreen.prevPressed,
},
quit: {
position: [88, 156],
image: assets.projects.bottomScreen.quitPressed,
},
link: {
position: [168, 156],
image: assets.projects.bottomScreen.linkPressed,
},
next: {
position: [220, 100],
image: assets.projects.bottomScreen.nextPressed,
},
} as const satisfies Record<
string,
{ position: Point; image: HTMLImageElement }
@@ -123,7 +115,7 @@ useRender((ctx) => {
if (currentAnimation.showSmallCircle) {
ctx.drawImage(
circleSmallImagee!,
assets.projects.bottomScreen.circleSmall,
currentAnimation.position[0] - 28,
currentAnimation.position[1] - 28,
);
@@ -131,7 +123,7 @@ useRender((ctx) => {
if (currentAnimation.showBigCircle) {
ctx.drawImage(
circleBigImage!,
assets.projects.bottomScreen.circleBig,
currentAnimation.position[0] - 44,
currentAnimation.position[1] - 44,
);