71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import GameButton from "./GameButton.vue";
|
|
import PictochatButton from "./PictochatButton.vue";
|
|
import DownloadPlayButton from "./DownloadPlayButton.vue";
|
|
|
|
type ButtonType = "game" | "downloadPlay" | "pictochat";
|
|
|
|
const selectedButton = ref<ButtonType>("game");
|
|
const nextBottomButton = ref<Exclude<ButtonType, "game">>("downloadPlay");
|
|
|
|
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 " ":
|
|
event.preventDefault();
|
|
throw new Error("Not implemented");
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener("keydown", handleKeyPress);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("keydown", handleKeyPress);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<GameButton :selected="selectedButton === 'game'" />
|
|
<DownloadPlayButton :selected="selectedButton === 'downloadPlay'" />
|
|
<PictochatButton :selected="selectedButton === 'pictochat'" />
|
|
</template>
|