Cleanup extraneous api requests, improve grid sizing on phones

JustAman62 · Aug 31, 2024 · ad496e1 · ad496e1
1 parent 3ba1ec4
commit ad496e1
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 17 deletions.
diff --git a/server/GridBattle.Api/Api/LeaderboardApi.cs b/server/GridBattle.Api/Api/LeaderboardApi.cs
@@ -132,6 +132,16 @@ ClaimsPrincipal user
         if (userId is null || username is null)
             return Results.Forbid();
 
+        // check for an existing entry, and return it
+        var existing = await dbContext
+            .LeaderboardEntries.Where(x => x.GridId == gridId && x.UserId == userId)
+            .FirstOrDefaultAsync();
+
+        if (existing is not null)
+        {
+            return TypedResults.Ok(existing);
+        }
+
         var newEntry = new LeaderboardEntry
         {
             GridId = gridId,

diff --git a/ui/src/UserContext.tsx b/ui/src/UserContext.tsx
@@ -241,7 +241,7 @@ function LoginModal({
         <FloatingLabel
           id="username"
           name="username"
-          className="bg-slate-900"
+          className="dark:bg-slate-900"
           variant="outlined"
           label="Username"
           autoComplete="username"
@@ -254,7 +254,7 @@ function LoginModal({
           <FloatingLabel
             id="email"
             name="email"
-            className="bg-slate-900"
+            className="dark:bg-slate-900"
             variant="outlined"
             label="Email"
             type="email"
@@ -268,7 +268,7 @@ function LoginModal({
         <FloatingLabel
           id="password"
           name="password"
-          className="bg-slate-900"
+          className="dark:bg-slate-900"
           variant="outlined"
           label="Password"
           type="password"
@@ -290,7 +290,7 @@ function LoginModal({
       <FloatingLabel
         id="verification-code"
         name="verification-code"
-        className="bg-slate-900"
+        className="dark:bg-slate-900"
         variant="outlined"
         label="Verification Code"
         autoCorrect="false"

diff --git a/ui/src/grid/InteractiveGrid.tsx b/ui/src/grid/InteractiveGrid.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 function Row({ children }: React.PropsWithChildren) {
-  return <div className="flex flex-row aspect-[6/1] gap-1 md:gap-2">{children}</div>;
+  return <div className="flex flex-row aspect-[5/1] md:aspect-[6/1] gap-1 md:gap-2">{children}</div>;
 }
 
 export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props) {

diff --git a/ui/src/grid/SimpleGrid.tsx b/ui/src/grid/SimpleGrid.tsx
@@ -10,14 +10,14 @@ export default function SimpleGrid({ grid, matchedCount, title }: { grid: Grid;
       {title && <h1 className="self-center font-semibold text-sm text-black dark:text-gray-200">{title}</h1>}
       {_.range(0, matchedCount).map((i) => {
         return (
-          <div key={i} className="flex flex-row aspect-[6/1] bg-green-700 rounded">
+          <div key={i} className="flex flex-row aspect-[5/1] md:aspect-[6/1] bg-green-700 rounded">
 
           </div>
         );
       })}
       {_.range(matchedCount, rowCount).map((i) => {
         return (
-          <div key={i} className="flex flex-row gap-1 aspect-[6/1]">
+          <div key={i} className="flex flex-row gap-1 aspect-[5/1] md:aspect-[6/1]">
             {_.range(columnCount).map((j) => (
               <div key={j} className="bg-gray-200 grow rounded"></div>
             ))}

diff --git a/ui/src/leaderboard/LeaderboardEntriesTable.tsx b/ui/src/leaderboard/LeaderboardEntriesTable.tsx
@@ -38,25 +38,25 @@ export default function LeaderboardEntriesTable({ gridId, leaderboardId }: { gri
   return (
     <Table>
       <Table.Head>
-        <Table.HeadCell>Pos</Table.HeadCell>
-        <Table.HeadCell>Username</Table.HeadCell>
-        <Table.HeadCell>Entry Date</Table.HeadCell>
-        <Table.HeadCell>Time</Table.HeadCell>
+        <Table.HeadCell className="p-1"></Table.HeadCell>
+        <Table.HeadCell className="p-2">Username</Table.HeadCell>
+        <Table.HeadCell className="p-2">Entry Date</Table.HeadCell>
+        <Table.HeadCell className="p-2">Time</Table.HeadCell>
       </Table.Head>
       <Table.Body>
         {entries.map((entry, i) => (
           <Table.Row key={entry.userId}>
-            <Table.Cell>{i + offset + 1}</Table.Cell>
-            <Table.Cell>
+            <Table.Cell className="p-1">{i + offset + 1}</Table.Cell>
+            <Table.Cell className="p-2">
               <span className="inline-flex gap-2">
                 {entry.username}
                 {user?.username === entry.username && <Badge>You</Badge>}
               </span>
             </Table.Cell>
-            <Table.Cell>
+            <Table.Cell className="p-2">
               {new Date(Date.parse(entry.createdDateTime)).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" })}
             </Table.Cell>
-            <Table.Cell>
+            <Table.Cell className="p-2">
               <TimeDisplay totalTime={entry.totalTime} penalties={entry.penalties} />
             </Table.Cell>
           </Table.Row>

diff --git a/ui/src/useApiClient.ts b/ui/src/useApiClient.ts
@@ -3,7 +3,7 @@ import { UserContext } from "./UserContext";
 import { ErrorContext } from "./ErrorContext";
 
 export default function useApiClient() {
-  const { user, refreshToken } = useContext(UserContext);
+  const { isLoggedIn, user, refreshToken } = useContext(UserContext);
   const { addError } = useContext(ErrorContext);
 
   const execute = async (url: string, options?: RequestInit) => {
@@ -71,5 +71,5 @@ export default function useApiClient() {
       getLeaderboardEntriesForGrid,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user?.idToken]);
+  }, [isLoggedIn]);
 }