91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import gsap from "gsap";
|
|
import GameButton from "./GameButton.vue";
|
|
import PictochatButton from "./PictochatButton.vue";
|
|
import DownloadPlayButton from "./DownloadPlayButton.vue";
|
|
import Selector from "./Selector.vue";
|
|
|
|
const BUTTONS_CONFIG = {
|
|
game: [31, 23, 193, 49],
|
|
pictochat: [31, 71, 97, 49],
|
|
downloadPlay: [127, 71, 97, 49],
|
|
} as const satisfies Record<string, ButtonConfig>;
|
|
|
|
type ButtonType = keyof typeof BUTTONS_CONFIG;
|
|
|
|
const animationPercentage = ref(0);
|
|
|
|
const { selectedButton, selectorPosition } = useButtonNavigation({
|
|
buttons: BUTTONS_CONFIG,
|
|
initialButton: "game",
|
|
onButtonClick: (buttonName) => {
|
|
if (animationPercentage.value > 0) return;
|
|
gsap.fromTo(
|
|
animationPercentage,
|
|
{ value: 0 },
|
|
{
|
|
value: 1,
|
|
duration: 0.35,
|
|
ease: "none",
|
|
onComplete: () => {
|
|
if (buttonName === "pictochat") {
|
|
navigateTo("/contact");
|
|
} else {
|
|
throw new Error(`Not implemented: ${buttonName}`);
|
|
}
|
|
},
|
|
},
|
|
);
|
|
},
|
|
navigation: {
|
|
game: {
|
|
down: "last",
|
|
left: "pictochat",
|
|
right: "downloadPlay",
|
|
horizontalMode: "preview",
|
|
},
|
|
pictochat: {
|
|
up: "game",
|
|
right: "downloadPlay",
|
|
},
|
|
downloadPlay: {
|
|
up: "game",
|
|
left: "pictochat",
|
|
},
|
|
},
|
|
});
|
|
|
|
const getButtonOffset = (button: ButtonType) => {
|
|
if (selectedButton.value === button) return animationPercentage.value * -200;
|
|
return 0;
|
|
};
|
|
|
|
const getOpacity = () => (1 - animationPercentage.value) * 100;
|
|
</script>
|
|
|
|
<template>
|
|
<GameButton
|
|
:x="33"
|
|
:y="25 + getButtonOffset('game')"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
<DownloadPlayButton
|
|
:x="128"
|
|
:y="72 + getButtonOffset('downloadPlay')"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
<PictochatButton
|
|
:x="32"
|
|
:y="72 + getButtonOffset('pictochat')"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
|
|
<Selector
|
|
:x="selectorPosition[0]"
|
|
:y="selectorPosition[1]"
|
|
:width="selectorPosition[2]"
|
|
:height="selectorPosition[3]"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
</template>
|