Add GridBuffer component

src/components/Player/GridBuffer.jsx

@@ -0,0 +1,48 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+import TextMessage from './TextMessage'
+
+export default function ({ inbox, currentWindow }) {
+  const [prevMessages, setPrevMessages] = useState([])
+  const [messages, setMessages] = useState([])
+
+  useEffect(() => {
+    const currentInbox =
+      inbox.find(({ id }) =>
+        id === currentWindow.id).lines
+
+    const newOrPrev = (cur, prev) => i => {
+      const byId = (list, i) =>
+        list.find(({line}) => line === i)
+
+      return byId(cur, i) || byId(prev, i)
+    }
+
+    const rawMessages =
+      Array(currentWindow.gridheight)
+        .fill(null)
+        .map((_, i) => i)
+        .map(newOrPrev(currentInbox, prevMessages))
+
+    setPrevMessages(rawMessages)
+    setMessages(rawMessages
+      .map(x => x.content)
+      .map(([x]) => x)
+      .map(({text}) => text)
+      .map(text => text.trim())
+      .map(text =>
+        text.replace('   ', ' / '))
+      .map(text => ({
+        style: 'grid',
+        text}))
+    )
+  }, [inbox, currentWindow])
+
+  return (
+    <section
+      className='buffer gridBuffer'>
+        {messages.map(TextMessage)}
+    </section>
+  )
+}

src/components/Player/InputBox.jsx

@@ -39,6 +39,7 @@ export default function ({
   currentWindowId,
   sendMessage
 }) {
+  const [targetWindow, setTargetWindow] = useState(null)
   const [inputText, setInputText] = useState('')
   const [lastInput, setLastInput] = useState('')
   const inputEl = useRef(null)
@@ -48,13 +49,18 @@ export default function ({
     inputEl.current && inputEl.current.focus()
   }, [inputType])
 
+  useEffect(() => {
+    setTargetWindow(
+      windows
+        .find(({id}) =>
+          id === currentWindowId))
+  }, [currentWindowId, windows])
+
   const send = message => {
     sendMessage(
       message,
       inputType,
-      windows
-        .find(({id}) =>
-          id === currentWindowId))
+      targetWindow)
     setLastInput(message)
     setInputText('')
   }

src/components/Player/Player.jsx

@@ -8,6 +8,8 @@ import {
 import CheapGlkOte from 'cheap-glkote'
 
 import TextBuffer from './TextBuffer'
+import GridBuffer from './GridBuffer'
+
 import InputBox from './InputBox'
 import Status from './Status'
 
@@ -105,7 +107,7 @@ export default function ({ vmParts: { file, engine } }) {
 
     return ({
       'buffer': <TextBuffer {...props} />,
-      'grid': <div>GridView</div>
+      'grid': <GridBuffer {...props} />
     })[currentWindow.type]
   }
 
@@ -113,7 +115,7 @@ export default function ({ vmParts: { file, engine } }) {
     ? (<Status {...status} />)
     : (<section className='ifplayer'>
         { windows
-            .filter(({id}) => id === currentWindowId)
+            // .filter(({id}) => id === currentWindowId)
             .map(textWindow(inbox)) }
         <InputBox {...{
           inputType,

src/components/Player/TextBuffer.jsx

@@ -69,7 +69,7 @@ export default function ({ inbox, currentWindow }) {
   return (
     <section
       ref={textBufferEl}
-      className='textBuffer'>
+      className='buffer textBuffer'>
       {messages.map(TextMessage)}
     </section>
   )

src/components/Player/TextMessage.jsx

@@ -7,6 +7,7 @@ export default function ({ style, text }) {
     </span>)
 
   return ({
+    grid: (<div>{text}&nbsp;</div>),
     input: (<span class='message input'>&gt; {text}</span>),
     subheader: (<strong>{text}</strong>),
     emphasized: (<em>{text}</em>),

src/components/Player/player.css

@@ -35,8 +35,7 @@
   display: none;
 }
 
-.ifplayer .textBuffer {
-  flex: 2 1 auto;
+.ifplayer .buffer {
   overflow-y: scroll;
   box-sizing: border-box;
 
@@ -47,16 +46,25 @@
   scrollbar-width: thin;
 }
 
-.ifplayer .textBuffer::-webkit-scrollbar {
+.ifplayer .buffer::-webkit-scrollbar {
   width: 8px;
 }
 
-.ifplayer .textBuffer::-webkit-scrollbar-thumb {
+.ifplayer .buffer::-webkit-scrollbar-thumb {
   background-color: var(--main-color);
   border: 4px solid var(--bg-color);
   border-left-width: 0px;
 }
 
+.ifplayer .gridBuffer {
+  flex-shrink: 0;
+  border-bottom: 0;
+}
+
+.ifplayer .textBuffer {
+  flex: 2 1 auto;
+}
+
 .ifplayer .textBuffer > br:first-child,
 .ifplayer .textBuffer > br:last-child,
 .ifplayer .textBuffer > br + br + br {