178 lines
3.9 KiB
Vue
178 lines
3.9 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();
|
|
|
|
const { selected, selectorPosition } = useButtonNavigation({
|
|
buttons: {
|
|
projects: [31, 23, 193, 49],
|
|
contact: [31, 71, 97, 49],
|
|
gallery: [127, 71, 97, 49],
|
|
|
|
theme: [0, 167, 31, 26],
|
|
settings: [112, 167, 31, 26],
|
|
alarm: [225, 167, 31, 26],
|
|
},
|
|
initialButton: "projects",
|
|
onButtonClick: (button) => {
|
|
if (button === "theme" || button === "alarm")
|
|
throw new Error(`Not implemented: ${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",
|
|
},
|
|
theme: {
|
|
right: "settings",
|
|
},
|
|
settings: {
|
|
left: "theme",
|
|
up: "last",
|
|
right: "alarm",
|
|
},
|
|
alarm: {
|
|
left: "settings",
|
|
},
|
|
},
|
|
disabled: computed(() => store.isIntro || store.isOutro),
|
|
selectorAnimation: {
|
|
duration: 0.3,
|
|
ease: "power2.out",
|
|
},
|
|
});
|
|
|
|
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 = "#2c2c2c";
|
|
fillTextCentered(
|
|
ctx,
|
|
$t("home.photoGallery"),
|
|
132,
|
|
78 + getButtonOffset("gallery"),
|
|
87,
|
|
);
|
|
|
|
// game
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#282828";
|
|
const projectsText = $t("home.projectsAndExperiences");
|
|
const lines = projectsText.split("\n");
|
|
|
|
ctx.textBaseline = "top";
|
|
|
|
if (lines.length == 1) {
|
|
fillTextHCentered(
|
|
ctx,
|
|
projectsText,
|
|
79,
|
|
42 + getButtonOffset("projects"),
|
|
140,
|
|
);
|
|
} else {
|
|
fillTextHCentered(
|
|
ctx,
|
|
lines[0]!,
|
|
82,
|
|
36 + getButtonOffset("projects"),
|
|
140,
|
|
);
|
|
fillTextHCentered(
|
|
ctx,
|
|
lines[1]!,
|
|
82,
|
|
36 + getButtonOffset("projects") + 13,
|
|
140,
|
|
);
|
|
}
|
|
ctx.textBaseline = "alphabetic";
|
|
|
|
// gba thing
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#a2a2a2";
|
|
fillTextCentered(ctx, $t("home.greeting"), 79, 135, 140);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Button
|
|
:x="33"
|
|
:y="25 + getButtonOffset('projects')"
|
|
:opacity="getOpacity('projects')"
|
|
:image="assets.images.home.bottomScreen.buttons.game"
|
|
/>
|
|
<Button
|
|
:x="32"
|
|
:y="72 + getButtonOffset('contact')"
|
|
:opacity="getOpacity('contact')"
|
|
:image="assets.images.home.bottomScreen.buttons.contact"
|
|
/>
|
|
<Button
|
|
:x="128"
|
|
:y="72 + getButtonOffset('gallery')"
|
|
:opacity="getOpacity('gallery')"
|
|
:image="assets.images.home.bottomScreen.buttons.gallery"
|
|
/>
|
|
|
|
<Button
|
|
:x="33"
|
|
:y="121"
|
|
:opacity="getOpacity()"
|
|
:image="assets.images.home.bottomScreen.buttons.gamePak"
|
|
/>
|
|
|
|
<Button
|
|
:x="10"
|
|
:y="175 + getButtonOffset('theme')"
|
|
:opacity="getOpacity('theme')"
|
|
:image="assets.images.home.bottomScreen.buttons.theme"
|
|
/>
|
|
<Button
|
|
:x="117"
|
|
:y="170 + getButtonOffset('settings')"
|
|
:opacity="getOpacity('settings')"
|
|
:image="assets.images.home.bottomScreen.buttons.settings"
|
|
/>
|
|
<Button
|
|
:x="235"
|
|
:y="175 + getButtonOffset('alarm')"
|
|
:opacity="getOpacity('alarm')"
|
|
:image="assets.images.home.bottomScreen.buttons.alarm"
|
|
/>
|
|
|
|
<Selector :rect="selectorPosition" :opacity="getOpacity()" />
|
|
</template>
|