some changes

les-amateurs · Mar 25, 2024 · a39a82e · a39a82e
1 parent 732a97d
commit a39a82e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 39 deletions.
diff --git a/client/src/routes/profile.js b/client/src/routes/profile.js
@@ -554,7 +554,7 @@ export default withStyles(
       height: '100%',
       width: '100%',
       objectFit: 'cover',
-      opacity: 0.5
+      opacity: 0.7
     },
     errorCard: {
       background: '#2229'

diff --git a/client/src/routes/scoreboard.js b/client/src/routes/scoreboard.js
@@ -47,6 +47,31 @@ const Scoreboard = withStyles(
         overflow: 'hidden',
         whiteSpace: 'nowrap'
       }
+    },
+    row: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '0 1.5rem',
+      borderBottom: '1px solid rgba(219,219,219,.5)'
+    },
+    rankAndName: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1rem'
+    },
+    tableHeader: {
+      fontWeight: 'bold',
+      borderWidth: '2px',
+      padding: '0.25rem 1.5rem',
+      borderTop: '1px solid rgba(219,219,219,.5)'
+    },
+    background: {
+      height: '2.5rem',
+      maskImage: 'linear-gradient(to right, #0000, #fff, #fff, #fff, #0000)',
+      flexGrow: 1,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center'
     }
   },
   ({ classes }) => {
@@ -325,43 +350,47 @@ const Scoreboard = withStyles(
         <div class="col-6">
           <div class={`frame ${classes.frame} ${classes.tableFrame}`}>
             <div class="frame__body">
-              <table class={`table small ${classes.table}`}>
-                <thead>
-                  <tr>
-                    <th style="width: 3.5em">#</th>
-                    <th>Team</th>
-                    <th style="width: 5em">Points</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {scores.map(({ id, name, score, rank, items }) => {
-                    const isSelf = profile != null && profile.id === id
-
-                    return (
-                      <tr
-                        key={id}
-                        class={isSelf ? classes.selected : ''}
-                        ref={isSelf ? selfRow : null}
+              <div class={`${classes.row} ${classes.tableHeader}`}>
+                <span class={classes.rankAndName}>
+                  <span>#</span>
+                  <span>Team</span>
+                </span>
+                <span>Points</span>
+              </div>
+              {scores.map(({ id, name, score, rank, items }) => {
+                const isSelf = profile != null && profile.id === id
+                return (
+                  <div
+                    key={id}
+                    class={`${classes.row} ${isSelf ? classes.selected : ''}`}
+                    ref={isSelf ? selfRow : null}
+                  >
+                    <span class={classes.rankAndName}>
+                      {rank}
+                      <a
+                        href={`/profile/${id}`}
+                        style={{
+                          fontFamily: items?.font?.id
+                            ? `font-${items.font.id}`
+                            : null
+                        }}
                       >
-                        <td>{rank}</td>
-                        <td>
-                          <a
-                            href={`/profile/${id}`}
-                            style={{
-                              fontFamily: items?.font?.id
-                                ? `font-${items?.font?.id}`
-                                : null
-                            }}
-                          >
-                            {name}
-                          </a>
-                        </td>
-                        <td>{score}</td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
+                        {name}
+                      </a>
+                    </span>
+                    <div
+                      class={classes.background}
+                      style={{
+                        backgroundImage:
+                          items?.background &&
+                          `url(${items.background.resourceUrl})`,
+                        height: rank === 1 ? '7rem' : rank === 2 ? '4rem' : null
+                      }}
+                    />
+                    <span>{score}</span>
+                  </div>
+                )
+              })}
             </div>
             {totalItems > pageSize && (
               <Pagination

diff --git a/server/cache/leaderboard.js b/server/cache/leaderboard.js
@@ -158,13 +158,19 @@ export const setLeaderboard = async ({
   })
   const lbWithItems = []
   for (const info of leaderboard) {
-    const font = await db.store.getEquippedItemByType({
+
+    const items = await db.store.getEquippedItems({
       userid: info[0],
       type: 'font'
     })
+
+
     lbWithItems.push([
       ...info,
-      JSON.stringify({ font: font ? { id: font.id, resourceUrl: font.resourceUrl } : null })
+      JSON.stringify({
+        font: items?.font ? { id: items.font.id, resourceUrl: items.font.resourceUrl } : null,
+        background: items?.background ? { id: items.background.id, resourceUrl: items.background.resourceUrl } : null
+      })
     ])
   }