Added a small delay

src/components/App/App.js

@@ -6,7 +6,7 @@ import {Provider} from '../../hooks/useGameState'
 
 import backgroundURL from './background.png'
 
-function App({onCommand, game}) {
+function App({promptVisible, onCommand, game}) {
   const [state, setState] = useState({messages: []})
 
   const {width, height} = useWindowSize()
@@ -23,7 +23,7 @@ function App({onCommand, game}) {
   return (
     <Provider value={state}>
       <div style={{transform: `scale(${scale})`, overflow: 'hidden'}} className={styles.screen}>
-        <Screen handleCommand={onCommand}/>
+        <Screen promptVisible={promptVisible} handleCommand={onCommand}/>
         <div className={styles.overlay}>
           <img alt="" src={backgroundURL}/>
         </div>

src/components/Screen/Reflected.js

@@ -4,7 +4,7 @@ import styles from './Screen.module.css'
 import Menu from '../Menu/Menu'
 import useGameState from '../../hooks/useGameState'
 
-export default function Text({currentInput, currentScroll}) {
+export default function Text({promptVisible, currentInput, currentScroll}) {
   const outputRef = useRef()
   const {messages} = useGameState()
 
@@ -26,7 +26,7 @@ export default function Text({currentInput, currentScroll}) {
           return null
         })}
       </div>
-      <div className={styles.input}>
+      <div className={styles.input + (!promptVisible ? ' ' + styles.hidden : '')}>
         <input tabIndex="-1" value={currentInput}/>
       </div>
     </div>

src/components/Screen/Screen.js

@@ -6,7 +6,7 @@ import Menu from '../Menu/Menu'
 import useGameState from '../../hooks/useGameState'
 import useSharedState from '../../hooks/useSharedState'
 
-export default function Text({handleCommand}) {
+export default function Text({promptVisible, handleCommand}) {
   const inputRef = useRef()
   const outputRef = useRef()
   const textRef = useRef()
@@ -17,14 +17,17 @@ export default function Text({handleCommand}) {
   const [currentInput, setCurrentInput] = useState('')
   const [currentScroll, setCurrentScroll] = useState(0)
 
-  function onSubmit(ev) {
+  async function onSubmit(ev) {
     if(ev) ev.preventDefault()
 
+    if(!promptVisible)
+      return;
+
     if(!inputRef.current?.value.trim())
       return;
 
     if(inputRef.current){
-      handleCommand(inputRef.current.value)
+      await handleCommand(inputRef.current.value)
       inputRef.current.value = ''
       setCurrentInput('')
     }
@@ -69,11 +72,11 @@ export default function Text({handleCommand}) {
             return null
           })}
         </div>
-        <form style={{pointerEvents: currentMenu ? 'none' : 'initial'}} className={styles.input} onSubmit={onSubmit}>
-          <input ref={inputRef} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
+         <form style={{pointerEvents: currentMenu ? 'none' : 'initial'}} className={styles.input + (!promptVisible ? ' ' + styles.hidden : '')} onSubmit={onSubmit}>
+          <input tabIndex="0" ref={inputRef} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
         </form>
       </div>
-      <Reflection messages={messages} currentInput={currentInput} currentScroll={currentScroll}/>
+      <Reflection promptVisible={promptVisible} messages={messages} currentInput={currentInput} currentScroll={currentScroll}/>
     </>
   )
 }

src/components/Screen/Screen.module.css

@@ -30,43 +30,43 @@
 .input {
   padding: 16px;
   padding-top: 0;
-  position: relative;
   font-weight: bold;
 }
 
+.hidden {
+  opacity: 0;
+}
+
 .input input {
+  display: inline-block;
   background: transparent;
   border: none;
   box-shadow: none;
   outline: none;
-  width: 100%;
-  text-indent: 16px;
+  width: calc(100% - 11px);
+  text-indent: 9px;
   font-family: inherit;
   font-weight: bold;
   font-size: 16px;
-  position: relative;
-  top: -1px;
-  left: -1px;
+  margin-top: -1px;
+  margin-left: -1px;
   color: inherit;
 }
 
 .input::before {
-  position: absolute;
+  display: inline-block;
   left: 16px;
 }
 
+.output p:not(.command) {
+  color: rgba(255,255,255, .8);
+}
+
 .command {
   font-weight: bold;
-  position: relative;
-  text-indent: 16px;
   white-space: pre;
 }
 
-.command::before {
-  position: absolute;
-  left: -16px;
-}
-
 .command::before, .input::before {
   content: '> ';
   font-weight: bold;

src/engine/Parser.ts

@@ -4,6 +4,8 @@ import ParsedCommand, { InvalidCommandDetails } from "./types/ParsedCommand";
 import Verb from './types/Verb';
 import VerbBuilder from "./types/VerbBuilder";
 import { game } from ".";
+import delay from "../utils/delay";
+import Renderer from "./Renderer";
 
 export default class Parser {
   private game : Game
@@ -15,11 +17,18 @@ export default class Parser {
     this.engine = engine
   }
 
-  handlePlayerCommand(rawCommand : string) {
+  async handlePlayerCommand(rawCommand : string, renderer : Renderer) {
     this.game.outputCommand(rawCommand)
+    this.game.saveDraft()
+
+    const timer = delay(200)
+
     try {
-      this.runCommand(rawCommand)
+      renderer.hidePrompt()
+      await this.runCommand(rawCommand)
+      await timer
     } catch (err) {
+      await timer
       if(typeof err === 'string')
         game.say(err)
       else if(err.message)
@@ -28,6 +37,8 @@ export default class Parser {
         game.say('An unknown error occured')
         console.error(err)
       }
+    } finally {
+      renderer.showPrompt()
     }
     this.game.saveDraft()
   }

src/engine/Renderer.tsx

@@ -15,6 +15,7 @@ export default class Renderer {
   private rules : RulesEngine
   private output : GameEvent[] = []
   private target : HTMLElement | null = null
+  private promptVisible : boolean = true
 
   constructor(parser : Parser, game : Game, rules : RulesEngine) {
     this.parser = parser
@@ -28,11 +29,20 @@ export default class Renderer {
     this.render()
   }
 
-  private handleCommand(command : string) {
-    this.output.push(new GameEventCommand(command))
+  public hidePrompt() {
+    this.promptVisible = false;
     this.render()
+  }
 
-    this.parser.handlePlayerCommand(command)
+  public showPrompt() {
+    this.promptVisible = true;
+    this.render()
+  }
+
+  private async handleCommand(command : string) {
+    this.output.push(new GameEventCommand(command))
+    await this.parser.handlePlayerCommand(command, this)
+    this.render()
   }
 
   private render() {
@@ -41,7 +51,7 @@ export default class Renderer {
 
     ReactDOM.render(
       <React.StrictMode>
-        <App game={this.game} onCommand={this.handleCommand.bind(this)}/>
+        <App promptVisible={this.promptVisible} game={this.game} onCommand={this.handleCommand.bind(this)}/>
       </React.StrictMode>,
       this.target
     )

src/utils/delay.ts

@@ -0,0 +1,5 @@
+export default function delay(time : number) : Promise<null> {
+  return new Promise((res, rej) => {
+    setTimeout(res, time)
+  })
+}