diff --git a/.eslintrc.json b/.eslintrc.json index a5e6161..dca0508 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -31,7 +31,6 @@ ], "no-var": "error", "no-use-before-define": "off", - "no-dupe-class-members": "off", "no-console": [ "error", { @@ -213,4 +212,4 @@ "version": "16" } } -} \ No newline at end of file +} diff --git a/css/green-off-16.png b/css/green-off-16.png new file mode 100644 index 0000000..a237a20 Binary files /dev/null and b/css/green-off-16.png differ diff --git a/css/green-off-32.png b/css/green-off-32.png new file mode 100644 index 0000000..2be3a66 Binary files /dev/null and b/css/green-off-32.png differ diff --git a/css/green-on-16.png b/css/green-on-16.png new file mode 100644 index 0000000..3f196b3 Binary files /dev/null and b/css/green-on-16.png differ diff --git a/css/green-on-32.png b/css/green-on-32.png new file mode 100644 index 0000000..3ead6ca Binary files /dev/null and b/css/green-on-32.png differ diff --git a/css/red-off-16.png b/css/red-off-16.png old mode 100755 new mode 100644 diff --git a/css/red-off-32.png b/css/red-off-32.png new file mode 100644 index 0000000..861d3b9 Binary files /dev/null and b/css/red-off-32.png differ diff --git a/css/red-on-16.png b/css/red-on-16.png old mode 100755 new mode 100644 diff --git a/css/red-on-32.png b/css/red-on-32.png new file mode 100644 index 0000000..c2798d7 Binary files /dev/null and b/css/red-on-32.png differ diff --git a/js/cards/cffa.ts b/js/cards/cffa.ts index 058a9ca..7937a35 100644 --- a/js/cards/cffa.ts +++ b/js/cards/cffa.ts @@ -85,7 +85,7 @@ export interface CFFAState { disks: Array; } -export default class CFFA implements Card, MassStorage, Restorable { +export default class CFFA implements Card, MassStorage, Restorable { // CFFA internal Flags diff --git a/js/cards/smartport.ts b/js/cards/smartport.ts index 8e3c4aa..7568e5b 100644 --- a/js/cards/smartport.ts +++ b/js/cards/smartport.ts @@ -1,12 +1,13 @@ import { debug, toHex } from '../util'; import { rom as smartPortRom } from '../roms/cards/smartport'; import { Card, Restorable, byte, word, rom } from '../types'; -import { MassStorage, BlockDisk, ENCODING_BLOCK } from '../formats/types'; +import { MassStorage, BlockDisk, ENCODING_BLOCK, BlockFormat } from '../formats/types'; import CPU6502, { CpuState, flags } from '../cpu6502'; import { read2MGHeader } from '../formats/2mg'; import createBlockDisk from '../formats/block'; import { ProDOSVolume } from '../formats/prodos'; import { dump } from '../formats/prodos/utils'; +import { DriveNumber } from '../formats/types'; const ID = 'SMARTPORT.J.S'; @@ -18,6 +19,12 @@ export interface SmartPortOptions { block: boolean; } +export interface Callbacks { + driveLight: (drive: DriveNumber, on: boolean) => void; + dirty: (drive: DriveNumber, dirty: boolean) => void; + label: (drive: DriveNumber, name?: string, side?: string) => void; +} + class Address { lo: byte; hi: byte; @@ -118,12 +125,18 @@ const DEVICE_TYPE_SCSI_HD = 0x07; // $0D: Printer // $0E: Clock // $0F: Modem -export default class SmartPort implements Card, MassStorage, Restorable { +export default class SmartPort implements Card, MassStorage, Restorable { private rom: rom; private disks: BlockDisk[] = []; + private busy: boolean[] = []; + private busyTimeout: ReturnType[] = []; - constructor(private cpu: CPU6502, options: SmartPortOptions) { + constructor( + private cpu: CPU6502, + private callbacks: Callbacks | null, + options: SmartPortOptions + ) { if (options?.block) { const dumbPortRom = new Uint8Array(smartPortRom); dumbPortRom[0x07] = 0x3C; @@ -139,11 +152,23 @@ export default class SmartPort implements Card, MassStorage, Restorable { + this.busy[drive] = false; + this.callbacks?.driveLight(drive, false); + }, 100); + } + /* * dumpBlock */ - dumpBlock(drive: number, block: number) { + dumpBlock(drive: DriveNumber, block: number) { let result = ''; let b; let jdx; @@ -178,7 +203,7 @@ export default class SmartPort implements Card, MassStorage, Restorable { - const { e, sectors } = props; + const { e, enhanced, sectors } = props; const screen = useRef(null); const [apple2, setApple2] = useState(); const [io, setIO] = useState(); const [cpu, setCPU] = useState(); const [error, setError] = useState(); + const drivesReady = useMemo(() => new Ready(setError), []); useEffect(() => { if (screen.current) { @@ -53,26 +55,30 @@ export const Apple2 = (props: Apple2Props) => { ...props, }; const apple2 = new Apple2Impl(options); - apple2.ready.then(() => { - setApple2(apple2); - const io = apple2.getIO(); - const cpu = apple2.getCPU(); - setIO(io); - setCPU(cpu); - apple2.reset(); - apple2.run(); - }).catch((e) => setError(e)); + noAwait((async () => { + try { + await apple2.ready; + setApple2(apple2); + setIO(apple2.getIO()); + setCPU(apple2.getCPU()); + await drivesReady.ready; + apple2.reset(); + apple2.run(); + } catch (e) { + setError(e); + } + }))(); } - }, [props]); + }, [props, drivesReady]); return (
+ - - + diff --git a/js/components/BlockDisk.tsx b/js/components/BlockDisk.tsx new file mode 100644 index 0000000..4b1f478 --- /dev/null +++ b/js/components/BlockDisk.tsx @@ -0,0 +1,74 @@ +import { h } from 'preact'; +import { useCallback, useState } from 'preact/hooks'; +import cs from 'classnames'; +import SmartPort from '../cards/smartport'; +import { BlockFileModal } from './BlockFileModal'; +import { ErrorModal } from './ErrorModal'; + +import styles from './css/BlockDisk.module.css'; + +/** + * Storage structure for drive state returned via callbacks. + */ +export interface BlockDiskData { + number: 1 | 2; + on: boolean; + name?: string; +} + +/** + * Interface for BlockDisk. + */ +export interface BlockDiskProps extends BlockDiskData { + smartPort: SmartPort | undefined; +} + +/** + * BlockDisk component + * + * Includes drive light, disk name and side, and UI for loading disks. + * + * @param smartPort SmartPort object + * @param number Drive 1 or 2 + * @param on Active state + * @param name Disk name identifier + * @param side Disk side identifier + * @returns BlockDisk component + */ +export const BlockDisk = ({ smartPort, number, on, name }: BlockDiskProps) => { + const [modalOpen, setModalOpen] = useState(false); + const [error, setError] = useState(); + + const doClose = useCallback(() => { + setModalOpen(false); + }, []); + + const onOpenModal = useCallback(() => { + setModalOpen(true); + }, []); + + return ( +
+ + +
+ +
+ {name} +
+
+ ); +}; diff --git a/js/components/BlockFileModal.tsx b/js/components/BlockFileModal.tsx new file mode 100644 index 0000000..6b76bb0 --- /dev/null +++ b/js/components/BlockFileModal.tsx @@ -0,0 +1,77 @@ +import { h, Fragment } from 'preact'; +import { useCallback, useState } from 'preact/hooks'; +import { DriveNumber, BLOCK_FORMATS } from '../formats/types'; +import { ErrorModal } from './ErrorModal'; +import { FileChooser } from './FileChooser'; +import { Modal, ModalContent, ModalFooter } from './Modal'; +import { loadLocalBlockFile, getHashParts, setHashParts } from './util/files'; +import SmartPort from 'js/cards/smartport'; +import { useHash } from './hooks/useHash'; +import { noAwait } from './util/promises'; + +import styles from './css/BlockFileModal.module.css'; + +const DISK_TYPES: FilePickerAcceptType[] = [ + { + description: 'Disk Images', + accept: { 'application/octet-stream': BLOCK_FORMATS.map(x => '.' + x) }, + } +]; + +interface BlockFileModalProps { + isOpen: boolean; + smartPort: SmartPort | undefined; + number: DriveNumber; + onClose: (closeBox?: boolean) => void; +} + +export const BlockFileModal = ({ smartPort, number, onClose, isOpen } : BlockFileModalProps) => { + const [handles, setHandles] = useState(); + const [busy, setBusy] = useState(false); + const [empty, setEmpty] = useState(true); + const [error, setError] = useState(); + const hash = useHash(); + + const doCancel = useCallback(() => onClose(true), [onClose]); + + const doOpen = useCallback(async () => { + const hashParts = getHashParts(hash); + + if (smartPort && handles?.length === 1) { + hashParts[number] = ''; + setBusy(true); + try { + await loadLocalBlockFile(smartPort, number, await handles[0].getFile()); + } catch (error) { + setError(error); + } finally { + setBusy(false); + onClose(); + } + } + + setHashParts(hashParts); + }, [handles, hash, smartPort, number, onClose]); + + const onChange = useCallback((handles: FileSystemFileHandle[]) => { + setEmpty(handles.length === 0); + setHandles(handles); + }, []); + + return ( + <> + + +
+ +
+ + + + + + + + + ); +}; diff --git a/js/components/DiskII.tsx b/js/components/DiskII.tsx index fb97717..b1c5758 100644 --- a/js/components/DiskII.tsx +++ b/js/components/DiskII.tsx @@ -1,11 +1,9 @@ import { h } from 'preact'; -import { useCallback, useEffect, useState } from 'preact/hooks'; +import { useCallback, useState } from 'preact/hooks'; import cs from 'classnames'; import Disk2 from '../cards/disk2'; -import { FileModal } from './FileModal'; -import { loadJSON, loadHttpFile, getHashParts } from './util/files'; import { ErrorModal } from './ErrorModal'; -import { useHash } from './hooks/useHash'; +import { FileModal } from './FileModal'; import styles from './css/DiskII.module.css'; @@ -30,7 +28,6 @@ export interface DiskIIProps extends DiskIIData { * Disk II component * * Includes drive light, disk name and side, and UI for loading disks. - * Handles initial loading of disks specified in the hash. * * @param disk2 Disk2 object * @param number Drive 1 or 2 @@ -43,28 +40,6 @@ export const DiskII = ({ disk2, number, on, name, side }: DiskIIProps) => { const label = side ? `${name} - ${side}` : name; const [modalOpen, setModalOpen] = useState(false); const [error, setError] = useState(); - const [currentHash, setCurrentHash] = useState(); - - const hash = useHash(); - - useEffect(() => { - const hashParts = getHashParts(hash); - const newHash = hashParts[number]; - if (disk2 && newHash) { - const hashPart = decodeURIComponent(newHash); - if (hashPart !== currentHash) { - if (hashPart.match(/^https?:/)) { - loadHttpFile(disk2, number, hashPart) - .catch((e) => setError(e)); - } else { - const filename = `/json/disks/${hashPart}.json`; - loadJSON(disk2, number, filename) - .catch((e) => setError(e)); - } - setCurrentHash(hashPart); - } - } - }, [currentHash, disk2, hash, number]); const doClose = useCallback(() => { setModalOpen(false); diff --git a/js/components/Drives.tsx b/js/components/Drives.tsx index 1952c15..22fd5c9 100644 --- a/js/components/Drives.tsx +++ b/js/components/Drives.tsx @@ -1,26 +1,53 @@ -import { h, Fragment } from 'preact'; -import {useEffect, useState } from 'preact/hooks'; +import { h } from 'preact'; +import { useCallback, useEffect, useState } from 'preact/hooks'; import Disk2, { Callbacks } from '../cards/disk2'; import Apple2IO from '../apple2io'; import { DiskII, DiskIIData } from './DiskII'; +import SmartPort from 'js/cards/smartport'; +import CPU6502 from 'js/cpu6502'; +import { BlockDisk } from './BlockDisk'; +import { ErrorModal } from './ErrorModal'; +import { ProgressModal } from './ProgressModal'; +import { loadHttpUnknownFile, getHashParts, loadJSON } from './util/files'; +import { useHash } from './hooks/useHash'; +import { DriveNumber } from 'js/formats/types'; +import { Ready } from './util/promises'; + +import styles from './css/Drives.module.css'; /** * Interface for Drives component. */ export interface DrivesProps { + cpu: CPU6502 | undefined; io: Apple2IO | undefined; + enhanced: boolean; sectors: number; + ready: Ready; } /** * Drive interface component. Presents the interface to load disks. - * Provides the callback to the Disk2 object to update the DiskII - * components. + * Provides the callback to the Disk2 and SmartPort objects to update + * the DiskII and BlockDisk components. + * Handles initial loading of disks specified in the hash. * + * @cpu CPU object * @param io Apple I/O object + * @param sectors 13 or 16 sector rom mode + * @enhanced Whether to create a SmartPort ROM device + * @ready Signal disk availability * @returns Drives component */ -export const Drives = ({ io, sectors }: DrivesProps) => { +export const Drives = ({ cpu, io, sectors, enhanced, ready }: DrivesProps) => { + const [current, setCurrent] = useState(0); + const [error, setError] = useState(); + const [total, setTotal] = useState(0); + const onProgress = useCallback((current: number, total: number) => { + setCurrent(current); + setTotal(total); + }, []); + const [disk2, setDisk2] = useState(); const [data1, setData1] = useState({ on: false, @@ -32,9 +59,54 @@ export const Drives = ({ io, sectors }: DrivesProps) => { number: 2, name: 'Disk 2', }); + const [smartData1, setSmartData1] = useState({ + on: false, + number: 1, + name: 'HD 1' + }); + const [smartData2, setSmartData2] = useState({ + on: false, + number: 2, + name: 'HD 2' + }); + + const [smartPort, setSmartPort] = useState(); + + const hash = useHash(); + + useEffect(() => { + if (smartPort && disk2) { + const hashParts = getHashParts(hash); + let loading = 0; + for (const drive of [1, 2] as DriveNumber[]) { + if (hashParts && hashParts[drive]) { + const hashPart = decodeURIComponent(hashParts[drive]); + if (hashPart.match(/^https?:/)) { + loading++; + loadHttpUnknownFile(disk2, smartPort, drive, hashPart, onProgress) + .catch((e) => setError(e)) + .finally(() => { + if (--loading === 0) { + ready.onReady(); + } + setCurrent(0); + setTotal(0); + }); + } else { + const url = `/json/disks/${hashPart}.json`; + loadJSON(disk2, drive, url).catch((e) => setError(e)); + } + } + } + if (!loading) { + ready.onReady(); + } + } + }, [hash, onProgress, disk2, ready, smartPort]); useEffect(() => { const setData = [setData1, setData2]; + const setSmartData = [setSmartData1, setSmartData2]; const callbacks: Callbacks = { driveLight: (drive, on) => { setData[drive - 1]?.(data => ({...data, on })); @@ -51,17 +123,42 @@ export const Drives = ({ io, sectors }: DrivesProps) => { } }; - if (io) { + const smartPortCallbacks: Callbacks = { + driveLight: (drive, on) => { + setSmartData[drive - 1]?.(data => ({...data, on })); + }, + label: (drive, name, side) => { + setSmartData[drive - 1]?.(data => ({ + ...data, + name: name ?? `HD ${drive}`, + side, + })); + }, + dirty: () => {/* Unused */} + }; + + if (cpu && io) { const disk2 = new Disk2(io, callbacks, sectors); io.setSlot(6, disk2); setDisk2(disk2); + const smartPort = new SmartPort(cpu, smartPortCallbacks, { block: !enhanced }); + io.setSlot(7, smartPort); + setSmartPort(smartPort); } - }, [io, sectors]); + }, [cpu, enhanced, io, sectors]); return ( - <> - - - +
+ + +
+ + +
+
+ + +
+
); }; diff --git a/js/components/FileModal.tsx b/js/components/FileModal.tsx index 4ba5594..d7c95b8 100644 --- a/js/components/FileModal.tsx +++ b/js/components/FileModal.tsx @@ -2,7 +2,7 @@ import { h, Fragment, JSX } from 'preact'; import { useCallback, useState } from 'preact/hooks'; import { DiskDescriptor, DriveNumber, NibbleFormat, NIBBLE_FORMATS } from '../formats/types'; import { Modal, ModalContent, ModalFooter } from './Modal'; -import { loadLocalFile, loadJSON, getHashParts, setHashParts } from './util/files'; +import { loadLocalNibbleFile, loadJSON, getHashParts, setHashParts } from './util/files'; import DiskII from '../cards/disk2'; import { ErrorModal } from './ErrorModal'; @@ -66,7 +66,7 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) => try { if (disk2 && handles?.length === 1) { hashParts[number] = ''; - await loadLocalFile(disk2, number, await handles[0].getFile()); + await loadLocalNibbleFile(disk2, number, await handles[0].getFile()); } if (disk2 && filename) { const name = filename.match(/\/([^/]+).json$/) || ['', '']; diff --git a/js/components/ProgressModal.tsx b/js/components/ProgressModal.tsx new file mode 100644 index 0000000..d16629a --- /dev/null +++ b/js/components/ProgressModal.tsx @@ -0,0 +1,29 @@ +import { h } from 'preact'; +import { Modal, ModalContent } from './Modal'; + +import styles from './css/ProgressModal.module.css'; + +export interface ErrorProps { + title: string; + current: number | undefined; + total: number | undefined; +} + +export const ProgressModal = ({ title, current, total } : ErrorProps) => { + if (current && total) { + return ( + + +
+
+
+ + + ); + } else { + return null; + } +}; diff --git a/js/components/css/BlockDisk.module.css b/js/components/css/BlockDisk.module.css new file mode 100644 index 0000000..c91527d --- /dev/null +++ b/js/components/css/BlockDisk.module.css @@ -0,0 +1,38 @@ +.disk { + align-items: center; + display: flex; + flex-grow: 1; +} + +.diskLight { + margin: 5px; + background-image: url(../../../css/green-off-16.png); + background-size: 16px 16px; + flex-shrink: 0; + width: 16px; + height: 16px; +} + +.diskLight.on { + background-image: url(../../../css/green-on-16.png); +} + +.diskLabel { + color: #000; + font-family: sans-serif; + font-weight: bold; + margin-right: 0.5em; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex-grow: 1; +} + +@media only screen and (min-resolution: 1.25dppx) { + .diskLight { + background-image: url(../../../css/green-off-32.png); + } + .diskLight.on { + background-image: url(../../../css/green-on-32.png); + } +} diff --git a/js/components/css/BlockFileModal.module.css b/js/components/css/BlockFileModal.module.css new file mode 100644 index 0000000..f238b28 --- /dev/null +++ b/js/components/css/BlockFileModal.module.css @@ -0,0 +1,3 @@ +.modalContent { + width: 320px; +} diff --git a/js/components/css/DiskII.module.css b/js/components/css/DiskII.module.css index f10501e..0e3ac2b 100644 --- a/js/components/css/DiskII.module.css +++ b/js/components/css/DiskII.module.css @@ -2,12 +2,12 @@ align-items: center; display: flex; flex-grow: 1; - max-width: 50%; } .diskLight { margin: 5px; background-image: url(../../../css/red-off-16.png); + background-size: 16px 16px; flex-shrink: 0; width: 16px; height: 16px; @@ -27,3 +27,12 @@ white-space: nowrap; flex-grow: 1; } + +@media only screen and (min-resolution: 1.25dppx) { + .diskLight { + background-image: url(../../../css/red-off-32.png); + } + .diskLight.on { + background-image: url(../../../css/red-on-32.png); + } +} diff --git a/js/components/css/Drives.module.css b/js/components/css/Drives.module.css new file mode 100644 index 0000000..37ab8d8 --- /dev/null +++ b/js/components/css/Drives.module.css @@ -0,0 +1,10 @@ +.drives { + display: flex; + width: 100%; +} + +.driveBay { + display: flex; + flex-direction: column; + flex: 1 1 50%; +} diff --git a/js/components/css/Inset.module.css b/js/components/css/Inset.module.css index 2b0c332..1adea2f 100644 --- a/js/components/css/Inset.module.css +++ b/js/components/css/Inset.module.css @@ -11,7 +11,6 @@ display: none; } - .inset button { min-width: 36px; margin: 0 2px; diff --git a/js/components/css/ProgressModal.module.css b/js/components/css/ProgressModal.module.css new file mode 100644 index 0000000..f95a9c2 --- /dev/null +++ b/js/components/css/ProgressModal.module.css @@ -0,0 +1,10 @@ +.progressContainer { + width: 320px; + height: 20px; + background: #000 +} + +.progressBar { + height: 20px; + background: #0f0; +} diff --git a/js/components/util/files.ts b/js/components/util/files.ts index 6d5f52e..a23fee6 100644 --- a/js/components/util/files.ts +++ b/js/components/util/files.ts @@ -1,11 +1,19 @@ import { includes } from 'js/types'; import { initGamepad } from 'js/ui/gamepad'; import { + BlockFormat, + BLOCK_FORMATS, + DISK_FORMATS, DriveNumber, JSONDisk, - NIBBLE_FORMATS + MassStorage, + NibbleFormat, + NIBBLE_FORMATS, } from 'js/formats/types'; -import DiskII from 'js/cards/disk2'; +import Disk2 from 'js/cards/disk2'; +import SmartPort from 'js/cards/smartport'; + +type ProgressCallback = (current: number, total: number) => void; /** * Routine to split a legacy hash into parts for disk loading @@ -26,17 +34,19 @@ export const setHashParts = (parts: string[]) => { window.location.hash = `#${parts[1]}` + (parts[2] ? `|${parts[2]}` : ''); }; -/** - * Local file loading routine. Allows a File object from a file - * selection form element to be loaded. - * - * @param disk2 Disk2 object - * @param number Drive number - * @param file Browser File object to load - * @returns true if successful - */ +export const getNameAndExtension = (url: string) => { + const urlParts = url.split('/'); + const file = urlParts.pop() || url; + const fileParts = file.split('.'); + const ext = fileParts.pop()?.toLowerCase() || '[none]'; + const name = decodeURIComponent(fileParts.join('.')); + + return { name, ext }; +}; + export const loadLocalFile = ( - disk2: DiskII, + storage: MassStorage, + formats: typeof NIBBLE_FORMATS | typeof BLOCK_FORMATS, number: DriveNumber, file: File, ) => { @@ -48,16 +58,12 @@ export const loadLocalFile = ( const ext = parts.pop()?.toLowerCase() || '[none]'; const name = parts.join('.'); - if (includes(NIBBLE_FORMATS, ext)) { - if (result.byteLength >= 800 * 1024) { - reject(`Unable to load ${name}`); + if (includes(formats, ext)) { + initGamepad(); + if (storage.setBinary(number, name, ext, result)) { + resolve(true); } else { - initGamepad(); - if (disk2.setBinary(number, name, ext, result)) { - resolve(true); - } else { - reject(`Unable to load ${name}`); - } + reject(`Unable to load ${name}`); } } else { reject(`Extension "${ext}" not recognized.`); @@ -67,6 +73,32 @@ export const loadLocalFile = ( }); }; +/** + * Local file loading routine. Allows a File object from a file + * selection form element to be loaded. + * + * @param smartPort SmartPort object + * @param number Drive number + * @param file Browser File object to load + * @returns true if successful + */ +export const loadLocalBlockFile = (smartPort: SmartPort, number: DriveNumber, file: File) => { + return loadLocalFile(smartPort, BLOCK_FORMATS, number, file); +}; + +/** + * Local file loading routine. Allows a File object from a file + * selection form element to be loaded. + * + * @param disk2 Disk2 object + * @param number Drive number + * @param file Browser File object to load + * @returns true if successful + */ +export const loadLocalNibbleFile = (disk2: Disk2, number: DriveNumber, file: File) => { + return loadLocalFile(disk2, NIBBLE_FORMATS, number, file); +}; + /** * JSON loading routine, loads a JSON file at the given URL. Requires * proper cross domain loading headers if the URL is not on the same server @@ -77,37 +109,27 @@ export const loadLocalFile = ( * @param url URL, relative or absolute to JSON file * @returns true if successful */ -export const loadJSON = async (disk2: DiskII, number: DriveNumber, url: string) => { +export const loadJSON = async ( + disk2: Disk2, + number: DriveNumber, + url: string, +) => { const response = await fetch(url); if (!response.ok) { throw new Error(`Error loading: ${response.statusText}`); } const data = await response.json() as JSONDisk; if (!includes(NIBBLE_FORMATS, data.type)) { - throw new Error(`Type ${data.type} not recognized.`); + throw new Error(`Type "${data.type}" not recognized.`); } disk2.setDisk(number, data); initGamepad(data.gamepad); }; -/** - * HTTP loading routine, loads a file at the given URL. Requires - * proper cross domain loading headers if the URL is not on the same server - * as the emulator. Only supports nibble based formats at the moment. - * - * @param disk2 Disk2 object - * @param number Drive number - * @param url URL, relative or absolute to JSON file - * @returns true if successful - */ export const loadHttpFile = async ( - disk2: DiskII, - number: DriveNumber, url: string, -) => { - if (url.endsWith('.json')) { - return loadJSON(disk2, number, url); - } + onProgress?: ProgressCallback +): Promise => { const response = await fetch(url); if (!response.ok) { throw new Error(`Error loading: ${response.statusText}`); @@ -116,13 +138,16 @@ export const loadHttpFile = async ( throw new Error('Error loading: no body'); } const reader = response.body.getReader(); + const contentLength = parseInt(response.headers.get('content-length') || '0', 10); let received = 0; const chunks: Uint8Array[] = []; let result = await reader.read(); + onProgress?.(1, contentLength); while (!result.done) { chunks.push(result.value); received += result.value.length; + onProgress?.(received, contentLength); result = await reader.read(); } @@ -133,14 +158,87 @@ export const loadHttpFile = async ( offset += chunk.length; } - const urlParts = url.split('/'); - const file = urlParts.pop() || url; - const fileParts = file.split('.'); - const ext = fileParts.pop()?.toLowerCase() || '[none]'; - const name = decodeURIComponent(fileParts.join('.')); + return data.buffer; +}; + +/** + * HTTP loading routine, loads a file at the given URL. Requires + * proper cross domain loading headers if the URL is not on the same server + * as the emulator. + * + * @param smartPort SmartPort object + * @param number Drive number + * @param url URL, relative or absolute to JSON file + * @returns true if successful + */ +export const loadHttpBlockFile = async ( + smartPort: SmartPort, + number: DriveNumber, + url: string, + onProgress?: ProgressCallback +): Promise => { + const { name, ext } = getNameAndExtension(url); + if (!includes(BLOCK_FORMATS, ext)) { + throw new Error(`Extension "${ext}" not recognized.`); + } + const data = await loadHttpFile(url, onProgress); + smartPort.setBinary(number, name, ext, data); + initGamepad(); + + return true; +}; + +/** + * HTTP loading routine, loads a file at the given URL. Requires + * proper cross domain loading headers if the URL is not on the same server + * as the emulator. + * + * @param disk2 Disk2 object + * @param number Drive number + * @param url URL, relative or absolute to JSON file + * @returns true if successful + */ +export const loadHttpNibbleFile = async ( + disk2: Disk2, + number: DriveNumber, + url: string, + onProgress?: ProgressCallback +) => { + if (url.endsWith('.json')) { + return loadJSON(disk2, number, url); + } + const { name, ext } = getNameAndExtension(url); if (!includes(NIBBLE_FORMATS, ext)) { throw new Error(`Extension "${ext}" not recognized.`); } + const data = await loadHttpFile(url, onProgress); disk2.setBinary(number, name, ext, data); initGamepad(); + return loadHttpFile(url, onProgress); +}; + +export const loadHttpUnknownFile = async ( + disk2: Disk2, + smartPort: SmartPort, + number: DriveNumber, + url: string, + onProgress?: ProgressCallback, +) => { + const data = await loadHttpFile(url, onProgress); + const { name, ext } = getNameAndExtension(url); + if (includes(DISK_FORMATS, ext)) { + if (data.byteLength >= 800 * 1024) { + if (includes(BLOCK_FORMATS, ext)) { + smartPort.setBinary(number, name, ext, data); + } else { + throw new Error(`Unable to load "${name}"`); + } + } else if (includes(NIBBLE_FORMATS, ext)) { + disk2.setBinary(number, name, ext, data); + } else { + throw new Error(`Unable to load "${name}"`); + } + } else { + throw new Error(`Extension "${ext}" not recognized.`); + } }; diff --git a/js/components/util/keyboard.ts b/js/components/util/keyboard.ts index 13f374a..48d75cc 100644 --- a/js/components/util/keyboard.ts +++ b/js/components/util/keyboard.ts @@ -161,7 +161,6 @@ const uiKitMap = { 'UIKeyInputEscape': 0x1B } as const; - export const isUiKitKey = (k: string): k is KnownKeys => { return k in uiKitMap; }; diff --git a/js/components/util/promises.ts b/js/components/util/promises.ts index d60a46a..ee8e872 100644 --- a/js/components/util/promises.ts +++ b/js/components/util/promises.ts @@ -10,3 +10,22 @@ export type NoAwait Promise> = export function noAwait Promise>(f: F): NoAwait { return f as NoAwait; } + +/** + * Utility class that allows a promise to be passed to a + * service to be resolved. + */ + +export class Ready { + onError: (value?: unknown) => void; + onReady: (value?: unknown) => void; + + ready: Promise; + + constructor(private errorHandler = console.error) { + this.ready = new Promise((resolve, reject) => { + this.onReady = resolve; + this.onError = reject; + }).catch(this.errorHandler); + } +} diff --git a/js/formats/types.ts b/js/formats/types.ts index 104106f..33bca9f 100644 --- a/js/formats/types.ts +++ b/js/formats/types.ts @@ -215,6 +215,6 @@ export type FormatWorkerResponse = /** * Block device common interface */ -export interface MassStorage { - setBinary(drive: number, name: string, ext: BlockFormat, data: ArrayBuffer): boolean; +export interface MassStorage { + setBinary(drive: number, name: string, ext: T, data: ArrayBuffer): boolean; } diff --git a/js/main2.ts b/js/main2.ts index 5aeddd6..9eaba1f 100644 --- a/js/main2.ts +++ b/js/main2.ts @@ -74,7 +74,7 @@ apple2.ready.then(() => { const slinky = new RAMFactor(1024 * 1024); const disk2 = new DiskII(io, driveLights, sectors); const clock = new Thunderclock(); - const smartport = new SmartPort(cpu, { block: true }); + const smartport = new SmartPort(cpu, null, { block: true }); io.setSlot(0, lc); io.setSlot(1, parallel); diff --git a/js/main2e.ts b/js/main2e.ts index 5fd4b93..2280d58 100644 --- a/js/main2e.ts +++ b/js/main2e.ts @@ -63,7 +63,7 @@ apple2.ready.then(() => { const slinky = new RAMFactor(1024 * 1024); const disk2 = new DiskII(io, driveLights); const clock = new Thunderclock(); - const smartport = new SmartPort(cpu, { block: !enhanced }); + const smartport = new SmartPort(cpu, null, { block: !enhanced }); const mouse = new Mouse(cpu, mouseUI); io.setSlot(1, parallel); diff --git a/js/ui/apple2.ts b/js/ui/apple2.ts index 91050ef..99102d3 100644 --- a/js/ui/apple2.ts +++ b/js/ui/apple2.ts @@ -13,7 +13,8 @@ import { MassStorage, NIBBLE_FORMATS, JSONBinaryImage, - JSONDisk + JSONDisk, + BlockFormat } from '../formats/types'; import { initGamepad } from './gamepad'; import KeyBoard from './keyboard'; @@ -74,7 +75,7 @@ let stats: Stats; let vm: VideoModes; let tape: Tape; let _disk2: DiskII; -let _massStorage: MassStorage; +let _massStorage: MassStorage; let _printer: Printer; let audio: Audio; let screen: Screen; @@ -270,8 +271,8 @@ export function doLoad(event: MouseEvent|KeyboardEvent) { } else if (url) { let filename; MicroModal.close('load-modal'); - if (url.substr(0, 6) === 'local:') { - filename = url.substr(6); + if (url.slice(0, 6) === 'local:') { + filename = url.slice(6); if (filename === '__manage') { openManage(); } else { @@ -450,10 +451,8 @@ export function doLoadHTTP(drive: DriveNumber, url?: string) { const name = decodeURIComponent(fileParts.join('.')); if (includes(DISK_FORMATS, ext)) { if (data.byteLength >= 800 * 1024) { - if ( - includes(BLOCK_FORMATS, ext) && - _massStorage.setBinary(drive, name, ext, data) - ) { + if (includes(BLOCK_FORMATS, ext)) { + _massStorage.setBinary(drive, name, ext, data); initGamepad(); } } else { @@ -842,7 +841,12 @@ function hup() { return results[1]; } -function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, printer: Printer, e: boolean) { +function onLoaded( + apple2: Apple2, + disk2: DiskII, + massStorage: MassStorage, + printer: Printer, e: boolean +) { _apple2 = apple2; cpu = _apple2.getCPU(); io = _apple2.getIO(); @@ -950,7 +954,11 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print ); } -export function initUI(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, printer: Printer, e: boolean) { +export function initUI( + apple2: Apple2, + disk2: DiskII, + massStorage: MassStorage, + printer: Printer, e: boolean) { window.addEventListener('load', () => { onLoaded(apple2, disk2, massStorage, printer, e); }); diff --git a/js/ui/keyboard.ts b/js/ui/keyboard.ts index efd1010..b715060 100644 --- a/js/ui/keyboard.ts +++ b/js/ui/keyboard.ts @@ -354,7 +354,7 @@ export default class KeyBoard { const buildLabel = (k: string) => { const span = document.createElement('span'); span.innerHTML = k; - if (k.length > 1 && k.substr(0, 1) !== '&') + if (k.length > 1 && k.slice(0, 1) !== '&') span.classList.add('small'); return span; };