2024-06-13 12:24:32 -05:00
|
|
|
import {useContext, useEffect, useState} from 'react';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
|
|
|
import addKeyListener from '@/add-key-listener.js';
|
|
|
|
import {ACTION_MAP, RESOLUTION} from '@/constants.js';
|
|
|
|
import ClientContext from '@/context/client.js';
|
|
|
|
|
2024-06-13 02:47:28 -05:00
|
|
|
import Disconnected from './disconnected.jsx';
|
2024-06-10 22:42:30 -05:00
|
|
|
import Dom from './dom.jsx';
|
2024-06-11 03:14:32 -05:00
|
|
|
import HotBar from './hotbar.jsx';
|
2024-06-10 22:42:30 -05:00
|
|
|
import Pixi from './pixi.jsx';
|
|
|
|
import styles from './ui.module.css';
|
|
|
|
|
2024-06-11 02:24:45 -05:00
|
|
|
const ratio = RESOLUTION.x / RESOLUTION.y;
|
2024-06-10 22:42:30 -05:00
|
|
|
|
|
|
|
const KEY_MAP = {
|
|
|
|
keyDown: 1,
|
|
|
|
keyUp: 0,
|
|
|
|
};
|
|
|
|
|
2024-06-13 02:47:28 -05:00
|
|
|
export default function Ui({disconnected}) {
|
2024-06-10 22:42:30 -05:00
|
|
|
// Key input.
|
|
|
|
const client = useContext(ClientContext);
|
2024-06-13 12:24:32 -05:00
|
|
|
const [showDisconnected, setShowDisconnected] = useState(false);
|
|
|
|
useEffect(() => {
|
|
|
|
let handle;
|
|
|
|
if (disconnected) {
|
|
|
|
handle = setTimeout(() => {
|
|
|
|
setShowDisconnected(true);
|
2024-06-15 20:59:11 -05:00
|
|
|
}, 400);
|
2024-06-13 12:24:32 -05:00
|
|
|
}
|
|
|
|
else {
|
|
|
|
setShowDisconnected(false)
|
|
|
|
}
|
|
|
|
return () => {
|
|
|
|
clearTimeout(handle);
|
|
|
|
};
|
|
|
|
}, [disconnected]);
|
2024-06-10 22:42:30 -05:00
|
|
|
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>
|
2024-06-13 21:54:32 -05:00
|
|
|
<HotBar active={1} slots={Array(10).fill(0).map(() => {})} />
|
2024-06-13 12:24:32 -05:00
|
|
|
{showDisconnected && (
|
2024-06-13 02:47:28 -05:00
|
|
|
<Disconnected />
|
|
|
|
)}
|
2024-06-10 22:42:30 -05:00
|
|
|
</Dom>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|