Player: replace player.css with scss modules

src/App.jsx

@@ -14,7 +14,7 @@ import ThemesView from '~/src/views/ThemesView/ThemesView'
 import PlayerView from '~/src/views/PlayerView/PlayerView'
 import NotFoundView from '~/src/views/NotFoundView/NotFoundView'
 
-import * as style from './style/App.module.scss'
+import * as s from './style/App.module.scss'
 
 export default function App () {
   const themeEngine = useThemeEngine()
@@ -32,9 +32,10 @@ export default function App () {
   return (
     <Router hook={useHashLocation}>
       <div className={[
-        style.app,
-        style[extractView(currentLocation)],
-        themeEngine.currentTheme].join(' ')}>
+        s.app,
+        s[extractView(currentLocation)],
+        themeEngine.currentTheme,
+      ].join(' ')}>
 
         <Switch>
           <Route path='/'>

src/components/Player/InputBox/InputBox.jsx

@@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 
 import MenuButton from './MenuButton/MenuButton'
 
+import * as s from './InputBox.module.scss'
+
 /* eslint-disable */
 const keyCodes = {
   KEY_BACKSPACE: 8,
@@ -147,9 +149,9 @@ export default function InputBox ({
   }
 
   return (
-    <section className='inputControls'>
+    <section className={s.inputControls}>
       <input {...inputHandlers[inputType]}
-        className='inputBox'
+        className={s.inputBox}
         ref={inputEl}
         value={inputText}
         autofocus

src/components/Player/InputBox/InputBox.module.scss

@@ -0,0 +1,31 @@
+.inputControls {
+  position: relative;
+  margin-top: var(--input-box-margin);
+
+  .inputBox {
+    font: inherit;
+    color: inherit;
+    outline: 0;
+
+    background-color: var(--bg-color);
+    border: var(--border-width) solid var(--main-color);
+    border-top: var(--separator-width) solid var(--main-color);
+    padding: var(--inner-padding);
+    padding-right: calc(4 * var(--inner-padding));
+    margin: 0;
+    width: 100%;
+
+    &::placeholder {
+      color: var(--main-color);
+      opacity: 1;
+    }
+
+    &:focus::placeholder {
+      opacity: 0.5;
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+}

src/components/Player/MenuOverlay/MenuOverlay.css

@@ -1,41 +0,0 @@
-.menu {
-  width: 100%;
-
-  border-left: none;
-  border-right: none;
-  text-align: center;
-  padding-top: 0;
-  padding-bottom: 0;
-
-  background-color: var(--bg-color);
-  border-color: var(--main-color);
-  color: var(--main-color);
-}
-
-.menu::backdrop {
-  background: none;
-  backdrop-filter: blur(2px);
-}
-
-.menu > section {
-  margin: 32px auto 40px;
-  gap: 32px;
-  max-width: 270px;
-  display: flex;
-  flex-direction: column;
-}
-
-.menu .navigation {
-  color: var(--accent-color);
-}
-
-.menu .appearance {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.menu select,
-.menu button {
-  width: 100%;
-}

src/components/Player/MenuOverlay/MenuOverlay.jsx

@@ -4,7 +4,7 @@ import { Link } from 'wouter-preact'
 import ThemeSelector from
   '~/src/components/ThemeSelector/ThemeSelector'
 
-import './MenuOverlay.css'
+import * as s from './MenuOverlay.module.scss'
 
 export default function MenuOverlay ({
   themeEngine, onFullscreenRequest, menuOpen, setMenuOpen,
@@ -35,7 +35,7 @@ export default function MenuOverlay ({
 
 
   return (
-    <dialog ref={dialog} className='menu'>
+    <dialog ref={dialog} className={s.menu}>
       <section>
         <div>
           <button
@@ -46,7 +46,7 @@ export default function MenuOverlay ({
           </button>
         </div>
 
-        <div className='appearance'>
+        <div className={s.appearance}>
           <button
             onClick={() => {
               dialog.current.close()
@@ -68,7 +68,7 @@ export default function MenuOverlay ({
           </label>
         </div>
 
-        <div className='navigation'>
+        <div className={s.navigation}>
           <Link href="/" tabIndex={0}>
             ElseIfPlayer
           </Link>

src/components/Player/MenuOverlay/MenuOverlay.module.scss

@@ -0,0 +1,41 @@
+.menu {
+  width: 100%;
+
+  border-left: none;
+  border-right: none;
+  text-align: center;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  background-color: var(--bg-color);
+  border-color: var(--main-color);
+  color: var(--main-color);
+
+  &::backdrop {
+    background: none;
+    backdrop-filter: blur(2px);
+  }
+
+  & > section {
+    margin: 32px auto 40px;
+    gap: 32px;
+    max-width: 270px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .navigation {
+    color: var(--accent-color);
+  }
+
+  .appearance {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  select,
+  button {
+    width: 100%;
+  }
+}

src/components/Player/OutputBox/GridBuffer/GridBuffer.jsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'preact/hooks'
+
+import TextMessage from '../TextMessage/TextMessage'
+
+import * as s from '../../Player.module.scss'
+
+export default function GridBuffer ({ inbox, currentWindow }) {
+  const [prevMessages, setPrevMessages] = useState([])
+  const [messages, setMessages] = useState([])
+
+  useEffect(() => {
+    const currentInboxObj =
+      inbox.find(({ id }) =>
+        id === currentWindow.id)
+
+    const currentInbox = currentInboxObj?.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))
+
+    /* */
+
+    const shouldUpdatePrev = (rawMessages, prevMessages) => {
+      const serialize = JSON.stringify
+      return serialize(rawMessages) !== serialize(prevMessages)
+    }
+
+    if (shouldUpdatePrev(rawMessages, prevMessages)) {
+      setPrevMessages(rawMessages)
+    }
+
+    /* */
+
+
+    const rawMessagesContent =
+      rawMessages
+        .map((x) => x.content)
+        .flat()
+        .map((message) => ({
+          ...message,
+          text: message.text.trim(),
+        }))
+
+    const isEmpty =
+      rawMessagesContent
+        .map(({ text }) => text.length)
+        .every((l) => l === 0)
+
+    const getGridStyle = ({ style }) => {
+      if (['alert', 'normal'].includes(style)) return 'grid'
+      return style || 'grid'
+    }
+
+    const messages =
+      rawMessagesContent
+        .map((message) => ({
+          style: getGridStyle(message),
+          text: message.text.replace('   ', ' / '),
+        }))
+
+    setMessages(isEmpty ? [] : messages)
+  }, [inbox, currentWindow, prevMessages])
+
+  return (
+    <section className={[s.buffer, s.gridBuffer].join(' ')}>
+      {messages.map(TextMessage)}
+    </section>
+  )
+}

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

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+import TextMessage from '../TextMessage/TextMessage'
+
+import * as s from '../../Player.module.scss'
+
+const isFakeStatus = (w) =>
+  w.height < 5
+
+const trimInputPrompt = (messages) =>
+  messages.length < 1
+    ? messages
+    : messages.slice(-1)[0].text === '>'
+      ? messages.slice(0, messages.length - 1)
+      : messages
+
+const parseInbox = (inbox, currentWindow) => {
+  const currentInbox =
+    inbox.find(({ id }) =>
+      id === currentWindow.id)
+
+  if (!currentInbox) {
+    return {
+      clear: false,
+      incoming: [],
+    }
+  }
+
+  const { text: inboxMessagesRaw } =
+    currentInbox
+
+  const eol = { style: 'endOfLine' }
+
+  const incoming =
+    inboxMessagesRaw
+      /* Normalize. */
+      .map(({ content }) =>
+        content
+          ? [...trimInputPrompt(content), eol]
+          : [eol])
+      /* Flatten. */
+      .reduce((acc, x) =>
+        acc.concat(x), [])
+
+  return {
+    incoming,
+    clear: isFakeStatus(currentWindow)
+      ? true
+      : currentInbox.clear,
+  }
+}
+
+export default function TextBuffer ({ inbox, currentWindow }) {
+  const [messages, setMessages] = useState([])
+  const textBufferEl = useRef(null)
+
+  useEffect(() => {
+    const { incoming, clear } =
+      parseInbox(inbox, currentWindow)
+
+    setMessages((messages) => clear
+      ? incoming
+      : messages.concat(incoming))
+
+    setTimeout(() => {
+      const inputs =
+        textBufferEl.current.querySelectorAll('.message.input')
+      const lastInput =
+        inputs[inputs.length - 1]
+
+      lastInput
+        ? lastInput.scrollIntoView()
+        : textBufferEl.current.scrollTo({
+          top: textBufferEl.current.scrollHeight,
+          behavior: 'smooth',
+        })
+    }, 0)
+  }, [currentWindow, inbox])
+
+  const classes = () => [
+    s.buffer,
+    isFakeStatus(currentWindow)
+      ? s.gridBuffer
+      : s.textBuffer,
+  ].join(' ')
+
+  return (
+    <section
+      tabindex='0'
+      ref={textBufferEl}
+      className={classes()}
+    >
+      {messages.map(TextMessage)}
+    </section>
+  )
+}

src/components/Player/OutputBox/TextMessage.jsx

@@ -1,14 +0,0 @@
-export default function TextMessage ({ style, text }) {
-  const defaultContent = (
-    <span className={['message', style].join(' ')}>
-      {text}
-    </span>)
-
-  return ({
-    grid: (text?.length > 0 ? <div>{text}</div> : <br />),
-    input: (<span className='message input'>&gt; {text}</span>),
-    subheader: (<strong className='message subheader'>{text}</strong>),
-    emphasized: (<em className='message emphasized'>{text}</em>),
-    endOfLine: (<br />),
-  })[style] || defaultContent
-}

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

@@ -0,0 +1,21 @@
+import * as s from './TextMessage.module.scss'
+
+export default function TextMessage ({ style, text }) {
+  const defaultContent = (
+    <span className={[s.message, s[style]].join(' ')}>
+      {text}
+    </span>)
+
+  return ({
+    grid:
+      (text?.length > 0 ? <div>{text}</div> : <br />),
+    input:
+      (<span className={[s.message, s.input].join(' ')}>&gt; {text}</span>),
+    subheader:
+      (<strong className={[s.message, s.subheader].join(' ')}>{text}</strong>),
+    emphasized:
+      (<em className={[s.message, s.emphasized].join(' ')}>{text}</em>),
+    endOfLine:
+      (<br />),
+  })[style] || defaultContent
+}

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

@@ -0,0 +1,11 @@
+.message {
+  &.input {
+    scroll-margin-top: var(--inner-padding);
+    color: var(--input-color);
+  }
+
+  &.emphasized,
+  &.subheader {
+    color: var(--accent-color);
+  }
+}

src/components/Player/Player.jsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'preact/hooks'
 
 import CheapGlkOte from 'cheap-glkote'
 
-import TextBuffer from './OutputBox/TextBuffer'
-import GridBuffer from './OutputBox/GridBuffer'
+import TextBuffer from './OutputBox/TextBuffer/TextBuffer'
+import GridBuffer from './OutputBox/GridBuffer/GridBuffer'
 
 import InputBox from './InputBox/InputBox'
 import Status from './Status/Status'
@@ -13,7 +13,7 @@ import {
   unhandledRejectionHandler,
 } from './common/playerHandlers'
 
-import './player.css'
+import * as s from './Player.module.scss'
 
 const INITIAL_STATUS = {
   stage: 'loading',
@@ -104,14 +104,16 @@ export default function Player ({
 
   return status.stage !== 'ready'
     ? (<Status {...status} />)
-    : (<section className='ifplayer'>
-      <section className='output'>{
-        windows
+    : (<section className={s.elseifplayer}>
+      <section className={s.output}>
+        {
+          windows
           .sort(byTop)
           .filter(singleWindow
             ? ({ id }) => id === currentWindowId
             : () => true)
-          .map(textWindow(inbox))}
+          .map(textWindow(inbox))
+        }
       </section>
       <InputBox {...{
         inputType,

src/components/Player/Player.module.scss

@@ -0,0 +1,49 @@
+.elseifplayer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  background-color: var(--bg-color);
+  color: var(--main-color);
+  padding: var(--outer-padding);
+
+  .output {
+    display: flex;
+    flex-grow: 2;
+    flex-direction: column;
+    overflow-y: hidden;
+    overflow-wrap: break-word;
+
+    border: var(--border-width) solid var(--main-color);
+
+    .buffer {
+      overflow-y: scroll;
+      box-sizing: border-box;
+
+      padding: var(--inner-padding);
+
+      &:empty {
+        display: none;
+      }
+
+      & > br:first-child,
+      & > br:last-child,
+      & > br + br + br {
+        display: none;
+      }
+
+      &.gridBuffer {
+        flex-shrink: 0;
+        max-height: 100%;
+        border-bottom: var(--separator-width) solid var(--main-color);
+      }
+
+      &.textBuffer {
+        flex: 2 1;
+        outline: none;
+        scroll-behavior: smooth;
+      }
+    }
+  }
+}

src/components/Player/player.css

@@ -1,100 +0,0 @@
-.ifplayer {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-
-  background-color: var(--bg-color);
-  color: var(--main-color);
-  padding: var(--outer-padding);
-}
-
-.ifplayer .inputControls {
-  position: relative;
-  margin-top: var(--input-box-margin);
-}
-
-.ifplayer .inputControls .menuButton {
-  position: absolute;
-  right: 0;
-  height: 100%;
-}
-
-.ifplayer .inputBox {
-  font: inherit;
-  color: inherit;
-  outline: 0;
-
-  background-color: var(--bg-color);
-  border: var(--border-width) solid var(--main-color);
-  border-top: var(--separator-width) solid var(--main-color);
-  padding: var(--inner-padding);
-  padding-right: calc(4 * var(--inner-padding));
-  margin: 0;
-  width: 100%;
-}
-
-.ifplayer .inputBox::placeholder {
-  color: var(--main-color);
-  opacity: 1;
-}
-
-.ifplayer .inputBox:focus::placeholder {
-  opacity: 0.5;
-}
-
-.ifplayer .inputBox::-webkit-search-cancel-button {
-  display: none;
-}
-
-.ifplayer .output {
-  display: flex;
-  flex-grow: 2;
-  flex-direction: column;
-  overflow-y: hidden;
-  overflow-wrap: break-word;
-
-  border: var(--border-width) solid var(--main-color);
-}
-
-.ifplayer .output .buffer {
-  overflow-y: scroll;
-  box-sizing: border-box;
-
-  padding: var(--inner-padding);
-}
-
-.ifplayer .output .buffer:empty {
-  display: none;
-}
-
-.ifplayer .output .gridBuffer {
-  flex-shrink: 0;
-  max-height: 100%;
-  border-bottom: var(--separator-width) solid var(--main-color);
-}
-
-.ifplayer .output .textBuffer {
-  flex: 2 1;
-  outline: none;
-  scroll-behavior: smooth;
-}
-
-.ifplayer .output .textBuffer > br:first-child,
-.ifplayer .output .gridBuffer > br:first-child,
-.ifplayer .output .textBuffer > br:last-child,
-.ifplayer .output .gridBuffer > br:last-child,
-.ifplayer .output .textBuffer > br + br + br,
-.ifplayer .output .gridBuffer > br + br + br {
-  display: none;
-}
-
-.ifplayer .output .textBuffer .message.input {
-  scroll-margin-top: var(--inner-padding);
-  color: var(--input-color);
-}
-
-.ifplayer .output .textBuffer .message.emphasized,
-.ifplayer .output .textBuffer .message.subheader {
-  color: var(--accent-color);
-}