From cf202c8f01db028c63950e241aebe4737e2aff72 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Mon, 17 Feb 2025 21:04:33 -0300 Subject: [PATCH 1/2] feat: add user badges --- src/locales/en/translation.json | 3 ++ src/locales/pt-BR/translation.json | 3 ++ .../src/assets/icons/badge-theme-creator.svg | 29 ++++++++++++++ .../user-profile/user-profile.context.tsx | 2 +- .../profile/profile-hero/profile-hero.scss | 12 ++++++ .../profile/profile-hero/profile-hero.tsx | 10 +++-- .../profile/profile-hero/user-badges.tsx | 39 +++++++++++++++++++ src/types/index.ts | 3 ++ 8 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 src/renderer/src/assets/icons/badge-theme-creator.svg create mode 100644 src/renderer/src/pages/profile/profile-hero/user-badges.tsx diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index f1e850190..bf91cc40f 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -444,6 +444,9 @@ "show_achievements_on_profile": "Show your achievements on your profile", "show_points_on_profile": "Show your earned points on your profile" }, + "badge": { + "badge_description_theme_creator": "Awarded to those who created a custom theme" + }, "achievement": { "achievement_unlocked": "Achievement unlocked", "user_achievements": "{{displayName}}'s Achievements", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 0cefd188d..3556dbd17 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -440,6 +440,9 @@ "show_achievements_on_profile": "Exiba suas conquistas no perfil", "show_points_on_profile": "Exiba seus pontos ganhos no perfil" }, + "badge": { + "badge_description_theme_creator": "Concedido àqueles que criaram um tema customizado" + }, "achievement": { "achievement_unlocked": "Conquista desbloqueada", "your_achievements": "Suas Conquistas", diff --git a/src/renderer/src/assets/icons/badge-theme-creator.svg b/src/renderer/src/assets/icons/badge-theme-creator.svg new file mode 100644 index 000000000..0793a7e92 --- /dev/null +++ b/src/renderer/src/assets/icons/badge-theme-creator.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/src/context/user-profile/user-profile.context.tsx b/src/renderer/src/context/user-profile/user-profile.context.tsx index 98a25a77e..ce8319815 100644 --- a/src/renderer/src/context/user-profile/user-profile.context.tsx +++ b/src/renderer/src/context/user-profile/user-profile.context.tsx @@ -41,7 +41,7 @@ export interface UserProfileContextProviderProps { export function UserProfileContextProvider({ children, userId, -}: UserProfileContextProviderProps) { +}: Readonly) { const { userDetails } = useAppSelector((state) => state.userDetails); const [userStats, setUserStats] = useState(null); diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss index 8be99794b..284d1abf7 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss @@ -65,6 +65,12 @@ overflow: hidden; } + &__display-name-container { + display: flex; + gap: globals.$spacing-unit; + align-items: center; + } + &__display-name { font-weight: bold; overflow: hidden; @@ -76,6 +82,12 @@ text-shadow: 0 0 5px rgb(0 0 0 / 40%); } + &__display-name-badges { + display: flex; + gap: globals.$spacing-unit; + align-items: center; + } + &__current-game { &-wrapper { display: flex; diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx index e198fbf22..66799c474 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx @@ -25,6 +25,7 @@ import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal"; import Skeleton from "react-loading-skeleton"; import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button"; import "./profile-hero.scss"; +import { UserBadges } from "./user-badges"; type FriendAction = | FriendRequestAction @@ -307,9 +308,12 @@ export function ProfileHero() {
{userProfile ? ( -

- {userProfile?.displayName} -

+
+

+ {userProfile?.displayName} +

+ +
) : ( )} diff --git a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx new file mode 100644 index 000000000..4ca180a0a --- /dev/null +++ b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx @@ -0,0 +1,39 @@ +import BadgeThemeCreator from "@renderer/assets/icons/badge-theme-creator.svg?react"; +import "./profile-hero.scss"; +import { useContext } from "react"; +import { userProfileContext } from "@renderer/context"; +import { UserBadge } from "@types"; +import { useTranslation } from "react-i18next"; + +export function UserBadges() { + const { t } = useTranslation("badge"); + const { userProfile } = useContext(userProfileContext); + + if (!userProfile?.badges?.length) return null; + + const getBadgeIcon = (badge: UserBadge) => { + if (badge === "THEME_CREATOR") { + return ; + } + + return null; + }; + + return ( +
+ {userProfile.badges.map((badge) => { + const badgeIcon = getBadgeIcon(badge); + + if (!badgeIcon) return null; + return ( +
+ {badgeIcon} +
+ ); + })} +
+ ); +} diff --git a/src/types/index.ts b/src/types/index.ts index 53fb97dc8..e17a694af 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -130,6 +130,8 @@ export interface UserProfileCurrentGame extends Omit { export type ProfileVisibility = "PUBLIC" | "PRIVATE" | "FRIENDS"; +export type UserBadge = "THEME_CREATOR"; + export interface UserDetails { id: string; username: string; @@ -164,6 +166,7 @@ export interface UserProfile { quirks: { backupsPerGameLimit: number; }; + badges: UserBadge[]; } export interface UpdateProfileRequest { From e066ea3503e1aaa12f66976bc496260f9eca22ef Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Mon, 17 Feb 2025 21:14:32 -0300 Subject: [PATCH 2/2] feat: css --- src/renderer/src/pages/profile/profile-hero/profile-hero.scss | 2 +- src/renderer/src/pages/profile/profile-hero/user-badges.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss index 284d1abf7..fd21cf1d0 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss @@ -82,7 +82,7 @@ text-shadow: 0 0 5px rgb(0 0 0 / 40%); } - &__display-name-badges { + &__display-name-badges-container { display: flex; gap: globals.$spacing-unit; align-items: center; diff --git a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx index 4ca180a0a..ed5d05713 100644 --- a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx +++ b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx @@ -20,13 +20,14 @@ export function UserBadges() { }; return ( -
+
{userProfile.badges.map((badge) => { const badgeIcon = getBadgeIcon(badge); if (!badgeIcon) return null; return (