/* * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import type { VisualInkLineOrCommand } from '@a-morphous/frontispiece-ink-processor/src/types' import { Fragment } from 'preact' import { useEffect, useRef, useState } from 'preact/hooks' import { html, useInkHookState } from '../bootstrap/bootstrap' import { useLayoutState } from '../state/layout-state' import { advanceMaximally } from '../utils/advance-maximally' import { LineViewer } from './line-viewer' // TODO: implement a version where it doesn't necessarily advance line by line export const InkStoryView = () => { const [showLog, setShowLog] = useState(false) const inkState = useInkHookState() const layoutState = useLayoutState() const ref = useRef() const advanceFunction = () => { if (layoutState.oneline.get()) { inkState.advance() // only hide older lines if we're in `oneline` mode if (layoutState.maxVisibleLines.get() > 0) { inkState.hideOlderLines(layoutState.maxVisibleLines.get()) } } else { advanceMaximally(inkState) } if (layoutState.scrollAfterAdvance.get()) { setTimeout(() => { document.querySelector('#story .active').scrollIntoView({ block: 'start', behavior: 'smooth', }) }, 10) } } const lines = inkState.getVisibleLines({ showHidden: showLog, showCommands: false, }) useEffect(() => { if (inkState.getCanAdvance()) { advanceFunction() } }, []) const renderStory = () => { const activeSection = inkState.getActiveSection() return html`
${lines.map((line) => { let isActive = false // hackety hack hack if (layoutState.oneline.get()) { if (line === inkState.getActiveLine()) { isActive = true } } else { if (activeSection.lines.indexOf(line as VisualInkLineOrCommand) >= 0) { isActive = true } } return html`<${LineViewer} line=${line} isActive=${isActive} />` })}
` } const renderAdvanceButton = () => { if (inkState.getCanAdvance()) { return html`` } return null } const renderChoices = () => { if (inkState.getCanAdvance()) { return null } return html`
${inkState.getChoices().map((choice) => { return html`` })}
` } const renderLogButton = () => { const logButtonText = showLog ? 'Hide Log' : 'Show Log' return html`` } return html`<${Fragment}>
${renderStory()} ${renderAdvanceButton()} ${renderChoices()}
` }