2024-07-10 23:40:11 -05:00
|
|
|
import {useState} from 'react';
|
2024-07-08 15:49:23 -05:00
|
|
|
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
|
|
|
|
import 'react-tabs/style/react-tabs.css';
|
2024-07-07 23:30:48 -05:00
|
|
|
|
2024-07-20 04:32:33 -05:00
|
|
|
import {useEcs, useEcsTick} from '@/react/context/ecs.js';
|
|
|
|
import {useMainEntity} from '@/react/context/main-entity.js';
|
2024-07-10 23:40:11 -05:00
|
|
|
|
2024-07-07 23:30:48 -05:00
|
|
|
import styles from './devtools.module.css';
|
|
|
|
|
2024-07-08 15:49:23 -05:00
|
|
|
import Tiles from './devtools/tiles.jsx';
|
|
|
|
|
2024-07-07 23:30:48 -05:00
|
|
|
export default function Devtools({
|
2024-07-09 16:00:05 -05:00
|
|
|
eventsChannel,
|
2024-07-07 23:30:48 -05:00
|
|
|
}) {
|
2024-07-10 23:40:11 -05:00
|
|
|
const [ecs] = useEcs();
|
|
|
|
const [mainEntity] = useMainEntity();
|
2024-07-21 07:28:22 -05:00
|
|
|
const [mainEntityJson, setMainEntityJson] = useState('');
|
2024-07-10 23:40:11 -05:00
|
|
|
useEcsTick(() => {
|
|
|
|
if (!ecs || !mainEntity) {
|
|
|
|
return;
|
|
|
|
}
|
2024-07-21 07:28:22 -05:00
|
|
|
setMainEntityJson(JSON.stringify(ecs.get(mainEntity), null, 2));
|
2024-07-10 23:40:11 -05:00
|
|
|
}, [ecs, mainEntity]);
|
2024-07-07 23:30:48 -05:00
|
|
|
return (
|
|
|
|
<div className={styles.devtools}>
|
2024-07-08 15:49:23 -05:00
|
|
|
<Tabs>
|
|
|
|
<TabList>
|
|
|
|
<Tab>Dashboard</Tab>
|
|
|
|
<Tab>Tiles</Tab>
|
|
|
|
</TabList>
|
|
|
|
<TabPanel>
|
2024-07-08 22:14:21 -05:00
|
|
|
<div className={styles.dashboard}>
|
|
|
|
<form>
|
|
|
|
<div className={styles.engineBar}>
|
|
|
|
</div>
|
|
|
|
</form>
|
2024-07-21 07:28:22 -05:00
|
|
|
<pre><code><small>{mainEntityJson}</small></code></pre>
|
2024-07-08 22:14:21 -05:00
|
|
|
</div>
|
2024-07-08 15:49:23 -05:00
|
|
|
</TabPanel>
|
|
|
|
<TabPanel>
|
|
|
|
<Tiles
|
2024-07-09 16:00:05 -05:00
|
|
|
eventsChannel={eventsChannel}
|
2024-07-08 15:49:23 -05:00
|
|
|
/>
|
|
|
|
</TabPanel>
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
2024-07-07 23:30:48 -05:00
|
|
|
);
|
|
|
|
}
|