156 lines
4.0 KiB
Vue
156 lines
4.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";
|
|
|
|
type ButtonConfig = {
|
|
x: number;
|
|
y: number;
|
|
sx: number;
|
|
sy: number;
|
|
sw: number;
|
|
sh: number;
|
|
};
|
|
|
|
const BUTTONS_CONFIG = {
|
|
game: { x: 33, y: 25, sx: 31, sy: 23, sw: 193, sh: 49 },
|
|
pictochat: { x: 32, y: 72, sx: 31, sy: 71, sw: 97, sh: 49 },
|
|
downloadPlay: { x: 128, y: 72, sx: 127, sy: 71, sw: 97, sh: 49 },
|
|
} as const satisfies Record<string, ButtonConfig>;
|
|
|
|
type ButtonType = keyof typeof BUTTONS_CONFIG;
|
|
|
|
const selectedButton = ref<ButtonType>("game");
|
|
const nextBottomButton = ref<"downloadPlay" | "pictochat">("pictochat");
|
|
|
|
const selectorPosition = computed(() => BUTTONS_CONFIG[selectedButton.value]);
|
|
|
|
const animationPercentage = ref(0);
|
|
|
|
const getButtonOffset = (button: ButtonType) => {
|
|
if (selectedButton.value === button) return animationPercentage.value * -200;
|
|
return 0;
|
|
};
|
|
|
|
const getOpacity = () => (1 - animationPercentage.value) * 100;
|
|
|
|
useScreenClick((x: number, y: number) => {
|
|
if (animationPercentage.value != 0) return;
|
|
|
|
for (const [buttonName, config] of Object.entries(BUTTONS_CONFIG) as [
|
|
ButtonType,
|
|
ButtonConfig,
|
|
][]) {
|
|
if (
|
|
x >= config.sx &&
|
|
x <= config.sx + config.sw &&
|
|
y >= config.sy &&
|
|
y <= config.sy + config.sh
|
|
) {
|
|
if (selectedButton.value === buttonName) {
|
|
gsap.fromTo(
|
|
animationPercentage,
|
|
{ value: 0 },
|
|
{
|
|
value: 1,
|
|
duration: 0.35,
|
|
ease: "none",
|
|
onComplete: () => {
|
|
throw new Error("not implemented: onComplete in button click");
|
|
},
|
|
},
|
|
);
|
|
} else {
|
|
selectedButton.value = buttonName;
|
|
}
|
|
|
|
if (buttonName === "pictochat" || buttonName === "downloadPlay") {
|
|
nextBottomButton.value = buttonName;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
const handleKeyPress = (event: KeyboardEvent) => {
|
|
switch (event.key) {
|
|
case "ArrowUp":
|
|
event.preventDefault();
|
|
if (
|
|
selectedButton.value === "downloadPlay" ||
|
|
selectedButton.value === "pictochat"
|
|
) {
|
|
selectedButton.value = "game";
|
|
}
|
|
break;
|
|
|
|
case "ArrowDown":
|
|
event.preventDefault();
|
|
if (selectedButton.value === "game") {
|
|
selectedButton.value = nextBottomButton.value;
|
|
}
|
|
break;
|
|
|
|
case "ArrowRight":
|
|
event.preventDefault();
|
|
if (selectedButton.value === "game") {
|
|
nextBottomButton.value = "downloadPlay";
|
|
} else if (selectedButton.value === "pictochat") {
|
|
nextBottomButton.value = "downloadPlay";
|
|
selectedButton.value = "downloadPlay";
|
|
}
|
|
break;
|
|
|
|
case "ArrowLeft":
|
|
event.preventDefault();
|
|
if (selectedButton.value === "game") {
|
|
nextBottomButton.value = "pictochat";
|
|
} else if (selectedButton.value === "downloadPlay") {
|
|
nextBottomButton.value = "pictochat";
|
|
selectedButton.value = "pictochat";
|
|
}
|
|
break;
|
|
|
|
case "Enter":
|
|
case " ":
|
|
throw "Not implemented";
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener("keydown", handleKeyPress);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("keydown", handleKeyPress);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<GameButton
|
|
:x="BUTTONS_CONFIG.game.x"
|
|
:y="BUTTONS_CONFIG.game.y + getButtonOffset('game')"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
<DownloadPlayButton
|
|
:x="BUTTONS_CONFIG.downloadPlay.x"
|
|
:y="BUTTONS_CONFIG.downloadPlay.y + getButtonOffset('downloadPlay')"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
<PictochatButton
|
|
:x="BUTTONS_CONFIG.pictochat.x"
|
|
:y="BUTTONS_CONFIG.pictochat.y + getButtonOffset('pictochat')"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
|
|
<Selector
|
|
:x="selectorPosition.sx"
|
|
:y="selectorPosition.sy"
|
|
:width="selectorPosition.sw"
|
|
:height="selectorPosition.sh"
|
|
:opacity="getOpacity()"
|
|
/>
|
|
</template>
|