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/BottomScreen/Background.vue
View File

@@ -1,21 +1,15 @@
<script setup lang="ts">
import HOME_BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.webp";
import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/bottom-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.bottomScreen.background, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
: store.outro.stage3Opacity;
ctx.drawImage(contactBackgroundImage!, 0, 0);
ctx.drawImage(assets.contact.bottomScreen.background, 0, 0);
});
defineOptions({

20
app/components/Contact/BottomScreen/Bars.vue
View File

@@ -1,19 +1,11 @@
<script setup lang="ts">
import TOP_BAR_IMAGE from "/assets/images/contact/bottom-screen/top-bar.webp";
import BOTTOM_BAR_IMAGE from "/assets/images/contact/bottom-screen/bottom-bar.webp";
import BOTTOM_BAR_OK_IMAGE from "/assets/images/contact/bottom-screen/ok-button.webp";
const props = defineProps<{
okLabel: "Copy" | "Open";
}>();
const store = useContactStore();
const [topBarImage, bottomBarImage, bottomBarOkImage] = useImages(
TOP_BAR_IMAGE,
BOTTOM_BAR_IMAGE,
BOTTOM_BAR_OK_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = store.isIntro
@@ -21,13 +13,17 @@ useRender((ctx) => {
: store.outro.stage2Opacity;
// top bar
ctx.drawImage(topBarImage!, 0, store.isIntro ? store.intro.topBarY : 0);
ctx.drawImage(
assets.contact.bottomScreen.topBar,
0,
store.isIntro ? store.intro.topBarY : 0,
);
// bottom bar
ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
ctx.drawImage(bottomBarImage!, 0, 0);
ctx.drawImage(assets.contact.bottomScreen.bottomBar, 0, 0);
ctx.drawImage(bottomBarOkImage!, 144, 4);
ctx.drawImage(assets.contact.bottomScreen.okButton, 144, 4);
ctx.font = "10px NDS10";
ctx.fillStyle = "#000000";
ctx.fillText(props.okLabel, 144 + 35, 4 + 13);

6
app/components/Contact/BottomScreen/Buttons.vue
View File

@@ -1,15 +1,13 @@
<script setup lang="ts">
import BUTTONS_IMAGE from "/assets/images/contact/bottom-screen/buttons.webp";
const store = useContactStore();
const [buttonsImage] = useImages(BUTTONS_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage1Opacity;
ctx.drawImage(buttonsImage!, 31, 32);
ctx.drawImage(assets.contact.bottomScreen.buttons, 31, 32);
});
defineOptions({

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