Fix various bugs

webkom · Oct 30, 2024 · b7d56de · b7d56de
1 parent ec90fcd
commit b7d56de
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 42 deletions.
diff --git a/app/routes/users/components/UserProfile/AchievementsBox.tsx b/app/routes/users/components/UserProfile/AchievementsBox.tsx
@@ -1,12 +1,13 @@
 import { Button, Flex } from '@webkom/lego-bricks';
+import cx from 'classnames';
 import { Trophy } from 'lucide-react';
 import moment from 'moment-timezone';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import Tooltip from 'app/components/Tooltip';
 import AchievementsInfo, {
   rarityToColorMap,
 } from 'app/utils/achievementConstants';
-import styles from './UserProfile.css';
+import styles from './UserProfile.module.css';
 import type { Achievement } from 'app/store/models/User';
 
 export const AchievementsBox = ({
@@ -15,26 +16,35 @@ export const AchievementsBox = ({
   achievements: Achievement[];
 }) => {
   const [showAll, setShowAll] = useState(false);
-  const topAchievements = [...achievements]
-    .sort(
+
+  const sortedAchievements = useMemo(() => {
+    return [...achievements].sort(
       (a, b) =>
         AchievementsInfo[b.identifier][b.level].rarity -
         AchievementsInfo[a.identifier][a.level].rarity,
-    )
-    .slice(0, showAll ? 999 : 5);
+    );
+  }, [achievements]);
+
+  const topAchievements = showAll
+    ? sortedAchievements
+    : sortedAchievements.slice(0, 5);
+
   return (
     <Flex
       column
-      width={'100%'}
-      alignItems="center"
+      alignItems="flex-start"
       justifyContent="space-between"
+      className={cx(styles.trophyCaseWrapper, styles.contentRight)}
     >
-      <Flex width={'100%'} alignItems="center" justifyContent="center">
-        <h2>Trofeer</h2>
-      </Flex>
-      <div className={styles.trophyCaseBox}>
-        {topAchievements.map((e) => {
-          return (
+      <h2>Trofeer</h2>
+      <Flex
+        column
+        alignItems="center"
+        justifyContent="space-between"
+        className={styles.trophyCaseWrapper}
+      >
+        <div className={styles.trophyCaseBox}>
+          {topAchievements.map((e) => (
             <Flex
               column
               key={AchievementsInfo[e.identifier][e.level].name}
@@ -46,7 +56,7 @@ export const AchievementsBox = ({
                   <div className={styles.trophyDetailTooltip}>
                     <p>
                       <i>
-                        {e.hidden
+                        {AchievementsInfo[e.identifier][e.level].hidden
                           ? '?????????'
                           : AchievementsInfo[e.identifier][e.level].description}
                       </i>
@@ -69,7 +79,13 @@ export const AchievementsBox = ({
                   style={
                     AchievementsInfo[e.identifier][e.level].rarity >= 4
                       ? {
-                          filter: `drop-shadow(0px 0px 6px ${rarityToColorMap[AchievementsInfo[e.identifier][e.level].rarity]})`,
+                          filter: `drop-shadow(0px 0px ${
+                            AchievementsInfo[e.identifier][e.level].rarity - 1
+                          }px ${
+                            rarityToColorMap[
+                              AchievementsInfo[e.identifier][e.level].rarity
+                            ]
+                          })`,
                         }
                       : {}
                   }
@@ -80,19 +96,19 @@ export const AchievementsBox = ({
                 </p>
               </Tooltip>
             </Flex>
-          );
-        })}
-      </div>
-      {achievements.length > 5 && (
-        <Button
-          onPress={() => {
-            setShowAll(!showAll);
-          }}
-          className={styles.showAllButton}
-        >
-          {showAll ? 'Vis færre' : 'Vis alle'}
-        </Button>
-      )}
+          ))}
+        </div>
+        {achievements.length > 5 && (
+          <Button
+            onPress={() => {
+              setShowAll(!showAll);
+            }}
+            className={styles.showAllButton}
+          >
+            {showAll ? 'Vis færre' : 'Vis alle'}
+          </Button>
+        )}
+      </Flex>
     </Flex>
   );
 };
diff --git a/app/routes/users/components/UserProfile/UserProfile.module.css b/app/routes/users/components/UserProfile/UserProfile.module.css
@@ -33,10 +33,13 @@
   position: absolute;
 }
 
+.leftMarginContent {
+  padding-left: var(--spacing-lg);
+}
+
 .rightContent {
   flex: 2;
   min-width: 320px;
-  padding-left: 30px;
   width: 100%;
 
   @media (--medium-viewport) {
@@ -114,20 +117,25 @@
   display: flex;
   align-items: baseline;
   gap: var(--spacing-md);
-  width: 100%;
+  min-width: 100%;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 @media (--mobile-device) {
   .trophyCaseBox {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
+    align-items: baseline;
     justify-content: center;
   }
 }
 
+.trophyCaseWrapper {
+  min-width: 100%;
+  padding: var(--spacing-xs);
+}
+
 .trophyDetailTooltip {
   text-align: center;
   display: flex;

diff --git a/app/routes/users/components/UserProfile/index.tsx b/app/routes/users/components/UserProfile/index.tsx
@@ -202,14 +202,18 @@ const UserProfile = () => {
             </LinkButton>
           )}
         </Flex>
-        <Flex alignItems="center" column className={styles.rightContent}>
+        <Flex
+          alignItems="center"
+          column
+          className={cx(styles.rightContent, styles.leftMarginContent)}
+        >
           <GroupMemberships
             memberships={memberships}
             pastMemberships={pastMemberships}
           />
 
-          {user.achievements.length > 0 && (
-            <AchievementsBox achievements={user?.achievements} />
+          {user.achievements?.length > 0 && (
+            <AchievementsBox achievements={user.achievements} />
           )}
         </Flex>
       </Flex>
@@ -258,7 +262,7 @@ const UserProfile = () => {
               <GSuiteInfo emailAddress={user.emailAddress} />
             )}
         </div>
-        <div className={styles.rightContent}>
+        <div className={cx(styles.rightContent, styles.leftMarginContent)}>
           {isCurrentUser && (
             <div className={styles.bottomMargin}>
               <h3>Dine kommende arrangementer</h3>

diff --git a/app/store/models/User.ts b/app/store/models/User.ts
@@ -23,7 +23,6 @@ export interface PhotoConsent {
 export interface Achievement {
   id: number;
   identifier: string;
-  hidden: boolean;
   createdAt: Dateish;
   level: number;
   percentage: number;
@@ -33,6 +32,7 @@ export interface AchievementData {
   name: string;
   description: string;
   rarity: number;
+  hidden: boolean;
 }
 
 export const Gender = {

diff --git a/app/utils/achievementConstants.ts b/app/utils/achievementConstants.ts
@@ -5,12 +5,12 @@ export const rarityToColorMap = {
   1: 'Silver',
   2: 'Gold',
   3: '#2f9cc5',
-  4: 'DarkTurquoise',
+  4: '#0fdee0',
   5: 'MediumSeaGreen',
-  6: 'FireBrick',
+  6: '#911b1b',
   7: 'Crimson',
-  8: 'DarkOrchid',
-  9: 'DarkMagenta',
+  8: '#9340FF',
+  9: '#BF00FF',
 };
 
 const AchievementsInfo: Record<string, AchievementData[]> = {
@@ -19,96 +19,113 @@ const AchievementsInfo: Record<string, AchievementData[]> = {
       name: 'Arrangement:\nBronse',
       description: 'Deltatt på 10 arrangementer',
       rarity: 0,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nSølv',
       description: 'Deltatt på 25 arrangementer',
       rarity: 1,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nGull',
       description: 'Deltatt på 50 arrangementer',
       rarity: 2,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nPlatinum',
       description: 'Deltatt på 100 arrangementer',
       rarity: 3,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nDiamant',
       description: 'Deltatt på 150 arrangementer',
       rarity: 4,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nLegende',
       description: 'Deltatt på 200 arrangementer',
       rarity: 6,
+      hidden: false,
     },
   ],
   event_rank: [
     {
       name: 'Arrangement:\nMester',
       description: '3. plass - flest arrangementer',
       rarity: 7,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nIkon',
       description: '2. plass - flest arrangementer',
       rarity: 8,
+      hidden: false,
     },
     {
       name: 'Arrangement:\nFyrtårn',
       description: '1. plass - flest arrangementer',
       rarity: 9,
+      hidden: false,
     },
   ],
   quote_count: [
     {
       name: 'Psssst',
       description: '',
       rarity: 2,
+      hidden: true,
     },
   ],
   event_price: [
     {
       name: 'Fæffæ betaler',
       description: 'Betalt over 2500 i påmeldingsavgift',
       rarity: 2,
+      hidden: false,
     },
     {
       name: 'Arvingen',
       description: 'Betalt over 5000 i påmeldingsavgift',
       rarity: 3,
+      hidden: false,
     },
     {
       name: 'Bærumsbaron',
       description: 'Betalt over 10.000 i påmeldingsavgift',
       rarity: 5,
+      hidden: false,
     },
   ],
   meeting_hidden: [
     {
       name: 'Er det noen her?',
       description: '',
       rarity: 2,
+      hidden: true,
     },
   ],
   poll_count: [
     {
       name: 'Aktiv Deltaker',
       description: 'Svart på 5 avstemninger',
       rarity: 0,
+      hidden: false,
     },
     {
       name: 'Meningsbærer',
       description: 'Svart på 25 avstemninger',
       rarity: 2,
+      hidden: false,
     },
     {
       name: 'Talsperson',
       description: 'Svart på 50 avstemninger',
       rarity: 4,
+      hidden: false,
     },
   ],
 };