js-dos 7.4.9 → 8.1.0

package/src/host/lstorage.ts

@@ -0,0 +1,156 @@
+const MAX_VALUE_SIZE = 1024;
+const NEXT_PART_SYMBOL = "@";
+const NEXT_PART_SYFFIX = ".";
+
+class MemStorage implements Storage {
+    length = 0;
+
+    private storage: {[key: string]: string} = {};
+
+    setItem(key: string, value: string): void {
+        this.storage[key] = value;
+        this.length = Object.keys(this.storage).length;
+    }
+
+    getItem(key: string): string | null {
+        const value = this.storage[key];
+        return value === undefined ? null : value;
+    }
+
+    removeItem(key: string): void {
+        delete this.storage[key];
+        this.length = Object.keys(this.storage).length;
+    }
+
+    key(index: number): string | null {
+        const keys = Object.keys(this.storage);
+        return keys[index] === undefined ? null : keys[index];
+    }
+
+    clear() {
+        this.length = 0;
+        this.storage = {};
+    }
+}
+
+
+class LStorage implements Storage {
+    private backend: Storage;
+    length: number;
+    prefix: string;
+
+    constructor(backend: Storage | undefined, prefix: string) {
+        this.prefix = prefix;
+
+        try {
+            this.backend = backend || localStorage;
+            this.testBackend();
+        } catch (e) {
+            this.backend = new MemStorage();
+        }
+
+        this.length = this.backend.length;
+
+        if (typeof this.backend.sync === "function") {
+            (this as any).sync = (callback: any) => {
+                this.backend.sync(callback);
+            };
+        }
+    }
+
+    private testBackend() {
+        const testKey = this.prefix + ".test.record";
+        const testValue = "123";
+        this.backend.setItem(testKey, testValue);
+        const readedValue = this.backend.getItem(testKey);
+        this.backend.removeItem(testKey);
+        const valid = readedValue === testValue && this.backend.getItem(testKey) === null;
+
+        if (!valid) {
+            throw new Error("Storage backend is not working properly");
+        }
+    }
+
+    setLocalStoragePrefix(prefix: string) {
+        this.prefix = prefix;
+    }
+
+    clear(): void {
+        if (!this.backend.length) {
+            return;
+        }
+
+        const toRemove: string[] = [];
+        for (let i = 0; i < this.backend.length; ++i) {
+            const next = this.backend.key(i);
+            if (next && next.startsWith(this.prefix)) {
+                toRemove.push(next);
+            }
+        }
+
+        for (const next of toRemove) {
+            this.backend.removeItem(next);
+        }
+        this.length = this.backend.length;
+    }
+
+    key(index: number): string | null {
+        return this.backend.key(index);
+    }
+
+    setItem(key: string, value: string): void {
+        if (!value || value.length === undefined || value.length === 0) {
+            this.writeStringToKey(key, "");
+            return;
+        }
+
+        let offset = 0;
+        while (offset < value.length) {
+            let substr = value.substr(offset, MAX_VALUE_SIZE);
+            offset += substr.length;
+
+            if (offset < value.length) {
+                substr += NEXT_PART_SYMBOL;
+            }
+
+            this.writeStringToKey(key, substr);
+            key += NEXT_PART_SYFFIX;
+        }
+    }
+
+    getItem(key: string): string | null {
+        let value = this.readStringFromKey(key);
+        if (value === null) {
+            return null;
+        }
+
+        if (value.length === 0) {
+            return value;
+        }
+
+        while (value[value.length - 1] === NEXT_PART_SYMBOL) {
+            value = value.substr(0, value.length - 1);
+            key += NEXT_PART_SYFFIX;
+            const next = this.readStringFromKey(key);
+            value += next === null ? "" : next;
+        }
+
+        return value;
+    }
+
+    removeItem(key: string): void {
+        this.backend.removeItem(this.prefix + key);
+        this.length = this.backend.length;
+    }
+
+    private writeStringToKey(key: string, value: string) {
+        this.backend.setItem(this.prefix + key, value);
+        this.length = this.backend.length;
+    }
+
+    private readStringFromKey(key: string) {
+        return this.backend.getItem(this.prefix + key);
+    }
+}
+
+export const lStorage = new LStorage(undefined, "jsdos.8.");

package/src/i18n.ts

@@ -0,0 +1,179 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { useSelector } from "react-redux";
+import { State } from "./store";
+
+const translations: {[lang: string]: {[key: string]: string} } = {
+    ru: {
+        preloading_sockdrive: "Загрузка FAT",
+        filter: "Фильтр",
+        add: "Добавить",
+        logout: "Выйти",
+        please_login: "Войдите в аккаунт",
+        features: "Функции",
+        premium: "Премиум",
+        buy: "Купить",
+        experimental_features: "Доступ к экспериентальным функциям",
+        cloud_saves: "Облачные сохранения",
+        writeable_fat32: "FAT32 диски",
+        net_no_limits: "Выбор сервера для стевой игры",
+        unlock_options: "Доступ ко всем настройкам",
+        error: "Упс... Что-то пошло не так...",
+        consult_logs: "Проверьте логи браузера",
+        bundle_loading: "Загрузка бандла",
+        bundle_config: "Чтение конфигурации",
+        try_free: "дней бесплатно",
+        upload_file: "Выбирите архив jsdos/zip что бы начать...",
+        emulation_backend: "Эмуляция",
+        render_backend: "Рендер",
+        render_aspect: "Соотношение сторон",
+        worker: "Фоновый поток",
+        mouse_sensitivity: "Чувст. мыши",
+        mouse_lock: "Захват мыши",
+        volume: "Громкость",
+        pause: "Пауза",
+        dosboxconf_template: "dosbox.conf шаблон:",
+        preview: "Превью",
+        continue: "Продолжить",
+        skip: "Пропустить",
+        loading: "Загрузка",
+        extract_loading: "Распаковка архива",
+        extract_long_time: "Может занять длительное время, пожалуйста ждите...",
+        theme: "Тема",
+        create_empty: "Создать пустой бандл",
+        uploading_file: "Загрузка файла",
+        fs_restart: "Вы хотите пересобрать бандл используя эту FS?",
+        please_wait: "Пожалуйста подождите",
+        making_bundle: "Создаем бандл",
+        size: "Размер",
+        room: "Команта",
+        server: "Сервер",
+        load_by_url: "Загрузить по ссылке",
+        enter_url: "Введите ссылку",
+        load: "Загрузить",
+        stored: "Сохраненные",
+        delete: "Удалить",
+        editor: "Редактор",
+        download: "Скачать",
+        changes: "Сохранения",
+        account_not_ready: "Пропустить загрузку сохранений",
+        loading_saves: "Загрузка сохранений",
+        success: "Успешно",
+        unable_to_save: "Ошибка записи",
+        not_premium: "Подключить премиум",
+        copy_net_link: "Отправьте ссылку на подключение",
+        copied: "Скопировано",
+        image_rendering: "Обработка изображения",
+        read_only_access: "Диск FAT32 открыт только для чтения",
+        fix: "Исправить",
+        close: "Закрыть",
+        cancle: "Отказаться",
+        manage: "Управлять",
+        unable_to_cancle_subscription: "Не удалось отменить подписку",
+        subscription_cancelled: "Подписка отменена",
+        hardware: "Аппаратное ускорение",
+        net_drives: "Сетевые диски",
+        fat_write: "FAT запись",
+    },
+    en: {
+        preloading_sockdrive: "Preloading FAT",
+        filter: "Filter",
+        add: "Add",
+        logout: "Logout",
+        please_login: "Please login",
+        features: "Features",
+        premium: "Premium",
+        buy: "Buy",
+        experimental_features: "Access to all experimental features",
+        cloud_saves: "Cloud saves",
+        writeable_fat32: "Writable FAT32",
+        net_no_limits: "Change the network region",
+        unlock_options: "Unlock all configuration options",
+        error: "Oops... Something went wrong...",
+        consult_logs: "Please check browser logs",
+        bundle_loading: "Bundle loading",
+        bundle_config: "Reading config",
+        try_free: "days for free",
+        upload_file: "Select jsdos/zip file to start...",
+        emulation_backend: "Emulation",
+        render_backend: "Render",
+        render_aspect: "Aspect",
+        worker: "Worker thread",
+        mouse_sensitivity: "Mouse sens...",
+        mouse_lock: "Capture mouse",
+        volume: "Volume",
+        pause: "Pause",
+        dosboxconf_template: "dosbox.conf template:",
+        preview: "Preview",
+        continue: "Continue",
+        skip: "Skip",
+        loading: "Loading",
+        extract_loading: "Unpacking archive",
+        extract_long_time: "Can take long time, please be patient...",
+        theme: "Theme",
+        create_empty: "Create empty bundle",
+        uploading_file: "Uploading file",
+        fs_restart: "Do you want to rebuild the bundle using this fs?",
+        please_wait: "Please wait",
+        making_bundle: "Creating bundle",
+        size: "Size",
+        room: "Room",
+        server: "Server",
+        load_by_url: "Load by url",
+        enter_url: "Enter url",
+        load: "Load",
+        stored: "Stored",
+        delete: "Delete",
+        editor: "Editor",
+        download: "Download",
+        changes: "Saves",
+        account_not_ready: "Skip loading saves",
+        loading_saves: "Loading saves",
+        success: "Success",
+        unable_to_save: "Unable to save",
+        not_premium: "Subscribe to premium",
+        copy_net_link: "Share this link to connect",
+        copied: "Copied",
+        image_rendering: "Image rendering",
+        read_only_access: "The FAT32 drive is open in read-only mode",
+        fix: "Fix",
+        close: "Close",
+        cancle: "Cancle",
+        manage: "Manage",
+        unable_to_cancle_subscription: "Unable to cancle subscription",
+        subscription_cancelled: "Subscription cancelled",
+        hardware: "Hardware acceleration",
+        net_drives: "Net drives",
+        fat_write: "Writeable FAT",
+    },
+};
+
+const initialLang = navigator.language.startsWith("ru") ? "ru" : "en";
+
+const initialState: {
+    lang: "ru" | "en",
+    keys: {[key: string]: string},
+} = {
+    lang: initialLang,
+    keys: translations[initialLang],
+};
+
+export type I18NState = typeof initialState;
+
+export const i18nSlice = createSlice({
+    name: "i18n",
+    initialState,
+    reducers: {
+        setLang: (state, action: { payload: "ru" | "en" }) => {
+            state.lang = action.payload;
+            state.keys = translations[action.payload];
+        },
+    },
+});
+
+export function useT() {
+    const keys = useSelector((state: State) => state.i18n.keys);
+    return (key: string) => {
+        return keys[key] ?? key;
+    };
+};
+

package/src/index.css

@@ -0,0 +1,7 @@
+@import "./base.css";
+@import "./app.css";
+@import "./components/components.css";
+@import "./sidebar/sidebar.css";
+@import "./login/login.css";
+@import "./window/window.css";
+@import "./frame/frame.css";

package/src/load.ts

@@ -0,0 +1,132 @@
+import { Dispatch, Store, Unsubscribe } from "@reduxjs/toolkit";
+import { DosConfig, Emulators } from "emulators";
+import { dosSlice } from "./store/dos";
+import { bundleFromChanges, bundleFromFile, bundleFromUrl } from "./host/bundle-storage";
+import { uiSlice } from "./store/ui";
+import { editorSlice } from "./store/editor";
+import { getChangesUrl } from "./v8/changes";
+import { storageSlice } from "./store/storage";
+import { getNonSerializableStore } from "./store";
+
+declare const emulators: Emulators;
+
+export async function loadEmptyBundle(store: Store) {
+    await doLoadBundle("empty.jsdos",
+        (async () => {
+            const bundle = await emulators.bundle();
+            return bundle.toUint8Array();
+        })(), null, null, store);
+
+    store.dispatch(uiSlice.actions.frameConf());
+    store.dispatch(uiSlice.actions.setEditor(true));
+}
+
+export async function loadBundle(bundle: Uint8Array, openConfig: boolean, store: Store) {
+    await doLoadBundle("bundle.jsdos", Promise.resolve(bundle),
+        null, null, store);
+    if (openConfig) {
+        store.dispatch(uiSlice.actions.frameConf());
+    }
+}
+
+export function loadBundleFromFile(file: File, store: Store) {
+    return doLoadBundle(file.name,
+        bundleFromFile(file, store),
+        null, null, store);
+}
+
+export async function loadBundleFromConfg(config: DosConfig, store: Store) {
+    const nonSerializableStore = getNonSerializableStore(store);
+    const dispatch = store.dispatch;
+    nonSerializableStore.loadedBundle = null;
+
+    dispatch(editorSlice.actions.init(config));
+    syncWithConfig(config, dispatch);
+
+    nonSerializableStore.loadedBundle = {
+        bundleUrl: null,
+        bundleChangesUrl: null,
+        bundle: config,
+        bundleChanges: null,
+    };
+    dispatch(dosSlice.actions.bndReady({}));
+}
+
+export async function loadBundleFromUrl(url: string, store: Store) {
+    const owner = store.getState().auth.account?.email ?? "guest";
+    const changesUrl = await getChangesUrl(owner, url);
+    return doLoadBundle(url,
+        bundleFromUrl(url, store),
+        changesProducer(changesUrl, store),
+        url,
+        store);
+}
+
+async function doLoadBundle(bundleName: string,
+                            bundlePromise: Promise<Uint8Array>,
+                            bundleChangesPromise: (ReturnType<typeof changesProducer>) | null,
+                            bundleUrl: string | null,
+                            store: Store) {
+    const nonSerializableStore = getNonSerializableStore(store);
+    const dispatch = store.dispatch;
+    nonSerializableStore.loadedBundle = null;
+
+
+    dispatch(dosSlice.actions.bndLoad(bundleName));
+
+    const bundle = await bundlePromise;
+    dispatch(storageSlice.actions.ready());
+    const bundleChanges = await bundleChangesPromise;
+    dispatch(dosSlice.actions.bndConfig());
+
+    const config = await emulators.bundleConfig(bundle);
+    dispatch(editorSlice.actions.init(config));
+    if (config === null) {
+        dispatch(uiSlice.actions.frameConf());
+    } else {
+        syncWithConfig(config, dispatch);
+    }
+
+    nonSerializableStore.loadedBundle = {
+        bundleUrl,
+        bundleChangesUrl: bundleChanges?.url ?? null,
+        bundle,
+        bundleChanges: bundleChanges?.bundle ?? null,
+    };
+    dispatch(dosSlice.actions.bndReady({}));
+}
+
+async function changesProducer(bundleUrl: string, store: Store): Promise<{
+    url: string,
+    bundle: Uint8Array | null,
+}> {
+    if (!store.getState().auth.ready) {
+        await new Promise<void>((resolve) => {
+            let unsubscirbe: Unsubscribe | null = null;
+            const updateFn = () => {
+                if (store.getState().auth.ready) {
+                    unsubscirbe!();
+                    resolve();
+                }
+            };
+            unsubscirbe = store.subscribe(updateFn);
+        });
+    }
+
+    const account = store.getState().auth.account;
+    const owner = account?.email ?? "guest";
+    const url = getChangesUrl(owner, bundleUrl);
+    const bundle = await bundleFromChanges(url, account, store);
+    return {
+        url,
+        bundle,
+    };
+}
+
+function syncWithConfig(config: DosConfig, dispatch: Dispatch) {
+    if (config.dosboxConf.indexOf("sockdrive") >= 0) {
+        dispatch(dosSlice.actions.dosBackendLocked(true));
+        dispatch(dosSlice.actions.dosBackend("dosboxX"));
+    }
+    dispatch(dosSlice.actions.mouseCapture(config.dosboxConf.indexOf("autolock=true") >= 0));
+}

package/src/login/login.css

@@ -0,0 +1,9 @@
+.jsdos-rso {
+  .login-widget {
+    @apply absolute z-40 left-12 top-0 bottom-0 right-0 bg-white;
+
+    iframe {
+      @apply w-full h-full p-0 m-0 border-0;
+    }
+  }
+}

package/src/login/login.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from "preact/hooks";
+import { useDispatch, useSelector } from "react-redux";
+import { State } from "../store";
+import { uiSlice } from "../store/ui";
+import { CloseButton } from "../components/close-button";
+import { authentificator } from "../v8/config";
+import { Account, authSlice, postAuthMessage } from "../store/auth";
+import { havePremium } from "../v8/subscriptions";
+
+export function Login() {
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const activeAccount = useSelector((state: State) => state.auth.account);
+    const visible = useSelector((state: State) => state.ui.modal) === "login";
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (activeAccount != null) {
+            return;
+        }
+
+        const iframe = iframeRef.current;
+        if (iframe === null) {
+            dispatch(authSlice.actions.logout({}));
+            dispatch(authSlice.actions.ready());
+            console.error("Unable to inialize authentificator!");
+            return;
+        }
+
+        async function onAuthMessage(e: any) {
+            if (e.data.action === "auth/ready") {
+                postAuthMessage("auth/authenicate");
+            } else if (e.data.action === "auth/authenicate") {
+                const account = e.data.account as Account | null;
+                if (account !== null) {
+                    try {
+                        account.premium = await havePremium(account.token.access_token);
+                    } catch (e: any) {
+                        console.error(e);
+                        account.premium = false;
+                    }
+                    dispatch(authSlice.actions.login(e.data.account));
+                } else {
+                    dispatch(authSlice.actions.logout({}));
+                    dispatch(authSlice.actions.ready());
+                }
+            }
+        }
+
+        window.addEventListener("message", onAuthMessage);
+        iframe.src = authentificator;
+
+        return () => {
+            window.removeEventListener("message", onAuthMessage);
+        };
+    }, []);
+
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (iframe === null) {
+            return;
+        }
+
+        postAuthMessage("auth/login");
+    }, [visible]);
+
+    return <div
+        id={"login"}
+        class={
+            "login-widget " + (visible ? "block" : "hidden")
+        }>
+        <iframe id="authentificator" ref={iframeRef} />
+        <CloseButton
+            class="absolute z-40 right-24 top-10"
+            onClose={() => dispatch(uiSlice.actions.modalNone()) }
+        />
+    </div>;
+}