127 lines
3.0 KiB
Vue
127 lines
3.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();
|
|
|
|
const { selectedButton, selectorPosition } = useButtonNavigation({
|
|
buttons: {
|
|
projects: [31, 23, 193, 49],
|
|
contact: [31, 71, 97, 49],
|
|
downloadPlay: [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 === "downloadPlay" || button === "theme" || button === "alarm")
|
|
throw new Error(`Not implemented: ${button}`);
|
|
|
|
store.animateOutro(button);
|
|
},
|
|
navigation: {
|
|
projects: {
|
|
down: "last",
|
|
left: "contact",
|
|
right: "downloadPlay",
|
|
horizontalMode: "preview",
|
|
},
|
|
contact: {
|
|
up: "projects",
|
|
right: "downloadPlay",
|
|
down: "settings",
|
|
},
|
|
downloadPlay: {
|
|
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),
|
|
});
|
|
|
|
const getButtonOffset = (button: (typeof selectedButton)["value"]) => {
|
|
if (selectedButton.value === button) return store.outro.buttonOffsetY;
|
|
return 0;
|
|
};
|
|
|
|
const getOpacity = (button?: (typeof selectedButton)["value"]) => {
|
|
if (store.isIntro) return store.intro.stage1Opacity;
|
|
if (selectedButton.value === button) return 1;
|
|
if (store.isOutro) return store.outro.stage1Opacity;
|
|
return 1;
|
|
};
|
|
|
|
onRender((ctx) => {
|
|
ctx.globalAlpha = getOpacity();
|
|
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.home.bottomScreen.buttons.game"
|
|
/>
|
|
<Button
|
|
:x="32"
|
|
:y="72 + getButtonOffset('contact')"
|
|
:opacity="getOpacity('contact')"
|
|
:image="assets.home.bottomScreen.buttons.contact"
|
|
/>
|
|
<Button
|
|
:x="128"
|
|
:y="72 + getButtonOffset('downloadPlay')"
|
|
:opacity="getOpacity('downloadPlay')"
|
|
:image="assets.home.bottomScreen.buttons.downloadPlay"
|
|
/>
|
|
|
|
<Button
|
|
:x="33"
|
|
:y="121"
|
|
:opacity="getOpacity()"
|
|
:image="assets.home.bottomScreen.buttons.gamePak"
|
|
/>
|
|
|
|
<Button
|
|
:x="10"
|
|
:y="175 + getButtonOffset('theme')"
|
|
:opacity="getOpacity('theme')"
|
|
:image="assets.home.bottomScreen.buttons.theme"
|
|
/>
|
|
<Button
|
|
:x="117"
|
|
:y="170 + getButtonOffset('settings')"
|
|
:opacity="getOpacity('settings')"
|
|
:image="assets.home.bottomScreen.buttons.settings"
|
|
/>
|
|
<Button
|
|
:x="235"
|
|
:y="175 + getButtonOffset('alarm')"
|
|
:opacity="getOpacity('alarm')"
|
|
:image="assets.home.bottomScreen.buttons.alarm"
|
|
/>
|
|
|
|
<Selector :rect="selectorPosition" :opacity="getOpacity()" />
|
|
</template>
|