51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import {useContext, useEffect} from 'react';
|
|
|
|
import addKeyListener from '@/add-key-listener.js';
|
|
import {ACTION_MAP, RESOLUTION} from '@/constants.js';
|
|
import ClientContext from '@/context/client.js';
|
|
|
|
import Dom from './dom.jsx';
|
|
import HotBar from './hotbar.jsx';
|
|
import Pixi from './pixi.jsx';
|
|
import styles from './ui.module.css';
|
|
|
|
const ratio = RESOLUTION.x / RESOLUTION.y;
|
|
|
|
const KEY_MAP = {
|
|
keyDown: 1,
|
|
keyUp: 0,
|
|
};
|
|
|
|
export default function Ui() {
|
|
// Key input.
|
|
const client = useContext(ClientContext);
|
|
useEffect(() => {
|
|
return addKeyListener(document.body, ({type, payload}) => {
|
|
if (type in KEY_MAP && payload in ACTION_MAP) {
|
|
client.send({
|
|
type: 'Action',
|
|
payload: {
|
|
type: ACTION_MAP[payload],
|
|
value: KEY_MAP[type],
|
|
},
|
|
});
|
|
}
|
|
});
|
|
});
|
|
return (
|
|
<div className={styles.ui}>
|
|
<style>
|
|
{`
|
|
@media (max-aspect-ratio: ${ratio}) { .${styles.ui} { width: 100%; } }
|
|
@media (min-aspect-ratio: ${ratio}) { .${styles.ui} { height: 100%; } }
|
|
`}
|
|
</style>
|
|
<Pixi />
|
|
<Dom>
|
|
<HotBar active={0} slots={Array(10).fill(0).map(() => {})} />
|
|
</Dom>
|
|
</div>
|
|
);
|
|
}
|
|
|