54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
|
// 3rd party.
|
||
|
import classnames from 'classnames';
|
||
|
import React, {useEffect, useState} from 'react';
|
||
|
// 2nd party.
|
||
|
import {compose} from '@avocado/core';
|
||
|
import contempo from 'contempo';
|
||
|
// 1st party.
|
||
|
import Hotbar from './hotbar';
|
||
|
import Inventory from './inventory';
|
||
|
import WorldTime from './world-time';
|
||
|
|
||
|
const decorate = compose(
|
||
|
contempo(`
|
||
|
.menu {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
.menu-inner {
|
||
|
transition: transform 0.25s;
|
||
|
will-change: transform;
|
||
|
}
|
||
|
.menu-inner.open {
|
||
|
transform: translateY(156px);
|
||
|
}
|
||
|
`),
|
||
|
);
|
||
|
|
||
|
const MenuComponent = ({app}) => {
|
||
|
const [opened, setOpened] = useState(false);
|
||
|
useEffect(() => {
|
||
|
const onMenuOpenedChanged = () => {
|
||
|
setOpened(app.isMenuOpened);
|
||
|
}
|
||
|
onMenuOpenedChanged();
|
||
|
app.on('isMenuOpenedChanged', onMenuOpenedChanged);
|
||
|
return () => {
|
||
|
app.off('isMenuOpenedChanged', onMenuOpenedChanged);
|
||
|
};
|
||
|
}, []);
|
||
|
return <div className="menu unselectable">
|
||
|
<div className={classnames(
|
||
|
'menu-inner',
|
||
|
opened ? 'open' : '',
|
||
|
)}>
|
||
|
<Inventory />
|
||
|
<WorldTime worldTime={app.worldTime} />
|
||
|
<Hotbar />
|
||
|
</div>
|
||
|
</div>;
|
||
|
}
|
||
|
|
||
|
export default decorate(MenuComponent);
|