diff --git a/app/browse/Catalog.jsx b/app/browse/Catalog.jsx index 600b925..3464bb3 100644 --- a/app/browse/Catalog.jsx +++ b/app/browse/Catalog.jsx @@ -65,7 +65,8 @@ import { FocusScope, Image, Text, View, VirtualList, useIsFocused } from '@ps5-r game, width: CARD_WIDTH, detailed: true, - rowEnd: index % COLUMNS === COLUMNS - 1, + rowEnd: index % COLUMNS === COLUMNS - 1 || index === all.current.length - 1, + rowStart: index % COLUMNS === 0, enterDelay: entering.current ? index * STAGGER : void 0, onFocus: () => prefetchBelow(all.current, index), onPress: () => openGame(game.id, `card:${game.id}`) diff --git a/app/search/Suggestions.jsx b/app/search/Suggestions.jsx index 15e5ef2..c0dd53c 100644 --- a/app/search/Suggestions.jsx +++ b/app/search/Suggestions.jsx @@ -68,7 +68,8 @@ import { FocusScope, ScrollView, Text, View, useIsFocused } from '@ps5-react/cor game, width: CARD_WIDTH3, onPress: () => onOpenGame(game), - rowEnd: index % COLUMNS3 === COLUMNS3 - 1 + rowEnd: index % COLUMNS3 === COLUMNS3 - 1, + rowStart: index % COLUMNS3 === 0 }, game.id ) diff --git a/app/search/index.jsx b/app/search/index.jsx index c3d89a8..4dc21f0 100644 --- a/app/search/index.jsx +++ b/app/search/index.jsx @@ -66,7 +66,8 @@ import { FocusScope, ScrollView, Text, View, VirtualList, motion } from '@ps5-re game, width: CARD_WIDTH3, onPress: () => onOpenGame(game), - rowEnd: index % COLUMNS3 === COLUMNS3 - 1 || index === results.length - 1 + rowEnd: index % COLUMNS3 === COLUMNS3 - 1 || index === results.length - 1, + rowStart: index % COLUMNS3 === 0 } ) ) diff --git a/app/ui/GameCard.jsx b/app/ui/GameCard.jsx index 0ee6a93..a5b8d5c 100644 --- a/app/ui/GameCard.jsx +++ b/app/ui/GameCard.jsx @@ -5,7 +5,7 @@ import '../assets/Inter-Regular.ttf'; import { Fragment, jsx, jsxs } from 'react/jsx-runtime'; import { useEffect, useRef, useState } from 'react'; import { prefetchWhenSettled } from '../game/art.js'; -import { focusEnd, latin, useLocale } from '../i18n/index.js'; +import { focusEnd, focusStart, latin, useLocale } from '../i18n/index.js'; import { genreLabel, onCdn } from '../state/catalog.js'; import { formatSize } from '../state/size.js'; import { useStoreActions, useWishlist } from '../state/store.jsx'; @@ -111,6 +111,7 @@ import { Text, View, motion, transitions, useIsFocused } from '@ps5-react/core'; width = 150, focusKey = `card:${game.id}`, rowEnd, + rowStart, enterDelay, caption, detailed, @@ -139,6 +140,8 @@ import { Text, View, motion, transitions, useIsFocused } from '@ps5-react/core'; motion.View, { ...focusEnd(rtl, rowEnd ? focusKey : void 0), + // A grid's first column: Left stops there instead of looking up the page for something to its left. + ...focusStart(rtl, rowStart ? focusKey : void 0), ...rest2, focusKey, onPress,