Add TextBuffer component

src/components/player/Player.js

@@ -3,6 +3,14 @@ import { useState, useEffect } from 'preact/hooks'
 
 import CheapGlkOte from 'cheap-glkote'
 
+import TextBuffer from './TextBuffer'
+import InputBox from './InputBox'
+
+const INITIAL_STATUS = {
+  stage: 'loading',
+  details: 'Preparing...'
+}
+
 const runMachine = ({ Engine, file, handlers }) => {
   console.log('runMachine')
 
@@ -16,30 +24,22 @@ const runMachine = ({ Engine, file, handlers }) => {
 }
 
 const Handlers = ({
+  setStatus,
   setCurrentWindow,
   setInputType,
   setInbox
 }) => ({
-  onInit: () => {},
+  onInit: _ => setStatus({ stage: 'ready' }),
+  /* */
   onUpdateWindows: windows => {
     setCurrentWindow(windows
       .filter(x => x.type === 'buffer')
       .slice(-1)[0])
   },
   onUpdateInputs: setInputType,
-  onUpdateContent: messagesByWindow => {
-    const inbox =
-      messagesByWindow
-        .reduce((acc, {id, text}) => {
-          acc[id] = text
-            .map(({content}) => content || [null])
-            .reduce((xs, x) => [...xs, ...x], [])
-          return acc
-        }, {})
-    console.log(JSON.stringify(inbox, null, 1))
-    setInbox(inbox)
-  },
-  onDisable: () => setInputType(null),
+  onUpdateContent: setInbox,
+  onDisable: _ => setInputType(null),
+  /* */
   onFileNameRequest: (tosave, usage, _, setFileName) => {
     setFileName({ filename: 'filename', usage })
   },
@@ -47,10 +47,13 @@ const Handlers = ({
     return 'content'
   },
   onFileWrite: (filename, content) => {},
-  onExit: () => setInputType(null)
+  /* */
+  onExit: _ => setInputType(null)
 })
 
 export default function ({ vmParts: { file, engine } }) {
+  const [status, setStatus] = useState(INITIAL_STATUS)
+
   const [currentWindow, setCurrentWindow] = useState(null)
   const [inputType, setInputType] = useState(null)
   const [inbox, setInbox] = useState([])
@@ -62,6 +65,7 @@ export default function ({ vmParts: { file, engine } }) {
 
   useEffect(() => {
     const handlers = Handlers({
+      setStatus,
       setCurrentWindow,
       setInputType,
       setInbox
@@ -86,9 +90,13 @@ export default function ({ vmParts: { file, engine } }) {
     window.send = x => sendMessage(x, currentWindow)
   }, [sendMessage, currentWindow])
 
-  return (
-    <div>
-      Player
-    </div>
-  )
+  return status.stage !== 'ready'
+    ? (<div>{status.details}</div>)
+    : (<section>
+        <TextBuffer {...{
+          inbox,
+          currentWindow
+        }}/>
+        <InputBox/>
+      </section>)
 }