25443eba31
* Add lints for floating and misued promises * Add logging async errors in main * Add async error catch in test-utils * Change any to unknown * Trap promise errors and ignore more await warnings * Add more ignores and toSync helper * Fix more lint warnings * Add more ignores and fixes * Add more reject reporting * Add accepting arbitrary parameters to toSync() * Fix more lints * Revert unintentional change to non-arrow function * Revert unintentional change to use arrow function * Fix new warnings in main with auto updater * Fix formatting * Change lints to error This is what the recommended type checked rules do. * Fix to properly report promise rejections * Fix formatting * Fix formatting * Remove unused import * Remove unused convenience function * Move type helpers * Fix to not return promise when caller doesn't expect it * Add ignores to lsp code
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { CommandLog } from 'lang/std/engineConnection'
|
|
import { engineCommandManager } from 'lib/singletons'
|
|
import { reportRejection } from 'lib/trap'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export function useEngineCommands(): [CommandLog[], () => void] {
|
|
const [engineCommands, setEngineCommands] = useState<CommandLog[]>(
|
|
engineCommandManager.commandLogs
|
|
)
|
|
|
|
useEffect(() => {
|
|
engineCommandManager.registerCommandLogCallback((commands) =>
|
|
setEngineCommands(commands)
|
|
)
|
|
}, [])
|
|
|
|
return [engineCommands, () => engineCommandManager.clearCommandLogs()]
|
|
}
|
|
|
|
export const EngineCommands = () => {
|
|
const [engineCommands, clearEngineCommands] = useEngineCommands()
|
|
const [containsFilter, setContainsFilter] = useState('')
|
|
const [customCmd, setCustomCmd] = useState('')
|
|
return (
|
|
<div>
|
|
<input
|
|
className="text-gray-800 bg-slate-300 px-2"
|
|
data-testid="filter-input"
|
|
type="text"
|
|
value={containsFilter}
|
|
onChange={(e) => setContainsFilter(e.target.value)}
|
|
placeholder="Filter"
|
|
/>
|
|
<div className="max-w-xl max-h-36 overflow-auto">
|
|
{engineCommands.map((command, index) => {
|
|
const stringer = JSON.stringify(command)
|
|
if (containsFilter && !stringer.includes(containsFilter)) return null
|
|
return (
|
|
<pre className="text-xs" key={index}>
|
|
<code
|
|
key={index}
|
|
data-message-type={command.type}
|
|
data-command-type={
|
|
(command.type === 'send-modeling' ||
|
|
command.type === 'send-scene') &&
|
|
command.data.type === 'modeling_cmd_req'
|
|
? command?.data?.cmd?.type
|
|
: ''
|
|
}
|
|
data-command-id={
|
|
(command.type === 'send-modeling' ||
|
|
command.type === 'send-scene') &&
|
|
command.data.type === 'modeling_cmd_req'
|
|
? command.data.cmd_id
|
|
: ''
|
|
}
|
|
data-receive-command-type={
|
|
command.type === 'receive-reliable' ? command.cmd_type : ''
|
|
}
|
|
>
|
|
{JSON.stringify(command, null, 2)}
|
|
</code>
|
|
</pre>
|
|
)
|
|
})}
|
|
</div>
|
|
<button data-testid="clear-commands" onClick={clearEngineCommands}>
|
|
Clear
|
|
</button>
|
|
<br />
|
|
<input
|
|
className="text-gray-800 bg-slate-300 px-2"
|
|
type="text"
|
|
value={customCmd}
|
|
onChange={(e) => setCustomCmd(e.target.value)}
|
|
placeholder="JSON command"
|
|
data-testid="custom-cmd-input"
|
|
/>
|
|
<button
|
|
data-testid="custom-cmd-send-button"
|
|
onClick={() => {
|
|
engineCommandManager
|
|
.sendSceneCommand(JSON.parse(customCmd))
|
|
.catch(reportRejection)
|
|
}}
|
|
>
|
|
Send custom command
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|