diff --git a/src/common/index.scss b/src/common/index.scss index 95283d24..319117a5 100644 --- a/src/common/index.scss +++ b/src/common/index.scss @@ -387,5 +387,165 @@ } } +.unique-item { + + .unique-bg-override { + background-position: center; + background-repeat: no-repeat; + z-index: 2; + } + + &:before { + position: absolute; + content: ''; + width: 100%; + height: 100%; + background: url("../assets/images/unique/grid-bg.png") center no-repeat; + z-index: 1; + } + + &:after { + position: absolute; + content: ''; + width: 100%; + height: 100%; + background: url("../assets/images/unique/grid-bg-glass.png") center no-repeat; + bottom: 0; + z-index: 4; + } + + &.sold-out:after { + background: url("../assets/images/unique/grid-bg-sold-out.png") center no-repeat, + url("../assets/images/unique/grid-bg-glass.png") center no-repeat; + } + + .unique-item-counter { + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + bottom: 1px; + width: 100%; + height: 9px; + background: url("../assets/images/unique/grid-count-bg.png") center no-repeat; + z-index: 3; + } +} + +.unique-sold-out-blocker { + width: 364px; + height: 30px; + background: url("../assets/images/unique/catalog-info-sold-out.png"); + + div { + float: right; + width: 140px; + text-align: center; + font-weight: bold; + margin-top: 5px; + margin-right: 17px; + color: #000; + } +} + +.unique-compact-plate { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + right: 16px; + width: 34px; + height: 37px; + background: url("../assets/images/unique/inventory-info-amount-bg.png"); + + div { + display: flex; + justify-content: center; + align-items: center; + height: 9.5px; + } +} + +.unique-complete-plate { + width: 170px; + height: 29px; + background: url("../assets/images/unique/catalog-info-amount-bg.png") no-repeat center; + z-index: 1; + padding-top: 3px; + + .plate-container { + margin-left: 45px; + width: 100px; + font-size: 10px; + color: black; + + > :first-child { + margin-bottom: 2px; + } + } +} + +.limited-edition-number { + display: inline-block; + outline: 0; + height: 5px; + margin-right: 1px; + background-image: url('../assets/images/unique/numbers.png'); + background-repeat: no-repeat; + + &:last-child { + margin-right: 0px; + } + + &.n-0 { + width: 4px; + background-position: -1px 0px; + } + + &.n-1 { + width: 2px; + background-position: -6px 0px; + } + + &.n-2 { + width: 4px; + background-position: -9px 0px; + } + + &.n-3 { + width: 4px; + background-position: -14px 0px; + } + + &.n-4 { + width: 4px; + background-position: -19px 0px; + } + + &.n-5 { + width: 4px; + background-position: -24px 0px; + } + + &.n-6 { + width: 4px; + background-position: -29px 0px; + } + + &.n-7 { + width: 4px; + background-position: -34px 0px; + } + + &.n-8 { + width: 4px; + background-position: -39px 0px; + } + + &.n-9 { + width: 4px; + background-position: -44px 0px; + } +} @import './card/NitroCardView'; diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx index b2af1fc8..0a630d00 100644 --- a/src/common/layout/LayoutGridItem.tsx +++ b/src/common/layout/LayoutGridItem.tsx @@ -1,8 +1,8 @@ import { FC, useMemo } from 'react'; -import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/LimitedEditionStyledNumberView'; import { Base } from '../Base'; import { Column, ColumnProps } from '../Column'; import { LayoutItemCountView } from './LayoutItemCountView'; +import { LayoutLimitedEditionStyledNumberView } from './limited-edition'; export interface LayoutGridItemProps extends ColumnProps { @@ -66,7 +66,7 @@ export const LayoutGridItem: FC = props => <>
- +
} { children } diff --git a/src/common/layout/index.ts b/src/common/layout/index.ts index 5d29b15f..5fcdf07b 100644 --- a/src/common/layout/index.ts +++ b/src/common/layout/index.ts @@ -15,4 +15,5 @@ export * from './LayoutRarityLevelView'; export * from './LayoutRoomPreviewerView'; export * from './LayoutRoomThumbnailView'; export * from './LayoutTrophyView'; +export * from './limited-edition'; export * from './UserProfileIconView'; diff --git a/src/views/shared/limited-edition/LimitedEditionCompactPlateView.tsx b/src/common/layout/limited-edition/LayoutLimitedEditionCompactPlateView.tsx similarity index 56% rename from src/views/shared/limited-edition/LimitedEditionCompactPlateView.tsx rename to src/common/layout/limited-edition/LayoutLimitedEditionCompactPlateView.tsx index 74c93089..ee41c6c9 100644 --- a/src/views/shared/limited-edition/LimitedEditionCompactPlateView.tsx +++ b/src/common/layout/limited-edition/LayoutLimitedEditionCompactPlateView.tsx @@ -1,14 +1,14 @@ import { FC, useMemo } from 'react'; -import { Base, BaseProps } from '../../../common/Base'; -import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView'; +import { Base, BaseProps } from '../../Base'; +import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView'; -export interface LimitedEditionCompactPlateViewProps extends BaseProps +interface LayoutLimitedEditionCompactPlateViewProps extends BaseProps { uniqueNumber: number; uniqueSeries: number; } -export const LimitedEditionCompactPlateView: FC = props => +export const LayoutLimitedEditionCompactPlateView: FC = props => { const { uniqueNumber = 0, uniqueSeries = 0, classNames = [], children = null, ...rest } = props; @@ -24,10 +24,10 @@ export const LimitedEditionCompactPlateView: FC
- +
- +
{ children } diff --git a/src/views/shared/limited-edition/LimitedEditionCompletePlateView.tsx b/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx similarity index 62% rename from src/views/shared/limited-edition/LimitedEditionCompletePlateView.tsx rename to src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx index f6cee2b9..f4296538 100644 --- a/src/views/shared/limited-edition/LimitedEditionCompletePlateView.tsx +++ b/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx @@ -1,17 +1,17 @@ import { FC, useMemo } from 'react'; import { LocalizeText } from '../../../api'; -import { Base, BaseProps } from '../../../common/Base'; -import { Column } from '../../../common/Column'; -import { Flex } from '../../../common/Flex'; -import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView'; +import { Base, BaseProps } from '../../Base'; +import { Column } from '../../Column'; +import { Flex } from '../../Flex'; +import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView'; -export interface LimitedEditionCompletePlateViewProps extends BaseProps +interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps { uniqueLimitedItemsLeft: number; uniqueLimitedSeriesSize: number; } -export const LimitedEditionCompletePlateView: FC = props => +export const LayoutLimitedEditionCompletePlateView: FC = props => { const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props; @@ -29,11 +29,11 @@ export const LimitedEditionCompletePlateView: FC { LocalizeText('unique.items.left') } - + { LocalizeText('unique.items.number.sold') } - + diff --git a/src/views/shared/limited-edition/LimitedEditionStyledNumberView.tsx b/src/common/layout/limited-edition/LayoutLimitedEditionStyledNumberView.tsx similarity index 69% rename from src/views/shared/limited-edition/LimitedEditionStyledNumberView.tsx rename to src/common/layout/limited-edition/LayoutLimitedEditionStyledNumberView.tsx index 29318e6a..92e939d2 100644 --- a/src/views/shared/limited-edition/LimitedEditionStyledNumberView.tsx +++ b/src/common/layout/limited-edition/LayoutLimitedEditionStyledNumberView.tsx @@ -1,11 +1,11 @@ import { FC } from 'react'; -export interface LimitedEditionStyledNumberViewProps +interface LayoutLimitedEditionStyledNumberViewProps { value: number; } -export const LimitedEditionStyledNumberView: FC = props => +export const LayoutLimitedEditionStyledNumberView: FC = props => { const { value = 0 } = props; diff --git a/src/common/layout/limited-edition/index.ts b/src/common/layout/limited-edition/index.ts new file mode 100644 index 00000000..ee41cf9f --- /dev/null +++ b/src/common/layout/limited-edition/index.ts @@ -0,0 +1,3 @@ +export * from './LayoutLimitedEditionCompactPlateView'; +export * from './LayoutLimitedEditionCompletePlateView'; +export * from './LayoutLimitedEditionStyledNumberView'; diff --git a/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx index 1a05b7f1..035d7d44 100644 --- a/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx +++ b/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx @@ -1,6 +1,5 @@ import { FC } from 'react'; -import { Base, BaseProps } from '../../../../../common/Base'; -import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView'; +import { Base, BaseProps, LayoutLimitedEditionCompletePlateView } from '../../../../../common'; import { useCatalogContext } from '../../../CatalogContext'; import { Offer } from '../../../common/Offer'; @@ -13,7 +12,7 @@ export const CatalogLimitedItemWidgetView: FC> = props return ( - + { children } ); diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx index 37fdb3f6..e8886c54 100644 --- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx +++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx @@ -1,8 +1,7 @@ import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api'; -import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common'; -import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView'; +import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common'; import { FurniCategory } from '../../common/FurniCategory'; import { attemptItemPlacement, attemptPlaceMarketplaceOffer } from '../../common/FurnitureUtilities'; import { GroupItem } from '../../common/GroupItem'; @@ -116,7 +115,7 @@ export const InventoryFurnitureView: FC = props => { groupItem && groupItem.stuffData.isUnique && - } + } { (groupItem && groupItem.stuffData.rarityLevel > -1) && } diff --git a/src/components/room/widgets/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/infostand/InfoStandWidgetFurniView.tsx index 5b73cab6..bf92adee 100644 --- a/src/components/room/widgets/infostand/InfoStandWidgetFurniView.tsx +++ b/src/components/room/widgets/infostand/InfoStandWidgetFurniView.tsx @@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, StringDataType } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage, RoomWidgetUpdateInfostandFurniEvent, SendMessageComposer } from '../../../../api'; -import { Button, Column, Flex, LayoutBadgeImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../common'; +import { Button, Column, Flex, LayoutBadgeImageView, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../common'; import { BatchUpdates, UseMessageEventHook } from '../../../../hooks'; -import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView'; import { useRoomContext } from '../../RoomContext'; interface InfoStandWidgetFurniViewProps @@ -267,7 +266,7 @@ export const InfoStandWidgetFurniView: FC = props { furniData.stuffData.isUnique &&
- +
} { (furniData.stuffData.rarityLevel > -1) &&
diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 76a2a4f3..d2b14372 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -1,4 +1,3 @@ -@import "./shared/Shared"; @import "./hotel-view/HotelView"; @import "./nitropedia/NitropediaView"; @import "./hc-center/HcCenterView.scss"; diff --git a/src/views/shared/Shared.scss b/src/views/shared/Shared.scss deleted file mode 100644 index 1ce927a7..00000000 --- a/src/views/shared/Shared.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./limited-edition/LimitedEdition"; diff --git a/src/views/shared/limited-edition/LimitedEdition.scss b/src/views/shared/limited-edition/LimitedEdition.scss deleted file mode 100644 index 77d7a9b8..00000000 --- a/src/views/shared/limited-edition/LimitedEdition.scss +++ /dev/null @@ -1,160 +0,0 @@ -.unique-item { - - .unique-bg-override { - background-position: center; - background-repeat: no-repeat; - z-index: 2; - } - - &:before { - position: absolute; - content: ''; - width: 100%; - height: 100%; - background: url("../../../assets/images/unique/grid-bg.png") center no-repeat; - z-index: 1; - } - - &:after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - background: url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat; - bottom: 0; - z-index: 4; - } - - &.sold-out:after { - background: url("../../../assets/images/unique/grid-bg-sold-out.png") center no-repeat, - url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat; - } - - .unique-item-counter { - margin: 0 auto; - display: flex; - justify-content: center; - align-items: center; - bottom: 1px; - width: 100%; - height: 9px; - background: url("../../../assets/images/unique/grid-count-bg.png") center no-repeat; - z-index: 3; - } -} - -.unique-sold-out-blocker { - width: 364px; - height: 30px; - background: url("../../../assets/images/unique/catalog-info-sold-out.png"); - - div { - float: right; - width: 140px; - text-align: center; - font-weight: bold; - margin-top: 5px; - margin-right: 17px; - color: #000; - } -} - -.unique-compact-plate { - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - right: 16px; - width: 34px; - height: 37px; - background: url("../../../assets/images/unique/inventory-info-amount-bg.png"); - - div { - display: flex; - justify-content: center; - align-items: center; - height: 9.5px; - } -} - -.unique-complete-plate { - width: 170px; - height: 29px; - background: url("../../../assets/images/unique/catalog-info-amount-bg.png") no-repeat center; - z-index: 1; - padding-top: 3px; - - .plate-container { - margin-left: 45px; - width: 100px; - font-size: 10px; - color: black; - - > :first-child { - margin-bottom: 2px; - } - } -} - -.limited-edition-number { - display: inline-block; - outline: 0; - height: 5px; - margin-right: 1px; - background-image: url('../../../assets/images/unique/numbers.png'); - background-repeat: no-repeat; - - &:last-child { - margin-right: 0px; - } - - &.n-0 { - width: 4px; - background-position: -1px 0px; - } - - &.n-1 { - width: 2px; - background-position: -6px 0px; - } - - &.n-2 { - width: 4px; - background-position: -9px 0px; - } - - &.n-3 { - width: 4px; - background-position: -14px 0px; - } - - &.n-4 { - width: 4px; - background-position: -19px 0px; - } - - &.n-5 { - width: 4px; - background-position: -24px 0px; - } - - &.n-6 { - width: 4px; - background-position: -29px 0px; - } - - &.n-7 { - width: 4px; - background-position: -34px 0px; - } - - &.n-8 { - width: 4px; - background-position: -39px 0px; - } - - &.n-9 { - width: 4px; - background-position: -44px 0px; - } -}