Help modal

src/components/Menu/Menu.js

@@ -3,6 +3,7 @@ import styles from './Menu.module.css'
 import useSharedState from '../../hooks/useSharedState'
 import Inventory from '../Modals/Inventory'
 import Options from '../Modals/Options'
+import Help from '../Modals/Help'
 import Map from '../Modals/Map'
 
 export default function ({containerRef}) {
@@ -50,6 +51,9 @@ export default function ({containerRef}) {
                 if(currentMenu === 'options')
                   return <Options/>
 
+                if(currentMenu === 'help')
+                  return <Help />
+
                 return <p>Not implemented yet, sorry</p>
               })()}
             </div>

src/components/Modals/Help.js

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import styles from './Help.module.css'
+
+export default function Help() {
+  return <>
+    <h3>How do I play?</h3>
+    <p>
+      When the command prompt <Cmd>&gt;&nbsp;</Cmd> is shown,
+      enter commands by typing what you want to do, and pressing [RETURN]
+    </p>
+    <p>
+      The game will then print the result of your action.
+    </p>
+
+    <h3>What can I do?</h3>
+
+    <h4>Navigation</h4>
+    <p>
+      Typing <Cmd>go [direction]</Cmd>, where [direction] is up, down, or any of the
+      four ship directions (fore, aft, starboard, and port) will navigate you around the ship.
+      For your convenience these ship directions have also been aliased to north, south,
+      east, and west respectively.
+    </p>
+
+    <h4>Seeing Things</h4>
+    <p>
+      Upon entering a room, the game will print that room's description.  If for
+      whatever reason you ever need this printed again, you can simply type&nbsp;
+      <Cmd>look</Cmd>.
+    </p>
+    <p>
+      To examine a particular item more closely, use <Cmd>look at [thing]</Cmd> or&nbsp;
+      <Cmd>examine [thing]</Cmd>, where [thing] is the name of the item.
+    </p>
+    <p>
+      If you forget what rooms are around you and need some help orienting yourself,
+      you can use the <Cmd>look [direction]</Cmd> command to print what room or door
+      is in that direction.
+    </p>
+
+    <h4>Other Commands</h4>
+    <p>
+      Explore using the following commands, and keep in mind that not every command
+      will work with every item in the game.
+    </p>
+    <ul className={styles.list}>
+      <li>take [thing]</li>
+      <li>drop [thing]</li>
+      <li>open [thing]</li>
+      <li>close [thing]</li>
+      <li>put [thing] in [thing]</li>
+    </ul>
+  </>
+}
+
+function Cmd({children}){
+  return <span className={styles.cmd}>{children}</span>
+}

src/components/Modals/Help.module.css

@@ -0,0 +1,14 @@
+.cmd {
+  display: inline-block;
+  border: solid 1px rgba(255,255,255,.3);
+}
+
+.list {
+  list-style: none;
+}
+
+.list li::before {
+  content: '-';
+  margin-left: -20px;
+  margin-right: 10px;
+}

src/components/Screen/Screen.js

@@ -80,11 +80,10 @@ export default function Text({promptVisible: promptEnabled, handleCommand, showR
     if(!outputPaused) return;
 
     function handleKey(ev) {
-      if(!!currentMenu) return;
+      if(currentMenu) return;
       if(ev.key !== ' ' && ev.key !== 'Enter') return;
       ev.preventDefault()
 
-      console.log('Unpausing')
       game.getState().messages[currentPause].resolved = true
       game.saveDraft()
       forceRender()
@@ -115,7 +114,7 @@ export default function Text({promptVisible: promptEnabled, handleCommand, showR
           )}
         </div>
         <form style={{pointerEvents: currentMenu ? 'none' : 'initial'}} className={styles.input + (!promptVisible ? ' ' + styles.hidden : '')} onSubmit={onSubmit}>
-          <input autoFocus ref={inputRef} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
+          <input autoFocus ref={inputRef} readOnly={(promptVisible && !currentMenu) ? undefined : ''} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
         </form>
       </div>
       {showReflection && <Reflection outputPaused={outputPaused} promptVisible={promptVisible} messages={finalMessages} currentInput={currentInput} currentScroll={currentScroll}/>}

src/engine/Game.ts

@@ -30,9 +30,9 @@ export default class Game {
   constructor() {
     let state = this.getState()
     state.directions.set('fore', {type: ObjectType.Direction, name: 'fore', printableName: 'fore', aliases: ['north', 'f', 'n'], opposite: 'aft'})
-    state.directions.set('starboard', {type: ObjectType.Direction, name: 'starboard', printableName: 'starboard', aliases: ['starboard', 'sb', 'e'], opposite: 'port'})
-    state.directions.set('aft', {type: ObjectType.Direction, name: 'aft', printableName: 'aft', aliases: ['aft', 'a', 's'], opposite: 'fore'})
-    state.directions.set('port', {type: ObjectType.Direction, name: 'port', printableName: 'port', aliases: ['port', 'p', 'w'], opposite: 'starboard'})
+    state.directions.set('starboard', {type: ObjectType.Direction, name: 'starboard', printableName: 'starboard', aliases: ['east', 'sb', 'e'], opposite: 'port'})
+    state.directions.set('aft', {type: ObjectType.Direction, name: 'aft', printableName: 'aft', aliases: ['south', 'a', 's'], opposite: 'fore'})
+    state.directions.set('port', {type: ObjectType.Direction, name: 'port', printableName: 'port', aliases: ['west', 'p', 'w'], opposite: 'starboard'})
     state.directions.set('up', {type: ObjectType.Direction, name: 'up', printableName: 'up', aliases: ['u'], opposite: 'down'})
     state.directions.set('down', {type: ObjectType.Direction, name: 'down', printableName: 'down', aliases: ['d'], opposite: 'up'})
     this.saveDraft()

src/engine/definitions/lookDirection.ts

@@ -15,16 +15,30 @@ export default function(parser : Parser, rules : RulesEngine, game : Game) {
     const lookingAtName = current?.neighbors.get(direction.name)
 
     if(!lookingAtName)
-      throw new Error(`There is nothing to the ${direction.name}`)
-    
+      throw new Error(`There is nothing that direction`)
+
     let lookingAt = game.findObjectByName(lookingAtName!, ObjectType.Room)
                  || game.findObjectByName(lookingAtName!, ObjectType.Door)
 
     if(!lookingAt){
       console.warn(`Unable to find object ${lookingAtName}`)
-      return;
+      throw new Error(`There is nothing that direction`)
     }
 
-    game.say(`To the ${direction.name} you see the ${lookingAt.printableName}`)
+    let prefix = 'To the ' + direction.name
+    let suffix = ''
+    if(direction.name === 'up')
+      prefix = 'Above you'
+
+    if(direction.name === 'down')
+      prefix = 'Below you, '
+
+    if(['port', 'starboard'].includes(direction.name))
+      prefix = 'Towards ' + direction.name
+
+    if(['fore', 'aft'].includes(direction.name))
+      suffix = 'of the ship'
+
+    game.say(`${prefix} ${suffix} you see the ${lookingAt.printableName}`)
   })
-}
+}