TCG: fix lobbies search and other misc ui issues

PaimaStudios · Oct 22, 2023 · 5f95399 · 5f95399
1 parent 8a4048a
commit 5f95399
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 25 deletions.
diff --git a/trading-cards/frontend/package-lock.json b/trading-cards/frontend/package-lock.json
diff --git a/trading-cards/frontend/package.json b/trading-cards/frontend/package.json
@@ -58,6 +58,7 @@
     "date-fns": "2.29.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.9.0"
+    "react-router-dom": "6.9.0",
+    "use-debounce": "^9.0.4"
   }
 }
diff --git a/trading-cards/frontend/src/pages/Collection.tsx b/trading-cards/frontend/src/pages/Collection.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Paper, Typography } from "@mui/material";
 import { useGlobalStateContext } from "@src/GlobalStateContext";
 import Button from "@src/components/Button";
 import Navbar from "@src/components/Navbar";
@@ -37,8 +37,20 @@ export default function Collection(): React.ReactElement {
       <Navbar />
       <Wrapper blurred={false}>
         {collection.cards != null && selectedDeck != null && (
-          <Box sx={{ marginRight: "auto", marginLeft: "auto" }}>
-            <Box marginBottom={1}>Currently selected cards</Box>
+          <Paper
+            sx={{
+              padding: 2,
+              background: "rgba(0,0,0,0.1)",
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: 2,
+              marginRight: "auto",
+              marginLeft: "auto",
+              marginBottom: 8
+            }}
+          >
+            <Typography sx={{ marginLeft: "auto", marginRight: "auto" }} color="white">Current cards</Typography>
             <Box
               sx={{
                 display: "flex",
@@ -53,8 +65,7 @@ export default function Collection(): React.ReactElement {
                 />
               ))}
             </Box>
-            <Box marginBottom={12} />
-          </Box>
+          </Paper>
         )}
         {sortedCards.length > 0 && <Box marginBottom={2}>{(selectedDeck?.length ?? 0) > 0 ? "New selection" : "Select your cards"}</Box>}
         <Box

diff --git a/trading-cards/frontend/src/pages/OpenLobbies.tsx b/trading-cards/frontend/src/pages/OpenLobbies.tsx
@@ -7,6 +7,7 @@ import {
   TableHead,
   TablePagination,
   TableRow,
+  Typography,
 } from "@mui/material";
 import Navbar from "@src/components/Navbar";
 import SearchBar from "@src/components/SearchBar";
@@ -18,6 +19,7 @@ import type { IGetLobbyByIdResult } from "@cards/db";
 import { useNavigate } from "react-router-dom";
 import { Page } from "@src/pages/PageCoordinator";
 import { getOpenLobbies, joinLobby, searchLobby } from "@src/services/utils";
+import { useDebounce } from 'use-debounce';
 
 type Column = {
   id: keyof IGetLobbyByIdResult | "action";
@@ -53,6 +55,19 @@ const OpenLobbies: React.FC = () => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const [searchText, setSearchText] = useState("");
+  const [debounceSearchText] = useDebounce(searchText, 1000);
+  useEffect(() => {
+    (async () => {
+      if (selectedNft.nft == null) return;
+
+      const results = await searchLobby(selectedNft.nft, debounceSearchText, 0);
+      if (results == null || results.length === 0) return;
+      const newLobbies = results.filter(
+        (result) => !lobbies.some((lobby) => lobby.lobby_id === result.lobby_id)
+      );
+      setLobbies([...lobbies, ...newLobbies]);
+    })()
+  }, [debounceSearchText])
 
   useEffect(() => {
     if (selectedNft.nft == null) return;
@@ -62,26 +77,10 @@ const OpenLobbies: React.FC = () => {
     });
   }, [selectedNft.nft]);
 
-  const handleSearchTextChange = (query: string) => {
-    setSearchText(query);
-    searchForHiddenLobby(query);
-  };
-
   const handleChangePage = (_event: unknown, newPage: number) => {
     setPage(newPage);
   };
 
-  const searchForHiddenLobby = async (query: string) => {
-    if (selectedNft.nft == null) return;
-
-    const results = await searchLobby(selectedNft.nft, query, 0);
-    if (results == null || results.length === 0) return;
-    const newLobbies = results.filter(
-      (result) => !lobbies.some((lobby) => lobby.lobby_id === result.lobby_id)
-    );
-    setLobbies([...lobbies, ...newLobbies]);
-  };
-
   const handleChangeRowsPerPage = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -111,7 +110,7 @@ const OpenLobbies: React.FC = () => {
         <SearchBar
           value={searchText}
           onRefresh={handleLobbiesRefresh}
-          onSearch={handleSearchTextChange}
+          onSearch={setSearchText}
         />
       </Navbar>
       <Wrapper>
@@ -131,6 +130,19 @@ const OpenLobbies: React.FC = () => {
               </TableRow>
             </TableHead>
             <TableBody>
+              {filteredLobbies.length === 0 && (
+                <TableRow
+                  hover
+                  role="checkbox"
+                  tabIndex={-1}
+                >
+                  <TableCell colSpan={columns.length}>
+                    <Typography sx={{ textAlign: "center", marginTop: 4, marginBottom: 4}}>
+                      No open lobbies at this time. Create your own or play against an AI
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              )}
               {filteredLobbies
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((lobby) => {

diff --git a/trading-cards/frontend/src/services/utils.ts b/trading-cards/frontend/src/services/utils.ts
@@ -57,7 +57,7 @@ export async function searchLobby(
   const response = await Paima.default.getLobbySearch(nftId, query, page, 1);
   console.log("search lobby response: ", response);
   if (!response.success) {
-    throw new Error("Could not search lobby");
+    return [];
   }
   return response.result.lobbies;
 }