import React , { useEffect , useRef } from "react" ; export function Figure ( props ) { const FIGURE_CHANGE_RATE = 30 ; const prevScrollRef = useRef ( 0 ) ; useEffect ( ( ) => { prevScrollRef . current = props . scrollLeft ; } ) ; const getImageByScroll = ( scrollPosition , isFemale , isJumping ) : string => `${ getCharacterJumping ( isJumping ) }image-${ getCharacterGender ( isFemale ) }-${ Math . round ( scrollPosition / FIGURE_CHANGE_RATE ) % getFigureImageCount ( isFemale ) }` ; const getCharacterGender = ( isFemale ) : string => isFemale ? "girl" : "boy" ; const getFigureImageCount = ( isFemale ) : number => isFemale ? 20 : 15 ; const getCharacterJumping = ( isJumping ) : string => isJumping ? "jump-" : "" ; const getFigureDirection = ( scrollPrevPosition , scrollCurrentPosition ) : string => scrollPrevPosition / FIGURE_CHANGE_RATE <= scrollCurrentPosition / FIGURE_CHANGE_RATE ? "forward" : "backward" ; return ( < div id = "Figure" className = { `${ getFigureDirection ( prevScrollRef . current , props . scrollLeft ) } ${ getCharacterGender ( props . isFemale ) } ${ getImageByScroll ( props . scrollLeft , props . isFemale , props . isJumping ) }` } > < /div>); }