StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get server console page rendering (mostly) correctly

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 15:40:41 -07:00
parent 43ff67238c
commit 1e163aa792
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
18 changed files with 140 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

21
resources/scripts/components/server/Console.tsx
View file

@ -4,9 +4,7 @@ import * as TerminalFit from 'xterm/lib/addons/fit/fit';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
import Can from '@/components/elements/Can';
import { usePermissions } from '@/plugins/usePermissions';
import classNames from 'classnames';
import tw from 'twin.macro';
const theme = {
@ -56,7 +54,7 @@ export default () => {
const useRef = useCallback(node => setTerminalElement(node), []);
const terminal = useMemo(() => new Terminal({ ...terminalProps }), []);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [ canSendCommands ] = usePermissions([ 'control.console']);
const [ canSendCommands ] = usePermissions([ 'control.console' ]);
const handleConsoleOutput = (line: string, prelude = false) => terminal.writeln(
(prelude ? TERMINAL_PRELUDE : '') + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
@ -123,12 +121,13 @@ export default () => {
}, [ connected, instance ]);
return (
<div className={'text-xs font-mono relative'}>
<div css={tw`text-xs font-mono relative`}>
<SpinnerOverlay visible={!connected} size={'large'}/>
<div
className={classNames('rounded-t p-2 bg-black w-full', {
'rounded-b': !canSendCommands,
})}
css={[
tw`rounded-t p-2 bg-black w-full`,
!canSendCommands && tw`rounded-b`,
]}
style={{
minHeight: '16rem',
maxHeight: '32rem',
@ -137,13 +136,13 @@ export default () => {
<TerminalDiv id={'terminal'} ref={useRef}/>
</div>
{canSendCommands &&
<div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
<div className={'flex-no-shrink p-2 font-bold'}>$</div>
<div className={'w-full'}>
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
<div css={tw`w-full`}>
<input
type={'text'}
disabled={!instance || !connected}
className={'bg-transparent text-neutral-100 p-2 pl-0 w-full'}
css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
onKeyDown={e => handleCommandKeydown(e)}
/>
</div>