js-dos 7.4.9 → 8.1.0

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

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,123 @@
+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 lang = useSelector((state: State) => state.i18n.lang);
+    const dispatch = useDispatch();
+    const t = useT();
+
+    function login() {
+        dispatchLoginAction(account, dispatch);
+    }
+
+    function openPremiumPage() {
+        window.open(lang === "ru" ?
+            "https://dos.zone/ru/blog/premium-subscription/" :
+            "https://dos.zone/blog/premium-subscription/", "_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">emu-version: <span class="text-ellipsis overflow-hidden">{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

@@ -0,0 +1,118 @@
+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>;
+}