pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(selector): improve api

Browse Source
This commit is contained in:
Stevan
2025-11-17 00:38:40 +01:00
parent 5e2d1b88d6
commit 4c021178ac
3 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/Common/ButtonSelector.vue
View File

@@ -1,10 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
x: number; rect: [x: number, y: number, width: number, height: number];
y: number;
width: number;
height: number;
opacity?: number; opacity?: number;
}>(), }>(),
{ {
@@ -16,18 +13,16 @@ const cornerImage = useTemplateRef("cornerImage");
const ANIMATION_SPEED = 0.25; const ANIMATION_SPEED = 0.25;
let currentX = props.x; let [currentX, currentY, currentWidth, currentHeight] = props.rect;
let currentY = props.y;
let currentWidth = props.width;
let currentHeight = props.height;
useRender((ctx) => { useRender((ctx) => {
if (!cornerImage.value) return; if (!cornerImage.value) return;
const dx = props.x - currentX; const [targetX, targetY, targetWidth, targetHeight] = props.rect;
const dy = props.y - currentY; const dx = targetX - currentX;
const dw = props.width - currentWidth; const dy = targetY - currentY;
const dh = props.height - currentHeight; const dw = targetWidth - currentWidth;
const dh = targetHeight - currentHeight;
if ( if (
Math.abs(dx) < 0.5 && Math.abs(dx) < 0.5 &&
@@ -35,10 +30,7 @@ useRender((ctx) => {
Math.abs(dw) < 0.5 && Math.abs(dw) < 0.5 &&
Math.abs(dh) < 0.5 Math.abs(dh) < 0.5
) { ) {
currentX = props.x; [currentX, currentY, currentWidth, currentHeight] = props.rect;
currentY = props.y;
currentWidth = props.width;
currentHeight = props.height;
} else { } else {
currentX += dx * ANIMATION_SPEED; currentX += dx * ANIMATION_SPEED;
currentY += dy * ANIMATION_SPEED; currentY += dy * ANIMATION_SPEED;

5
app/components/Contact/BottomScreen/BottomScreen.vue
View File

@@ -41,10 +41,7 @@ const { selectorPosition } = useButtonNavigation({
<Buttons /> <Buttons />
<ButtonSelector <ButtonSelector
:x="selectorPosition[0]" :rect="selectorPosition"
:y="selectorPosition[1]"
:width="selectorPosition[2]"
:height="selectorPosition[3]"
:opacity="store.isIntro ? store.intro.stage3Opacity : 1" :opacity="store.isIntro ? store.intro.stage3Opacity : 1"
/> />

8
app/components/Home/BottomScreen/Buttons/Buttons.vue
View File

@@ -73,11 +73,5 @@ const getOpacity = (button?: ButtonType) => {
:opacity="getOpacity('contact')" :opacity="getOpacity('contact')"
/> />
<Selector <Selector :rect="selectorPosition" :opacity="getOpacity()" />
:x="selectorPosition[0]"
:y="selectorPosition[1]"
:width="selectorPosition[2]"
:height="selectorPosition[3]"
:opacity="getOpacity()"
/>
</template> </template>