56 lines
1.3 KiB
React
56 lines
1.3 KiB
React
|
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 Pixi from './pixi.jsx';
|
||
|
import styles from './ui.module.css';
|
||
|
|
||
|
const ratio = RESOLUTION[0] / RESOLUTION[1];
|
||
|
|
||
|
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>
|
||
|
<div
|
||
|
style={{
|
||
|
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||
|
height: '225px',
|
||
|
width: '400px',
|
||
|
}}
|
||
|
></div>
|
||
|
</Dom>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|