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

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({