Merge pull request #29 from rayshader/feat/improve-ux

feat(Launcher): improve UX
tiltedphoques · Nov 28, 2024 · ae8be46 · ae8be46
2 parents 71306bd + 8ab71bf
commit ae8be46
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 28 deletions.
diff --git a/code/launcher/src/components/servers/HeadRow.tsx b/code/launcher/src/components/servers/HeadRow.tsx
@@ -8,6 +8,7 @@ interface HeadCell {
   id: keyof ServerData;
   label: string;
   head: boolean;
+  width?: string;
 }
 
 type Order = 'asc' | 'desc';
@@ -17,13 +18,14 @@ const headCells: readonly HeadCell[] = [
     id: 'name',
     head: true,
     disablePadding: true,
-    label: 'Server Name'
+    label: 'Server Name',
   },
   {
     id: 'players',
     head: false,
     disablePadding: false,
-    label: 'Player Count'
+    label: 'Players',
+    width: '112px',
   },
   {
     id: 'tags',
@@ -35,19 +37,22 @@ const headCells: readonly HeadCell[] = [
     id: 'ip',
     head: false,
     disablePadding: false,
-    label: 'Address'
+    label: 'Address',
+    width: '190px',
   },
   {
     id: 'version',
     head: false,
     disablePadding: false,
-    label: 'Version'
+    label: 'Version',
+    width: '112px',
   },
   {
     id: 'favorite',
     head: false,
     disablePadding: false,
-    label: 'Favorite'
+    label: 'Favorite',
+    width: '112px',
   }
 ]
 
@@ -67,6 +72,7 @@ export default function HeadRow (props: HeadRowProps) {
         <TableCell
           key={headCell.id}
           sx={{ p: 2 }}
+          width={headCell.width}
           align={headCell.head ? 'left' : 'right'}
           padding={headCell.disablePadding ? 'none' : 'normal'}
           sortDirection={orderBy === headCell.id ? order : false}

diff --git a/code/launcher/src/components/servers/ServerList.tsx b/code/launcher/src/components/servers/ServerList.tsx
@@ -79,6 +79,9 @@ function stableSort<T> (array: readonly T[], comparator: (a: T, b: T) => number)
 const ipv6Regex = /^(?:(?:[a-fA-F\d]{1,4}:){7}(?:[a-fA-F\d]{1,4}|:)|(?:[a-fA-F\d]{1,4}:){6}(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|:[a-fA-F\d]{1,4}|:)|(?:[a-fA-F\d]{1,4}:){5}(?::(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|(?::[a-fA-F\d]{1,4}){1,2}|:)|(?:[a-fA-F\d]{1,4}:){4}(?:(?::[a-fA-F\d]{1,4}){0,1}:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|(?::[a-fA-F\d]{1,4}){1,3}|:)|(?:[a-fA-F\d]{1,4}:){3}(?:(?::[a-fA-F\d]{1,4}){0,2}:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|(?::[a-fA-F\d]{1,4}){1,4}|:)|(?:[a-fA-F\d]{1,4}:){2}(?:(?::[a-fA-F\d]{1,4}){0,3}:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|(?::[a-fA-F\d]{1,4}){1,5}|:)|(?:[a-fA-F\d]{1,4}:){1}(?:(?::[a-fA-F\d]{1,4}){0,4}:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|(?::[a-fA-F\d]{1,4}){1,6}|:)|(?::(?:(?::[a-fA-F\d]{1,4}){0,5}:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}|(?::[a-fA-F\d]{1,4}){1,7}|:)))(?:%[0-9a-zA-Z]{1,})?$/gm
 
 export default function ServerList () {
+  // Keep in sync with the number of cells from HeadRow/ServerRow
+  const columns: number = 6;
+
   const [servers, setServers] = useState<ServerData[]>([])
   const [order, setOrder] = useState<Order>('asc')
   const [orderBy, setOrderBy] = useState<keyof ServerData>('name')
@@ -244,7 +247,7 @@ export default function ServerList () {
             <Table
               sx={{ minWidth: 750, tableLayout: 'fixed' }}
               aria-labelledby="tableTitle"
-              size='medium'
+              size="small"
             >
               <TableHead>
                 <HeadRow
@@ -268,13 +271,27 @@ export default function ServerList () {
                       }}
                     />
                   )}
+                {visibleRows.length === 0 && servers.length > 0 && (
+                  <TableRow>
+                    <TableCell colSpan={columns} sx={{ height: '53px', textAlign: 'center' }}>
+                      Your search did not return any matching servers.
+                    </TableCell>
+                  </TableRow>
+                )}
                 {emptyRows > 0 && (
                   <TableRow
                     style={{
                       height: (53) * emptyRows
                     }}
                   >
-                    <TableCell colSpan={6}/>
+                    <TableCell colSpan={columns}/>
+                  </TableRow>
+                )}
+                {servers.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={columns} sx={{ height: '53px', textAlign: 'center' }}>
+                      There are currently no servers available.
+                    </TableCell>
                   </TableRow>
                 )}
               </TableBody>

diff --git a/code/launcher/src/components/servers/ServerRow.tsx b/code/launcher/src/components/servers/ServerRow.tsx
@@ -21,27 +21,24 @@ export default function ServerRow (props: Props) {
       tabIndex={-1}
       key={row.ip}
     >
-      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} component="th" id={labelId} scope="row" padding="none" width='25%'><Box className="textContainer">{row.name}</Box></TableCell>
-      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right" width='15%'><Box className="textContainer">{row.players}</Box></TableCell>
-      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right" width='15%'><Box className="textContainer">{row.tags}</Box></TableCell>
-      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right" width='15%'><Box className="textContainer">{row.ip}</Box></TableCell>
-      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right" width='15%'><Box className="textContainer">{row.version}</Box></TableCell>
-      <TableCell sx={{ p: 2 }} align="right" width='15%'>
-        <Box className="textContainer">
-          <IconButton sx={{ zIndex: 10 }}
-                      color="primary"
-                      onClick={() => {
-                        setServers(produce(lastServers => {
-                          lastServers.forEach((lastServer) => {
-                            if (row.ip === lastServer.ip) {
-                              lastServer.favorite = +!lastServer.favorite
-                            }
-                          })
-                        }))
-                      }}>
-            {row.favorite ? <FavoriteIcon/> : <FavoriteIconEmpty/>}
-          </IconButton>
-        </Box>
+      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} component="th" id={labelId} scope="row" padding="none"><Box className="textContainer">{row.name}</Box></TableCell>
+      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right"><Box className="textContainer">{row.players}</Box></TableCell>
+      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right"><Box className="textContainer">{row.tags}</Box></TableCell>
+      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right"><Box className="textContainer">{row.ip}</Box></TableCell>
+      <TableCell onClick={() => onStart(row)} sx={{ p: 2, cursor: 'pointer' }} align="right"><Box className="textContainer">{row.version}</Box></TableCell>
+      <TableCell sx={{ p: 2 }} align="right">
+        <IconButton color="primary"
+                    onClick={() => {
+                      setServers(produce(lastServers => {
+                        lastServers.forEach((lastServer) => {
+                          if (row.ip === lastServer.ip) {
+                            lastServer.favorite = +!lastServer.favorite
+                          }
+                        })
+                      }))
+                    }}>
+          {row.favorite ? <FavoriteIcon/> : <FavoriteIconEmpty/>}
+        </IconButton>
       </TableCell>
     </TableRow>
   )