js-dos 0.80.25

package/src/window/dos/controls/mouse/mouse-locked.ts

@@ -0,0 +1,51 @@
+import { CommandInterface } from "emulators";
+import { mount } from "./mount";
+
+export function mouseCapture(sensitivity: number,
+                             pointerButton: number,
+                             el: HTMLElement,
+                             ci: CommandInterface) {
+    function isNotLocked() {
+        return document.pointerLockElement !== el;
+    }
+
+    function onMouseDown(x: number, y: number, button: number) {
+        if (isNotLocked()) {
+            const requestPointerLock = el.requestPointerLock ||
+                (el as any).mozRequestPointerLock ||
+                (el as any).webkitRequestPointerLock;
+
+            requestPointerLock.call(el);
+
+            return;
+        }
+
+        ci.sendMouseButton(button, true);
+    }
+
+    function onMouseUp(x: number, y: number, button: number) {
+        if (isNotLocked()) {
+            return;
+        }
+
+        ci.sendMouseButton(button, false);
+    }
+
+    function onMouseMove(x: number, y: number, mX: number, mY: number) {
+        if (isNotLocked()) {
+            return;
+        }
+
+        if (mX === 0 && mY === 0) {
+            return;
+        }
+
+        (ci as any).sendMouseRelativeMotion(mX * sensitivity, mY * sensitivity);
+    }
+
+    function onMouseLeave(x: number, y: number) {
+        // nothing to do
+    }
+
+    return mount(el, pointerButton, onMouseDown, onMouseMove, onMouseUp, onMouseLeave);
+}

package/src/window/dos/controls/mouse/mouse-not-locked.ts

@@ -0,0 +1,84 @@
+import { CommandInterface } from "emulators";
+import { mount } from "./mount";
+
+const insensitivePadding = 1 / 100;
+
+export function mouseDefault(pointerNumber: number,
+                             el: HTMLElement,
+                             ci: CommandInterface) {
+    const mapXY = (x: number, y: number) => doMapXY(x, y, el, ci);
+
+    if (document.pointerLockElement === el) {
+        document.exitPointerLock();
+    }
+
+    function onMouseDown(x: number, y: number, button: number) {
+        const xy = mapXY(x, y);
+        ci.sendMouseMotion(xy.x, xy.y);
+        ci.sendMouseButton(button, true);
+    }
+
+    function onMouseUp(x: number, y: number, button: number) {
+        const xy = mapXY(x, y);
+        ci.sendMouseMotion(xy.x, xy.y);
+        ci.sendMouseButton(button, false);
+    }
+
+    function onMouseMove(x: number, y: number, mX: number, mY: number) {
+        const xy = mapXY(x, y);
+        ci.sendMouseMotion(xy.x, xy.y);
+    }
+
+    function onMouseLeave(x: number, y: number) {
+        const xy = mapXY(x, y);
+        ci.sendMouseMotion(xy.x, xy.y);
+    }
+
+    return mount(el, pointerNumber, onMouseDown, onMouseMove, onMouseUp, onMouseLeave);
+}
+
+function doMapXY(eX: number,
+                 eY: number,
+                 el: HTMLElement,
+                 ci: CommandInterface) {
+    const { width: containerWidth, height: containerHeight } = el.getBoundingClientRect();
+    const frameWidth = ci.width();
+    const frameHeight = ci.height();
+
+    const aspect = frameWidth / frameHeight;
+
+    let width = containerWidth;
+    let height = containerWidth / aspect;
+
+    if (height > containerHeight) {
+        height = containerHeight;
+        width = containerHeight * aspect;
+    }
+
+    const top = (containerHeight - height) / 2;
+    const left = (containerWidth - width) / 2;
+
+    let x = Math.max(0, Math.min(1, (eX - left) / width));
+    let y = Math.max(0, Math.min(1, (eY - top) / height));
+
+    if (x <= insensitivePadding) {
+        x = 0;
+    }
+
+    if (x >= (1 - insensitivePadding)) {
+        x = 1;
+    }
+
+    if (y <= insensitivePadding) {
+        y = 0;
+    }
+
+    if (y >= (1 - insensitivePadding)) {
+        y = 1;
+    }
+
+    return {
+        x,
+        y,
+    };
+}

package/src/window/dos/controls/mouse/mouse-swipe.ts

@@ -0,0 +1,57 @@
+import { CommandInterface } from "emulators";
+import { mount } from "./mount";
+
+const clickDelay = 500;
+const clickThreshold = 50;
+
+export function mouseSwipe(sensitivity: number,
+                           pointerButton: number,
+                           el: HTMLElement,
+                           ci: CommandInterface) {
+    let startedAt = -1;
+    let acc = 0;
+    let prevX = 0;
+    let prevY = 0;
+
+    const onMouseDown = (x: number, y: number) => {
+        startedAt = Date.now();
+        acc = 0;
+        prevX = x;
+        prevY = y;
+    };
+
+    function onMouseMove(x: number, y: number, mX: number, mY: number) {
+        if (mX === undefined) {
+            mX = x - prevX;
+        }
+
+        if (mY === undefined) {
+            mY = y - prevY;
+        }
+
+        prevX = x;
+        prevY = y;
+
+        if (mX === 0 && mY === 0) {
+            return;
+        }
+
+        acc += Math.abs(mX) + Math.abs(mY);
+
+        (ci as any).sendMouseRelativeMotion(mX * sensitivity * 2, mY * sensitivity * 2);
+    }
+
+    const onMouseUp = (x: number, y: number) => {
+        const delay = Date.now() - startedAt;
+
+        if (delay < clickDelay && acc < clickThreshold) {
+            const button = pointerButton ?? 0;
+            ci.sendMouseButton(button, true);
+            setTimeout(() => ci.sendMouseButton(button, false), 60);
+        }
+    };
+
+    const noop = () => {};
+
+    return mount(el, pointerButton, onMouseDown, onMouseMove, onMouseUp, noop);
+}

package/src/window/dos/controls/mouse/pointer.ts

@@ -0,0 +1,85 @@
+function initBind() {
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    const isTouch = isMobile && !!("ontouchstart" in window);
+    const isPointer = isMobile && (window.PointerEvent ? true : false);
+    const isMSPointer = isMobile && ((window as any).MSPointerEvent ? true : false);
+    let canLock = !isMobile;
+
+    const starters: string[] = [];
+    const changers: string[] = [];
+    const enders: string[] = [];
+    const leavers: string[] = [];
+    const prevents: string[] = [];
+
+    if (isPointer) {
+        starters.push("pointerdown");
+        enders.push("pointerup", "pointercancel");
+        changers.push("pointermove");
+        prevents.push("touchstart", "touchmove", "touchend");
+    } else if (isMSPointer) {
+        starters.push("MSPointerDown");
+        changers.push("MSPointerMove");
+        enders.push("MSPointerUp");
+    } else if (isTouch) {
+        canLock = false;
+        starters.push("touchstart", "mousedown");
+        changers.push("touchmove");
+        enders.push("touchend", "touchcancel", "mouseup");
+    } else {
+        starters.push("mousedown");
+        changers.push("mousemove");
+        enders.push("mouseup");
+        leavers.push("mouseleave");
+    }
+
+    return {
+        mobile: isMobile,
+        canLock,
+        starters,
+        changers,
+        enders,
+        prevents,
+        leavers,
+    };
+}
+
+export interface PointerState {
+    x: number,
+    y: number,
+    mX: number,
+    mY: number,
+    button?: number,
+}
+
+export function getPointerState(e: Event, el: HTMLElement): PointerState {
+    if (e.type.match(/^touch/)) {
+        const evt = e as TouchEvent;
+        const rect = el.getBoundingClientRect();
+        return {
+            x: evt.targetTouches[0].clientX - rect.x,
+            y: evt.targetTouches[0].clientY - rect.y,
+            mX: 0,
+            mY: 0,
+        };
+    } else if (e.type.match(/^pointer/)) {
+        const evt = e as PointerEvent;
+        return {
+            x: evt.offsetX,
+            y: evt.offsetY,
+            mX: evt.movementX,
+            mY: evt.movementY,
+        };
+    } else {
+        const evt = e as MouseEvent;
+        return {
+            x: evt.offsetX,
+            y: evt.offsetY,
+            mX: evt.movementX,
+            mY: evt.movementY,
+            button: evt.button === 0 ? 0 : 1,
+        };
+    }
+}
+
+export const pointer = initBind();
+

package/src/window/dos/controls/mouse.ts

@@ -0,0 +1,21 @@
+import { CommandInterface } from "emulators";
+import { mouseCapture } from "./mouse/mouse-locked";
+import { mouseDefault } from "./mouse/mouse-not-locked";
+import { mouseSwipe } from "./mouse/mouse-swipe";
+import { pointer } from "./mouse/pointer";
+
+export function mouse(lock: boolean,
+                      sensitivity: number,
+                      pointerButton: number,
+                      el: HTMLElement,
+                      ci: CommandInterface) {
+    if (lock && !pointer.canLock) {
+        return mouseSwipe(sensitivity, pointerButton, el, ci);
+    }
+
+    if (lock) {
+        return mouseCapture(sensitivity, pointerButton, el, ci);
+    }
+
+    return mouseDefault(pointerButton, el, ci);
+}

package/src/window/dos/dos-dhry2.tsx

@@ -0,0 +1,191 @@
+import { CommandInterface } from "emulators";
+import { useEffect, useState } from "preact/hooks";
+import { useSelector } from "react-redux";
+import { State } from "../../store";
+
+export const dhry2Bundle = "/b4b5275904d86a4ab8a20917b2b7e34f0df47bf7.jsdos";
+
+export function Dhry2Results(props: { ci: CommandInterface }) {
+    const ci = props.ci;
+    const backend = useSelector((state: State) => state.dos.backend);
+    const worker = useSelector((state: State) => state.dos.worker);
+
+    const [results, setResults] = useState<{
+        runs: number,
+        time: number,
+        vax: number,
+        pc: string | null,
+    }>({
+        runs: 0,
+        time: 0,
+        vax: 0,
+        pc: null,
+    });
+
+    const [stats, setStats] = useState<{sleepPerSec: number, cyclesPerMs: number}>({
+        sleepPerSec: 0,
+        cyclesPerMs: 0,
+    });
+
+    useEffect(() => {
+        const listeners: ((message: string) => void)[] = [];
+
+        ci.events().onStdout((message: string) => {
+            for (const next of listeners) {
+                next(message);
+            }
+        });
+
+        const oldStdoutFn = ci.events().onStdout;
+        ci.events().onStdout = (fn: (message: string) => void) => {
+            listeners.push(fn);
+        };
+
+        // listen program outpus for `~>dtime` marker
+        let startedAt = Date.now();
+        let prevSleepCount = 0;
+        let prevCycles = 0;
+        ci.events().onStdout((message) => {
+            if (!message.startsWith("dhry2:")) {
+                return;
+            }
+
+            ci.asyncifyStats().then((stats) => {
+                const dt = Date.now() - startedAt;
+                setStats({
+                    sleepPerSec: Math.round((stats.sleepCount - prevSleepCount) * 1000 / dt),
+                    cyclesPerMs: Math.round((stats.cycles - prevCycles) / dt),
+                });
+                startedAt = Date.now();
+                prevSleepCount = stats.sleepCount;
+                prevCycles = stats.cycles;
+            });
+
+            // eslint-disable-next-line
+            const [_, runsStr, deltaStr, vaxRatingStr] = message.split(" ");
+            const runs = Number.parseInt(runsStr);
+            const delta = Number.parseFloat(deltaStr);
+            const vaxRating = Number.parseFloat(vaxRatingStr);
+
+            if (delta >= 5000) {
+                setResults({
+                    runs,
+                    time: Math.round(delta * 10) / 10,
+                    vax: Math.round(vaxRating * 100) / 100,
+                    pc: getComparablePc(vaxRating),
+                });
+            } else {
+                setResults({
+                    runs,
+                    time: Math.round(delta * 10) / 10,
+                    vax: Math.round(vaxRating * 100) / 100,
+                    pc: null,
+                });
+            }
+        });
+
+        return () => {
+            ci.events().onStdout = oldStdoutFn;
+        };
+    }, [ci]);
+
+    return <div class="dhry2-window">
+        <div class="title">Dhrystone 2 Benchmark</div>
+        <div class="backend">Backend: {backend + "-" + (worker ? "worker" : "direct")}</div>
+        <div class="results">
+            <div>VAX:</div>
+            <div>{results.vax}</div>
+            <div>Cycles p/ms:</div>
+            <div>{stats.cyclesPerMs}</div>
+            <div>Sleep p/sec:</div>
+            <div>{stats.sleepPerSec}</div>
+            <div>Runs:</div>
+            <div>{results.runs}</div>
+            <div>Time:</div>
+            <div>{results.time} <span>ms</span></div>
+            {results.pc !== null && <div>PC:</div>}
+            {results.pc !== null && <div>{results.pc ?? "..."}</div>}
+        </div>
+    </div>;
+}
+
+
+function getComparablePc(vax: number): string {
+    let index = 0;
+    while ((index * 2 + 1) < results.length) {
+        if (results[index * 2 + 1] as number >= vax) {
+            break;
+        }
+
+        index++;
+    }
+
+    index = Math.min((results.length / 2 - 1), index);
+    return (results[index * 2] + "").trim();
+}
+
+// Reuslts from
+// http://www.roylongbottom.org.uk/dhrystone%20results.htm
+const results = [
+    "AMD 80386 40MHz", 13.7,
+    "IBM 486D2 50MHz", 22.4,
+    "80486 DX2 66MHz", 35.3,
+    "IBM 486BL 100MHz", 40.9,
+    "AMD 5X86 133MHz", 84.5,
+    "Pentium 75MHz", 87.1,
+    "Cyrix P150 120MHz", 160,
+    "Pentium 100MHz", 122,
+    "Cyrix PP166 133MHz", 180,
+    "IBM 6x86 150MHz", 188,
+    "Pentium 133MHz", 181,
+    "Pentium 166MHz", 189,
+    "Cyrix PR233 188MHz", 232,
+    "Pentium 200MHz", 269,
+    "Pentium MMX 200MHz", 276,
+    "AMD K6 200MHz", 289,
+    "Pentium Pro 200MHz", 312,
+    "Celeron A 300MHz", 484,
+    "Pentium II 300MHz", 477,
+    "AMD K62 500MHz", 606,
+    "AMD K63 450MHz", 645,
+    "Pentium II 450MHz", 713,
+    "Celeron A 450MHz", 720,
+    "Pentium III 450MHz", 722,
+    "Pentium III 600MHz", 959,
+    "Athlon 600MHz", 942,
+    "Duron 600MHz", 999,
+    "Pentium III 1000MHz", 1595,
+    "PIII Tualatin 1200MHz", 1907,
+    "Pentium 4 1700MHz", 1843,
+    "Athlon Tbird 1000MHz", 1659,
+    "Duron 1000MHz", 1674,
+    "Celeron M 1295MHz", 2273,
+    "Atom 1600MHz", 1828,
+    "Pentium 4 1900MHz", 2003,
+    "Atom 1666MHz", 1948,
+    "P4 Xeon 2200MHz", 2265,
+    "Atom Z8300 1840MHz", 2686,
+    "Athlon 4 1600MHz", 2830,
+    "Pentium M 1862MHz", 3933,
+    "Ath4 Barton 1800MHz", 3172,
+    "Pentium 4E 3000MHz", 3553,
+    "Athlon XP 2080MHz", 3700,
+    "Turion 64 M 1900MHz", 3742,
+    "Pentium 4 3066MHz", 4012,
+    "Opteron 1991MHz", 3985,
+    "Core 2 Duo M 1830MHz", 4952,
+    "Athlon XP 2338MHz", 4160,
+    "Athlon 64 2150MHz", 4288,
+    "Pentium 4 3678MHz", 4227,
+    "Athlon 64 2211MHz", 4462,
+    "Celeron C2 M 2000MHz", 5275,
+    "Core 2 Duo 1 CP 2400MHz", 6446,
+    "Core i5 2467M 2300MHz", 4752,
+    "Phenom II 1 CP 3000MHz", 7615,
+    "Core i7 930 3066MHz", 8684,
+    "Core i7 860 3460MHz", 9978,
+    "Core i7 3930K 3800MHz", 11197,
+    "Core i7 4820K 3900MHz", 11867,
+    "Core i7 4820K 3900MHz", 11978,
+    "Core i7 3930K", 13877,
+];

package/src/window/dos/dos-runtime.tsx

@@ -0,0 +1,185 @@
+import { useDispatch, useSelector } from "react-redux";
+import { dosSlice, FitConstant } from "../../store/dos";
+import { State, store } from "../../store";
+import { CommandInterface } from "emulators";
+import { keyboard } from "./controls/keyboard";
+import { webGl as webglRender } from "./render/webgl";
+import { canvas as canvasRender } from "./render/canvas";
+import { audioNode } from "./sound/audio-node";
+import { useEffect } from "preact/hooks";
+import { mouse } from "./controls/mouse";
+import { KBD_0 } from "./controls/keys";
+import { uiSlice } from "../../store/ui";
+
+export function useDosRuntime(canvas: HTMLCanvasElement,
+                              ci: CommandInterface): void {
+    useLog(ci);
+    useRenderImage(canvas);
+    useStats(ci);
+    usePause(ci);
+    useKeyboard(ci);
+    useMouse(canvas, ci);
+    useRenderBackend(canvas, ci);
+    useAudioBackend(ci);
+}
+
+function useLog(ci: CommandInterface): void {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        ci.events().onMessage((msgType, ...args) => {
+            if (msgType === "error" && args[0]?.startsWith("[panic]")) {
+                dispatch(uiSlice.actions.showToast({
+                    message: args[0],
+                    intent: "panic",
+                }));
+            } else if (msgType === "log" && args[0]?.indexOf("sockdrive:") !== -1) {
+                dispatch(uiSlice.actions.cloudSaves(false));
+                if (args[0]?.indexOf("write=false") !== -1) {
+                    dispatch(uiSlice.actions.readOnlyWarning(true));
+                }
+            }
+        });
+    }, [ci, dispatch]);
+}
+
+function useRenderImage(canvas: HTMLCanvasElement): void {
+    const rendering = useSelector((state: State) => state.dos.imageRendering);
+    useEffect(() => {
+        canvas.style.imageRendering = rendering === "smooth" ? "auto" : rendering;
+    }, [canvas, rendering]);
+}
+
+function useMouse(canvas: HTMLCanvasElement,
+                  ci: CommandInterface): void {
+    const mouseCapture = useSelector((state: State) => state.dos.mouseCapture);
+    const mouseSensitivity = useSelector((state: State) => state.dos.mouseSensitivity);
+    useEffect(() => {
+        const sensistiviy = 0.1 + mouseSensitivity * 3;
+        return mouse(mouseCapture, sensistiviy, 0, canvas, ci);
+    }, [canvas, ci, mouseCapture, mouseSensitivity]);
+}
+
+function useKeyboard(ci: CommandInterface): void {
+    useEffect(() => {
+        return keyboard(window as any, ci);
+    }, [ci]);
+}
+
+function useRenderBackend(canvas: HTMLCanvasElement,
+                          ci: CommandInterface): void {
+    const renderBackend = useSelector((state: State) => state.dos.renderBackend);
+    const renderAspect = useSelector((state: State) => state.dos.renderAspect);
+
+    let aspect: number | undefined = undefined;
+    switch (renderAspect) {
+        case "1/1": aspect = 1; break;
+        case "5/4": aspect = 5 / 4; break;
+        case "4/3": aspect = 4 / 3; break;
+        case "16/10": aspect = 16 / 10; break;
+        case "16/9": aspect = 16 / 9; break;
+        case "Fit": aspect = FitConstant;
+        default:
+    }
+
+    useEffect(() => {
+        let unbind = () => { };
+
+        if (renderBackend === "canvas") {
+            unbind = canvasRender(canvas, ci, aspect);
+        } else {
+            try {
+                unbind = webglRender(canvas, ci, aspect);
+            } catch (e) {
+                console.error("Unalbe to start webgl render", e);
+                unbind = canvasRender(canvas, ci, aspect);
+            }
+        }
+
+        return unbind;
+    }, [canvas, ci, renderBackend, aspect]);
+}
+
+function useAudioBackend(ci: CommandInterface): void {
+    useEffect(() => {
+        const unbind = audioNode(ci, (setVolume) => {
+            let volume = 1;
+
+            const updateVolumeIfNeeded = () => {
+                const newVolume = store.getState().dos.volume;
+                if (Math.abs(volume - newVolume) >= 0.05) {
+                    setVolume(newVolume);
+                    volume = newVolume;
+                }
+            };
+
+            const unsubscribe = store.subscribe(updateVolumeIfNeeded);
+            return unsubscribe;
+        });
+
+        return unbind;
+    }, [ci]);
+}
+
+function usePause(ci: CommandInterface): void {
+    const paused = useSelector((state: State) => state.dos.paused);
+    useEffect(() => {
+        paused ? ci.pause() : ci.resume();
+    }, [paused, ci]);
+}
+
+function useStats(ci: CommandInterface): void {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        let prevCycles = 0;
+        let prevNonSkippableSleepCount = 0;
+        let prevSleepCount = 0;
+        let prevSleepTime = KBD_0;
+        let prevFrame = 0;
+        let prevSound = 0;
+        let prevMsgSent = 0;
+        let prevMsgRecv = 0;
+        let intervalStartedAt = Date.now();
+        const intervalId = setInterval(() => {
+            ci.asyncifyStats().then((stats) => {
+                const dtMs = Date.now() - intervalStartedAt;
+                const dtSec = dtMs / 1000;
+                if (dtSec > 0) {
+                    const dStats = {
+                        cyclesPerMs: Math.round((stats.cycles - prevCycles) / dtMs),
+                        nonSkippableSleepPreSec: Math.round((stats.nonSkippableSleepCount -
+                            prevNonSkippableSleepCount) / dtSec),
+                        sleepPerSec: Math.round((stats.sleepCount - prevSleepCount) / dtSec),
+                        sleepTimePerSec: Math.round((stats.sleepTime - prevSleepTime) / dtSec),
+                        framePerSec: Math.round((stats.messageFrame - prevFrame) / dtSec),
+                        soundPerSec: Math.round((stats.messageSound - prevSound) / dtSec),
+                        msgSentPerSec: Math.round((stats.messageSent - prevMsgSent) / dtSec),
+                        msgRecvPerSec: Math.round((stats.messageReceived - prevMsgRecv) / dtSec),
+                        netSent: stats.netSent,
+                        netRecv: stats.netRecv,
+                        driveSent: stats.driveSent,
+                        driveRecv: stats.driveRecv,
+                        driveRecvTime: stats.driveRecvTime,
+                        driveCacheHit: stats.driveCacheHit,
+                        driveCacheMiss: stats.driveCacheMiss,
+                        driveCacheUsed: stats.driveCacheUsed,
+                    };
+                    dispatch(dosSlice.actions.stats(dStats));
+
+                    prevCycles = stats.cycles;
+                    prevNonSkippableSleepCount = stats.nonSkippableSleepCount;
+                    prevSleepCount = stats.sleepCount;
+                    prevSleepTime = stats.sleepTime;
+                    prevFrame = stats.messageFrame;
+                    prevSound = stats.messageSound;
+                    prevMsgSent = stats.messageSent;
+                    prevMsgRecv = stats.messageReceived;
+                    intervalStartedAt = Date.now();
+                }
+            });
+        }, 3000);
+
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [dispatch, ci]);
+}