feat: add navigation buttons to bottom home screen
This commit is contained in:
34
app/components/Home/BottomScreen/Buttons/PictochatButton.vue
Normal file
34
app/components/Home/BottomScreen/Buttons/PictochatButton.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
selected: boolean;
|
||||
}>();
|
||||
|
||||
const buttonImage = useTemplateRef("buttonImage");
|
||||
const selectorImage = useTemplateRef("selectorImage");
|
||||
|
||||
const x = 32;
|
||||
const y = 72;
|
||||
|
||||
useRender((ctx) => {
|
||||
if (!buttonImage.value || !selectorImage.value) return;
|
||||
|
||||
ctx.drawImage(buttonImage.value, x, y);
|
||||
|
||||
if (props.selected) {
|
||||
ctx.drawImage(selectorImage.value, x - 1, y - 1);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
ref="buttonImage"
|
||||
src="/assets/images/home/bottom-screen/buttons/pictochat.png"
|
||||
hidden
|
||||
/>
|
||||
<img
|
||||
ref="selectorImage"
|
||||
src="/assets/images/home/bottom-screen/buttons/smallSelector.png"
|
||||
hidden
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user