diff --git a/frontend/src/pages/GekanatorPage.tsx b/frontend/src/pages/GekanatorPage.tsx index cdce7a0..304e997 100644 --- a/frontend/src/pages/GekanatorPage.tsx +++ b/frontend/src/pages/GekanatorPage.tsx @@ -2753,26 +2753,13 @@ const GekanatorBackdrop: FC<{ nextThumbnails) const [flipVisualSeed, setFlipVisualSeed] = useState (visualSeed) const [isFlippingTiles, setIsFlippingTiles] = useState (false) - const [isCrossfading, setIsCrossfading] = useState (false) - const isLeavingGuessBackdrop = displayedBackdropMode === 'guess' && backdropMode !== 'guess' - - const renderBackdropMode = isLeavingGuessBackdrop ? backdropMode : displayedBackdropMode - - const renderWinningRunCount = (isLeavingGuessBackdrop - ? winningRunQuestionCount - : displayedWinningRunCount) - - const renderThumbnails = isLeavingGuessBackdrop ? nextThumbnails : displayedThumbnails - - const renderIsCrossfading = isCrossfading && !(isLeavingGuessBackdrop) - - const renderedSettings = settingsForMode (renderBackdropMode) + const renderedSettings = settingsForMode (displayedBackdropMode) const renderedTileCount = renderedSettings.columns * renderedSettings.rows - const renderedScale = scaleForMode (renderBackdropMode, renderWinningRunCount) + const renderedScale = scaleForMode (displayedBackdropMode, displayedWinningRunCount) - const isGuessPresentation = backdropMode === 'guess' - const crossfadeDuration = motionMode === 'calm' ? .95 : .75 + const isGuessPresentation = + backdropMode === 'guess' || displayedBackdropMode === 'guess' useEffect (() => { guessAnimationControlsRef.current.forEach (control => control.stop ()) @@ -2866,7 +2853,6 @@ const GekanatorBackdrop: FC<{ { applyDirection () setIsFlippingTiles (false) - setIsCrossfading (false) setFlipVisualSeed (visualSeed) return } @@ -2874,7 +2860,6 @@ const GekanatorBackdrop: FC<{ if (backdropMode === 'guess' && guessThumbnail) { setIsFlippingTiles (false) - setIsCrossfading (false) setDisplayedBackdropMode ('guess') setDisplayedWinningRunCount (winningRunQuestionCount) setDisplayedThumbnails (nextThumbnails) @@ -2894,7 +2879,6 @@ const GekanatorBackdrop: FC<{ setFromThumbnails (nextThumbnails) setToThumbnails (nextThumbnails) setIsFlippingTiles (false) - setIsCrossfading (false) setFlipVisualSeed (visualSeed) return } @@ -2903,23 +2887,6 @@ const GekanatorBackdrop: FC<{ { applyDirection () setIsFlippingTiles (false) - setIsCrossfading (false) - setFlipVisualSeed (visualSeed) - return - } - - if (displayedBackdropMode === 'guess' && backdropMode !== 'guess') - { - applyDirection () - x.set (0) - y.set (0) - setIsFlippingTiles (false) - setIsCrossfading (false) - setDisplayedBackdropMode (backdropMode) - setDisplayedWinningRunCount (winningRunQuestionCount) - setDisplayedThumbnails (nextThumbnails) - setFromThumbnails (nextThumbnails) - setToThumbnails (nextThumbnails) setFlipVisualSeed (visualSeed) return } @@ -2942,10 +2909,7 @@ const GekanatorBackdrop: FC<{ setFromThumbnails (currentThumbnails) setToThumbnails (nextThumbnails) - const shouldCrossfade = - displayedBackdropMode === 'winning_run' && backdropMode === 'normal' - setIsCrossfading (shouldCrossfade) - setIsFlippingTiles (!(shouldCrossfade)) + setIsFlippingTiles (true) flipTimerRef.current = window.setTimeout (() => { setDisplayedBackdropMode (backdropMode) @@ -2954,11 +2918,10 @@ const GekanatorBackdrop: FC<{ setFromThumbnails (nextThumbnails) setToThumbnails (nextThumbnails) setIsFlippingTiles (false) - setIsCrossfading (false) applyDirection () setFlipVisualSeed (visualSeed) flipTimerRef.current = null - }, (shouldCrossfade ? crossfadeDuration : tileFlipDuration) * 1000) + }, tileFlipDuration * 1000) return () => { if (flipTimerRef.current !== null) @@ -2978,126 +2941,10 @@ const GekanatorBackdrop: FC<{ visualSeed, activeDirection, winningRunQuestionCount, - crossfadeDuration, tileFlipDuration, x, y]) - const renderTileSet = ( - { mode, - thumbnails, - settings, - tileCount, - scale, - opacity, - withFlip }: { mode: 'normal' | 'winning_run' | 'guess' - thumbnails: string[] - settings: { columns: number; rows: number; opacity: number } - tileCount: number - scale: number - opacity?: number - withFlip?: boolean }) => { - const guessModeFlg = mode === 'guess' - - return ( - - {Array.from ({ length: 9 }, (_, duplicate) => { - const column = duplicate % 3 - const row = Math.floor (duplicate / 3) - - return ( - - {Array.from ({ length: tileCount }, (_, index) => { - const currentThumbnail = - thumbnails[index % Math.max (thumbnails.length, 1)] - const frontThumbnail = - withFlip - ? fromThumbnails[index % Math.max (fromThumbnails.length, 1)] - : currentThumbnail - const backThumbnail = - withFlip - ? toThumbnails[index % Math.max (toThumbnails.length, 1)] - : currentThumbnail - const thumbnail = currentThumbnail - if (!(thumbnail) || !(frontThumbnail) || !(backThumbnail)) - return null - - return ( - - {(mode !== 'normal' || !(withFlip)) - ? ( - ) - : ( - - - - )} - ) - })} - ) - })} - ) - } - if (motionMode === 'off' || nextThumbnails.length === 0) return (
- {renderIsCrossfading - ? ( - <> - {renderTileSet ({ - mode: displayedBackdropMode, - thumbnails: fromThumbnails, - settings: settingsForMode (displayedBackdropMode), - tileCount: (settingsForMode (displayedBackdropMode).columns - * settingsForMode (displayedBackdropMode).rows), - scale: scaleForMode (displayedBackdropMode, displayedWinningRunCount), - opacity: 0 })} - {renderTileSet ({ - mode: backdropMode, - thumbnails: toThumbnails, - settings: targetSettings, - tileCount: targetTileCount, - scale: scaleForMode (backdropMode, winningRunQuestionCount), - opacity: 1 })} - ) - : ( - renderTileSet ({ - mode: renderBackdropMode, - thumbnails: renderThumbnails, - settings: renderedSettings, - tileCount: renderedTileCount, - scale: renderedScale, - withFlip: isFlippingTiles && !(isLeavingGuessBackdrop) }))} + className="relative h-full w-full" + animate={{ scale: renderedScale, + x: displayedBackdropMode === 'guess' ? guessFocusOffset.x : '0%', + y: displayedBackdropMode === 'guess' ? guessFocusOffset.y : '0%' }} + transition={(displayedBackdropMode === 'winning_run' + || displayedBackdropMode === 'guess') + ? { duration: motionMode === 'calm' ? .95 : .75, + ease: [.16, 1, .3, 1] } + : { duration: .2 }}> + {Array.from ({ length: 9 }, (_, duplicate) => { + const column = duplicate % 3 + const row = Math.floor (duplicate / 3) + + return ( + + {Array.from ({ length: renderedTileCount }, (_, index) => { + const currentThumbnail = + displayedThumbnails[ + index % Math.max (displayedThumbnails.length, 1)] + const frontThumbnail = + isFlippingTiles + ? fromThumbnails[index % Math.max (fromThumbnails.length, 1)] + : currentThumbnail + const backThumbnail = + isFlippingTiles + ? toThumbnails[index % Math.max (toThumbnails.length, 1)] + : currentThumbnail + const thumbnail = + displayedBackdropMode === 'winning_run' + || displayedBackdropMode === 'guess' + ? nextThumbnails[index % Math.max (nextThumbnails.length, 1)] + : currentThumbnail + if (!(thumbnail) || !(frontThumbnail) || !(backThumbnail)) + return null + + return ( + + {(displayedBackdropMode !== 'normal' || !(isFlippingTiles)) + ? ( + ) + : ( + + + + )} + ) + })} + ) + })}