diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml index 5f27276..e88e8d8 100644 --- a/.gitea/workflows/deploy.yml +++ b/.gitea/workflows/deploy.yml @@ -19,8 +19,7 @@ jobs: docker stop website-server || true docker rm website-server || true - name: Wait for any monitoring services to recognize the stopped container - # sleep for 10 seconds to ensure the container is fully stopped - run: sleep 10 + run: sleep 2 - name: Run Docker container run: | docker run -d \ diff --git a/src/app/page.tsx b/src/app/page.tsx index 6953fd0..3800605 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -19,36 +19,65 @@ const slides = [ ] export default function Home() { - const [current, setCurrent] = useState(0) + const [current, setCurrent] = useState(0); + const [touchStart, setTouchStart] = useState({ x: undefined, y: undefined } as { x: number | undefined, y: number | undefined }); + const [touchEnd, setTouchEnd] = useState({ x: undefined, y: undefined } as { x: number | undefined, y: number | undefined }); - const nextSlide = useCallback(() => { - if (current < slides.length - 1) setCurrent(current + 1) + if (current < slides.length - 1) setCurrent(current + 1); }, [current]) const prevSlide = useCallback(() => { - if (current > 0) setCurrent(current - 1) + if (current > 0) setCurrent(current - 1); }, [current]) + const handleTouchStart = useCallback((e: TouchEvent) => { + const firstTouch = e.touches[0]; + setTouchStart({ x: firstTouch.clientX, y: firstTouch.clientY }); + }, []); + + const handleTouchEnd = useCallback((e: TouchEvent) => { + if (!touchStart.x || !touchStart.y || !touchEnd.x || !touchEnd.y) return; + + const xDiff = touchEnd.x - touchStart.x; + const yDiff = touchEnd.y - touchStart.y; + + if (Math.abs(xDiff) < Math.abs(yDiff)) { + if (yDiff > 0) prevSlide(); // Swipe down + else nextSlide(); // Swipe up + } + + setTouchStart({ x: undefined, y: undefined }); + setTouchEnd({ x: undefined, y: undefined }); + }, [touchStart, touchEnd, prevSlide, nextSlide]); + + const handleTouchMove = useCallback((e: TouchEvent) => { + setTouchEnd({ x: e.touches[0].clientX, y: e.touches[0].clientY }); + }, []); + + useEffect(() => { const handleScroll = (e: WheelEvent) => { - if (e.deltaY > 0) nextSlide() - else prevSlide() + if (e.deltaY > 0) nextSlide(); + else prevSlide(); } const handleKey = (e: KeyboardEvent) => { - if (e.key === 'ArrowDown') nextSlide() - if (e.key === 'ArrowUp') prevSlide() + if (e.key === 'ArrowDown') nextSlide(); + if (e.key === 'ArrowUp') prevSlide(); } - window.addEventListener('wheel', handleScroll) - window.addEventListener('keydown', handleKey) + window.addEventListener('wheel', handleScroll); + window.addEventListener('keydown', handleKey); + window.addEventListener('touchstart', handleTouchStart); + window.addEventListener('touchend', handleTouchEnd); + window.addEventListener('touchmove', handleTouchMove); return () => { - window.removeEventListener('wheel', handleScroll) + window.removeEventListener('wheel', handleScroll);; window.removeEventListener('keydown', handleKey) } - }, [current, nextSlide, prevSlide]) + }, [current, nextSlide, prevSlide, handleTouchStart, handleTouchEnd, handleTouchMove]) return ( @@ -58,7 +87,7 @@ export default function Home() { {slide} ))} -