178 lines
4.0 KiB
Vue
178 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import Button from "./Button.vue";
|
|
import Selector from "~/components/Common/ButtonSelector.vue";
|
|
|
|
const { onRender } = useScreen();
|
|
|
|
const store = useHomeStore();
|
|
const { assets } = useAssets((a) => a.images.home.bottomScreen.buttons);
|
|
|
|
const { selected, pressed, selectorPosition } = useButtonNavigation({
|
|
buttons: {
|
|
projects: [31, 23, 193, 49],
|
|
contact: [31, 71, 97, 49],
|
|
gallery: [127, 71, 97, 49],
|
|
|
|
credits: [0, 167, 31, 26],
|
|
settings: [112, 167, 31, 26],
|
|
achievements: [225, 167, 31, 26],
|
|
},
|
|
initialButton: store.selectedButton,
|
|
onActivate: (button) => {
|
|
store.animateOutro(button);
|
|
},
|
|
navigation: {
|
|
projects: {
|
|
down: "last",
|
|
left: "contact",
|
|
right: "gallery",
|
|
horizontalMode: "preview",
|
|
},
|
|
contact: {
|
|
up: "projects",
|
|
right: "gallery",
|
|
down: "settings",
|
|
},
|
|
gallery: {
|
|
up: "projects",
|
|
left: "contact",
|
|
down: "settings",
|
|
},
|
|
credits: {
|
|
right: "settings",
|
|
},
|
|
settings: {
|
|
left: "credits",
|
|
up: "last",
|
|
right: "achievements",
|
|
},
|
|
achievements: {
|
|
left: "settings",
|
|
},
|
|
},
|
|
disabled: computed(() => store.isIntro || store.isOutro),
|
|
selectorAnimation: {
|
|
duration: 0.13,
|
|
ease: "none",
|
|
},
|
|
});
|
|
|
|
watch(selected, (newSelected) => {
|
|
store.selectedButton = newSelected;
|
|
});
|
|
|
|
const getButtonImage = (button: typeof selected.value) => {
|
|
if (pressed.value === button) {
|
|
const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`;
|
|
if (pressedKey in assets) return assets[pressedKey];
|
|
}
|
|
return assets[button];
|
|
};
|
|
|
|
const getButtonOffset = (button: (typeof selected)["value"]) => {
|
|
if (selected.value === button) return store.outro.buttonOffsetY;
|
|
return 0;
|
|
};
|
|
|
|
const getOpacity = (button?: (typeof selected)["value"]) => {
|
|
if (store.isIntro) return store.intro.stage1Opacity;
|
|
if (selected.value === button) return 1;
|
|
if (store.isOutro) return store.outro.stage1Opacity;
|
|
return 1;
|
|
};
|
|
|
|
onRender((ctx) => {
|
|
ctx.globalAlpha = getOpacity();
|
|
|
|
// gallery
|
|
ctx.font = "7px NDS7";
|
|
ctx.fillStyle = pressed.value === "gallery" ? "#2c2c2c" : "#282828";
|
|
fillTextHCentered(
|
|
ctx,
|
|
$t("home.photoGallery"),
|
|
132,
|
|
85 + getButtonOffset("gallery"),
|
|
87,
|
|
);
|
|
|
|
// game
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#282828";
|
|
const projectsText = $t("home.projectsAndExperiences");
|
|
const lines = projectsText.split("\n");
|
|
|
|
if (lines.length == 1) {
|
|
fillTextHCentered(
|
|
ctx,
|
|
projectsText,
|
|
79,
|
|
42 + getButtonOffset("projects") + 9,
|
|
140,
|
|
);
|
|
} else {
|
|
fillTextHCentered(
|
|
ctx,
|
|
lines[0]!,
|
|
82,
|
|
36 + getButtonOffset("projects") + 9,
|
|
140,
|
|
);
|
|
fillTextHCentered(
|
|
ctx,
|
|
lines[1]!,
|
|
82,
|
|
36 + getButtonOffset("projects") + 13 + 9,
|
|
140,
|
|
);
|
|
}
|
|
|
|
// gba thing
|
|
ctx.fillStyle = "#a2a2a2";
|
|
fillTextHCentered(ctx, $t("home.greeting"), 79, 137 + 9, 140);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Button
|
|
:x="33"
|
|
:y="25 + getButtonOffset('projects')"
|
|
:opacity="getOpacity('projects')"
|
|
:image="getButtonImage('projects')"
|
|
/>
|
|
<Button
|
|
:x="32"
|
|
:y="72 + getButtonOffset('contact')"
|
|
:opacity="getOpacity('contact')"
|
|
:image="getButtonImage('contact')"
|
|
/>
|
|
<Button
|
|
:x="128"
|
|
:y="72 + getButtonOffset('gallery')"
|
|
:opacity="getOpacity('gallery')"
|
|
:image="getButtonImage('gallery')"
|
|
/>
|
|
|
|
<Button :x="33" :y="121" :opacity="getOpacity()" :image="assets.gamePak" />
|
|
|
|
<Button
|
|
:x="10"
|
|
:y="175 + getButtonOffset('credits')"
|
|
:opacity="getOpacity('credits')"
|
|
:image="getButtonImage('credits')"
|
|
/>
|
|
<Button
|
|
:x="117"
|
|
:y="170 + getButtonOffset('settings')"
|
|
:opacity="getOpacity('settings')"
|
|
:image="getButtonImage('settings')"
|
|
/>
|
|
<Button
|
|
:x="235"
|
|
:y="175 + getButtonOffset('achievements')"
|
|
:opacity="getOpacity('achievements')"
|
|
:image="getButtonImage('achievements')"
|
|
/>
|
|
|
|
<Selector :rect="selectorPosition" :opacity="getOpacity()" />
|
|
</template>
|