Help screen now scroll syncs

src/components/Menu/Menu.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React, {useRef, useEffect} from 'react'
 import styles from './Menu.module.css'
 import useSharedState from '../../hooks/useSharedState'
 import Inventory from '../Modals/Inventory'
@@ -7,6 +7,7 @@ import Help from '../Modals/Help'
 import Map from '../Modals/Map'
 
 export default function ({containerRef}) {
+  const scrollRef = useRef()
   const [currentMenu, setCurrentMenu] = useSharedState('currentMenu')
 
   function handleButton(name) {
@@ -40,7 +41,7 @@ export default function ({containerRef}) {
               {currentMenu}
               <button className={styles.modalClose} onClick={() => setCurrentMenu(null)}>x</button>
             </div>
-            <div className={styles.modalContent}>
+            <div className={styles.modalContent} ref={scrollRef}>
               {(() => {
                 if(currentMenu === 'inventory')
                   return <Inventory/>
@@ -52,7 +53,7 @@ export default function ({containerRef}) {
                   return <Options/>
 
                 if(currentMenu === 'help')
-                  return <Help />
+                  return <Help parentRef={scrollRef} />
 
                 return <p>Not implemented yet, sorry</p>
               })()}

src/components/Modals/Help.js

@@ -1,8 +1,35 @@
-import React from 'react'
+import React, { useEffect, useContext } from 'react'
+import {ScreenContext} from '../Screen/Screen'
 
 import styles from './Help.module.css'
+import useSharedState from '../../hooks/useSharedState'
+
+export default function Help({parentRef}) {
+  const [scroll, setScroll] = useSharedState('helpScroll', 0)
+  const whichScreen = useContext(ScreenContext)
+
+  // Update to top
+  useEffect(() => setScroll(0), [])
+
+  // Update shared state on scroll
+  useEffect(() => {
+    if(!parentRef.current) return;
+    if(whichScreen === 'secondary') return;
+
+    function updateScroll(ev){
+      setScroll(ev.target.scrollTop)
+    }
+
+    parentRef.current.addEventListener('scroll', updateScroll)
+    return () => parentRef.current.removeEventListener('scroll', updateScroll)
+  }, [parentRef])
+
+  // On shared state change, set scrollTop
+  useEffect(() => {
+    if(whichScreen !== 'primary' && parentRef.current)
+      parentRef.current.scrollTop = scroll
+  }, [scroll, parentRef])
 
-export default function Help() {
   return <>
     <h3>How do I play?</h3>
     <p>

src/components/Screen/Screen.js

@@ -8,6 +8,8 @@ import useSharedState from '../../hooks/useSharedState'
 
 import {game} from '../../engine'
 
+export const ScreenContext = React.createContext()
+
 export default function Text({promptVisible: promptEnabled, handleCommand, showReflection}) {
   const inputRef = useRef()
   const outputRef = useRef()
@@ -96,28 +98,34 @@ export default function Text({promptVisible: promptEnabled, handleCommand, showR
   return (
     <>
       <div ref={textRef} className={styles.playArea}>
-        <Menu containerRef={menuRef}/>
-        <div ref={outputRef} onScroll={() => setCurrentScroll(outputRef.current?.scrollTop)} className={styles.output + (!!currentMenu ? ' ' + styles.noMouse : '')}>
-          {finalMessages.map((message, i) => {
-            if(message.type === 'message')
-              return <ReactMarkdown key={i}>{message.message}</ReactMarkdown>
-
-            if(message.type === 'command')
-              return <p key={i} className={styles.command}>{message.command}</p>
-
-            return null
-          })}
-          {outputPaused && (
-            <p className={styles.pausePrompt}>
-              (Press [RETURN] to continue)
-            </p>
-          )}
-        </div>
-        <form style={{pointerEvents: currentMenu ? 'none' : 'initial'}} className={styles.input + (!promptVisible ? ' ' + styles.hidden : '')} onSubmit={onSubmit}>
-          <input autoFocus ref={inputRef} readOnly={(promptVisible && !currentMenu) ? undefined : ''} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
-        </form>
+        <ScreenContext.Provider value="primary">
+          <Menu containerRef={menuRef}/>
+          <div ref={outputRef} onScroll={() => setCurrentScroll(outputRef.current?.scrollTop)} className={styles.output + (!!currentMenu ? ' ' + styles.noMouse : '')}>
+            {finalMessages.map((message, i) => {
+              if(message.type === 'message')
+                return <ReactMarkdown key={i}>{message.message}</ReactMarkdown>
+
+              if(message.type === 'command')
+                return <p key={i} className={styles.command}>{message.command}</p>
+
+              return null
+            })}
+            {outputPaused && (
+              <p className={styles.pausePrompt}>
+                (Press [RETURN] to continue)
+              </p>
+            )}
+          </div>
+          <form style={{pointerEvents: currentMenu ? 'none' : 'initial'}} className={styles.input + (!promptVisible ? ' ' + styles.hidden : '')} onSubmit={onSubmit}>
+            <input autoFocus ref={inputRef} readOnly={(promptVisible && !currentMenu) ? undefined : ''} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
+          </form>
+        </ScreenContext.Provider>
       </div>
-      {showReflection && <Reflection outputPaused={outputPaused} promptVisible={promptVisible} messages={finalMessages} currentInput={currentInput} currentScroll={currentScroll}/>}
+      {showReflection && (
+        <ScreenContext.Provider value="secondary">
+          <Reflection outputPaused={outputPaused} promptVisible={promptVisible} messages={finalMessages} currentInput={currentInput} currentScroll={currentScroll}/>
+        </ScreenContext.Provider>
+      )}
     </>
   )
 }