TextBuffer: add scroll targets

README.md

@@ -27,6 +27,8 @@ npm run build <public-url>
   npm run build /some-directory
   ```
 
+The finalized production bundle will be generated and stored in the `/docs` directory.
+
 ## Direct links
 
 You can provide a direct link to a specific game using the following URL format:

package.json

@@ -17,20 +17,20 @@
     "preact/jsx-dev-runtime": "preact/jsx-runtime"
   },
   "devDependencies": {
-    "@parcel/transformer-sass": "^2.9.1",
+    "@parcel/transformer-sass": "^2.9.3",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
-    "eslint": "^8.41.0",
+    "eslint": "^8.44.0",
     "eslint-config-preact": "^1.3.0",
     "events": "^3.3.0",
-    "parcel": "^2.9.1",
+    "parcel": "^2.9.3",
     "parcel-reporter-static-files-copy": "^1.5.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "stream-browserify": "^3.0.0"
   },
   "dependencies": {
-    "@fontsource/open-sans": "^5.0.1",
+    "@fontsource/open-sans": "^5.0.3",
     "base32768": "^3.0.1",
     "cheap-glkote": "^0.5.1",
     "emglken": "^0.5.2",

src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx

@@ -4,6 +4,9 @@ import TextMessage from '../TextMessage/TextMessage'
 
 import * as s from '../../Player.module.scss'
 
+const eol = { style: 'endOfLine' }
+const scrollTarget = { style: 'scrollTarget' }
+
 const isFakeStatus = (w) =>
   w.height < 5
 
@@ -22,15 +25,13 @@ const parseInbox = (inbox, currentWindow) => {
   if (!currentInbox) {
     return {
       clear: false,
-      incoming: [],
+      incoming: [scrollTarget],
     }
   }
 
   const { text: inboxMessagesRaw } =
     currentInbox
 
-  const eol = { style: 'endOfLine' }
-
   const incoming =
     inboxMessagesRaw
       /* Normalize. */
@@ -40,7 +41,7 @@ const parseInbox = (inbox, currentWindow) => {
           : [eol])
       /* Flatten. */
       .reduce((acc, x) =>
-        acc.concat(x), [])
+        acc.concat(x), [scrollTarget])
 
   return {
     incoming,
@@ -63,13 +64,13 @@ export default function TextBuffer ({ inbox, currentWindow }) {
       : messages.concat(incoming))
 
     setTimeout(() => {
-      const inputs =
+      const scrollTargets =
-        textBufferEl.current.querySelectorAll('.message.input')
+        textBufferEl.current.querySelectorAll(`.${scrollTarget.style}`)
-      const lastInput =
+      const freshScrollTarget =
-        inputs[inputs.length - 1]
+        scrollTargets[scrollTargets.length - 1]
 
-      lastInput
+      freshScrollTarget
-        ? lastInput.scrollIntoView()
+        ? freshScrollTarget.scrollIntoView()
         : textBufferEl.current.scrollTo({
           top: textBufferEl.current.scrollHeight,
           behavior: 'smooth',

src/components/Player/OutputBox/TextMessage/TextMessage.jsx

@@ -15,6 +15,8 @@ export default function TextMessage ({ style, text }) {
       (<strong className={[s.message, s.subheader].join(' ')}>{text}</strong>),
     emphasized:
       (<em className={[s.message, s.emphasized].join(' ')}>{text}</em>),
+    scrollTarget:
+      (<div className={[s.scrollTarget, style].join(' ')}></div>),
     endOfLine:
       (<br />),
   })[style] || defaultContent

src/components/Player/OutputBox/TextMessage/TextMessage.module.scss

@@ -1,6 +1,5 @@
 .message {
   &.input {
-    scroll-margin-top: var(--inner-padding);
     color: var(--input-color);
   }
 
@@ -9,3 +8,7 @@
     color: var(--accent-color);
   }
 }
+
+.scrollTarget {
+  scroll-margin-block-start: var(--inner-padding);
+}