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 05398d5252
commit b85899617b
106 changed files with 359 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/Contact/TopScreen/Background.vue
View File

@@ -1,21 +1,15 @@
<script setup lang="ts">
import HOME_BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.webp";
import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/top-screen/background.webp";
const store = useContactStore();
const [homeBackgroundImage, contactBackgroundImage] = useImages(
HOME_BACKGROUND_IMAGE,
CONTACT_BACKGROUND_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
ctx.drawImage(homeBackgroundImage!, 0, 0);
ctx.drawImage(assets.home.topScreen.background, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
: store.outro.stage3Opacity;
ctx.drawImage(contactBackgroundImage!, 0, 0);
ctx.drawImage(assets.contact.topScreen.background, 0, 0);
});
defineOptions({

12
app/components/Contact/TopScreen/LeftBar.vue
View File

@@ -1,24 +1,18 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/contact/top-screen/left-bar.webp";
import THINGS_IMAGE from "/assets/images/contact/top-screen/left-bar-things.webp";
const store = useContactStore();
const [backgroundImage, thingsImage] = useImages(
BACKGROUND_IMAGE,
THINGS_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
: store.outro.stage2Opacity;
ctx.drawImage(backgroundImage!, 0, 0);
ctx.drawImage(assets.contact.topScreen.leftBar, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage1Opacity;
ctx.drawImage(thingsImage!, 0, 0);
ctx.drawImage(assets.contact.topScreen.leftBarThings, 0, 0);
});
defineOptions({

12
app/components/Contact/TopScreen/Notifications.vue
View File

@@ -1,14 +1,8 @@
<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/contact/bottom-screen/notification.webp";
import TITLE_IMAGE from "/assets/images/contact/top-screen/title.webp";
// text color:
const store = useContactStore();
const [notificationImage, titleImage] = useImages(
NOTIFICATION_IMAGE,
TITLE_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = store.outro.stage2Opacity;
@@ -20,7 +14,7 @@ useRender((ctx) => {
const y = 169 - 24 * index + store.notificationsYOffset;
if (y < -24) break;
ctx.drawImage(notificationImage!, 21, y);
ctx.drawImage(assets.contact.bottomScreen.notification, 21, y);
const content = store.notifications[i]!;
ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -32,7 +26,7 @@ useRender((ctx) => {
? store.intro.stage1Opacity
: store.outro.stage2Opacity;
ctx.drawImage(
titleImage!,
assets.contact.topScreen.title,
21,
store.isIntro
? store.intro.titleY