129 lines
2.7 KiB
Vue
129 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import gsap from "gsap";
|
|
|
|
const props = defineProps<{
|
|
yOffset: number;
|
|
opacity?: number;
|
|
bLabel: string;
|
|
aLabel: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
activateA: [];
|
|
activateB: [];
|
|
}>();
|
|
|
|
const { onRender, onClick } = useScreen();
|
|
const { assets } = useAssets();
|
|
|
|
const BUTTON_WIDTH = assets.images.common.button.rect.width;
|
|
const BUTTON_HEIGHT = assets.images.common.button.rect.height;
|
|
|
|
const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
|
|
const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
|
|
|
|
const LABEL_CHANGE_OFFSET = 20;
|
|
const LABEL_CHANGE_DURATION = 0.167;
|
|
const LABEL_CHANGE_PAUSE = 0.08;
|
|
|
|
let bButtonOffsetY = 0;
|
|
let aButtonOffsetY = 0;
|
|
let displayedBLabel = props.bLabel;
|
|
let displayedALabel = props.aLabel;
|
|
|
|
const animateLabelChange = (
|
|
setter: (v: number) => void,
|
|
setLabel: (label: string) => void,
|
|
newLabel: string,
|
|
) => {
|
|
const target = { v: 0 };
|
|
gsap
|
|
.timeline()
|
|
.to(target, {
|
|
v: LABEL_CHANGE_OFFSET,
|
|
duration: LABEL_CHANGE_DURATION,
|
|
ease: "none",
|
|
onUpdate: () => setter(target.v),
|
|
onComplete: () => setLabel(newLabel),
|
|
})
|
|
.to(target, {
|
|
v: 0,
|
|
duration: LABEL_CHANGE_DURATION,
|
|
delay: LABEL_CHANGE_PAUSE,
|
|
ease: "none",
|
|
onUpdate: () => setter(target.v),
|
|
});
|
|
};
|
|
|
|
watch(
|
|
() => props.bLabel,
|
|
(newLabel) =>
|
|
animateLabelChange(
|
|
(v) => (bButtonOffsetY = v),
|
|
(l) => (displayedBLabel = l),
|
|
newLabel,
|
|
),
|
|
);
|
|
|
|
watch(
|
|
() => props.aLabel,
|
|
(newLabel) =>
|
|
animateLabelChange(
|
|
(v) => (aButtonOffsetY = v),
|
|
(l) => (displayedALabel = l),
|
|
newLabel,
|
|
),
|
|
);
|
|
|
|
onRender((ctx) => {
|
|
ctx.globalAlpha = props.opacity ?? 1;
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#010101";
|
|
|
|
ctx.translate(0, props.yOffset);
|
|
|
|
const drawButton = (
|
|
icon: string,
|
|
text: string,
|
|
x: number,
|
|
buttonOffsetY: number,
|
|
) => {
|
|
ctx.save();
|
|
ctx.translate(0, buttonOffsetY);
|
|
assets.images.common.button.draw(ctx, x, 172);
|
|
|
|
const label = `${icon} ${text}`;
|
|
fillTextHCentered(ctx, label, x, 185, BUTTON_WIDTH);
|
|
ctx.restore();
|
|
};
|
|
|
|
drawButton(ICONS.B, displayedBLabel, 31, bButtonOffsetY);
|
|
drawButton(ICONS.A, displayedALabel, 144, aButtonOffsetY);
|
|
}, 60);
|
|
|
|
onClick((x, y) => {
|
|
if (props.yOffset !== 0) return;
|
|
if (rectContains(B_BUTTON, [x, y])) {
|
|
emit("activateB");
|
|
} else if (rectContains(A_BUTTON, [x, y])) {
|
|
emit("activateA");
|
|
}
|
|
});
|
|
|
|
useKeyDown(({ key, repeated }) => {
|
|
if (props.yOffset !== 0 || repeated) return;
|
|
switch (key) {
|
|
case "NDS_START":
|
|
case "NDS_A":
|
|
emit("activateA");
|
|
break;
|
|
|
|
case "NDS_B":
|
|
emit("activateB");
|
|
break;
|
|
}
|
|
});
|
|
|
|
defineOptions({ render: () => null });
|
|
</script>
|