57 lines
1.2 KiB
JavaScript
57 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 QuickStatus from './quick-status';
|
|
import Hotbar from './hotbar';
|
|
import Inventory from './inventory';
|
|
import WorldTime from './world-time';
|
|
|
|
const decorate = compose(
|
|
contempo(`
|
|
.menu {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.menu-inner {
|
|
transition: transform 0.125s;
|
|
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 />
|
|
<QuickStatus app={app} />
|
|
<WorldTime worldTime={app.worldTime} />
|
|
<Hotbar />
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
export default decorate(MenuComponent);
|