diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss index 6291737e..bf9b81e9 100644 --- a/components/GridRep/index.scss +++ b/components/GridRep/index.scss @@ -73,13 +73,44 @@ flex-direction: row; } - .raid, time { + .raid, .user, time { color: $grey-50; font-size: $font-small; } - .raid { + .raid, .user { flex-grow: 1; } + + .raid { + margin-bottom: $unit / 2; + } + + .user { + display: flex; + gap: $unit / 2; + align-items: center; + + + img, .no-user { + $diameter: 18px; + + border-radius: $diameter / 2; + height: $diameter; + width: $diameter; + } + + img.gran { + background-color: #CEE7FE; + } + + img.djeeta { + background-color: #FFE1FE; + } + + .no-user { + background: $grey-80; + } + } } } diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx index 4c226d6e..0f2f517c 100644 --- a/components/GridRep/index.tsx +++ b/components/GridRep/index.tsx @@ -11,7 +11,9 @@ interface Props { name: string raid: Raid grid: GridWeapon[] - updatedAt: Date + user?: User + createdAt: Date + displayUser: boolean onClick: (shortcode: string) => void } @@ -30,6 +32,11 @@ const GridRep = (props: Props) => { 'empty': !props.raid }) + const userClass = classNames({ + 'user': true, + 'empty': !props.user + }) + useEffect(() => { const newWeapons = Array(numWeapons) @@ -57,16 +64,47 @@ const GridRep = (props: Props) => { {weapons[position]?.name.en} : '' } + const userImage = () => { + if (props.user) + return ( + Gran + ) + else + return (
) + } + + const details = ( +
+

{ (props.name) ? props.name : 'Untitled' }

+
+
{ (props.raid) ? props.raid.name.en : 'No raid set' }
+ +
+
+ ) + + const detailsWithUsername = ( +
+

{ (props.name) ? props.name : 'Untitled' }

+
{ (props.raid) ? props.raid.name.en : 'No raid set' }
+
+
+ { userImage() } + { (props.user) ? props.user.username : 'Anonymous' } +
+ +
+
+ ) + return (
-
-

{ (props.name) ? props.name : 'Untitled' }

-
-
{ (props.raid) ? props.raid.name.en : 'No raid set' }
- -
-
- + { (props.displayUser) ? detailsWithUsername : details}
{generateMainhandImage()}