diff --git a/electron/renderer/pages/grid.tsx b/electron/renderer/pages/grid.tsx index 3ee06724..6303fa9d 100644 --- a/electron/renderer/pages/grid.tsx +++ b/electron/renderer/pages/grid.tsx @@ -1,13 +1,14 @@ -import { useEuiTheme } from '@elastic/eui'; +import { EuiFieldText, useEuiTheme } from '@elastic/eui'; import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import { isEmpty } from 'lodash'; import dynamic from 'next/dynamic'; import { useObservable, useSubscription } from 'observable-hooks'; -import type { ReactNode } from 'react'; +import type { KeyboardEventHandler, ReactNode } from 'react'; import { useCallback, useEffect, useState } from 'react'; import * as rxjs from 'rxjs'; import { v4 as uuid } from 'uuid'; +import { runInBackground } from '../../common/async'; import { ExperienceMindStateMap, GameEventType } from '../../common/game'; import type { ExperienceGameEvent, @@ -306,6 +307,23 @@ const GridPage: React.FC = (): ReactNode => { }; }, [logger, gameEventsSubject$]); + // TODO move to a new GameCommandInput component + const onKeyDownCommandInput = useCallback< + KeyboardEventHandler + >((event) => { + const command = event.currentTarget.value; + // TODO implement command history to track last N commands + // pressing up/down arrow keys should cycle through history + // pressing down arrow key when at the end of history should clear input + // pressing up arrow key when at the beginning of history should do nothing + if (event.code === 'Enter' && !isEmpty(command)) { + event.currentTarget.value = ''; + runInBackground(async () => { + await window.api.sendCommand(command); + }); + } + }, []); + // TODO the list of items we inject should come from user preferences // if none then provide our own default list @@ -313,208 +331,220 @@ const GridPage: React.FC = (): ReactNode => { // we already support closing grid items, but not synced to prefs yet return ( - - ), - }, - { - itemId: 'experience', - title: 'Experience', - content: ( - - ), - }, - { - itemId: 'percWindow', - title: 'Spells', - content: ( - - ), - }, - { - itemId: 'inv', - title: 'Inventory', - content: ( - - ), - }, - { - itemId: 'familiar', - title: 'Familiar', - content: ( - - ), - }, - { - itemId: 'thoughts', - title: 'Thoughts', - content: ( - - ), - }, - { - itemId: 'combat', - title: 'Combat', - content: ( - - ), - }, - { - itemId: 'assess', - title: 'Assess', - content: ( - - ), - }, - { - itemId: 'logons', - title: 'Arrivals', - content: ( - - ), - }, - { - itemId: 'death', - title: 'Deaths', - content: ( - - ), - }, - { - itemId: 'atmospherics', - title: 'Atmospherics', - content: ( - - ), - }, - { - itemId: 'chatter', - title: 'Chatter', - content: ( - - ), - }, - { - itemId: 'conversation', - title: 'Conversation', - content: ( - - ), - }, - { - itemId: 'whispers', - title: 'Whispers', - content: ( - - ), - }, - { - itemId: 'talk', - title: 'Talk', - content: ( - - ), - }, - { - itemId: 'ooc', - title: 'OOC', - content: ( - - ), - }, - { - itemId: 'group', - title: 'Group', - content: ( - - ), - }, - { - itemId: 'main', - title: 'Main', - content: ( - - ), - }, - ]} - /> + <> + {/* TODO figure out sizing of grid so that when height shortens then it doesn't overlap elements below it */} + + ), + }, + { + itemId: 'experience', + title: 'Experience', + content: ( + + ), + }, + { + itemId: 'percWindow', + title: 'Spells', + content: ( + + ), + }, + { + itemId: 'inv', + title: 'Inventory', + content: ( + + ), + }, + { + itemId: 'familiar', + title: 'Familiar', + content: ( + + ), + }, + { + itemId: 'thoughts', + title: 'Thoughts', + content: ( + + ), + }, + { + itemId: 'combat', + title: 'Combat', + content: ( + + ), + }, + { + itemId: 'assess', + title: 'Assess', + content: ( + + ), + }, + { + itemId: 'logons', + title: 'Arrivals', + content: ( + + ), + }, + { + itemId: 'death', + title: 'Deaths', + content: ( + + ), + }, + { + itemId: 'atmospherics', + title: 'Atmospherics', + content: ( + + ), + }, + { + itemId: 'chatter', + title: 'Chatter', + content: ( + + ), + }, + { + itemId: 'conversation', + title: 'Conversation', + content: ( + + ), + }, + { + itemId: 'whispers', + title: 'Whispers', + content: ( + + ), + }, + { + itemId: 'talk', + title: 'Talk', + content: ( + + ), + }, + { + itemId: 'ooc', + title: 'OOC', + content: ( + + ), + }, + { + itemId: 'group', + title: 'Group', + content: ( + + ), + }, + { + itemId: 'main', + title: 'Main', + content: ( + + ), + }, + ]} + /> + {/* TODO create a GameCommandBar component that combines GameRoundTime and GameCommandInput components */} + {/* TODO refactor this to its own GameCommandInput component */} + + ); };