apple2js/js/components/Apple2.tsx
Will Scullin 466a7eed78
Cheap and cheerful debugger (#135)
* Cheap and cheerful debugger

* Try to manage focus
2022-06-19 19:42:34 -07:00

123 lines
4.1 KiB
TypeScript

import { h } from 'preact';
import cs from 'classnames';
import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { Apple2 as Apple2Impl } from '../apple2';
import Apple2IO from '../apple2io';
import CPU6502 from '../cpu6502';
import { ControlStrip } from './ControlStrip';
import { Debugger } from './Debugger';
import { ErrorModal } from './ErrorModal';
import { Inset } from './Inset';
import { Keyboard } from './Keyboard';
import { Mouse } from './Mouse';
import { Screen } from './Screen';
import { Drives } from './Drives';
import { Slinky } from './Slinky';
import { ThunderClock } from './ThunderClock';
import { Videoterm } from './Videoterm';
import { spawn, Ready } from './util/promises';
import styles from './css/Apple2.module.css';
/**
* Interface for the Apple2 component.
*/
export interface Apple2Props {
characterRom: string;
enhanced: boolean;
e: boolean;
gl: boolean;
rom: string;
sectors: number;
}
/**
* Component to bind various UI components together to form
* the application layout. Includes the screen, drives,
* emulator controls and keyboard. Bootstraps the core
* Apple2 emulator.
*
* @param props Apple2 initialization props
* @returns
*/
export const Apple2 = (props: Apple2Props) => {
const { e, enhanced, sectors } = props;
const screen = useRef<HTMLCanvasElement>(null);
const [apple2, setApple2] = useState<Apple2Impl>();
const [io, setIO] = useState<Apple2IO>();
const [cpu, setCPU] = useState<CPU6502>();
const [error, setError] = useState<unknown>();
const [ready, setReady] = useState(false);
const [showDebug, setShowDebug] = useState(false);
const drivesReady = useMemo(() => new Ready(setError), []);
useEffect(() => {
if (screen.current) {
const options = {
canvas: screen.current,
tick: () => { /* do nothing */ },
...props,
};
const apple2 = new Apple2Impl(options);
const controller = spawn(async (signal) => {
try {
await apple2.ready;
if (signal.aborted) {
return;
}
setApple2(apple2);
setIO(apple2.getIO());
setCPU(apple2.getCPU());
await drivesReady.ready;
if (signal.aborted) {
setApple2(undefined);
setIO(undefined);
setCPU(undefined);
return;
}
apple2.reset();
apple2.run();
} catch (e) {
setError(e);
}
setReady(true);
});
return () => controller.abort();
}
}, [props, drivesReady]);
const toggleDebugger = useCallback(() => {
setShowDebug((on) => !on);
}, []);
const removeFocus = useCallback(() => {
if (document?.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
}, []);
return (
<div className={styles.container}>
<div
className={cs(styles.outer, { apple2e: e, [styles.ready]: ready })}
onClick={removeFocus}
>
<Screen screen={screen} />
<Slinky io={io} slot={2} />
{!e ? <Videoterm io={io} slot={3} /> : null}
<Mouse cpu={cpu} screen={screen} io={io} slot={4} />
<ThunderClock io={io} slot={5} />
<Inset>
<Drives cpu={cpu} io={io} sectors={sectors} enhanced={enhanced} ready={drivesReady} />
</Inset>
<ControlStrip apple2={apple2} e={e} toggleDebugger={toggleDebugger} />
<Inset>
<Keyboard apple2={apple2} e={e} />
</Inset>
<ErrorModal error={error} setError={setError} />
</div>
{showDebug ? <Debugger apple2={apple2} e={e} /> : null}
</div>
);
};