Merge pull request #51 from game-node-app/dev

HLTB playtime MVP
game-node-app · Mar 28, 2024 · 0a57d66 · 0a57d66
2 parents e06e7d3 + f321e69
commit 0a57d66
Show file tree

Hide file tree

Showing 15 changed files with 117 additions and 26 deletions.
diff --git a/src/components/collection/collection-entry/view/CollectionEntriesView.tsx b/src/components/collection/collection-entry/view/CollectionEntriesView.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import { CollectionEntry } from "@/wrapper/server";
 import { Container, Stack } from "@mantine/core";
 import GameView from "@/components/general/view/game/GameView";
-import GameSearchResultErrorMessage from "@/components/game/search/view/result/GameSearchResultErrorMessage";
+import GameSearchResultErrorMessage from "@/components/game/search/GameSearchResultErrorMessage";
 import CenteredLoading from "@/components/general/CenteredLoading";
 import { Box, Space } from "@mantine/core";
 import GameViewLayoutSwitcher from "@/components/general/view/game/GameViewLayoutSwitcher";

diff --git a/src/components/game/info/GameInfoDetails.tsx b/src/components/game/info/GameInfoDetails.tsx
@@ -7,6 +7,7 @@ import GameInfoPlatforms from "@/components/game/info/GameInfoPlatforms";
 import GameInfoDetailsDeveloperInfo from "@/components/game/info/GameInfoDetailsDeveloperInfo";
 import GameInfoDetailsTags from "@/components/game/info/GameInfoDetailsTags";
 import GameInfoScore from "@/components/game/info/GameInfoScore";
+import GameInfoPlaytime from "@/components/game/info/playtime/GameInfoPlaytime";
 
 interface IGameInfoDetailsProps {
     game: Game | undefined;
@@ -36,6 +37,7 @@ const GameInfoDetails = ({ game }: IGameInfoDetailsProps) => {
                     />
                 </DetailsBox>
                 <GameInfoScore gameId={game.id} />
+                <GameInfoPlaytime gameId={game.id} />
             </SimpleGrid>
         </Stack>
     );

diff --git a/src/components/game/info/GameInfoPlatforms.tsx b/src/components/game/info/GameInfoPlatforms.tsx
@@ -76,8 +76,7 @@ const GameInfoPlatforms = ({
         });
     }, [iconsProps, iconsQuery.data, iconsQuery.isLoading]);
 
-    const isEmpty =
-        !iconsQuery.isLoading && (icons == undefined || icons.length === 0);
+    const isEmpty = icons == undefined || icons.length === 0;
     const platformInfo = getGamePlatformInfo(game);
     const platformsNames = platformInfo.platformsAbbreviations?.join(", ");
     return (
@@ -89,7 +88,7 @@ const GameInfoPlatforms = ({
                     wrap={"wrap"}
                     {...others}
                 >
-                    {isEmpty && "Unknown"}
+                    {!iconsQuery.isLoading && isEmpty && "Unknown"}
                     {icons}
                 </Group>
             </Popover.Target>

diff --git a/src/components/game/info/GameInfoScore.tsx b/src/components/game/info/GameInfoScore.tsx
@@ -69,12 +69,7 @@ const GameInfoScore = ({ gameId }: Props) => {
             });
     }, [score.data]);
     return (
-        <DetailsBox
-            withBorder
-            withDimmedTitle
-            title={"User Rating"}
-            enabled={score.isSuccess && score.data != undefined}
-        >
+        <DetailsBox withBorder withDimmedTitle title={"User Rating"}>
             <Popover>
                 <Popover.Target>
                     <Center className={"mt-6 mb-6"}>

diff --git a/src/components/game/info/carousel/GameInfoImageCarousel.tsx b/src/components/game/info/carousel/GameInfoImageCarousel.tsx
@@ -64,14 +64,6 @@ const GameInfoImageCarousel = ({
         return null;
     }
 
-    if (combinedImages == undefined || combinedImages.length === 0) {
-        return (
-            <Flex>
-                <Text>No images found.</Text>
-            </Flex>
-        );
-    }
-
     const buildSlides = () => {
         return combinedImages.map((url, index) => {
             const urlToUse = getSizedImageUrl(url, imageSize);

diff --git a/src/components/game/info/playtime/GameInfoPlaytime.tsx b/src/components/game/info/playtime/GameInfoPlaytime.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { SyncHltbService } from "@/wrapper/server";
+import { DetailsBox } from "@/components/general/DetailsBox";
+import GameInfoPlaytimeItem from "@/components/game/info/playtime/GameInfoPlaytimeItem";
+import { Space, Text } from "@mantine/core";
+
+interface Props {
+    gameId: number;
+}
+
+const GameInfoPlaytime = ({ gameId }: Props) => {
+    const playtimeQuery = useQuery({
+        queryKey: ["game", "playtime", gameId],
+        queryFn: () => {
+            return SyncHltbService.hltbControllerFindPlaytimeForGameId(gameId);
+        },
+        enabled: !!gameId,
+        staleTime: Infinity,
+        retry: 1,
+    });
+    const playtime = playtimeQuery.data;
+    return (
+        <DetailsBox
+            title={"Playtime"}
+            withBorder
+            withDimmedTitle
+            enabled={playtimeQuery.isLoading || playtimeQuery.isSuccess}
+            stackProps={{
+                gap: 1,
+            }}
+        >
+            <Space h={"0.8rem"} />
+            <GameInfoPlaytimeItem
+                name={"Main"}
+                isLoading={playtimeQuery.isLoading}
+                value={playtime?.timeMain}
+            />
+            <GameInfoPlaytimeItem
+                name={"Main + Extras"}
+                isLoading={playtimeQuery.isLoading}
+                value={playtime?.timePlus}
+            />
+            <GameInfoPlaytimeItem
+                name={"100%"}
+                isLoading={playtimeQuery.isLoading}
+                value={playtime?.time100}
+            />
+            <Text className={"text-center text-xs mt-4"} c={"dimmed"}>
+                Data provided by <a href={"https://howlongtobeat.com"}>HLTB</a>
+            </Text>
+        </DetailsBox>
+    );
+};
+
+export default GameInfoPlaytime;
diff --git a/src/components/game/info/playtime/GameInfoPlaytimeItem.tsx b/src/components/game/info/playtime/GameInfoPlaytimeItem.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Group, Stack, Text } from "@mantine/core";
+
+interface Props {
+    name: string;
+    // Assumed to be in seconds
+    value: number | null | undefined;
+    isLoading: boolean;
+}
+
+const GameInfoPlaytimeItem = ({ name, value, isLoading }: Props) => {
+    if (!value) {
+        return null;
+    }
+    const valueHours = Math.ceil(value / 3600);
+    return (
+        <Group className={"flex-nowrap gap-0 w-full"}>
+            <Stack
+                className={
+                    "items-center w-1/2 h-10 justify-center bg-[#1F1F1F] border-[#2E2E2E] border-[1px] rounded-l"
+                }
+            >
+                {name}
+            </Stack>
+            <Stack
+                className={
+                    "items-center font-bold w-1/2 h-10 justify-center bg-[#F15025] border-[#2E2E2E] border-[1px] rounded-r"
+                }
+            >
+                {valueHours} Hours
+            </Stack>
+        </Group>
+    );
+};
+
+export default GameInfoPlaytimeItem;
diff --git a/src/components/game/info/share/GameInfoSharePreview.tsx b/src/components/game/info/share/GameInfoSharePreview.tsx
@@ -67,6 +67,7 @@ const GameInfoSharePreview = ({
                             readOnly
                             value={rating}
                             color={"#F15025"}
+                            fractions={2}
                             size={"lg"}
                         />
                     )}

diff --git a/src/components/game/search/GameSearchFilters.tsx b/src/components/game/search/GameSearchFilters.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const GameSearchFilters = () => {
+    return <div></div>;
+};
+
+export default GameSearchFilters;
diff --git a/...w/result/GameSearchResultErrorMessage.tsx → ...e/search/GameSearchResultErrorMessage.tsx b/...w/result/GameSearchResultErrorMessage.tsx → ...e/search/GameSearchResultErrorMessage.tsx
diff --git a/...arch/view/result/GameSearchResultView.tsx → ...ents/game/search/GameSearchResultView.tsx b/...arch/view/result/GameSearchResultView.tsx → ...ents/game/search/GameSearchResultView.tsx
diff --git a/src/components/review/view/ReviewListItem.tsx b/src/components/review/view/ReviewListItem.tsx
@@ -77,6 +77,7 @@ const ReviewListItem = ({ review, onEditStart }: IReviewListViewProps) => {
                     {onMobile && (
                         <Rating
                             readOnly
+                            fractions={2}
                             value={review.rating}
                             className={"mt-0 lg:mt-4"}
                         />

diff --git a/src/pages/explore/index.tsx b/src/pages/explore/index.tsx
@@ -174,13 +174,15 @@ const Index = () => {
     if (isError) {
         return (
             <CenteredErrorMessage
-                message={"Error while trying to fetch games"}
+                message={
+                    "Error while trying to fetch games. Please reload this page."
+                }
             />
         );
     }
 
     return (
-        <Stack className={"w-full"} align={"center"}>
+        <Stack className={"w-full mb-8"} align={"center"}>
             <Stack className={"w-full lg:w-10/12 "}>
                 <GameView layout={"grid"}>
                     <ExploreScreenFilters

diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
@@ -4,7 +4,7 @@ import SearchBar from "@/components/general/input/SearchBar/SearchBar";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import GameSearchResultView from "@/components/game/search/view/result/GameSearchResultView";
+import GameSearchResultView from "@/components/game/search/GameSearchResultView";
 import { GameSearchRequestDto } from "@/components/game/search/utils/types";
 import useSearchGames from "@/components/game/hooks/useSearchGames";
 import TrendingGamesList from "@/components/game/trending/TrendingGamesList";
@@ -19,8 +19,6 @@ const SearchFormSchema = z.object({
 
 type TSearchFormValues = z.infer<typeof SearchFormSchema>;
 
-const ITEMS_PER_PAGE = 20;
-
 const DEFAULT_SEARCH_PARAMETERS: GameSearchRequestDto = {
     query: undefined,
     page: 1,
@@ -51,7 +49,6 @@ const queryDtoToSearchParams = (dto: GameSearchRequestDto) => {
 const Index = () => {
     const {
         handleSubmit,
-        register,
         setValue,
         watch,
         formState: { errors },
@@ -83,7 +80,10 @@ const Index = () => {
         router.replace({
             query: searchParams.toString(),
         });
-        setSearchParameters(data);
+        setSearchParameters((previous) => ({
+            ...previous,
+            ...data,
+        }));
     };
 
     /**

diff --git a/src/wrapper/input/server_swagger.json b/src/wrapper/input/server_swagger.json