mirror of
https://github.com/whscullin/apple2js.git
synced 2024-01-12 14:14:38 +00:00
Preact mouse support (#111)
This commit is contained in:
parent
d44cae76a7
commit
7e0901cfc2
|
@ -6,8 +6,10 @@ import Apple2IO from '../apple2io';
|
||||||
import { ControlStrip } from './ControlStrip';
|
import { ControlStrip } from './ControlStrip';
|
||||||
import { Inset } from './Inset';
|
import { Inset } from './Inset';
|
||||||
import { Keyboard } from './Keyboard';
|
import { Keyboard } from './Keyboard';
|
||||||
|
import { Mouse } from './Mouse';
|
||||||
import { Screen } from './Screen';
|
import { Screen } from './Screen';
|
||||||
import { Drives } from './Drives';
|
import { Drives } from './Drives';
|
||||||
|
import CPU6502 from 'js/cpu6502';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Interface for the Apple2 component.
|
* Interface for the Apple2 component.
|
||||||
|
@ -35,6 +37,7 @@ export const Apple2 = (props: Apple2Props) => {
|
||||||
const screen = useRef<HTMLCanvasElement>(null);
|
const screen = useRef<HTMLCanvasElement>(null);
|
||||||
const [apple2, setApple2] = useState<Apple2Impl>();
|
const [apple2, setApple2] = useState<Apple2Impl>();
|
||||||
const [io, setIO] = useState<Apple2IO>();
|
const [io, setIO] = useState<Apple2IO>();
|
||||||
|
const [cpu, setCPU] = useState<CPU6502>();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (screen.current) {
|
if (screen.current) {
|
||||||
|
@ -47,8 +50,10 @@ export const Apple2 = (props: Apple2Props) => {
|
||||||
setApple2(apple2);
|
setApple2(apple2);
|
||||||
apple2.ready.then(() => {
|
apple2.ready.then(() => {
|
||||||
const io = apple2.getIO();
|
const io = apple2.getIO();
|
||||||
|
const cpu = apple2.getCPU();
|
||||||
setIO(io);
|
setIO(io);
|
||||||
apple2.getCPU().reset();
|
setCPU(cpu);
|
||||||
|
apple2.reset();
|
||||||
apple2.run();
|
apple2.run();
|
||||||
}).catch(error => console.error(error));
|
}).catch(error => console.error(error));
|
||||||
}
|
}
|
||||||
|
@ -57,6 +62,7 @@ export const Apple2 = (props: Apple2Props) => {
|
||||||
return (
|
return (
|
||||||
<div className={cs('outer', { apple2e: e})}>
|
<div className={cs('outer', { apple2e: e})}>
|
||||||
<Screen screen={screen} />
|
<Screen screen={screen} />
|
||||||
|
<Mouse cpu={cpu} screen={screen} io={io} />
|
||||||
<Inset>
|
<Inset>
|
||||||
<Drives io={io} sectors={sectors} />
|
<Drives io={io} sectors={sectors} />
|
||||||
</Inset>
|
</Inset>
|
||||||
|
|
24
js/components/Mouse.tsx
Normal file
24
js/components/Mouse.tsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import { RefObject } from 'preact';
|
||||||
|
import Apple2IO from '../apple2io';
|
||||||
|
import { MouseUI } from '../ui/mouse';
|
||||||
|
import MouseCard from '../cards/mouse';
|
||||||
|
import CPU6502 from '../cpu6502';
|
||||||
|
import { useEffect } from 'preact/hooks';
|
||||||
|
|
||||||
|
export interface MouseProps {
|
||||||
|
cpu: CPU6502 | undefined;
|
||||||
|
io: Apple2IO | undefined;
|
||||||
|
screen: RefObject<HTMLCanvasElement>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Mouse = ({ cpu, screen, io }: MouseProps) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (cpu && io && screen.current) {
|
||||||
|
const mouseUI = new MouseUI(screen.current);
|
||||||
|
const mouse = new MouseCard(cpu, mouseUI);
|
||||||
|
io.setSlot(4, mouse);
|
||||||
|
}
|
||||||
|
}, [cpu, io]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
|
@ -56,7 +56,7 @@ apple2.ready.then(() => {
|
||||||
const cpu = apple2.getCPU();
|
const cpu = apple2.getCPU();
|
||||||
|
|
||||||
const printer = new Printer('#printer-modal .paper');
|
const printer = new Printer('#printer-modal .paper');
|
||||||
const mouseUI = new MouseUI('#screen');
|
const mouseUI = new MouseUI(options.canvas);
|
||||||
|
|
||||||
const parallel = new Parallel(printer);
|
const parallel = new Parallel(printer);
|
||||||
const slinky = new RAMFactor(1024 * 1024);
|
const slinky = new RAMFactor(1024 * 1024);
|
||||||
|
|
|
@ -3,11 +3,8 @@ import { enableMouseMode } from './joystick';
|
||||||
|
|
||||||
export class MouseUI {
|
export class MouseUI {
|
||||||
private mouse: Mouse;
|
private mouse: Mouse;
|
||||||
private canvas: HTMLCanvasElement;
|
|
||||||
|
|
||||||
constructor(selector: string) {
|
|
||||||
this.canvas = document.querySelector<HTMLCanvasElement>(selector)!;
|
|
||||||
|
|
||||||
|
constructor(private canvas: HTMLCanvasElement) {
|
||||||
this.canvas.addEventListener(
|
this.canvas.addEventListener(
|
||||||
'mousemove',
|
'mousemove',
|
||||||
(event: MouseEvent & { target: HTMLCanvasElement} ) => {
|
(event: MouseEvent & { target: HTMLCanvasElement} ) => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user