From 12ca81c688a73cdd7e055d358cb46bae24014b82 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 5 Jan 2022 21:59:46 -0500 Subject: [PATCH] Update common components --- src/common/Base.tsx | 10 +- src/common/Button.tsx | 7 +- src/common/Column.tsx | 5 +- src/common/Flex.tsx | 10 +- src/common/Grid.tsx | 4 +- src/common/Text.tsx | 7 +- src/common/layout/LayoutGridItem.tsx | 15 +- src/common/layout/LayoutImage.tsx | 6 +- src/common/types/ColorVariantType.ts | 2 +- src/components/index.scss | 2 + src/views/toolbar/ToolbarView.scss | 126 ------------- src/views/toolbar/ToolbarView.tsx | 236 ------------------------- src/views/toolbar/ToolbarView.types.ts | 19 -- src/views/toolbar/me/ToolbarMeView.tsx | 53 ------ 14 files changed, 39 insertions(+), 463 deletions(-) delete mode 100644 src/views/toolbar/ToolbarView.scss delete mode 100644 src/views/toolbar/ToolbarView.tsx delete mode 100644 src/views/toolbar/ToolbarView.types.ts delete mode 100644 src/views/toolbar/me/ToolbarMeView.tsx diff --git a/src/common/Base.tsx b/src/common/Base.tsx index 6e1ff09b..e13d3d8e 100644 --- a/src/common/Base.tsx +++ b/src/common/Base.tsx @@ -6,6 +6,8 @@ export interface BaseProps extends DetailedHTMLProps; fit?: boolean; + grow?: boolean; + shrink?: boolean; fullWidth?: boolean; fullHeight?: boolean; overflow?: OverflowType; @@ -16,7 +18,7 @@ export interface BaseProps extends DetailedHTMLProps> = props => { - const { ref = null, innerRef = null, fit = false, fullWidth = false, fullHeight = false, overflow = null, position = null, pointer = false, classNames = [], className = '', style = {}, ...rest } = props; + const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, pointer = false, classNames = [], className = '', style = {}, ...rest } = props; const getClassNames = useMemo(() => { @@ -26,6 +28,10 @@ export const Base: FC> = props => if(fit || fullHeight) newClassNames.push('h-100'); + if(grow) newClassNames.push('flex-grow-1'); + + if(shrink) newClassNames.push('flex-shrink-0'); + if(overflow) newClassNames.push('overflow-' + overflow); if(position) newClassNames.push('position-' + position); @@ -35,7 +41,7 @@ export const Base: FC> = props => if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ fit, fullWidth, fullHeight, overflow, position, pointer, classNames ]); + }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, pointer, classNames ]); const getClassName = useMemo(() => { diff --git a/src/common/Button.tsx b/src/common/Button.tsx index 5f4f93b0..582e1dd0 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -7,12 +7,13 @@ export interface ButtonProps extends FlexProps { variant?: ColorVariantType; size?: ButtonSizeType; + active?: boolean; disabled?: boolean; } export const Button: FC = props => { - const { variant = 'primary', size = null, disabled = false, classNames = [], ...rest } = props; + const { variant = 'primary', size = null, active = false, disabled = false, classNames = [], ...rest } = props; const getClassNames = useMemo(() => { @@ -22,12 +23,14 @@ export const Button: FC = props => if(size) newClassNames.push('btn-' + size); + if(active) newClassNames.push('active'); + if(disabled) newClassNames.push('disabled'); if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ variant, size, disabled, classNames ]); + }, [ variant, size, active, disabled, classNames ]); return ; } diff --git a/src/common/Column.tsx b/src/common/Column.tsx index fb32520b..810a96ef 100644 --- a/src/common/Column.tsx +++ b/src/common/Column.tsx @@ -5,11 +5,12 @@ import { ColumnSizesType } from './types/ColumnSizesType'; export interface ColumnProps extends FlexProps { size?: ColumnSizesType; + column?: boolean; } export const Column: FC = props => { - const { size = 0, gap = 2, classNames = [], ...rest } = props; + const { size = 0, column = true, gap = 2, classNames = [], ...rest } = props; const getClassNames = useMemo(() => { @@ -22,5 +23,5 @@ export const Column: FC = props => return newClassNames; }, [ size, classNames ]); - return ; + return ; } diff --git a/src/common/Flex.tsx b/src/common/Flex.tsx index 8b0995ca..e3d81b9d 100644 --- a/src/common/Flex.tsx +++ b/src/common/Flex.tsx @@ -9,8 +9,6 @@ export interface FlexProps extends BaseProps inline?: boolean; column?: boolean; reverse?: boolean; - grow?: boolean; - shrink?: boolean; gap?: SpacingType; center?: boolean; alignItems?: AlignItemType; @@ -19,7 +17,7 @@ export interface FlexProps extends BaseProps export const Flex: FC = props => { - const { inline = false, column = undefined, reverse = false, grow = false, shrink = false, gap = null, center = false, alignItems = null, justifyContent = null, classNames = [], ...rest } = props; + const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignItems = null, justifyContent = null, classNames = [], ...rest } = props; const getClassNames = useMemo(() => { @@ -28,10 +26,6 @@ export const Flex: FC = props => if(inline) newClassNames.push('d-inline-flex'); else newClassNames.push('d-flex'); - if(grow) newClassNames.push('flex-grow-1'); - - if(shrink) newClassNames.push('flex-shrink-0'); - if(column) { if(reverse) newClassNames.push('flex-column-reverse'); @@ -53,7 +47,7 @@ export const Flex: FC = props => if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ inline, column, reverse, grow, shrink, gap, center, alignItems, justifyContent, classNames ]); + }, [ inline, column, reverse, gap, center, alignItems, justifyContent, classNames ]); return ; } diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx index 9c7e93bd..fd41ec40 100644 --- a/src/common/Grid.tsx +++ b/src/common/Grid.tsx @@ -41,7 +41,7 @@ export const Grid: FC = props => newStyle['--bs-columns'] = columnCount.toString(); } - if(grow) + if(grow && (!columnCount || (columnCount > 1))) { newStyle['--nitro-grid-column-min-width'] = (columnMinWidth + 'px'); newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px'); @@ -53,7 +53,5 @@ export const Grid: FC = props => return newStyle; }, [ columnCount, columnMinWidth, columnMinHeight, grow, style ]); - console.log('render') - return ; } diff --git a/src/common/Text.tsx b/src/common/Text.tsx index 81612f2b..ac6b0c40 100644 --- a/src/common/Text.tsx +++ b/src/common/Text.tsx @@ -12,11 +12,12 @@ export interface TextProps extends BaseProps underline?: boolean; truncate?: boolean; center?: boolean; + textEnd?: boolean; } export const Text: FC = props => { - const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, ...rest } = props; + const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, textEnd = false, ...rest } = props; const getClassNames = useMemo(() => { @@ -34,8 +35,10 @@ export const Text: FC = props => if(center) newClassNames.push('text-center'); + if(textEnd) newClassNames.push('text-end'); + return newClassNames; - }, [ variant, fontWeight, fontSize, underline, truncate, center ]); + }, [ variant, fontWeight, fontSize, underline, truncate, center, textEnd ]); return ; } diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx index d2c86661..f0490b29 100644 --- a/src/common/layout/LayoutGridItem.tsx +++ b/src/common/layout/LayoutGridItem.tsx @@ -11,13 +11,14 @@ export interface LayoutGridItemProps extends ColumnProps itemActive?: boolean; itemCount?: number; itemCountMinimum?: number; + itemUniqueSoldout?: boolean; itemUniqueNumber?: number; itemUnseen?: boolean; } export const LayoutGridItem: FC = props => { - const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props; + const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props; const getClassNames = useMemo(() => { @@ -25,9 +26,9 @@ export const LayoutGridItem: FC = props => if(itemActive) newClassNames.push('active'); - if(itemUniqueNumber === -1) newClassNames.push('unique-item', 'sold-out'); + if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item'); - if(itemUniqueNumber > 0) newClassNames.push('unique-item'); + if(itemUniqueSoldout) newClassNames.push('sold-out'); if(itemUnseen) newClassNames.push('unseen'); @@ -36,21 +37,23 @@ export const LayoutGridItem: FC = props => if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ itemActive, itemUniqueNumber, itemUnseen, itemImage, classNames ]); + }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemImage, classNames ]); const getStyle = useMemo(() => { - const newStyle = { ...style }; + let newStyle = { ...style }; if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`; if(itemColor) newStyle.backgroundColor = itemColor; + if(Object.keys(style).length) newStyle = { ...newStyle, ...style }; + return newStyle; }, [ style, itemImage, itemColor ]); return ( - + { (itemCount > itemCountMinimum) && } { (itemUniqueNumber > 0) && diff --git a/src/common/layout/LayoutImage.tsx b/src/common/layout/LayoutImage.tsx index 84fff35b..d1ca7fe7 100644 --- a/src/common/layout/LayoutImage.tsx +++ b/src/common/layout/LayoutImage.tsx @@ -3,12 +3,12 @@ import { Base, BaseProps } from '../Base'; export interface LayoutImageProps extends BaseProps { - imageUrl: string; + imageUrl?: string; } export const LayoutImage: FC = props => { - const { imageUrl = null, style = null, ...rest } = props; + const { imageUrl = null, fit = true, style = null, ...rest } = props; const getStyle = useMemo(() => { @@ -19,5 +19,5 @@ export const LayoutImage: FC = props => return newStyle; }, [ style, imageUrl ]); - return ; + return ; } diff --git a/src/common/types/ColorVariantType.ts b/src/common/types/ColorVariantType.ts index 3207e0fd..7c266542 100644 --- a/src/common/types/ColorVariantType.ts +++ b/src/common/types/ColorVariantType.ts @@ -1 +1 @@ -export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white'; +export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning'; diff --git a/src/components/index.scss b/src/components/index.scss index 1ae5c142..b19fdc6e 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -1,3 +1,5 @@ @import './achievements/AchievementsView'; @import './avatar-editor/AvatarEditorView'; +@import './catalog/CatalogView'; @import './inventory/InventoryView'; +@import './toolbar/ToolbarView'; diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss deleted file mode 100644 index 6e807297..00000000 --- a/src/views/toolbar/ToolbarView.scss +++ /dev/null @@ -1,126 +0,0 @@ -.nitro-toolbar-container { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: $toolbar-height; - z-index: $toolbar-zindex; - - .nitro-toolbar { - height: 100%; - pointer-events: all; - background: rgba($dark, 0.95); - box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5), - inset 0 -4px darken(rgba($dark, 0.6), 4); - - #toolbar-chat-input-container { - margin: 0 10px; - - @include media-breakpoint-down(sm) { - width: 0px; - height: 0px; - } - } - - .navigation-items { - display: flex; - align-items: center; - - &.navigation-avatar { - border-right: 1px solid rgba(0, 0, 0, 0.3); - } - - .navigation-item { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - //margin: 0 1px; - position: relative; - - &.item-avatar { - width: 50px; - height: 45px; - overflow: hidden; - - .avatar-image { - margin-left: -5px; - margin-top: 25px; - } - } - - .icon, - &.item-avatar { - position: relative; - //transition: transform .2s ease-out; - - &:hover, - &.active { - -webkit-transform: translate(-1px, -1px); - transform: translate(-1px, -1px); - filter: drop-shadow(2px 2px 0 rgba($black, 0.8)); - } - } - - .avatar-image { - pointer-events: none; - } - - .chat-input-container { - left: 60px; - } - } - } - - .nitro-toolbar-me-menu { - bottom: 77px; - left: 200px; - position: absolute; - font-size: 12px; - z-index: $toolbar-memenu-zindex; - - .list-group { - .list-group-item { - min-width: 70px; - transition: all 0.3s; - font-size: 10px; - text-align: center; - - i { - filter: grayscale(1); - } - - &:hover { - color: $cyan; - text-decoration: underline; - - i { - filter: grayscale(0); - } - } - - .count { - top: 0px; - right: 5px; - font-size: 10px; - } - } - } - } - } -} - -.toolbar-icon-animation { - position: absolute; - object-fit: cover; - height: auto; - width: auto; - max-width: 120px; - max-height: 150px; - z-index: 500; - filter: drop-shadow(2px 1px 0 rgba($white, 1)) - drop-shadow(-2px 1px 0 rgba($white, 1)) - drop-shadow(0 -2px 0 rgba($white, 1)); -} - -@import "./me/ToolbarMeView"; diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx deleted file mode 100644 index 30ad7f8d..00000000 --- a/src/views/toolbar/ToolbarView.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; -import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api'; -import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events'; -import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements'; -import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent'; -import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent'; -import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; -import { dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks'; -import { CreateMessageHook } from '../../hooks/messages/message-event'; -import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation'; -import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types'; -import { AvatarImageView } from '../shared/avatar-image/AvatarImageView'; -import { ItemCountView } from '../shared/item-count/ItemCountView'; -import { ToolbarMeView } from './me/ToolbarMeView'; -import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types'; - -const CHAT_ICON_HIDDEN: number = 0; -const CHAT_ICON_SHOWING: number = 1; -const CHAT_ICON_UNREAD: number = 2; - -export const ToolbarView: FC = props => -{ - const { isInRoom } = props; - - const [ userInfo, setUserInfo ] = useState(null); - const [ userFigure, setUserFigure ] = useState(null); - const [ isMeExpanded, setMeExpanded ] = useState(false); - const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN); - const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0); - const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0); - const [ unseenFriendRequestCount, setFriendRequestCount ] = useState(0); - const isMod = GetSessionDataManager().isModerator; - - const onUserInfoEvent = useCallback((event: UserInfoEvent) => - { - const parser = event.getParser(); - - setUserInfo(parser.userInfo); - setUserFigure(parser.userInfo.figure); - }, []); - - CreateMessageHook(UserInfoEvent, onUserInfoEvent); - - const onUserFigureEvent = useCallback((event: FigureUpdateEvent) => - { - const parser = event.getParser(); - - setUserFigure(parser.figure); - }, []); - - CreateMessageHook(FigureUpdateEvent, onUserFigureEvent); - - const onFriendsMessengerIconEvent = useCallback((event: FriendsMessengerIconEvent) => - { - setChatIconType(event.iconType); - }, []); - - useUiEvent(FriendsMessengerIconEvent.UPDATE_ICON, onFriendsMessengerIconEvent); - - const onUnseenItemTrackerUpdateEvent = useCallback((event: UnseenItemTrackerUpdateEvent) => - { - setUnseenInventoryCount(event.count); - }, []); - - useUiEvent(UnseenItemTrackerUpdateEvent.UPDATE_COUNT, onUnseenItemTrackerUpdateEvent); - - const onAchievementsUIUnseenCountEvent = useCallback((event: AchievementsUIUnseenCountEvent) => - { - setUnseenAchievementCount(event.count); - }, []); - - useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent); - - const onFriendsRequestCountEvent = useCallback((event: FriendsRequestCountEvent) => - { - setFriendRequestCount(event.count); - }, []); - - useUiEvent(FriendsRequestCountEvent.UPDATE_COUNT, onFriendsRequestCountEvent); - - const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) => - { - const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement); - - if(!target) return; - - image.className = 'toolbar-icon-animation'; - image.style.visibility = 'visible'; - image.style.left = (x + 'px'); - image.style.top = (y + 'px'); - - document.body.append(image); - - const targetBounds = target.getBoundingClientRect(); - const imageBounds = image.getBoundingClientRect(); - - const left = (imageBounds.x - targetBounds.x); - const top = (imageBounds.y - targetBounds.y); - const squared = Math.sqrt(((left * left) + (top * top))); - const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5))); - const height = 20; - - const motionName = (`ToolbarBouncing[${ iconName }]`); - - if(!Motions.getMotionByTag(motionName)) - { - Motions.runMotion(new Queue(new Wait((wait + 8)), new DropBounce(target, 400, 12))).tag = motionName; - } - - const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image)); - - Motions.runMotion(motion); - }, []); - - const onNitroToolbarAnimateIconEvent = useCallback((event: NitroToolbarAnimateIconEvent) => - { - animationIconToToolbar('icon-inventory', event.image, event.x, event.y); - }, [ animationIconToToolbar ]); - - useRoomEngineEvent(NitroToolbarAnimateIconEvent.ANIMATE_ICON, onNitroToolbarAnimateIconEvent); - - const handleToolbarItemClick = useCallback((item: string) => - { - switch(item) - { - case ToolbarViewItems.NAVIGATOR_ITEM: - dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_NAVIGATOR)); - return; - case ToolbarViewItems.INVENTORY_ITEM: - dispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY)); - return; - case ToolbarViewItems.CATALOG_ITEM: - dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG)); - return; - case ToolbarViewItems.FRIEND_LIST_ITEM: - dispatchUiEvent(new CatalogEvent(FriendsEvent.TOGGLE_FRIEND_LIST)); - return; - case ToolbarViewItems.CAMERA_ITEM: - dispatchUiEvent(new RoomWidgetCameraEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA)); - return; - case ToolbarViewItems.CLOTHING_ITEM: - dispatchUiEvent(new AvatarEditorEvent(AvatarEditorEvent.TOGGLE_EDITOR)); - setMeExpanded(false); - return; - case ToolbarViewItems.MOD_TOOLS_ITEM: - dispatchUiEvent(new ModToolsEvent(ModToolsEvent.TOGGLE_MOD_TOOLS)); - return; - case ToolbarViewItems.ACHIEVEMENTS_ITEM: - dispatchUiEvent(new AchievementsUIEvent(AchievementsUIEvent.TOGGLE_ACHIEVEMENTS)); - setMeExpanded(false); - return; - case ToolbarViewItems.PROFILE_ITEM: - GetUserProfile(GetSessionDataManager().userId); - setMeExpanded(false); - return; - case ToolbarViewItems.SETTINGS_ITEM: - dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS)); - setMeExpanded(false); - return; - case ToolbarViewItems.FRIEND_CHAT_ITEM: - OpenMessengerChat(); - return; - } - }, []); - - const visitDesktop = useCallback(() => - { - if(!GetRoomSession()) return; - - GoToDesktop(); - GetRoomSessionManager().removeSession(-1); - }, []); - - return ( -
- - - -
-
-
-
setMeExpanded(!isMeExpanded) }> - - { (unseenAchievementCount > 0) && - } -
- { isInRoom && ( -
- -
) } - { !isInRoom && ( -
CreateLinkEvent('navigator/goto/home') }> - -
) } -
handleToolbarItemClick(ToolbarViewItems.NAVIGATOR_ITEM) }> - -
-
handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) }> - -
-
handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }> - - { (unseenInventoryCount > 0) && - } -
- { isInRoom && ( -
handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }> - -
) } - { isMod && ( -
handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }> - -
) } -
-
-
-
-
-
handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }> - - { (unseenFriendRequestCount > 0) && - } -
- { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) && -
handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }> - { (chatIconType === CHAT_ICON_SHOWING) && } - { (chatIconType === CHAT_ICON_UNREAD) && } -
} -
-
-
-
-
- ); -} diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts deleted file mode 100644 index 48a376d1..00000000 --- a/src/views/toolbar/ToolbarView.types.ts +++ /dev/null @@ -1,19 +0,0 @@ -export interface ToolbarViewProps -{ - isInRoom: boolean; -} - -export class ToolbarViewItems -{ - public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM'; - public static INVENTORY_ITEM: string = 'TVI_INVENTORY_ITEM'; - public static CATALOG_ITEM: string = 'TVI_CATALOG_ITEM'; - public static FRIEND_LIST_ITEM: string = 'TVI_FRIEND_LIST_ITEM'; - public static FRIEND_CHAT_ITEM: string = 'TVI_FRIEND_CHAT_ITEM'; - public static CLOTHING_ITEM: string = 'TVI_CLOTHING_ITEM'; - public static CAMERA_ITEM: string = 'TVI_CAMERA_ITEM'; - public static MOD_TOOLS_ITEM: string = 'TVI_MOD_TOOLS_ITEM'; - public static ACHIEVEMENTS_ITEM: string = 'TVI_ACHIEVEMENTS_ITEM'; - public static PROFILE_ITEM: string = 'TVI_PROFILE_ITEM'; - public static SETTINGS_ITEM: string = 'TVI_SETTINGS_ITEM'; -} diff --git a/src/views/toolbar/me/ToolbarMeView.tsx b/src/views/toolbar/me/ToolbarMeView.tsx deleted file mode 100644 index 8a707870..00000000 --- a/src/views/toolbar/me/ToolbarMeView.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { RoomObjectCategory } from '@nitrots/nitro-renderer'; -import { FC, useEffect } from 'react'; -import { GetRoomEngine, GetRoomSession } from '../../../api'; -import { ItemCountView } from '../../shared/item-count/ItemCountView'; -import { ToolbarViewItems } from '../ToolbarView.types'; -import { ToolbarMeViewProps } from './ToolbarMeView.types'; - -export const ToolbarMeView: FC = props => -{ - const { unseenAchievementCount = 0, handleToolbarItemClick = null } = props; - - useEffect(() => - { - const roomSession = GetRoomSession(); - - if(!roomSession) return; - - GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT); - }, []); - - return ( -
-
-
- -
-
- -
-
handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }> - - { (unseenAchievementCount > 0) && - } -
-
handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }> - -
-
- -
-
handleToolbarItemClick(ToolbarViewItems.CLOTHING_ITEM) }> - -
-
- -
-
handleToolbarItemClick(ToolbarViewItems.SETTINGS_ITEM) }> - -
-
-
- ); -}