69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import GameButton from "./GameButton.vue";
|
|
import ContactButton from "./ContactButton.vue";
|
|
import DownloadPlayButton from "./DownloadPlayButton.vue";
|
|
import Selector from "~/components/Common/ButtonSelector.vue";
|
|
|
|
const store = useHomeStore();
|
|
|
|
const { selectedButton, selectorPosition } = useButtonNavigation({
|
|
buttons: {
|
|
projects: [31, 23, 193, 49],
|
|
contact: [31, 71, 97, 49],
|
|
downloadPlay: [127, 71, 97, 49],
|
|
},
|
|
initialButton: "projects",
|
|
onButtonClick: (button) => {
|
|
store.animateOutro(`/${button}`);
|
|
},
|
|
navigation: {
|
|
projects: {
|
|
down: "last",
|
|
left: "contact",
|
|
right: "downloadPlay",
|
|
horizontalMode: "preview",
|
|
},
|
|
contact: {
|
|
up: "projects",
|
|
right: "downloadPlay",
|
|
},
|
|
downloadPlay: {
|
|
up: "projects",
|
|
left: "contact",
|
|
},
|
|
},
|
|
});
|
|
|
|
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;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<GameButton
|
|
:x="33"
|
|
:y="25 + getButtonOffset('projects')"
|
|
:opacity="getOpacity('projects')"
|
|
/>
|
|
<DownloadPlayButton
|
|
:x="128"
|
|
:y="72 + getButtonOffset('downloadPlay')"
|
|
:opacity="getOpacity('downloadPlay')"
|
|
/>
|
|
<ContactButton
|
|
:x="32"
|
|
:y="72 + getButtonOffset('contact')"
|
|
:opacity="getOpacity('contact')"
|
|
/>
|
|
|
|
<Selector :rect="selectorPosition" :opacity="getOpacity()" />
|
|
</template>
|