js-dos 0.80.25

package/src/main.tsx

@@ -0,0 +1,195 @@
+import { render } from "preact";
+import "./index.css";
+
+import { Provider } from "react-redux";
+import { Ui } from "./ui";
+import { dosSlice } from "./store/dos";
+import { store } from "./store";
+import { initEmulators } from "./store/dos";
+// eslint-disable-next-line
+import { uiSlice } from "./store/ui";
+import { i18nSlice } from "./i18n";
+import { nonSerializableStore, postJsDosEvent } from "./non-serializable-store";
+import { getCache } from "./host/lcache";
+import { loadBundleFromConfg, loadBundleFromUrl } from "./load";
+
+import { DosOptions, DosProps, DosFn } from "./public/types";
+import { browserSetFullScreen } from "./host/fullscreen";
+
+let pollStep = "none";
+
+async function pollEvents() {
+    const state = store.getState();
+    const step = state.dos.step;
+
+    if (step === pollStep) {
+        return;
+    }
+    pollStep = step;
+
+    switch (state.dos.step) {
+        case "emu-ready": {
+            const cachedEmail = state.auth.account?.email;
+            nonSerializableStore.cache = await getCache(cachedEmail ?? "guest");
+
+            if (nonSerializableStore.options.url) {
+                try {
+                    await loadBundleFromUrl(nonSerializableStore.options.url, store.dispatch);
+                } catch (e: any) {
+                    store.dispatch(dosSlice.actions.bndError(e.message));
+                }
+            } else if (nonSerializableStore.options.dosboxConf) {
+                loadBundleFromConfg({
+                    dosboxConf: nonSerializableStore.options.dosboxConf,
+                    jsdosConf: {
+                        version: "8",
+                    },
+                }, store.dispatch);
+            } else {
+                store.dispatch(uiSlice.actions.windowSelect());
+            }
+
+            postJsDosEvent("emu-ready");
+        } break;
+    };
+}
+
+store.subscribe(pollEvents);
+
+
+let skipEmulatorsInit = false;
+export const Dos: DosFn = (element: HTMLDivElement,
+    options: Partial<DosOptions> = {}): DosProps => {
+    nonSerializableStore.options = options;
+    setupRootElement(element);
+
+    if (!skipEmulatorsInit) {
+        skipEmulatorsInit = true;
+        initEmulators(store, options.pathPrefix ?? "https://v8.js-dos.com/latest/emulators/");
+    }
+
+    function setTheme(theme: DosOptions["theme"]) {
+        store.dispatch(uiSlice.actions.theme(theme));
+    }
+
+    function setLang(lang: DosOptions["lang"]) {
+        store.dispatch(i18nSlice.actions.setLang(lang));
+    }
+
+    function setBackend(backend: DosOptions["backend"]) {
+        store.dispatch(dosSlice.actions.dosBackend(backend));
+    }
+
+    function setBackendLocked(locked: boolean) {
+        store.dispatch(dosSlice.actions.dosBackendLocked(locked));
+    }
+
+    function setWorkerThread(workerThread: DosOptions["workerThread"]) {
+        store.dispatch(dosSlice.actions.dosWorker(workerThread));
+    }
+
+    function setMouseCapture(capture: DosOptions["mouseCapture"]) {
+        store.dispatch(dosSlice.actions.mouseCapture(capture));
+    }
+
+    function setServer(server: DosOptions["server"]) {
+        store.dispatch(dosSlice.actions.setServer(server));
+    }
+
+    function setRoom(room: DosOptions["room"]) {
+        store.dispatch(dosSlice.actions.setRoom(room));
+    }
+
+    function setFrame(frame: "network") {
+        store.dispatch(uiSlice.actions.frameNetwork());
+    }
+
+    function setBackground(background: string) {
+        store.dispatch(uiSlice.actions.background(background));
+    }
+
+    function setFullScreen(fullScreen: boolean) {
+        browserSetFullScreen(fullScreen, store.dispatch);
+    }
+
+    if (options.theme) {
+        setTheme(options.theme);
+    }
+
+    if (options.lang) {
+        setLang(options.lang);
+    }
+
+    if (options.backend) {
+        setBackend(options.backend);
+    }
+
+    if (options.backendLocked) {
+        setBackendLocked(options.backendLocked);
+    }
+
+    if (options.workerThread !== undefined) {
+        setWorkerThread(options.workerThread);
+    }
+
+    if (options.mouseCapture !== undefined) {
+        setMouseCapture(options.mouseCapture);
+    }
+
+    if (options.server) {
+        setServer(options.server);
+    }
+
+    if (options.room) {
+        setRoom(options.room);
+    }
+
+    if (options.background) {
+        setBackground(options.background);
+    }
+
+    if (options.fullScreen !== undefined) {
+        setFullScreen(options.fullScreen);
+    }
+
+    render(
+        <Provider store={store}>
+            {<Ui /> as any}
+        </Provider>,
+        element,
+    );
+
+    return {
+        setTheme,
+        setLang,
+        setBackend,
+        setBackendLocked,
+        setWorkerThread,
+        setMouseCapture,
+        setServer,
+        setRoom,
+        setFrame,
+        setBackground,
+        setFullScreen,
+    };
+};
+
+function setupRootElement(root: HTMLDivElement) {
+    nonSerializableStore.root = root;
+    root.classList.add("jsdos-rso");
+    root.addEventListener("contextmenu", (e) => {
+        if (e.target !== null &&
+            (e.target as HTMLElement).classList?.contains("contextmenu")) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+    });
+    document.addEventListener("fullscreenchange", () => {
+        const fullscreen = document.fullscreenElement === root;
+        store.dispatch(uiSlice.actions.setFullScreen(fullscreen));
+    });
+}
+
+(window as any).Dos = Dos;

package/src/non-serializable-store.ts

@@ -0,0 +1,35 @@
+import { CommandInterface, InitFs } from "emulators";
+import { Cache, CacheNoop } from "./host/lcache";
+import { Dispatch } from "@reduxjs/toolkit";
+import { DosOptions } from "./public/types";
+
+export interface LoadedBundle {
+    bundleUrl: string | null,
+    bundleChangesUrl: string | null,
+    bundle: InitFs | null,
+    bundleChanges: Uint8Array | null,
+}
+
+export const nonSerializableStore: {
+    root: HTMLDivElement,
+    dispatch: Dispatch | null,
+    loadedBundle: LoadedBundle | null,
+    ci: CommandInterface | null,
+    cache: Cache,
+    options: Partial<DosOptions>,
+} = {
+    root: null as any,
+    dispatch: null,
+    loadedBundle: null,
+    ci: null,
+    cache: new CacheNoop(),
+    options: {},
+};
+
+export const postJsDosEvent: DosOptions["onEvent"] = (event, ci) => {
+    if (nonSerializableStore.options.onEvent) {
+        setTimeout(() => {
+            nonSerializableStore.options.onEvent?.(event, ci);
+        }, 4);
+    }
+};

package/src/public/types.ts

@@ -0,0 +1,39 @@
+export interface DosOptions {
+    url: string,
+    dosboxConf: string,
+    background: string,
+    pathPrefix: string,
+    theme: "light" | "dark" | "cupcake" | "bumblebee" | "emerald" | "corporate" |
+    "synthwave" | "retro" | "cyberpunk" | "valentine" | "halloween" | "garden" |
+    "forest" | "aqua" | "lofi" | "pastel" | "fantasy" | "wireframe" | "black" |
+    "luxury" | "dracula" | "cmyk" | "autumn" | "business" | "acid" | "lemonade" |
+    "night" | "coffee" | "winter",
+    lang: "ru" | "en",
+    backend: "dosbox" | "dosboxX",
+    backendLocked: boolean,
+    backendHardware: ((backend: "dosbox" | "dosboxX") => Promise<string | null>),
+    workerThread: boolean,
+    mouseCapture: boolean,
+    onEvent: (event: "emu-ready" | "ci-ready" | "bnd-play", ci?: any) => void,
+    server: "netherlands" | "newyork" | "singapore",
+    room: string,
+    fullScreen: boolean,
+}
+
+export interface DosProps {
+    setTheme(theme: DosOptions["theme"]): void;
+    setLang(lang: DosOptions["lang"]): void;
+    setBackend(backend: DosOptions["backend"]): void;
+    setBackendLocked(locked: boolean): void;
+    setWorkerThread(capture: DosOptions["workerThread"]): void;
+    setMouseCapture(capture: DosOptions["mouseCapture"]): void;
+    setServer(server: DosOptions["server"]): void;
+    setRoom(room: DosOptions["room"]): void;
+    setFrame(frame: "network"): void;
+    setBackground(background: string | null): void;
+    setFullScreen(fullScreen: boolean): void;
+}
+
+export type DosFn = (element: HTMLDivElement, options: Partial<DosOptions>) => DosProps;
+
+// declare const Dos: DosFn;

package/src/sidebar/account-button.tsx

@@ -0,0 +1,32 @@
+import { useDispatch, useSelector } from "react-redux";
+import { dispatchLoginAction } from "../store/ui";
+import { State } from "../store";
+
+export function AccountButton(props: {
+    class?: string,
+}) {
+    const account = useSelector((state: State) => state.auth.account);
+    const loggedIn = account !== null;
+    const hightlight = useSelector((state: State) => state.ui.frame) === "account";
+    const dispatch = useDispatch();
+
+    function onClick() {
+        dispatchLoginAction(account, dispatch);
+    }
+
+    return <div class={"sidebar-button " + (hightlight ? "sidebar-highlight " : "") +
+        props.class} onClick={onClick}>
+
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="1.5"
+            stroke="currentColor" class="w-full h-full">
+            <path stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963
+                    0m11.963 0A8.966 8.966 0 0112 21a8.966
+                    8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+
+        {loggedIn === false && <div class="sidebar-badge" />}
+    </div>;
+}

package/src/sidebar/cloud-save-button.tsx

@@ -0,0 +1,89 @@
+import { useState } from "preact/hooks";
+import { useDispatch, useSelector } from "react-redux";
+import { LockBadge } from "../components/lock";
+import { nonSerializableStore } from "../non-serializable-store";
+import { State } from "../store";
+import { uiSlice } from "../store/ui";
+import { DisketteIcon } from "./diskette-icon";
+import { useT } from "../i18n";
+import { putChanges } from "../v8/changes";
+
+export function CloudSaveButton(props: {
+    class?: string,
+}) {
+    const [busy, setBusy] = useState<boolean>(false);
+    const account = useSelector((state: State) => state.auth.account);
+    const disabled = account === null;
+    const dispatch = useDispatch();
+    const t = useT();
+    const cloudSaves = useSelector((state: State) => state.ui.cloudSaves);
+
+    if (!cloudSaves ||
+        nonSerializableStore.loadedBundle === null ||
+        nonSerializableStore.loadedBundle.bundleChangesUrl === null) {
+        return null;
+    }
+
+    async function onClick() {
+        if (disabled) {
+            dispatch(uiSlice.actions.modalLogin());
+            return;
+        }
+
+        if (busy) {
+            return;
+        }
+
+        const ci = nonSerializableStore.ci;
+        const changesUrl = nonSerializableStore.loadedBundle?.bundleChangesUrl;
+
+        if (ci === null || !changesUrl) {
+            return;
+        }
+
+        setBusy(true);
+        try {
+            const changes = await ci.persist(true);
+            if (changes !== null) {
+                if (account === null || !account.premium) {
+                    await nonSerializableStore.cache.put(changesUrl, changes);
+                } else {
+                    await Promise.all([
+                        putChanges(changesUrl, changes),
+                        nonSerializableStore.cache.put(changesUrl, changes),
+                    ]);
+                }
+            }
+
+            dispatch(uiSlice.actions.showToast({
+                message: t("success"),
+                intent: "success",
+            }));
+        } catch (e: any) {
+            dispatch(uiSlice.actions.showToast({
+                message: t("unable_to_save"),
+                intent: "error",
+            }));
+            console.error(e);
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return <div class={"save-button sidebar-button overflow-hidden " +
+        (busy ? " sidebar-highlight " : "") + props.class +
+        (disabled ? " opacity-50" : "")} onClick={onClick}>
+        <div class="w-full h-full flex justify-center">
+            <DisketteIcon />
+            {busy && <div class="sidebar-badge" />}
+            {disabled && <LockBadge />}
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor"
+                class="absolute bottom-1 w-3 h-3 text-primary-content">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775
+                    5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
+            </svg>
+        </div>
+    </div >;
+}

package/src/sidebar/diskette-icon.tsx

@@ -0,0 +1,14 @@
+export function DisketteIcon(props: {
+    class?: string,
+}) {
+    return <svg xmlns="http://www.w3.org/2000/svg"
+        style="padding: 2px"
+        viewBox="0 0 16 16" enable-background="new 0 0 16 16"
+        fill="currentColor" class={ "w-full h-full rounded-lg " + props.class }>
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M15.71,2.29l-2-2C13.53,0.11,13.28,0,13,0h-1v6H4V0H1C0.45,0,0,0.45,0,1v14
+                c0,0.55,0.45,1,1,1h14c0.55,0,1-0.45,1-1V3C16,2.72,15.89,2.47,15.71,2.29z
+                M14,15H2V9c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1V15
+                z M11,1H9v4h2V1z"/>
+    </svg>;
+}

package/src/sidebar/fullscreen-button.tsx

@@ -0,0 +1,44 @@
+import { useDispatch, useSelector } from "react-redux";
+import { State } from "../store";
+import { browserSetFullScreen } from "../host/fullscreen";
+
+export function FullscreenButton(props: {
+    class?: string,
+}) {
+    const fullScreen = useSelector((state: State) => state.ui.fullScreen);
+    const dispatch = useDispatch();
+
+    function onClick() {
+        browserSetFullScreen(!fullScreen, dispatch);
+    }
+    /* eslint-disable max-len */
+    return <div class={"fullscreen-button sidebar-button " + props.class} onClick={onClick}>
+        <div class={"w-full h-full scale-75 hover:scale-90"}>
+            { !fullScreen &&
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                    viewBox="0 0 16 16" fill="currentColor" stroke="none" enable-background="new 0 0 16 16" >
+                    <g>
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99,8.99c-0.28,0-0.53,0.11-0.71,0.29l-3.29,3.29v-1.59c0-0.55-0.45-1-1-1
+                                s-1,0.45-1,1v4c0,0.55,0.45,1,1,1h4c0.55,0,1-0.45,1-1s-0.45-1-1-1H3.41L6.7,10.7c0.18-0.18,0.29-0.43,0.29-0.71
+                                C6.99,9.44,6.54,8.99,5.99,8.99z M14.99-0.01h-4c-0.55,0-1,0.45-1,1s0.45,1,1,1h1.59L9.28,5.29C9.1,5.47,8.99,5.72,8.99,5.99
+                                c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l3.29-3.29v1.59c0,0.55,0.45,1,1,1s1-0.45,1-1v-4C15.99,0.44,15.54-0.01,14.99-0.01
+                                z"/>
+                    </g>
+                </svg>
+            }
+            { fullScreen &&
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                    viewBox="0 0 16 16" fill="currentColor" stroke="none" enable-background="new 0 0 16 16">
+                    <g>
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.99,0.99c0-0.55-0.45-1-1-1c-0.28,0-0.53,0.11-0.71,0.29l-3.29,3.29V1.99
+                            c0-0.55-0.45-1-1-1s-1,0.45-1,1v4c0,0.55,0.45,1,1,1h4c0.55,0,1-0.45,1-1s-0.45-1-1-1h-1.59L15.7,1.7
+                            C15.88,1.52,15.99,1.27,15.99,0.99z M5.99,8.99h-4c-0.55,0-1,0.45-1,1s0.45,1,1,1h1.59l-3.29,3.29c-0.18,0.18-0.29,0.43-0.29,0.71
+                            c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l3.29-3.29v1.59c0,0.55,0.45,1,1,1s1-0.45,1-1v-4C6.99,9.44,6.54,8.99,5.99,8.99z"
+                        />
+                    </g>
+                </svg>
+            }
+        </div>
+    </div >;
+    /* eslint-enable max-len */
+}

package/src/sidebar/network-button.tsx

@@ -0,0 +1,39 @@
+import { useDispatch, useSelector } from "react-redux";
+import { State } from "../store";
+import { uiSlice } from "../store/ui";
+
+export function NetworkButton(props: {
+    class?: string,
+}) {
+    const hightlight = useSelector((state: State) => state.ui.frame) === "network";
+    const inactive = useSelector((state: State) => state.dos.network.ipx !== "connected");
+    const dispatch = useDispatch();
+
+    function onClick() {
+        if (hightlight) {
+            dispatch(uiSlice.actions.frameNone());
+        } else {
+            dispatch(uiSlice.actions.frameNetwork());
+        }
+    }
+
+    return <div class={"network-button sidebar-button " +
+        (hightlight ? " sidebar-highlight " : "") +
+        (inactive ? " inactive " : "") +
+        props.class} onClick={onClick}>
+        <div class="w-full h-full">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor" class="w-full h-full">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0
+                 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565
+                 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z" />
+            </svg>
+            { inactive && <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-full text-error h-full absolute top-0 left-0">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4L18 18" />
+            </svg> }
+        </div>
+
+
+    </div >;
+}