diff --git a/src/components/Player/GridBuffer.jsx b/src/components/Player/GridBuffer.jsx
new file mode 100644
index 0000000..bdcb711
--- /dev/null
+++ b/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 (
+
+ {messages.map(TextMessage)}
+
+ )
+}
diff --git a/src/components/Player/InputBox.jsx b/src/components/Player/InputBox.jsx
index ea23e63..69f6c0d 100644
--- a/src/components/Player/InputBox.jsx
+++ b/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('')
}
diff --git a/src/components/Player/Player.jsx b/src/components/Player/Player.jsx
index 1b51d81..e72695d 100644
--- a/src/components/Player/Player.jsx
+++ b/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': ,
- 'grid':
GridView
+ 'grid':
})[currentWindow.type]
}
@@ -113,7 +115,7 @@ export default function ({ vmParts: { file, engine } }) {
? ()
: (
{ windows
- .filter(({id}) => id === currentWindowId)
+ // .filter(({id}) => id === currentWindowId)
.map(textWindow(inbox)) }
+ className='buffer textBuffer'>
{messages.map(TextMessage)}
)
diff --git a/src/components/Player/TextMessage.jsx b/src/components/Player/TextMessage.jsx
index b45dcb3..990a85a 100644
--- a/src/components/Player/TextMessage.jsx
+++ b/src/components/Player/TextMessage.jsx
@@ -7,6 +7,7 @@ export default function ({ style, text }) {
)
return ({
+ grid: ({text}
),
input: (> {text}),
subheader: ({text}),
emphasized: ({text}),
diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index 5c71028..b9f892d 100644
--- a/src/components/Player/player.css
+++ b/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 {