From 4e94e5b11172ef815cf7b7049034f905f8eb74ff Mon Sep 17 00:00:00 2001 From: dank074 Date: Thu, 14 Jul 2022 15:44:45 -0500 Subject: [PATCH 1/4] added color_grouping catalog layout --- src/api/navigator/index.ts | 1 - .../layout/CatalogLayoutColorGroupingView.tsx | 220 ++++++++++++------ .../views/page/layout/GetCatalogLayout.tsx | 7 +- 3 files changed, 157 insertions(+), 71 deletions(-) diff --git a/src/api/navigator/index.ts b/src/api/navigator/index.ts index 77b0a417..bceb33e4 100644 --- a/src/api/navigator/index.ts +++ b/src/api/navigator/index.ts @@ -7,7 +7,6 @@ export * from './IRoomModel'; export * from './IRoomModerationSettings'; export * from './NavigatorSearchResultViewDisplayMode'; export * from './RoomInfoData'; -export * from './RoomSettingsData'; export * from './RoomSettingsUtils'; export * from './SearchFilterOptions'; export * from './TryVisitRoom'; diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx index d502f86a..9feaba62 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx @@ -1,4 +1,16 @@ -import { FC, useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { ColorConverter, IFurnitureData } from '@nitrots/nitro-renderer'; +import { FC, useMemo, useState } from 'react'; +import { IPurchasableOffer } from '../../../../../api'; +import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../common'; +import { useCatalog } from '../../../../../hooks'; +import { CatalogGridOfferView } from '../common/CatalogGridOfferView'; +import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView'; +import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView'; +import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView'; +import { CatalogSpinnerWidgetView } from '../widgets/CatalogSpinnerWidgetView'; +import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget'; +import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView'; import { CatalogLayoutProps } from './CatalogLayout.types'; export interface CatalogLayoutColorGroupViewProps extends CatalogLayoutProps @@ -10,79 +22,153 @@ export const CatalogLayoutColorGroupingView : FC>(new Map()); + const { currentOffer = null, setCurrentOffer = null } = useCatalog(); + const [ colorsShowing, setColorsShowing ] = useState(false); - // const offers = useMemo(() => - // { - // const offers: CatalogPageMessageOfferData[] = []; - // const addedColorableItems = new Map(); + const sortByColorIndex = (a: IPurchasableOffer, b: IPurchasableOffer) => + { + if (((!(a.product.furnitureData.colorIndex)) || (!(b.product.furnitureData.colorIndex)))) + { + return 1; + } + if (a.product.furnitureData.colorIndex > b.product.furnitureData.colorIndex) + { + return 1; + } + if (a == b) + { + return 0; + } + return -1; + } - // pageParser.offers.forEach(offer => - // { - // const product = offer.products[0]; - // if(!product) return; - - // let furniData: IFurnitureData = null; + const sortyByFurnitureClassName = (a: IPurchasableOffer, b: IPurchasableOffer) => + { + if (a.product.furnitureData.className > b.product.furnitureData.className) + { + return 1; + } + if (a == b) + { + return 0; + } + return -1; + } - // if(product.productType === ProductTypeEnum.FLOOR) - // { - // furniData = GetSessionDataManager().getFloorItemData(product.furniClassId); - // } - // else if(product.productType === ProductTypeEnum.WALL) - // { - // furniData = GetSessionDataManager().getWallItemData(product.furniClassId); - // } + const selectOffer = (offer: IPurchasableOffer) => + { + offer.activate(); + setCurrentOffer(offer); + } - // if(((!(furniData)) || ((furniData.fullName.indexOf('*') === -1)))) - // { - // offers.push(offer); - // } - // else - // { - // const name = furniData.fullName.split('*')[0]; - // const colorIndex = parseInt(furniData.fullName.split('*')[1]); + const selectColor = (colorIndex: number, productName: string) => + { + const fullName = `${ productName }*${ colorIndex }`; + const index = page.offers.findIndex(offer => offer.product.furnitureData.fullName === fullName); + if (index > -1) + { + selectOffer(page.offers[index]); + } + } - // if(!colorableItems[name]) - // { - // colorableItems[name] = []; - // } + const offers = useMemo(() => + { + const offers: IPurchasableOffer[] = []; + const addedColorableItems = new Map(); - // let selectedColor = 0; - // if(furniData.colors) - // { - // for(let color of furniData.colors) - // { - // if(color !== 0xFFFFFF) - // { - // selectedColor = color; - // } - // } - // if(colorableItems[name].indexOf(selectedColor) === -1) - // { - // colorableItems[name][colorIndex] = selectedColor; - // } - // } + page.offers.sort(sortByColorIndex); - // if(!addedColorableItems.has(name)) - // { - // offers.push(offer); - // addedColorableItems.set(name, true); - // } - // } - // }); - // console.log(colorableItems); - // return offers; - // }, [colorableItems, pageParser.offers]); + let selectedColor = 0; - return null; + page.offers.forEach(offer => + { + if(!offer.product) return; - // return ( - // - // - // - // - // - - // - // - // ); + let furniData: IFurnitureData = offer.product.furnitureData; + + if(((!(furniData)) || (!furniData.hasIndexedColor))) + { + offers.push(offer); + } + else + { + const name = furniData.fullName.split('*')[0]; + const colorIndex = parseInt(furniData.fullName.split('*')[1]); + + if(!colorableItems.has(name)) + { + colorableItems.set(name, []); + } + + if(furniData.colors) + { + for(let color of furniData.colors) + { + if(color !== 0xFFFFFF) + { + selectedColor = color; + } + } + + if(colorableItems.get(name).indexOf(selectedColor) === -1) + { + colorableItems.get(name)[colorIndex] = selectedColor; + } + + } + + if(!addedColorableItems.has(name)) + { + offers.push(offer); + addedColorableItems.set(name, true); + } + } + }); + offers.sort(sortyByFurnitureClassName); + return offers; + }, [ colorableItems, page.offers ]); + + return ( + + + + { (!colorsShowing || !currentOffer || !colorableItems.has(currentOffer.product.furnitureData.className)) && + offers.map((offer, index) => ) + } + { (colorsShowing && currentOffer && colorableItems.has(currentOffer.product.furnitureData.className)) && + colorableItems.get(currentOffer.product.furnitureData.className).map((color, index) => selectColor(index, currentOffer.product.furnitureData.className) } />) + } + + + + { !currentOffer && + <> + { !!page.localization.getImage(1) && } + + } + { currentOffer && + <> + + + + + { currentOffer.product.furnitureData.hasIndexedColor && + } + + + { currentOffer.localizationName } + + + + + + + + + } + + + ); } diff --git a/src/components/catalog/views/page/layout/GetCatalogLayout.tsx b/src/components/catalog/views/page/layout/GetCatalogLayout.tsx index 2f5afd1c..c80e162b 100644 --- a/src/components/catalog/views/page/layout/GetCatalogLayout.tsx +++ b/src/components/catalog/views/page/layout/GetCatalogLayout.tsx @@ -1,6 +1,7 @@ import { ICatalogPage } from '../../../../../api'; import { CatalogLayoutProps } from './CatalogLayout.types'; import { CatalogLayoutBadgeDisplayView } from './CatalogLayoutBadgeDisplayView'; +import { CatalogLayoutColorGroupingView } from './CatalogLayoutColorGroupingView'; import { CatalogLayoutDefaultView } from './CatalogLayoutDefaultView'; import { CatalogLayouGuildCustomFurniView } from './CatalogLayoutGuildCustomFurniView'; import { CatalogLayouGuildForumView } from './CatalogLayoutGuildForumView'; @@ -23,7 +24,7 @@ import { CatalogLayoutVipGiftsView } from './vip-gifts/CatalogLayoutVipGiftsView export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void) => { if(!page) return null; - + const layoutProps: CatalogLayoutProps = { page, hideNavigation }; switch(page.layoutCode) @@ -66,8 +67,8 @@ export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void) return ; case 'roomads': return ; - //case 'default_3x3_color_grouping': - //return ; + case 'default_3x3_color_grouping': + return ; case 'bots': case 'default_3x3': default: From 474fb7ee0e57253f08825b668ec5bfc72ded2c5e Mon Sep 17 00:00:00 2001 From: dank074 Date: Sat, 16 Jul 2022 20:45:49 -0500 Subject: [PATCH 2/4] style fixes --- .../page/layout/CatalogLayoutColorGroupingView.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx index 9feaba62..662fa331 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ColorConverter, IFurnitureData } from '@nitrots/nitro-renderer'; +import { ColorConverter } from '@nitrots/nitro-renderer'; import { FC, useMemo, useState } from 'react'; import { IPurchasableOffer } from '../../../../../api'; import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../common'; @@ -84,7 +84,7 @@ export const CatalogLayoutColorGroupingView : FC Date: Sat, 16 Jul 2022 21:40:35 -0500 Subject: [PATCH 3/4] quick changeee --- .../page/layout/CatalogLayoutColorGroupingView.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx index 662fa331..80e2f627 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx @@ -75,6 +75,7 @@ export const CatalogLayoutColorGroupingView : FC(); + const updatedColorableItems = new Map(); page.offers.sort(sortByColorIndex); @@ -95,9 +96,9 @@ export const CatalogLayoutColorGroupingView : FC From e4b38e649eced335e73993683d4665c6a431fd22 Mon Sep 17 00:00:00 2001 From: dank074 Date: Sat, 16 Jul 2022 22:33:27 -0500 Subject: [PATCH 4/4] changes --- src/components/room/widgets/word-quiz/WordQuizVoteView.tsx | 2 +- src/events/help/HelpNameChangeEvent.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx b/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx index 5511b284..4f58edee 100644 --- a/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx +++ b/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx @@ -1,4 +1,4 @@ -import { RoomObjectCategory } from '@nitrots/nitro-renderer/src'; +import { RoomObjectCategory } from '@nitrots/nitro-renderer'; import { FC } from 'react'; import { Base, BaseProps, Flex } from '../../../../common'; import { ObjectLocationView } from '../object-location/ObjectLocationView'; diff --git a/src/events/help/HelpNameChangeEvent.ts b/src/events/help/HelpNameChangeEvent.ts index 076f5b51..44597d0e 100644 --- a/src/events/help/HelpNameChangeEvent.ts +++ b/src/events/help/HelpNameChangeEvent.ts @@ -1,4 +1,4 @@ -import { NitroEvent } from '@nitrots/nitro-renderer/src/core/events/NitroEvent'; +import { NitroEvent } from '@nitrots/nitro-renderer'; export class HelpNameChangeEvent extends NitroEvent {