Screen clearing

src/components/Screen/Screen.js

@@ -24,9 +24,12 @@ export default function Text({promptVisible: promptEnabled, handleCommand, showR
   const currentPause = messages.findIndex(message => (message.type === 'pause' && message.resolved === false))
   const outputPaused = currentPause > -1
 
-  let printedMessages = !outputPaused ? messages : messages.slice(0, currentPause)
+  const printedMessages = !outputPaused ? messages : messages.slice(0, currentPause)
   const promptVisible = promptEnabled && !outputPaused
 
+  const clearedIndex = printedMessages.findIndex(message => message.type === 'clear')
+  const finalMessages = (clearedIndex < 0) ? printedMessages : printedMessages.slice(clearedIndex)
+
   async function onSubmit(ev) {
     if(ev) ev.preventDefault()
 
@@ -95,7 +98,7 @@ export default function Text({promptVisible: promptEnabled, handleCommand, showR
       <div ref={textRef} className={styles.playArea}>
         <Menu containerRef={menuRef}/>
         <div ref={outputRef} onScroll={() => setCurrentScroll(outputRef.current?.scrollTop)} className={styles.output + (currentMenu !== null ? ' ' + styles.noMouse : '')}>
-          {printedMessages.map((message, i) => {
+          {finalMessages.map((message, i) => {
             if(message.type === 'message')
               return <ReactMarkdown key={i}>{message.message}</ReactMarkdown>
 
@@ -114,7 +117,7 @@ export default function Text({promptVisible: promptEnabled, handleCommand, showR
           <input autoFocus ref={inputRef} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
         </form>
       </div>
-      {showReflection && <Reflection outputPaused={outputPaused} promptVisible={promptVisible} messages={printedMessages} currentInput={currentInput} currentScroll={currentScroll}/>}
+      {showReflection && <Reflection outputPaused={outputPaused} promptVisible={promptVisible} messages={finalMessages} currentInput={currentInput} currentScroll={currentScroll}/>}
     </>
   )
 }

src/engine/Game.ts

@@ -1,7 +1,7 @@
 import {enableMapSet, createDraft, finishDraft, Draft} from 'immer'
 import GameState, { GameObject, Room, Door, Item, ObjectType, ObjectID, Direction } from './types/GameState'
 import ParsedCommand, { ValidCommandDetails, InvalidCommandDetails } from './types/ParsedCommand'
-import { GameEventMessage, GameEventCommand, GameEventPause } from './types/GameEvent'
+import { GameEventMessage, GameEventCommand, GameEventPause, GameEventClear } from './types/GameEvent'
 
 enableMapSet()
 
@@ -61,6 +61,10 @@ export default class Game {
     this.getState().messages.push(new GameEventPause())
   }
 
+  clear() {
+    this.getState().messages.push(new GameEventClear())
+  }
+
   filterValidCommands(commands: ParsedCommand[]) : CommandValidateResult {
     let validCommands : ValidCommandDetails[] = []
     let invalidCommands : InvalidCommandDetails[] = []

src/engine/types/GameEvent.ts

@@ -1,7 +1,8 @@
 export enum GameEventType {
   Message = 'message',
   Command = 'command',
-  Pause = 'pause'
+  Pause = 'pause',
+  Clear = 'clear'
 }
 
 export default class GameEvent {
@@ -38,3 +39,9 @@ export class GameEventPause extends GameEvent {
     this.resolved = false
   }
 }
+
+export class GameEventClear extends GameEvent {
+  constructor() {
+    super(GameEventType.Clear)
+  }
+}

src/index.tsx

@@ -30,6 +30,7 @@ rules.onGameStart(() => {
   game.pause()
   game.say(`It'll be fun they said.`)
   game.pause()
+  game.clear()
 })