js-dos 8.1.4 → 8.1.6

package/src/window/dos/render/webgl.ts

@@ -1,173 +0,0 @@
-import { CommandInterface } from "emulators";
-import { resizeCanvas } from "./resize";
-
-const vsSource = `
-attribute vec4 aVertexPosition;
-attribute vec2 aTextureCoord;
-
-varying highp vec2 vTextureCoord;
-
-void main(void) {
-  gl_Position = aVertexPosition;
-  vTextureCoord = aTextureCoord;
-}
-`;
-
-const fsSource = `
-varying highp vec2 vTextureCoord;
-uniform sampler2D uSampler;
-
-
-void main(void) {
-  highp vec4 color = texture2D(uSampler, vTextureCoord);
-  gl_FragColor = vec4(color.r, color.g, color.b, 1.0);
-}
-`;
-
-export function webGl(canvas: HTMLCanvasElement,
-                      ci: CommandInterface,
-                      forceAspect?: number) {
-    const gl = canvas.getContext("webgl");
-    if (gl === null) {
-        throw new Error("Unable to create webgl context on given canvas");
-    }
-
-    const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
-    const vertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
-    const textureCoord = gl.getAttribLocation(shaderProgram, "aTextureCoord");
-    const uSampler = gl.getUniformLocation(shaderProgram, "uSampler");
-
-    initBuffers(gl, vertexPosition, textureCoord);
-
-    const texture = gl.createTexture();
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-
-    const pixel = new Uint8Array([0, 0, 0]);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB,
-        1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE,
-        pixel);
-
-    gl.useProgram(shaderProgram);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.uniform1i(uSampler, 0);
-
-    let frameWidth = 0;
-    let frameHeight = 0;
-
-    let requestAnimationFrameId: number | null = null;
-    let frame: Uint8Array | null = null;
-    let frameFormat: number = 0;
-
-    const updateTexture = () => {
-        if (frame !== null) {
-            gl.texImage2D(gl.TEXTURE_2D, 0, frameFormat,
-                frameWidth, frameHeight, 0, frameFormat, gl.UNSIGNED_BYTE,
-                frame);
-            frame = null;
-        }
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-
-        requestAnimationFrameId = null;
-    };
-
-    const onResize = () => {
-        resizeCanvas(canvas, frameWidth, frameHeight, forceAspect);
-    };
-
-    const onResizeFrame = (w: number, h: number) => {
-        frameWidth = w;
-        frameHeight = h;
-        canvas.width = frameWidth;
-        canvas.height = frameHeight;
-        frame = null;
-        gl.viewport(0, 0, frameWidth, frameHeight);
-        onResize();
-    };
-
-    ci.events().onFrameSize(onResizeFrame);
-    ci.events().onFrame((rgb, rgba) => {
-        frame = rgb != null ? rgb : rgba;
-        frameFormat = rgb != null ? gl.RGB : gl.RGBA;
-        if (requestAnimationFrameId === null) {
-            requestAnimationFrameId = requestAnimationFrame(updateTexture);
-        }
-    });
-
-    onResizeFrame(ci.width(), ci.height());
-
-    const resizeObserver = new ResizeObserver(onResize);
-    resizeObserver.observe(canvas.parentElement!);
-    window.addEventListener("resize", onResize);
-
-    return () => {
-        ci.events().onFrameSize(() => {});
-        ci.events().onFrame(() => {});
-        resizeObserver.disconnect();
-        window.removeEventListener("resize", onResize);
-    };
-}
-
-function initShaderProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string) {
-    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-    const shaderProgram = gl.createProgram() as WebGLShader;
-    gl.attachShader(shaderProgram, vertexShader);
-    gl.attachShader(shaderProgram, fragmentShader);
-    gl.linkProgram(shaderProgram);
-
-    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-        throw new Error("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
-    }
-
-    return shaderProgram;
-}
-
-function loadShader(gl: WebGLRenderingContext, shaderType: GLenum, source: string) {
-    const shader = gl.createShader(shaderType) as WebGLShader;
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        const info = gl.getShaderInfoLog(shader);
-        gl.deleteShader(shader);
-        throw new Error("An error occurred compiling the shaders: " + info);
-    }
-
-    return shader;
-}
-
-function initBuffers(gl: WebGLRenderingContext, vertexPosition: number, textureCoord: number) {
-    const positionBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-    const positions = [
-        -1.0, -1.0, 0.0,
-        1.0, -1.0, 0.0,
-        1.0, 1.0, 0.0,
-        -1.0, -1.0, 0.0,
-        1.0, 1.0, 0.0,
-        -1.0, 1.0, 0.0,
-    ];
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-    gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0);
-    gl.enableVertexAttribArray(vertexPosition);
-
-    const textureCoordBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
-    const textureCoordinates = [
-        0.0, 1.0,
-        1.0, 1.0,
-        1.0, 0.0,
-        0.0, 1.0,
-        1.0, 0.0,
-        0.0, 0.0,
-    ];
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
-        gl.STATIC_DRAW);
-
-    gl.vertexAttribPointer(textureCoord, 2, gl.FLOAT, false, 0, 0);
-    gl.enableVertexAttribArray(textureCoord);
-}

package/src/window/dos/sound/audio-node.ts

@@ -1,148 +0,0 @@
-import { CommandInterface } from "emulators";
-
-class SamplesQueue {
-    private samplesQueue: Float32Array[] = [];
-
-    push(samples: Float32Array) {
-        this.samplesQueue.push(samples);
-    }
-
-    length() {
-        let total = 0;
-        for (const next of this.samplesQueue) {
-            total += next.length;
-        }
-        return total;
-    }
-
-    writeTo(dst: Float32Array, bufferSize: number) {
-        let writeIt = 0;
-        while (this.samplesQueue.length > 0) {
-            const src = this.samplesQueue[0];
-            const toRead = Math.min(bufferSize - writeIt, src.length);
-            if (toRead === src.length) {
-                dst.set(src, writeIt);
-                this.samplesQueue.shift();
-            } else {
-                dst.set(src.slice(0, toRead), writeIt);
-                this.samplesQueue[0] = src.slice(toRead);
-            }
-
-            writeIt += toRead;
-
-            if (writeIt === bufferSize) {
-                break;
-            }
-        }
-
-        if (writeIt < bufferSize) {
-            dst.fill(0, writeIt);
-        }
-    }
-}
-
-export function audioNode(ci: CommandInterface,
-                          bindVolumeFn?: (fn: (volume: number) => void) => () => void) {
-    const sampleRate = ci.soundFrequency();
-    const channels = 1;
-
-    if (sampleRate === 0) {
-        console.warn("Can't create audio node with sampleRate === 0, ingnoring");
-        return () => {};
-    }
-
-    let audioContext: AudioContext | null = null;
-
-    if (typeof AudioContext !== "undefined") {
-        audioContext = new AudioContext({
-            sampleRate,
-            latencyHint: "interactive",
-        });
-    } else if (typeof (window as any).webkitAudioContext !== "undefined") {
-        // eslint-disable-next-line new-cap
-        audioContext = new (window as any).webkitAudioContext({
-            sampleRate,
-            latencyHint: "interactive",
-        });
-    }
-
-    if (audioContext == null) {
-        return () => {};
-    }
-
-    const samplesQueue = new SamplesQueue();
-    const bufferSize = 2048;
-    const preBufferSize = 2048;
-
-    ci.events().onSoundPush((samples) => {
-        if (samplesQueue.length() < bufferSize * 2 + preBufferSize) {
-            samplesQueue.push(samples);
-        }
-    });
-
-    const audioNode = audioContext.createScriptProcessor(bufferSize, 0, channels);
-    let started = false;
-
-    const onQueueProcess = (event: AudioProcessingEvent) => {
-        const numFrames = event.outputBuffer.length;
-        const numChannels = event.outputBuffer.numberOfChannels;
-        const samplesCount = samplesQueue.length();
-
-        if (!started) {
-            started = samplesCount >= preBufferSize;
-        }
-
-        if (!started) {
-            return;
-        }
-
-        for (let channel = 0; channel < numChannels; channel++) {
-            const channelData = event.outputBuffer.getChannelData(channel);
-            samplesQueue.writeTo(channelData, numFrames);
-        }
-    };
-
-    audioNode.onaudioprocess = onQueueProcess;
-
-    const gainNode = audioContext.createGain();
-    gainNode.connect(audioContext.destination);
-    audioNode.connect(gainNode);
-
-    gainNode.gain.value = 1.0;
-
-    let unbindVolumeFn: () => void;
-    if (bindVolumeFn) {
-        unbindVolumeFn = bindVolumeFn((volume: number) => {
-            gainNode.gain.value = volume;
-        });
-    }
-
-    const resumeWebAudio = () => {
-        if (audioContext !== null && audioContext.state === "suspended") {
-            audioContext.resume();
-        }
-    };
-
-    document.addEventListener("pointerdown", resumeWebAudio, { once: true });
-    document.addEventListener("keydown", resumeWebAudio, { once: true });
-
-    return () => {
-        ci.events().onSoundPush(() => {});
-
-        if (audioContext !== null) {
-            audioNode.disconnect();
-            gainNode.disconnect();
-            audioContext
-                .close()
-                .catch(console.error);
-            audioContext = null;
-        }
-
-        if (unbindVolumeFn !== undefined) {
-            unbindVolumeFn();
-        }
-
-        document.removeEventListener("pointerdown", resumeWebAudio);
-        document.removeEventListener("keydown", resumeWebAudio);
-    };
-}

package/src/window/error-window.tsx

@@ -1,9 +0,0 @@
-import { useSelector } from "react-redux";
-import { Error } from "../components/error";
-import { State } from "../store";
-
-export function ErrorWindow() {
-    const error = useSelector((state: State) => state.dos.error);
-    return <Error error={error} />;
-}
-

package/src/window/loading-window.tsx

@@ -1,54 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { formatSize, Loading } from "../components/loading";
-import { useT } from "../i18n";
-import { State } from "../store";
-import { authSlice } from "../store/auth";
-
-export function LoadingWindow() {
-    const t = useT();
-    const step = useSelector((state: State) => state.dos.step);
-    const received = useSelector((state: State) => state.storage.recived);
-    const total = useSelector((state: State) => state.storage.total);
-    const ready = useSelector((state: State) => state.storage.ready);
-
-    let head = t("loading");
-    let message = "100%";
-
-    switch (step) {
-        case "bnd-load": {
-            head = t("bundle_loading");
-            if (received > 0) {
-                message = `${formatSize(received)} / ${formatSize(total)}`;
-
-                if (total > 0) {
-                    message += ` (${Math.round(received * 1000 / total) / 10}%)`;
-                }
-            }
-        } break;
-        case "bnd-config": {
-            head = t("bundle_config");
-        }
-
-        default: {
-        }
-    }
-
-    return <div class="flex flex-col w-full h-full items-center justify-center">
-        <Loading head={head} message={message} />
-        {step === "bnd-load" && ready && <AccountNotReady />}
-    </div>;
-}
-
-function AccountNotReady() {
-    const t = useT();
-    const dispatch = useDispatch();
-    function skip() {
-        dispatch(authSlice.actions.ready());
-    }
-    return <>
-        <div class="mt-16 text-2xl">{t("loading_saves")}</div>
-        <div onClick={skip} class="self-center cursor-pointer underline mt-4 text-lg animate-pulse">
-            {t("account_not_ready")}
-        </div>
-    </>;
-}

package/src/window/prerun-window.tsx

@@ -1,121 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { BackendSelect, RenderAspectSelect, RenderSelect } from "../components/dos-option-select";
-import { dosSlice } from "../store/dos";
-import { State, useNonSerializableStore } from "../store";
-import { HardwareCheckbox, MouseCapture, SockdriveWrite, WorkerCheckbox } from "../components/dos-option-checkbox";
-import { MouseSensitiviySlider, VolumeSlider } from "../components/dos-option-slider";
-import { useT } from "../i18n";
-import { dispatchLoginAction } from "../store/ui";
-import { Emulators } from "emulators";
-
-declare const emulators: Emulators;
-
-export function PreRunWindow() {
-    const account = useSelector((state: State) => state.auth.account);
-    const emuVersion = useSelector((state: State) => state.dos.emuVersion);
-    const dispatch = useDispatch();
-    const t = useT();
-
-    function login() {
-        dispatchLoginAction(account, dispatch);
-    }
-
-    function openPremiumPage() {
-        window.open("https://js-dos.com/cloud-overview.html", "_blank");
-    }
-
-    return <div class="pre-run-window">
-        <Play class="mb-8" />
-
-        {(account === null) &&
-            <div class="flex flex-row mb-4 -mt-4 items-center">
-                <div class="btn btn-accent" onClick={login}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-                        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25
-                             0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786
-                             0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
-                    </svg>
-
-                    {t("please_login")}
-                </div>
-                <div class="ml-2 cursor-pointer" onClick={openPremiumPage}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025
-                                 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45
-                                 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                    </svg>
-                </div>
-            </div>
-        }
-        {account &&
-            <div class="flex flex-row mb-4 -mt-4 items-center">
-                <div class="btn btn-ghost" onClick={login}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-                        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25
-                             0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786
-                             0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
-                    </svg>
-
-                    {account.name ?? account.email}
-                </div>
-            </div>
-        }
-
-        <div class="flex flex-row flex-wrap justify-end">
-            <div class="flex flex-col items-end">
-                <BackendSelect />
-                <RenderSelect />
-                <SockdriveWrite />
-            </div>
-            <div class="ml-10 flex flex-col items-end">
-                <HardwareCheckbox />
-                <WorkerCheckbox />
-                <RenderAspectSelect />
-                <MouseCapture />
-            </div>
-        </div>
-
-        <MouseSensitiviySlider class="mt-4 w-full max-w-sm" />
-        <VolumeSlider class="w-full max-w-sm" />
-
-        <div class="text-center mt-8">jsdos/emu version:&nbsp;
-            <span class="text-ellipsis overflow-hidden">{JSDOS_VERSION}/{emuVersion}</span></div>
-    </div>;
-}
-
-function Play(props: { class?: string }) {
-    const configChanged = useSelector((state: State) => state.editor.configChanged);
-    const bundleConfig = useSelector((state: State) => state.editor.bundleConfig);
-    const nonSerializableStore = useNonSerializableStore();
-    const dispatch = useDispatch();
-
-    async function onPlay() {
-        if (configChanged) {
-            const config = bundleConfig;
-            const bundle = nonSerializableStore.loadedBundle?.bundle;
-            if (bundle === null || config === null || !ArrayBuffer.isView(bundle)) {
-                throw new Error("Unexpected behaviour (internal state is broken), bundle is null");
-            }
-
-            try {
-                nonSerializableStore.loadedBundle!.bundle =
-                    await emulators.bundleUpdateConfig(bundle, config);
-                dispatch(dosSlice.actions.bndPlay({}));
-            } catch (e) {
-                dispatch(dosSlice.actions.bndError((e as Error).message ?? "unexpected error"));
-            }
-        } else {
-            dispatch(dosSlice.actions.bndPlay({}));
-        }
-    }
-
-    return <div class={props.class + " cursor-pointer"} onClick={onPlay}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-            stroke-width="1.5" stroke="currentColor" class="w-48 h-48 play-button">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 010
-                .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
-        </svg>
-    </div>;
-}

package/src/window/select-window.tsx

@@ -1,118 +0,0 @@
-import { useDispatch, useStore } from "react-redux";
-import { dosSlice } from "../store/dos";
-import { useT } from "../i18n";
-import { loadBundleFromFile, loadBundleFromUrl, loadEmptyBundle } from "../load";
-import { useState } from "preact/hooks";
-import { uiSlice } from "../store/ui";
-import { Store } from "../store";
-
-const fileInput = document.createElement("input");
-fileInput.type = "file";
-
-export function SelectWindow() {
-    const t = useT();
-    const store = useStore() as Store;
-    const [useUrl, setUseUrl] = useState<boolean>(false);
-
-    if (useUrl) {
-        return <div class="select-window overflow-hidden flex-grow flex flex-col items-center justify-center px-8 py-8">
-            <Load />
-        </div>;
-    }
-
-    async function createEmpty() {
-        try {
-            await loadEmptyBundle(store).catch(console.error);
-        } catch (e: any) {
-            store.dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error"));
-        }
-    }
-
-    return <div class="select-window overflow-hidden flex-grow flex flex-col items-center justify-center px-8">
-        <div class="mb-4 text-center underline cursor-pointer hover:text-accent"
-            onClick={() => setUseUrl(true)}>{t("load_by_url")}</div>
-        <Upload />
-        <div class="mt-4 text-center">{t("upload_file")}</div>
-        <div class="mt-4 text-center underline cursor-pointer hover:text-accent"
-            onClick={createEmpty}>{t("create_empty")}</div>
-    </div>;
-}
-
-function Load() {
-    const t = useT();
-    const store = useStore();
-    const dispatch = useDispatch();
-    const [url, setUrl] = useState<string>("");
-    const [error, setError] = useState<string | null>(null);
-
-    async function loadBundle(url: string) {
-        dispatch(uiSlice.actions.frameNone());
-
-        let validUrl;
-        try {
-            validUrl = new URL(url);
-        } catch (e: any) {
-            setError(e.message);
-            return;
-        }
-
-        try {
-            await loadBundleFromUrl(validUrl.toString(), store);
-        } catch (e: any) {
-            dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error"));
-        }
-    }
-
-    return <>
-        <div class="form-control w-3/4 mb-4">
-            <label class="label">
-                <span class="label-text">{t("enter_url")}:</span>
-            </label>
-            <input type="text"
-                class="input w-full input-sm input-bordered"
-                onChange={(e) => setUrl(e.currentTarget.value ?? "")}
-                value={url}></input>
-        </div>
-        <div class="mt-4 text-center underline cursor-pointer hover:text-accent"
-            onClick={() => loadBundle(url)}>{t("load")}</div>
-        {error !== null &&
-            <div class="mt-8 text-center text-error">
-                {error}
-            </div>
-        }
-    </>;
-}
-
-function Upload() {
-    const store = useStore() as Store;
-
-    async function onFileChange() {
-        fileInput.removeEventListener("change", onFileChange);
-
-        if (fileInput.files === null || fileInput.files.length === 0) {
-            return;
-        }
-
-        const file = fileInput.files[0];
-        try {
-            await loadBundleFromFile(file, store).catch((e) => store.dispatch(dosSlice.actions.bndError(e.message)));
-        } catch (e: any) {
-            store.dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error"));
-        }
-    }
-
-    function onUpload() {
-        fileInput.addEventListener("change", onFileChange);
-        fileInput.click();
-    }
-
-    return <div class="cursor-pointer" onClick={onUpload}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-48 h-48 play-button">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9 13.5l3 3m0 0l3-3m-3
-                3v-6m1.06-4.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25
-                2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5
-                1.5 0 01-1.06-.44z" />
-        </svg>
-    </div>;
-}