diff --git a/web/src/components/Leaderboard.tsx b/web/src/components/Leaderboard.tsx index e9dd4872d..49b2f3fa7 100644 --- a/web/src/components/Leaderboard.tsx +++ b/web/src/components/Leaderboard.tsx @@ -45,10 +45,11 @@ const Leaderboard = ({ const [targetGameId, setTargetGameId] = useState(""); const [name, setName] = useState(""); + const pageSize = 10 const [hasNextPage, setHasNextPage] = useState(false); - const [visibleScores, setVisibleScores] = useState(10); + const [visibleScores, setVisibleScores] = useState(pageSize); - const listRef = useRef(null); + const listRef = useRef(null); useEffect(() => { setHasNextPage(visibleScores < scores.length); @@ -56,11 +57,13 @@ const Leaderboard = ({ const fetchNextPage = useCallback(() => { - setVisibleScores(visibleScores+10) + setVisibleScores(visibleScores+pageSize) setTimeout(() => { - listRef.current?.lastElementChild?.scrollIntoView({ behavior: 'smooth' }); + if (! listRef.current) return + const lastEl = listRef.current['lastElementChild'] + lastEl && lastEl.scrollIntoView({ behavior: 'smooth' }); },150) - }); + },[listRef.current]); const onSubmitName = useCallback(async () => { @@ -80,7 +83,7 @@ const Leaderboard = ({ return ( <> - + { }; -// TODO : use when supported on torii -export const useGlobalScoresIninite = (offset?: number, limit?: number) => { - const [scores, setScores] = useState([]); - // Gets top 10 - // TODO: paginate with cursor for more scores - const { data, isFetched, refetch, hasNextPage, fetchNextPage, ...props } = - useInfiniteGlobalScoresQuery( - { - limit: limit || 10, - }, - { - getNextPageParam: (lastPage) => { - const edgesCount = lastPage.playerComponents?.edges?.length || 0; - if ( edgesCount === 0) return undefined - const lastItem = lastPage.playerComponents?.edges[edgesCount - 1] - return { - limit: 10, - cursor: lastItem.cursor, - }; - } - }, - ); - - useEffect(() => { - if (data?.pages.length == 0) return; - const pageCount = data?.pages.length || 0; - // debugger - const new_scores = GlobalScores.create( - data?.pages[pageCount - 1].playerComponents?.edges as PlayerEdge[], - ); - - if (new_scores) { - setScores(scores.concat(new_scores)); - } - }, [data?.pages]); - - - return { - scores, - isFetched, - refetch, - hasNextPage, - fetchNextPage, - }; -}; +// // TODO : use when supported on torii +// export const useGlobalScoresIninite = (offset?: number, limit?: number) => { +// const [scores, setScores] = useState([]); +// // Gets top 10 +// // TODO: paginate with cursor for more scores +// const { data, isFetched, refetch, hasNextPage, fetchNextPage, ...props } = +// useInfiniteGlobalScoresQuery( +// { +// limit: limit || 10, +// }, +// { +// getNextPageParam: (lastPage) => { +// const edgesCount = lastPage.playerComponents?.edges?.length || 0; +// if ( edgesCount === 0) return undefined +// const lastItem = lastPage.playerComponents?.edges[edgesCount - 1] +// return { +// limit: 10, +// cursor: lastItem.cursor, +// }; +// } +// }, +// ); + +// useEffect(() => { +// if (data?.pages.length == 0) return; +// const pageCount = data?.pages.length || 0; +// // debugger +// const new_scores = GlobalScores.create( +// data?.pages[pageCount - 1].playerComponents?.edges as PlayerEdge[], +// ); + +// if (new_scores) { +// setScores(scores.concat(new_scores)); +// } +// }, [data?.pages]); + + +// return { +// scores, +// isFetched, +// refetch, +// hasNextPage, +// fetchNextPage, +// }; +// }; diff --git a/web/src/generated/graphql.ts b/web/src/generated/graphql.ts index 929e5ee39..3d95fa483 100644 --- a/web/src/generated/graphql.ts +++ b/web/src/generated/graphql.ts @@ -367,14 +367,14 @@ export type Player = { cash?: Maybe; drug_count?: Maybe; entity?: Maybe; - game_id?: Maybe; - health?: Maybe; - location_id?: Maybe; - player_id?: Maybe; - run_attempts?: Maybe; - status?: Maybe; - turns_remaining?: Maybe; - turns_remaining_on_death?: Maybe; + game_id?: Maybe; + health?: Maybe; + location_id?: Maybe; + player_id?: Maybe; + run_attempts?: Maybe; + status?: Maybe; + turns_remaining?: Maybe; + turns_remaining_on_death?: Maybe; }; export type PlayerConnection = { @@ -395,88 +395,86 @@ export type PlayerOrder = { }; export enum PlayerOrderOrderField { - - BagLimit = "BAG_LIMIT", - Cash = "CASH", - DrugCount = "DRUG_COUNT", - GameId = "GAME_ID", - Health = "HEALTH", - LocationId = "LOCATION_ID", - PlayerId = "PLAYER_ID", - RunAttempts = "RUN_ATTEMPTS", - Status = "STATUS", - TurnsRemaining = "TURNS_REMAINING", - TurnsRemainingOnDeath = "TURNS_REMAINING_ON_DEATH", + BagLimit = 'BAG_LIMIT', + Cash = 'CASH', + DrugCount = 'DRUG_COUNT', + GameId = 'GAME_ID', + Health = 'HEALTH', + LocationId = 'LOCATION_ID', + PlayerId = 'PLAYER_ID', + RunAttempts = 'RUN_ATTEMPTS', + Status = 'STATUS', + TurnsRemaining = 'TURNS_REMAINING', + TurnsRemainingOnDeath = 'TURNS_REMAINING_ON_DEATH' } export type PlayerWhereInput = { - bag_limit?: InputMaybe; - bag_limitGT?: InputMaybe; - bag_limitGTE?: InputMaybe; - bag_limitLT?: InputMaybe; - bag_limitLTE?: InputMaybe; - bag_limitNEQ?: InputMaybe; - cash?: InputMaybe; - cashGT?: InputMaybe; - cashGTE?: InputMaybe; - cashLT?: InputMaybe; - cashLTE?: InputMaybe; - cashNEQ?: InputMaybe; - drug_count?: InputMaybe; - drug_countGT?: InputMaybe; - drug_countGTE?: InputMaybe; - drug_countLT?: InputMaybe; - drug_countLTE?: InputMaybe; - drug_countNEQ?: InputMaybe; - game_id?: InputMaybe; - game_idGT?: InputMaybe; - game_idGTE?: InputMaybe; - game_idLT?: InputMaybe; - game_idLTE?: InputMaybe; - game_idNEQ?: InputMaybe; - health?: InputMaybe; - healthGT?: InputMaybe; - healthGTE?: InputMaybe; - healthLT?: InputMaybe; - healthLTE?: InputMaybe; - healthNEQ?: InputMaybe; - location_id?: InputMaybe; - location_idGT?: InputMaybe; - location_idGTE?: InputMaybe; - location_idLT?: InputMaybe; - location_idLTE?: InputMaybe; - location_idNEQ?: InputMaybe; - player_id?: InputMaybe; - player_idGT?: InputMaybe; - player_idGTE?: InputMaybe; - player_idLT?: InputMaybe; - player_idLTE?: InputMaybe; - player_idNEQ?: InputMaybe; - run_attempts?: InputMaybe; - run_attemptsGT?: InputMaybe; - run_attemptsGTE?: InputMaybe; - run_attemptsLT?: InputMaybe; - run_attemptsLTE?: InputMaybe; - run_attemptsNEQ?: InputMaybe; - status?: InputMaybe; - statusGT?: InputMaybe; - statusGTE?: InputMaybe; - statusLT?: InputMaybe; - statusLTE?: InputMaybe; - statusNEQ?: InputMaybe; - turns_remaining?: InputMaybe; - turns_remainingGT?: InputMaybe; - turns_remainingGTE?: InputMaybe; - turns_remainingLT?: InputMaybe; - turns_remainingLTE?: InputMaybe; - turns_remainingNEQ?: InputMaybe; - turns_remaining_on_death?: InputMaybe; - turns_remaining_on_deathGT?: InputMaybe; - turns_remaining_on_deathGTE?: InputMaybe; - turns_remaining_on_deathLT?: InputMaybe; - turns_remaining_on_deathLTE?: InputMaybe; - turns_remaining_on_deathNEQ?: InputMaybe; - + bag_limit?: InputMaybe; + bag_limitGT?: InputMaybe; + bag_limitGTE?: InputMaybe; + bag_limitLT?: InputMaybe; + bag_limitLTE?: InputMaybe; + bag_limitNEQ?: InputMaybe; + cash?: InputMaybe; + cashGT?: InputMaybe; + cashGTE?: InputMaybe; + cashLT?: InputMaybe; + cashLTE?: InputMaybe; + cashNEQ?: InputMaybe; + drug_count?: InputMaybe; + drug_countGT?: InputMaybe; + drug_countGTE?: InputMaybe; + drug_countLT?: InputMaybe; + drug_countLTE?: InputMaybe; + drug_countNEQ?: InputMaybe; + game_id?: InputMaybe; + game_idGT?: InputMaybe; + game_idGTE?: InputMaybe; + game_idLT?: InputMaybe; + game_idLTE?: InputMaybe; + game_idNEQ?: InputMaybe; + health?: InputMaybe; + healthGT?: InputMaybe; + healthGTE?: InputMaybe; + healthLT?: InputMaybe; + healthLTE?: InputMaybe; + healthNEQ?: InputMaybe; + location_id?: InputMaybe; + location_idGT?: InputMaybe; + location_idGTE?: InputMaybe; + location_idLT?: InputMaybe; + location_idLTE?: InputMaybe; + location_idNEQ?: InputMaybe; + player_id?: InputMaybe; + player_idGT?: InputMaybe; + player_idGTE?: InputMaybe; + player_idLT?: InputMaybe; + player_idLTE?: InputMaybe; + player_idNEQ?: InputMaybe; + run_attempts?: InputMaybe; + run_attemptsGT?: InputMaybe; + run_attemptsGTE?: InputMaybe; + run_attemptsLT?: InputMaybe; + run_attemptsLTE?: InputMaybe; + run_attemptsNEQ?: InputMaybe; + status?: InputMaybe; + statusGT?: InputMaybe; + statusGTE?: InputMaybe; + statusLT?: InputMaybe; + statusLTE?: InputMaybe; + statusNEQ?: InputMaybe; + turns_remaining?: InputMaybe; + turns_remainingGT?: InputMaybe; + turns_remainingGTE?: InputMaybe; + turns_remainingLT?: InputMaybe; + turns_remainingLTE?: InputMaybe; + turns_remainingNEQ?: InputMaybe; + turns_remaining_on_death?: InputMaybe; + turns_remaining_on_deathGT?: InputMaybe; + turns_remaining_on_deathGTE?: InputMaybe; + turns_remaining_on_deathLT?: InputMaybe; + turns_remaining_on_deathLTE?: InputMaybe; + turns_remaining_on_deathNEQ?: InputMaybe; }; export type Query = { @@ -594,12 +592,12 @@ export type QuerySystemCallArgs = { }; export type Risks = { - __typename?: "Risks"; - capture?: Maybe; + __typename?: 'Risks'; + capture?: Maybe; entity?: Maybe; - game_id?: Maybe; - location_id?: Maybe; - travel?: Maybe; + game_id?: Maybe; + location_id?: Maybe; + travel?: Maybe; }; export type RisksConnection = { @@ -620,38 +618,37 @@ export type RisksOrder = { }; export enum RisksOrderOrderField { - - Capture = "CAPTURE", - GameId = "GAME_ID", - LocationId = "LOCATION_ID", - Travel = "TRAVEL", + Capture = 'CAPTURE', + GameId = 'GAME_ID', + LocationId = 'LOCATION_ID', + Travel = 'TRAVEL' } export type RisksWhereInput = { - capture?: InputMaybe; - captureGT?: InputMaybe; - captureGTE?: InputMaybe; - captureLT?: InputMaybe; - captureLTE?: InputMaybe; - captureNEQ?: InputMaybe; - game_id?: InputMaybe; - game_idGT?: InputMaybe; - game_idGTE?: InputMaybe; - game_idLT?: InputMaybe; - game_idLTE?: InputMaybe; - game_idNEQ?: InputMaybe; - location_id?: InputMaybe; - location_idGT?: InputMaybe; - location_idGTE?: InputMaybe; - location_idLT?: InputMaybe; - location_idLTE?: InputMaybe; - location_idNEQ?: InputMaybe; - travel?: InputMaybe; - travelGT?: InputMaybe; - travelGTE?: InputMaybe; - travelLT?: InputMaybe; - travelLTE?: InputMaybe; - travelNEQ?: InputMaybe; + capture?: InputMaybe; + captureGT?: InputMaybe; + captureGTE?: InputMaybe; + captureLT?: InputMaybe; + captureLTE?: InputMaybe; + captureNEQ?: InputMaybe; + game_id?: InputMaybe; + game_idGT?: InputMaybe; + game_idGTE?: InputMaybe; + game_idLT?: InputMaybe; + game_idLTE?: InputMaybe; + game_idNEQ?: InputMaybe; + location_id?: InputMaybe; + location_idGT?: InputMaybe; + location_idGTE?: InputMaybe; + location_idLT?: InputMaybe; + location_idLTE?: InputMaybe; + location_idNEQ?: InputMaybe; + travel?: InputMaybe; + travelGT?: InputMaybe; + travelGTE?: InputMaybe; + travelLT?: InputMaybe; + travelLTE?: InputMaybe; + travelNEQ?: InputMaybe; }; export type Subscription = { @@ -718,25 +715,11 @@ export type GlobalScoresQueryVariables = Exact<{ export type GlobalScoresQuery = { __typename?: 'Query', playerComponents?: { __typename?: 'PlayerConnection', totalCount: number, edges?: Array<{ __typename?: 'PlayerEdge', cursor: any, node?: { __typename?: 'Player', cash?: any | null, entity?: { __typename?: 'Entity', keys?: Array | null, components?: Array<{ __typename: 'Drug' } | { __typename: 'Game' } | { __typename: 'Market' } | { __typename: 'Name', short_string?: any | null } | { __typename: 'Player' } | { __typename: 'Risks' } | null> | null } | null } | null } | null> | null } | null }; export type MarketPricesQueryVariables = Exact<{ - gameId?: InputMaybe; + gameId?: InputMaybe; }>; -export type MarketPricesQuery = { - __typename?: "Query"; - marketComponents?: { - __typename?: "MarketConnection"; - edges?: Array<{ - __typename?: "MarketEdge"; - node?: { - __typename?: "Market"; - drug_id?: any | null; - location_id?: any | null; - quantity?: any | null; - cash?: any | null; - } | null; - } | null> | null; - } | null; -}; + +export type MarketPricesQuery = { __typename?: 'Query', marketComponents?: { __typename?: 'MarketConnection', edges?: Array<{ __typename?: 'MarketEdge', node?: { __typename?: 'Market', drug_id?: any | null, location_id?: any | null, quantity?: any | null, cash?: any | null } | null } | null> | null } | null }; export type GameEntityQueryVariables = Exact<{ id: Scalars['ID']; @@ -751,40 +734,7 @@ export type PlayerEntityQueryVariables = Exact<{ }>; -export type PlayerEntityQuery = { - __typename?: "Query"; - entities?: { - __typename?: "EntityConnection"; - totalCount: number; - edges?: Array<{ - __typename?: "EntityEdge"; - cursor: any; - node?: { - __typename?: "Entity"; - keys?: Array | null; - components?: Array< - | { __typename: "Drug"; drug_id?: any | null; quantity?: any | null } - | { __typename: "Game" } - | { __typename: "Market" } - | { __typename: "Name" } - | { - __typename: "Player"; - cash?: any | null; - status?: any | null; - health?: any | null; - drug_count?: any | null; - bag_limit?: any | null; - location_id?: any | null; - turns_remaining?: any | null; - turns_remaining_on_death?: any | null; - } - | { __typename: "Risks" } - | null - > | null; - } | null; - } | null> | null; - } | null; -}; +export type PlayerEntityQuery = { __typename?: 'Query', entities?: { __typename?: 'EntityConnection', totalCount: number, edges?: Array<{ __typename?: 'EntityEdge', cursor: any, node?: { __typename?: 'Entity', keys?: Array | null, components?: Array<{ __typename: 'Drug', drug_id?: any | null, quantity?: any | null } | { __typename: 'Game' } | { __typename: 'Market' } | { __typename: 'Name' } | { __typename: 'Player', cash?: any | null, status?: any | null, health?: any | null, drug_count?: any | null, bag_limit?: any | null, location_id?: any | null, turns_remaining?: any | null, turns_remaining_on_death?: any | null } | { __typename: 'Risks' } | null> | null } | null } | null> | null } | null }; export type LocationEntitiesQueryVariables = Exact<{ gameId: Scalars['String']; @@ -792,30 +742,8 @@ export type LocationEntitiesQueryVariables = Exact<{ }>; -export type LocationEntitiesQuery = { - __typename?: "Query"; - entities?: { - __typename?: "EntityConnection"; - totalCount: number; - edges?: Array<{ - __typename?: "EntityEdge"; - cursor: any; - node?: { - __typename?: "Entity"; - keys?: Array | null; - components?: Array< - | { __typename: "Drug" } - | { __typename: "Game" } - | { __typename: "Market"; cash?: any | null; quantity?: any | null } - | { __typename: "Name" } - | { __typename: "Player" } - | { __typename: "Risks"; travel?: any | null } - | null - > | null; - } | null; - } | null> | null; - } | null; -}; +export type LocationEntitiesQuery = { __typename?: 'Query', entities?: { __typename?: 'EntityConnection', totalCount: number, edges?: Array<{ __typename?: 'EntityEdge', cursor: any, node?: { __typename?: 'Entity', keys?: Array | null, components?: Array<{ __typename: 'Drug' } | { __typename: 'Game' } | { __typename: 'Market', cash?: any | null, quantity?: any | null } | { __typename: 'Name' } | { __typename: 'Player' } | { __typename: 'Risks', travel?: any | null } | null> | null } | null } | null> | null } | null }; + export const AvailableGamesDocument = ` query AvailableGames { @@ -924,13 +852,6 @@ export const useInfiniteGlobalScoresQuery = < useInfiniteGlobalScoresQuery.getKey = (variables?: GlobalScoresQueryVariables) => variables === undefined ? ['GlobalScores.infinite'] : ['GlobalScores.infinite', variables]; ; - -useInfiniteGlobalScoresQuery.getKey = ( - variables?: GlobalScoresQueryVariables, -) => - variables === undefined - ? ["GlobalScores.infinite"] - : ["GlobalScores.infinite", variables]; export const MarketPricesDocument = ` query MarketPrices($gameId: Int) { marketComponents(first: 36, where: {game_id: $gameId}) { @@ -946,47 +867,38 @@ export const MarketPricesDocument = ` } `; export const useMarketPricesQuery = < - TData = MarketPricesQuery, - TError = unknown, ->( - variables?: MarketPricesQueryVariables, - options?: UseQueryOptions, -) => - useQuery( - variables === undefined ? ["MarketPrices"] : ["MarketPrices", variables], - useFetchData( - MarketPricesDocument, - ).bind(null, variables), - options, - ); - -useMarketPricesQuery.getKey = (variables?: MarketPricesQueryVariables) => - variables === undefined ? ["MarketPrices"] : ["MarketPrices", variables]; + TData = MarketPricesQuery, + TError = unknown + >( + variables?: MarketPricesQueryVariables, + options?: UseQueryOptions + ) => + useQuery( + variables === undefined ? ['MarketPrices'] : ['MarketPrices', variables], + useFetchData(MarketPricesDocument).bind(null, variables), + options + ); + +useMarketPricesQuery.getKey = (variables?: MarketPricesQueryVariables) => variables === undefined ? ['MarketPrices'] : ['MarketPrices', variables]; +; + export const useInfiniteMarketPricesQuery = < - TData = MarketPricesQuery, - TError = unknown, ->( - variables?: MarketPricesQueryVariables, - options?: UseInfiniteQueryOptions, -) => { - const query = useFetchData( - MarketPricesDocument, - ); - return useInfiniteQuery( - variables === undefined - ? ["MarketPrices.infinite"] - : ["MarketPrices.infinite", variables], - (metaData) => query({ ...variables, ...(metaData.pageParam ?? {}) }), - options, - ); -}; + TData = MarketPricesQuery, + TError = unknown + >( + variables?: MarketPricesQueryVariables, + options?: UseInfiniteQueryOptions + ) =>{ + const query = useFetchData(MarketPricesDocument) + return useInfiniteQuery( + variables === undefined ? ['MarketPrices.infinite'] : ['MarketPrices.infinite', variables], + (metaData) => query({...variables, ...(metaData.pageParam ?? {})}), + options + )}; -useInfiniteMarketPricesQuery.getKey = ( - variables?: MarketPricesQueryVariables, -) => - variables === undefined - ? ["MarketPrices.infinite"] - : ["MarketPrices.infinite", variables]; + +useInfiniteMarketPricesQuery.getKey = (variables?: MarketPricesQueryVariables) => variables === undefined ? ['MarketPrices.infinite'] : ['MarketPrices.infinite', variables]; +; export const GameEntityDocument = ` query GameEntity($id: ID!) {