2022-05-10 13:52:06 +00:00
|
|
|
import { h } from 'preact';
|
|
|
|
import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
|
|
|
|
import { CPUMeter } from './CPUMeter';
|
|
|
|
import { Inset } from './Inset';
|
|
|
|
import { useHotKey } from './hooks/useHotKey';
|
2022-05-15 21:57:21 +00:00
|
|
|
import { AudioControl } from './AudioControl';
|
2023-01-12 02:14:44 +00:00
|
|
|
import { OptionsModal } from './OptionsModal';
|
2022-05-10 13:52:06 +00:00
|
|
|
import { OptionsContext } from './OptionsContext';
|
2022-06-09 19:22:59 +00:00
|
|
|
import { Printer } from './Printer';
|
2022-05-10 13:52:06 +00:00
|
|
|
import { ControlButton } from './ControlButton';
|
2022-05-15 21:57:21 +00:00
|
|
|
import { Apple2 as Apple2Impl } from '../apple2';
|
2022-05-10 13:52:06 +00:00
|
|
|
import { JoyStick } from '../ui/joystick';
|
|
|
|
import { Screen, SCREEN_FULL_PAGE } from '../ui/screen';
|
|
|
|
import { System } from '../ui/system';
|
|
|
|
|
2023-01-12 02:14:44 +00:00
|
|
|
import styles from './css/ControlStrip.module.scss';
|
2022-06-09 19:22:59 +00:00
|
|
|
import Apple2IO from 'js/apple2io';
|
2022-06-03 22:30:39 +00:00
|
|
|
|
2022-05-10 13:52:06 +00:00
|
|
|
const README = 'https://github.com/whscullin/apple2js#readme';
|
|
|
|
|
|
|
|
interface ControlStripProps {
|
|
|
|
apple2: Apple2Impl | undefined;
|
|
|
|
e: boolean;
|
2022-06-20 02:42:34 +00:00
|
|
|
toggleDebugger: () => void;
|
2022-05-10 13:52:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Strip containing containing controls for various system
|
|
|
|
* characteristics, like CPU speed, audio, and the system
|
|
|
|
* options panel.
|
|
|
|
*
|
|
|
|
* @param apple2 Apple2 object
|
|
|
|
* @param e Whether or not this is a //e
|
|
|
|
* @returns ControlStrip component
|
|
|
|
*/
|
2023-11-24 14:45:55 +00:00
|
|
|
export const ControlStrip = ({
|
|
|
|
apple2,
|
|
|
|
e,
|
|
|
|
toggleDebugger,
|
|
|
|
}: ControlStripProps) => {
|
2022-05-10 13:52:06 +00:00
|
|
|
const [showOptions, setShowOptions] = useState(false);
|
2022-06-09 19:22:59 +00:00
|
|
|
const [io, setIO] = useState<Apple2IO>();
|
2022-05-10 13:52:06 +00:00
|
|
|
const options = useContext(OptionsContext);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (apple2) {
|
2022-05-15 21:57:21 +00:00
|
|
|
const io = apple2.getIO();
|
|
|
|
const vm = apple2.getVideoModes();
|
2022-06-09 19:22:59 +00:00
|
|
|
setIO(io);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2022-05-15 21:57:21 +00:00
|
|
|
const system = new System(io, e);
|
|
|
|
options.addOptions(system);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2022-05-15 21:57:21 +00:00
|
|
|
const joystick = new JoyStick(io);
|
|
|
|
options.addOptions(joystick);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2022-05-15 21:57:21 +00:00
|
|
|
const screen = new Screen(vm);
|
|
|
|
options.addOptions(screen);
|
2022-05-10 13:52:06 +00:00
|
|
|
}
|
2022-05-29 20:48:51 +00:00
|
|
|
}, [apple2, e, options]);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2023-11-24 14:45:55 +00:00
|
|
|
const doReset = useCallback(() => apple2?.reset(), [apple2]);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2023-11-24 14:45:55 +00:00
|
|
|
const doReadme = useCallback(() => window.open(README, '_blank'), []);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2023-11-24 14:45:55 +00:00
|
|
|
const doShowOptions = useCallback(() => setShowOptions(true), []);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2023-11-24 14:45:55 +00:00
|
|
|
const doCloseOptions = useCallback(() => setShowOptions(false), []);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
2023-11-24 14:45:55 +00:00
|
|
|
const doToggleFullPage = useCallback(
|
|
|
|
() =>
|
|
|
|
options.setOption(
|
|
|
|
SCREEN_FULL_PAGE,
|
|
|
|
!options.getOption(SCREEN_FULL_PAGE)
|
|
|
|
),
|
|
|
|
[options]
|
|
|
|
);
|
2022-05-10 13:52:06 +00:00
|
|
|
|
|
|
|
useHotKey('F2', doToggleFullPage);
|
|
|
|
useHotKey('F4', doShowOptions);
|
|
|
|
useHotKey('F12', doReset);
|
|
|
|
|
|
|
|
return (
|
2022-06-03 22:30:39 +00:00
|
|
|
<div className={styles.resetRow}>
|
2022-05-10 13:52:06 +00:00
|
|
|
<OptionsModal isOpen={showOptions} onClose={doCloseOptions} />
|
|
|
|
<Inset>
|
|
|
|
<CPUMeter apple2={apple2} />
|
2023-11-24 14:45:55 +00:00
|
|
|
<ControlButton
|
|
|
|
onClick={toggleDebugger}
|
|
|
|
title="Toggle Debugger"
|
|
|
|
icon="bug"
|
|
|
|
/>
|
2022-05-15 21:57:21 +00:00
|
|
|
<AudioControl apple2={apple2} />
|
2022-06-09 19:22:59 +00:00
|
|
|
<Printer io={io} slot={1} />
|
2023-01-12 02:14:44 +00:00
|
|
|
<div style={{ flexGrow: 1 }} />
|
2022-05-10 13:52:06 +00:00
|
|
|
<ControlButton onClick={doReadme} title="About" icon="info" />
|
2023-11-24 14:45:55 +00:00
|
|
|
<ControlButton
|
|
|
|
onClick={doShowOptions}
|
|
|
|
title="Options (F4)"
|
|
|
|
icon="cog"
|
|
|
|
/>
|
2022-05-10 13:52:06 +00:00
|
|
|
</Inset>
|
|
|
|
{e && (
|
2022-06-03 22:30:39 +00:00
|
|
|
<div className={styles.reset} onClick={doReset}>
|
2022-05-10 13:52:06 +00:00
|
|
|
Reset
|
2022-05-15 21:57:21 +00:00
|
|
|
</div>
|
2022-05-10 13:52:06 +00:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|