70 lines
2.4 KiB
JavaScript
70 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
import {Droppable} from "@hello-pangea/dnd";
|
|
import {cartStyle} from "./utils";
|
|
import {ProductCartItem} from "./ProductCartItem.jsx";
|
|
import {FakePlaceholder} from "./FakePlaceholder.jsx";
|
|
import {FillExtData} from "./options/utils";
|
|
import {CountResources, crate_type_to_hp, hp_to_slots, resource_counters} from "./count_resources";
|
|
import {useShopStore} from "./shop_store";
|
|
import {TriggerCardWarnings} from "./warnings";
|
|
|
|
/**
|
|
* Component that displays a list of <ProductCartItem>
|
|
*/
|
|
export function Cart({crate_index}) {
|
|
// isMobile, isTouch, crate, onToggleOverlayRemove, onClickRemoveItem, onCardUpdate, onClickItem
|
|
const {crate} = useShopStore(state => ({
|
|
crate: state.crates[crate_index]
|
|
}));
|
|
|
|
const nbrOccupied = hp_to_slots(resource_counters.hp(crate.items, -1));
|
|
const nbrSlots = hp_to_slots(crate_type_to_hp(crate.crate_mode));
|
|
console.log(nbrOccupied, nbrSlots);
|
|
|
|
const products = crate.items.map((item, index) => {
|
|
const ext_data = FillExtData(crate.items, index);
|
|
const resources = CountResources(crate.items, index);
|
|
const warnings = TriggerCardWarnings(crate.items, index, resources);
|
|
return (
|
|
<ProductCartItem
|
|
card_index={index}
|
|
crate_index={crate_index}
|
|
ext_data={ext_data}
|
|
first={index === 0}
|
|
last={index === crate.items.length - 1 && nbrOccupied >= nbrSlots}
|
|
resources={resources}
|
|
warnings={warnings}
|
|
key={item.id}/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<Droppable droppableId={crate.id} direction="horizontal">
|
|
|
|
{(provided, snapshot) => (
|
|
<div
|
|
ref={provided.innerRef}
|
|
{...provided.droppableProps}
|
|
style={cartStyle(
|
|
provided.droppableProps.style,
|
|
snapshot,
|
|
)}
|
|
className="items-cart-list">
|
|
|
|
{products}
|
|
|
|
{provided.placeholder && (
|
|
<div style={{display: 'none'}}>
|
|
{provided.placeholder}
|
|
</div>
|
|
)}
|
|
|
|
<FakePlaceholder
|
|
nToDraw={nbrSlots - nbrOccupied}
|
|
isDraggingOver={snapshot.isDraggingOver}/>
|
|
</div>
|
|
)}
|
|
|
|
</Droppable>
|
|
);
|
|
} |