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

16
app/components/Settings/BottomScreen/Background.vue
View File

@@ -1,18 +1,10 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.webp";
import TOP_BAR_IMAGE from "/assets/images/settings/bottom-screen/top-bar.webp";
import BOTTOM_BAR_IMAGE from "/assets/images/settings/bottom-screen/bottom-bar.webp";
const [backgroundImage, topBarImage, bottomBarImage] = useImages(
BACKGROUND_IMAGE,
TOP_BAR_IMAGE,
BOTTOM_BAR_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
ctx.drawImage(backgroundImage!, 0, 0);
ctx.drawImage(topBarImage!, 0, 0);
ctx.drawImage(bottomBarImage!, 0, 168);
ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
ctx.drawImage(assets.settings.bottomScreen.topBar, 0, 0);
ctx.drawImage(assets.settings.bottomScreen.bottomBar, 0, 168);
});
defineOptions({

39
app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
View File

@@ -1,11 +1,4 @@
<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/clock/clock-active.webp";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/clock/clock-disabled.png";
import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
const props = defineProps<{
x: number;
y: number;
@@ -13,21 +6,7 @@ const props = defineProps<{
const settingsStore = useSettingsStore();
const [
menuImage,
menuActiveImage,
menuDisabledImage,
alarmImage,
timeImage,
dateImage,
] = useImages(
MENU_IMAGE,
MENU_ACTIVE_IMAGE,
MENU_DISABLED_IMAGE,
ALARM_IMAGE,
TIME_IMAGE,
DATE_IMAGE,
);
const { assets } = useAssets();
const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
const isAnyOtherMenuOpen = computed(() =>
@@ -41,22 +20,26 @@ useRender((ctx) => {
if (isOpen.value || animation.playing) {
ctx.drawImage(
timeImage!,
assets.settings.topScreen.clock.time,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
dateImage!,
assets.settings.topScreen.clock.date,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);
ctx.drawImage(
assets.settings.topScreen.clock.alarm,
0,
-48 + animation.stage1Offset,
);
ctx.drawImage(menuActiveImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.clock.clockActive, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.clock.clockDisabled, 0, 0);
} else {
ctx.drawImage(menuImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.clock.clock, 0, 0);
}
});

39
app/components/Settings/BottomScreen/Menus/Options/Menu.vue
View File

@@ -1,11 +1,4 @@
<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/options/options-active.png";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/options/options-disabled.png";
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
const props = defineProps<{
x: number;
y: number;
@@ -13,21 +6,7 @@ const props = defineProps<{
const settingsStore = useSettingsStore();
const [
menuImage,
menuActiveImage,
menuDisabledImage,
gbaModeImage,
languageImage,
startUpImage,
] = useImages(
MENU_IMAGE,
MENU_ACTIVE_IMAGE,
MENU_DISABLED_IMAGE,
GBA_MODE_IMAGE,
LANGUAGE_IMAGE,
START_UP_IMAGE,
);
const { assets } = useAssets();
const isOpen = computed(() => settingsStore.isMenuOpen("options"));
const isAnyOtherMenuOpen = computed(() =>
@@ -40,23 +19,27 @@ useRender((ctx) => {
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
ctx.drawImage(
gbaModeImage!,
assets.settings.topScreen.options.language,
0,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.options.gbaMode,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
startUpImage!,
assets.settings.topScreen.options.startUp,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
ctx.drawImage(menuActiveImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.options.optionsActive, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.options.optionsDisabled, 0, 0);
} else {
ctx.drawImage(menuImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.options.options, 0, 0);
}
});

20
app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
View File

@@ -1,7 +1,4 @@
<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen-disabled.png";
const props = defineProps<{
x: number;
y: number;
@@ -9,10 +6,7 @@ const props = defineProps<{
const settingsStore = useSettingsStore();
const [menuImage, menuDisabledImage] = useImages(
MENU_IMAGE,
MENU_DISABLED_IMAGE,
);
const { assets } = useAssets();
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("touchScreen"),
@@ -20,9 +14,17 @@ const isAnyOtherMenuOpen = computed(() =>
useRender((ctx) => {
if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, props.x, props.y);
ctx.drawImage(
assets.settings.topScreen.touchScreen.touchScreenDisabled,
props.x,
props.y,
);
} else {
ctx.drawImage(menuImage!, props.x, props.y);
ctx.drawImage(
assets.settings.topScreen.touchScreen.touchScreen,
props.x,
props.y,
);
}
});

44
app/components/Settings/BottomScreen/Menus/User/Menu.vue
View File

@@ -1,12 +1,4 @@
<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/user/user-active.webp";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/user/user-disabled.png";
import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user-name.webp";
const props = defineProps<{
x: number;
y: number;
@@ -14,23 +6,7 @@ const props = defineProps<{
const settingsStore = useSettingsStore();
const [
menuImage,
menuActiveImage,
menuDisabledImage,
birthdayImage,
colorImage,
messageImage,
userNameImage,
] = useImages(
MENU_IMAGE,
MENU_ACTIVE_IMAGE,
MENU_DISABLED_IMAGE,
BIRTHDAY_IMAGE,
COLOR_IMAGE,
MESSAGE_IMAGE,
USER_NAME_IMAGE,
);
const { assets } = useAssets();
const isOpen = computed(() => settingsStore.isMenuOpen("user"));
const isAnyOtherMenuOpen = computed(() =>
@@ -44,27 +20,31 @@ useRender((ctx) => {
if (isOpen.value || animation.playing) {
ctx.drawImage(
birthdayImage!,
assets.settings.topScreen.user.birthday,
-48 + animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(userNameImage!, 0, -48 + animation.stage1Offset);
ctx.drawImage(
messageImage!,
assets.settings.topScreen.user.userName,
0,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.user.message,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
colorImage!,
assets.settings.topScreen.user.color,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
ctx.drawImage(menuActiveImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.user.userActive, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.user.userDisabled, 0, 0);
} else {
ctx.drawImage(menuImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.user.user, 0, 0);
}
});