Skip to content

Commit

Permalink
The project owner gets a star! (#4612)
Browse files Browse the repository at this point in the history 
* star icon files

* avatar markers

* wait a sec

* erm

* maybe like this?

* Update editor/src/components/user-bar.tsx

Co-authored-by: Sean Parsons <[email protected]>

* prettier

---------

Co-authored-by: Sean Parsons <[email protected]>
  • Loading branch information
@lankaukk @seanparsons
lankaukk and seanparsons authored Dec 7, 2023
1 parent 09261a6 commit 851740f
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 81 deletions.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
174 changes: 93 additions & 81 deletions editor/src/components/user-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '../core/shared/multiplayer'
import { MultiplayerWrapper } from '../utils/multiplayer-wrapper'
import { when } from '../utils/react-conditionals'
import { Avatar, Tooltip, useColorTheme } from '../uuiui'
import { Avatar, FlexRow, Icn, Tooltip, colorTheme } from '../uuiui'
import { notice } from './common/notice'
import type { EditorAction } from './editor/action-types'
import { showToast, switchEditorMode } from './editor/actions/action-creators'
Expand All @@ -37,15 +37,18 @@ export const UserBar = React.memo(() => {

if (!isLoggedIn(loginState)) {
return null
} else if (roomStatus !== 'connected') {
return <SinglePlayerUserBar />
} else {
return (
<MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
<MultiplayerUserBar />
</MultiplayerWrapper>
)
}
return (
<FlexRow style={{ gap: 4 }}>
{when(
roomStatus === 'connected',
<MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
<MultiplayerUserBar />
</MultiplayerWrapper>,
)}
<SinglePlayerUserBar />
</FlexRow>
)
})
UserBar.displayName = 'UserBar'

Expand All @@ -55,21 +58,33 @@ export const SinglePlayerUserBar = React.memo(() => {
(store) => getUserPicture(store.userState.loginState),
'SinglePlayerUserBar userPicture',
)
const amIOwner = useEditorState(
Substores.projectServerState,
(store) => store.projectServerState.isMyProject === 'yes',
'SinglePlayerUserBar amIOwner',
)
return (
<a href='/projects' target='_blank'>
<Avatar userPicture={userPicture} isLoggedIn={true} />
<div
style={{
width: 24,
height: 24,
position: 'relative',
}}
>
<Avatar userPicture={userPicture} isLoggedIn={true} />
{amIOwner ? <OwnerBadge /> : null}
</div>
</a>
)
})
SinglePlayerUserBar.displayName = 'SinglePlayerUserBar'

const MultiplayerUserBar = React.memo(() => {
const dispatch = useDispatch()
const colorTheme = useColorTheme()
const collabs = useStorage((store) => store.collaborators)

const { user: myUser } = useMyUserAndPresence()
const myName = React.useMemo(() => normalizeMultiplayerName(myUser.name), [myUser])

const others = useOthers((list) =>
normalizeOthersList(myUser.id, list).map((other) => {
Expand All @@ -93,6 +108,12 @@ const MultiplayerUserBar = React.memo(() => {
'MultiplayerUserBar mode',
)

const ownerId = useEditorState(
Substores.projectServerState,
(store) => store.projectServerState.ownerId,
'MultiplayerUserBar ownerId',
)

const toggleFollowing = React.useCallback(
(targetId: string) => () => {
let actions: EditorAction[] = []
Expand Down Expand Up @@ -135,64 +156,43 @@ const MultiplayerUserBar = React.memo(() => {
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: 4,
}}
>
{visibleOthers.map((other) => {
if (other == null) {
return null
}
const name = normalizeMultiplayerName(other.name)
const isOwner = ownerId === other.id
return (
<MultiplayerAvatarWithTooltip
key={`avatar-${other.id}`}
name={multiplayerInitialsFromName(name)}
tooltip={name}
color={multiplayerColorFromIndex(other.colorIndex)}
picture={other.avatar}
coloredTooltip={true}
onClick={toggleFollowing(other.id)}
isBeingFollowed={isFollowMode(mode) && mode.playerId === other.id}
follower={other.following === myUser.id}
isOwner={isOwner}
/>
)
})}
{when(
visibleOthers.length > 0,
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 4,
background: colorTheme.bg3.value,
borderRadius: '20px',
justifyContent: 'center',
padding: '4px',
hiddenOthers.length > 0,
<MultiplayerAvatarWithTooltip
name={`+${hiddenOthers.length}`}
tooltip={hiddenOthers.map((c) => normalizeMultiplayerName(c.name)).join(', ')}
color={{
background: colorTheme.fg8.value,
foreground: colorTheme.fg0.value,
}}
>
{visibleOthers.map((other) => {
if (other == null) {
return null
}
const name = normalizeMultiplayerName(other.name)
return (
<MultiplayerAvatarWithTooltip
key={`avatar-${other.id}`}
name={multiplayerInitialsFromName(name)}
tooltip={name}
color={multiplayerColorFromIndex(other.colorIndex)}
picture={other.avatar}
border={true}
coloredTooltip={true}
onClick={toggleFollowing(other.id)}
active={isFollowMode(mode) && mode.playerId === other.id}
follower={other.following === myUser.id}
/>
)
})}
{when(
hiddenOthers.length > 0,
<MultiplayerAvatarWithTooltip
name={`+${hiddenOthers.length}`}
tooltip={hiddenOthers.map((c) => normalizeMultiplayerName(c.name)).join(', ')}
color={{
background: colorTheme.fg8.value,
foreground: colorTheme.fg0.value,
}}
picture={null}
/>,
)}
</div>,
picture={null}
/>,
)}
<a href='/projects' target='_blank'>
<MultiplayerAvatarWithTooltip
name={multiplayerInitialsFromName(myName)}
tooltip={`${myName} (you)`}
color={{ background: colorTheme.bg3.value, foreground: colorTheme.fg1.value }}
picture={myUser.avatar}
/>
</a>
</div>
)
})
Expand Down Expand Up @@ -221,21 +221,20 @@ MultiplayerAvatarWithTooltip.displayName = 'MultiplayerAvatarWithTooltip'
export type MultiplayerAvatarProps = {
name: string
color: MultiplayerColor
coloredTooltip?: boolean
picture?: string | null
border?: boolean
onClick?: () => void
active?: boolean
isBeingFollowed?: boolean
size?: number
follower?: boolean
isOwner?: boolean
style?: CSSProperties
}

export const MultiplayerAvatar = React.memo((props: MultiplayerAvatarProps) => {
const picture = React.useMemo(() => {
return isDefaultAuth0AvatarURL(props.picture ?? null) ? null : props.picture
}, [props.picture])

const colorTheme = useColorTheme()
return (
<div
style={{
Expand All @@ -247,36 +246,34 @@ export const MultiplayerAvatar = React.memo((props: MultiplayerAvatarProps) => {
alignItems: 'center',
justifyContent: 'center',
borderRadius: '100%',
border: `3px solid ${props.active === true ? colorTheme.primary.value : 'transparent'}`,
fontSize: 9,
fontWeight: 700,
cursor: props.onClick != null ? 'pointer' : 'default',
boxShadow: props.active === true ? `0px 0px 15px ${colorTheme.primary.value}` : undefined,
position: 'relative',
outline: `.3px solid ${colorTheme.bg1.value}`,
boxShadow:
props.isBeingFollowed === true
? `0px 0px 8px ${colorTheme.dynamicBlue.value}`
: undefined,
...props.style,
}}
onClick={props.onClick}
>
<AvatarPicture
url={picture}
size={props.border === true ? 22 : undefined}
initials={props.name}
/>
{when(props.follower === true, <FollowerBadge />)}
<AvatarPicture url={picture} size={24} initials={props.name} />
{props.isOwner ? <OwnerBadge /> : null}
{props.follower ? <FollowerBadge /> : null}
</div>
)
})
MultiplayerAvatar.displayName = 'MultiplayerAvatar'

const FollowerBadge = React.memo(() => {
const colorTheme = useColorTheme()

return (
<div
style={{
position: 'absolute',
top: -5,
right: -5,
top: -1,
left: -1,
borderRadius: '100%',
backgroundColor: colorTheme.primary.value,
color: colorTheme.white.value,
Expand All @@ -285,13 +282,28 @@ const FollowerBadge = React.memo(() => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: `1px solid ${colorTheme.white.value}`,
border: `1px solid ${colorTheme.bg1.value}`,
}}
/>
)
})
FollowerBadge.displayName = 'FollowerBadge'

const OwnerBadge = React.memo(() => {
return (
<Icn
category='semantic'
type={'star'}
width={14}
height={14}
color='main'
style={{ position: 'absolute', zIndex: 1, bottom: -1, left: -2 }}
/>
)
})

OwnerBadge.displayName = 'OwnerBadge'

interface AvatarPictureProps {
url: string | null | undefined
initials: string
Expand Down

0 comments on commit 851740f

Please sign in to comment.