56 lines
1.1 KiB
JavaScript
56 lines
1.1 KiB
JavaScript
// 3rd party.
|
|
import React, {useEffect, useState} from 'react';
|
|
// 2nd party.
|
|
import {compose} from '@avocado/core';
|
|
import contempo from 'contempo';
|
|
// 1st party.
|
|
import ItemSlot from './item-slot';
|
|
|
|
const decorate = compose(
|
|
contempo(`
|
|
.inventory {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateY(-80px);
|
|
}
|
|
.inventory-inner {
|
|
width: 250px;
|
|
height: 150px;
|
|
position: relative;
|
|
transform: translateX(-50%);
|
|
}
|
|
.bag, .equipment {
|
|
position: absolute;
|
|
}
|
|
.bag {
|
|
width: 200px;
|
|
height: 80px;
|
|
transform: translateX(25px);
|
|
}
|
|
.equipment {
|
|
width: 20px;
|
|
height: 80px;
|
|
transform: translateX(0px);
|
|
}
|
|
`),
|
|
);
|
|
|
|
const InventoryComponent = ({worldTime}) => {
|
|
const bagSlots = [];
|
|
for (let i = 0; i < 40; ++i) {
|
|
bagSlots.push(<ItemSlot key={i} />);
|
|
}
|
|
const equipmentSlots = [];
|
|
for (let i = 0; i < 4; ++i) {
|
|
equipmentSlots.push(<ItemSlot key={i} />);
|
|
}
|
|
return <div className="inventory unselectable">
|
|
<div className="inventory-inner">
|
|
<div className="bag">{bagSlots}</div>
|
|
<div className="equipment">{equipmentSlots}</div>
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
export default decorate(InventoryComponent);
|