From b7d56de5a6cacd6414b082c2c9adfe995d273e51 Mon Sep 17 00:00:00 2001 From: Jonas de Luna Skulberg Date: Sat, 19 Oct 2024 14:20:24 +0200 Subject: [PATCH] Fix various bugs --- .../UserProfile/AchievementsBox.tsx | 74 +++++++++++-------- .../UserProfile/UserProfile.module.css | 16 +++- .../users/components/UserProfile/index.tsx | 12 ++- app/store/models/User.ts | 2 +- app/utils/achievementConstants.ts | 25 ++++++- 5 files changed, 87 insertions(+), 42 deletions(-) diff --git a/app/routes/users/components/UserProfile/AchievementsBox.tsx b/app/routes/users/components/UserProfile/AchievementsBox.tsx index 9e4de78ea7..b80ed5ae92 100644 --- 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 ( - -

Trofeer

- -
- {topAchievements.map((e) => { - return ( +

Trofeer

+ +
+ {topAchievements.map((e) => (

- {e.hidden + {AchievementsInfo[e.identifier][e.level].hidden ? '?????????' : AchievementsInfo[e.identifier][e.level].description} @@ -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 = ({

- ); - })} -
- {achievements.length > 5 && ( - - )} + ))} +
+ {achievements.length > 5 && ( + + )} + ); }; diff --git a/app/routes/users/components/UserProfile/UserProfile.module.css b/app/routes/users/components/UserProfile/UserProfile.module.css index 0b05ebc856..9cc5fd278e 100644 --- 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,7 +117,7 @@ display: flex; align-items: baseline; gap: var(--spacing-md); - width: 100%; + min-width: 100%; flex-wrap: wrap; justify-content: center; } @@ -122,12 +125,17 @@ @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 index 1a9944a148..c12adbad66 100644 --- a/app/routes/users/components/UserProfile/index.tsx +++ b/app/routes/users/components/UserProfile/index.tsx @@ -202,14 +202,18 @@ const UserProfile = () => { )} - + - {user.achievements.length > 0 && ( - + {user.achievements?.length > 0 && ( + )} @@ -258,7 +262,7 @@ const UserProfile = () => { )} -
+
{isCurrentUser && (

Dine kommende arrangementer

diff --git a/app/store/models/User.ts b/app/store/models/User.ts index 0b5549a74b..4ef5016d23 100644 --- 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 index 810470c313..f2c698cd7d 100644 --- 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 = { @@ -19,31 +19,37 @@ const AchievementsInfo: Record = { 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: [ @@ -51,16 +57,19 @@ const AchievementsInfo: Record = { 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: [ @@ -68,6 +77,7 @@ const AchievementsInfo: Record = { name: 'Psssst', description: '', rarity: 2, + hidden: true, }, ], event_price: [ @@ -75,16 +85,19 @@ const AchievementsInfo: Record = { 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: [ @@ -92,6 +105,7 @@ const AchievementsInfo: Record = { name: 'Er det noen her?', description: '', rarity: 2, + hidden: true, }, ], poll_count: [ @@ -99,16 +113,19 @@ const AchievementsInfo: Record = { 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, }, ], };