nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update inventory

Browse Source
This commit is contained in:
Bill 2021-09-24 01:39:27 -04:00
parent fa0f8d5e8e
commit 1a3e85aa05
10 changed files with 68 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/inventory/InventoryView.scss
View File

@ -8,6 +8,3 @@
height: 181px; height: 181px;
} }
} }
@import './views/InventoryViews';

2
src/views/inventory/views/InventoryViews.scss
View File

@ -1,2 +0,0 @@
@import './badge/InventoryBadgeView';
@import './furniture/InventoryFurnitureView';

13
src/views/inventory/views/badge/InventoryBadgeView.scss
View File

@ -1,13 +0,0 @@
.current-badge-container {
.badge-image {
width: 45px;
height: 45px;
}
}
.inventory-badge-overflow {
height: calc(100% - 91px);
}
@import './item/InventoryBadgeItemView';

58
src/views/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -2,6 +2,9 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import { LocalizeBadgeName, LocalizeText } from '../../../../api'; import { LocalizeBadgeName, LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks/messages/message-event'; import { SendMessageHook } from '../../../../hooks/messages/message-event';
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { useInventoryContext } from '../../context/InventoryContext'; import { useInventoryContext } from '../../context/InventoryContext';
import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer'; import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
@ -74,55 +77,26 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
} }
return ( return (
<div className="d-flex flex-column h-100 overflow-hidden"> <NitroLayoutGrid>
<div className="row h-100"> <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
<div className="d-flex flex-column col-7 h-100">
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } /> <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
</div> </NitroLayoutGridColumn>
<div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden"> <NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
<div className="d-flex flex-column overflow-hidden"> <NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p> <div className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</div>
<InventoryActiveBadgeResultsView badges={ activeBadges } /> <InventoryActiveBadgeResultsView badges={ activeBadges } />
</div> </NitroLayoutFlexColumn>
{ badge && badge.length && { badge && (badge.length > 0) &&
<div className="d-flex flex-column gap-2"> <NitroLayoutFlexColumn gap={ 2 }>
<div className="d-flex justify-content-between align-items-center"> <div className="d-flex justify-content-between align-items-center">
<div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden"> <div className="d-flex flex-grow-1 gap-2 align-items-center overflow-hidden">
<BadgeImageView badgeCode={ badge } /> <BadgeImageView badgeCode={ badge } />
<div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div> <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
</div> </div>
</div> </div>
<button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button> <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
</div> } </NitroLayoutFlexColumn> }
</div> </NitroLayoutGridColumn>
</div> </NitroLayoutGrid>
</div>
// <div className="d-flex flex-column h-100 overflow-hidden">
// <div className="row inventory-badge-overflow">
// <div className="col-7 d-flex flex-column h-100">
// <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
// </div>
// <div className="col">
// <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
// <InventoryActiveBadgeResultsView badges={ activeBadges } />
// </div>
// </div>
// <div className="my-auto">
// { badge && badge.length &&
// <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
// <div className="d-flex flex-grow-1 current-badge-container">
// <BadgeImageView badgeCode={ badge } />
// <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
// <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
// </div>
// </div>
// <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
// </div> }
// <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
// <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
// </div>
// </div>
// </div>
// </>
); );
} }

17
src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
View File

@ -1,17 +0,0 @@
.inventory-badge-item-container {
height: 48px;
max-height: 48px;
.inventory-badge-item {
width: 100%;
height: 100%;
border-color: $grid-border-color !important;
background-color: $grid-bg-color;
overflow: hidden;
&.active {
border-color: $grid-active-border-color !important;
background-color: $grid-active-bg-color;
}
}
}

25
src/views/inventory/views/bot/InventoryBotView.tsx
View File

@ -2,6 +2,9 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import { GetRoomEngine, LocalizeText } from '../../../../api'; import { GetRoomEngine, LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks/messages/message-event'; import { SendMessageHook } from '../../../../hooks/messages/message-event';
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView'; import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
import { attemptBotPlacement } from '../../common/BotUtilities'; import { attemptBotPlacement } from '../../common/BotUtilities';
import { useInventoryContext } from '../../context/InventoryContext'; import { useInventoryContext } from '../../context/InventoryContext';
@ -80,20 +83,20 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
} }
return ( return (
<div className="row h-100"> <NitroLayoutGrid>
<div className="d-flex flex-column col-7 h-100"> <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
<InventoryBotResultsView botItems={ botItems } /> <InventoryBotResultsView botItems={ botItems } />
</div> </NitroLayoutGridColumn>
<div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden"> <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
<div className="position-relative d-flex flex-column overflow-auto h-100"> <NitroLayoutFlexColumn overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
</div> </NitroLayoutFlexColumn>
{ botItem && { botItem &&
<div className="d-flex flex-column gap-2"> <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
<p className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</p> <div className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</div>
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> } { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
</div> } </NitroLayoutFlexColumn> }
</div> </NitroLayoutGridColumn>
</div> </NitroLayoutGrid>
); );
} }

5
src/views/inventory/views/furniture/InventoryFurnitureView.scss
View File

@ -1,5 +0,0 @@
.stuffdata-extra-container {
position: absolute;
top: 5px;
right: 15px;
}

29
src/views/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -2,6 +2,9 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api'; import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks/messages'; import { SendMessageHook } from '../../../../hooks/messages';
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView'; import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView'; import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView'; import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
@ -116,30 +119,30 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
} }
return ( return (
<div className="row h-100"> <NitroLayoutGrid>
<div className="d-flex flex-column col-7 h-100"> <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } /> <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } /> <InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</div> </NitroLayoutGridColumn>
<div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden"> <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
<div className="position-relative d-flex flex-column overflow-auto h-100"> <NitroLayoutFlexColumn overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique && { groupItem && groupItem.stuffData.isUnique &&
<div className="stuffdata-extra-container"> <div className="position-absolute top-2 end-2">
<LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } /> <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
</div> } </div> }
{ (groupItem && groupItem.stuffData.rarityLevel > -1) && { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
<div className="stuffdata-extra-container"> <div className="position-absolute top-2 end-2">
<RarityLevelView level={ groupItem.stuffData.rarityLevel } /> <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
</div> } </div> }
</div> </NitroLayoutFlexColumn>
{ groupItem && { groupItem &&
<div className="d-flex flex-column gap-2"> <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
<p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p> <div className="flex-grow-1 text-black text-truncate">{ groupItem.name }</div>
{ !!roomSession && { !!roomSession &&
<button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> } <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
</div> } </NitroLayoutFlexColumn> }
</div> </NitroLayoutGridColumn>
</div> </NitroLayoutGrid>
); );
} }

2
src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
View File

@ -30,7 +30,7 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
}, [ groupItems, setGroupItems, searchValue ]); }, [ groupItems, setGroupItems, searchValue ]);
return ( return (
<div className="d-flex mb-1"> <div className="d-flex">
<div className="d-flex flex-grow-1 me-1"> <div className="d-flex flex-grow-1 me-1">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } /> <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
</div> </div>

25
src/views/inventory/views/pet/InventoryPetView.tsx
View File

@ -2,6 +2,9 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import { GetRoomEngine, LocalizeText } from '../../../../api'; import { GetRoomEngine, LocalizeText } from '../../../../api';
import { SendMessageHook } from '../../../../hooks/messages/message-event'; import { SendMessageHook } from '../../../../hooks/messages/message-event';
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView'; import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
import { attemptPetPlacement } from '../../common/PetUtilities'; import { attemptPetPlacement } from '../../common/PetUtilities';
import { useInventoryContext } from '../../context/InventoryContext'; import { useInventoryContext } from '../../context/InventoryContext';
@ -80,20 +83,20 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
} }
return ( return (
<div className="row h-100"> <NitroLayoutGrid>
<div className="d-flex flex-column col-7 h-100"> <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
<InventoryPetResultsView petItems={ petItems } /> <InventoryPetResultsView petItems={ petItems } />
</div> </NitroLayoutGridColumn>
<div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden"> <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
<div className="position-relative d-flex flex-column overflow-auto h-100"> <NitroLayoutFlexColumn overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
</div> </NitroLayoutFlexColumn>
{ petItem && { petItem &&
<div className="d-flex flex-column gap-2"> <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
<p className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</p> <div className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</div>
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> } { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
</div> } </NitroLayoutFlexColumn> }
</div> </NitroLayoutGridColumn>
</div> </NitroLayoutGrid>
); );
} }