js-dos 0.80.25

package/src/store/auth.ts

@@ -0,0 +1,104 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { nonSerializableStore } from "../non-serializable-store";
+import { getCache } from "../host/lcache";
+import { lStorage } from "../host/lstorage";
+
+const cachedAccount = "cached.account";
+
+export interface Token {
+    access_token: string,
+    refresh_token: string,
+    scope: string,
+    expires_in: number,
+    validUntilMs: number;
+};
+
+export interface Account {
+    email: string,
+    name: null | string,
+    picture: null | string,
+    token: Token,
+    premium: boolean,
+};
+
+const initAccount = (() => {
+    const params = new URLSearchParams(location.search);
+    const refreshToken = params.get("jsdos_token");
+    if (refreshToken !== null) {
+        setRefreshToken(refreshToken);
+        history.replaceState(null, "", location.href.substring(0, location.href.indexOf("?")));
+        return null;
+    } else {
+        const json = lStorage.getItem(cachedAccount);
+        const account = json !== null ? JSON.parse(json) : null;
+        return account !== null && account.token.validUntilMs - Date.now() > 1 * 60 * 60 * 1000 ?
+            account : null;
+    }
+})();
+
+const initialState: {
+    account: Account | null,
+    ready: boolean,
+} = {
+    account: initAccount,
+    ready: initAccount !== null,
+};
+
+export const authSlice = createSlice({
+    name: "auth",
+    initialState,
+    reducers: {
+        login: (state, action: { payload: Account }) => {
+            setRefreshToken(action.payload.token.refresh_token);
+            state.account = action.payload;
+            state.account.premium = state.account.premium ||
+                state.account.email === "dz.caiiiycuk@gmail.com" ||
+                state.account.email === "caiiiycuk@gmail.com";
+            lStorage.setItem(cachedAccount, JSON.stringify(action.payload));
+            getCache(state.account.email)
+                .then((cache) => nonSerializableStore.cache = cache)
+                .catch(console.error)
+                .finally(() => {
+                    nonSerializableStore.dispatch!(authSlice.actions.ready());
+                });
+        },
+        logout: (state) => {
+            clearRefreshToken();
+            lStorage.removeItem(cachedAccount);
+            getCache("guest")
+                .then((cache) => nonSerializableStore.cache = cache)
+                .catch(console.error);
+            state.account = null;
+        },
+        ready: (state) => {
+            state.ready = true;
+        },
+    },
+});
+
+export function postAuthMessage(action: "auth/login" | "auth/authenicate") {
+    const message = {
+        action,
+        refresh_token: action === "auth/authenicate" ? getRefreshToken() : undefined,
+        url: action === "auth/login" ? location.href : undefined,
+    };
+    document.querySelector<HTMLIFrameElement>("#authentificator")!
+        .contentWindow?.postMessage(message, "*");
+}
+
+function getRefreshToken(): string | null {
+    return lStorage.getItem("cached.rt");
+}
+
+function setRefreshToken(refreshToken: string | null) {
+    if (refreshToken === null) {
+        clearRefreshToken();
+        return;
+    }
+
+    return lStorage.setItem("cached.rt", refreshToken);
+}
+
+function clearRefreshToken() {
+    lStorage.removeItem("cached.rt");
+}

package/src/store/dos.ts

@@ -0,0 +1,284 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { makeStore, State } from "../store";
+import { Emulators } from "emulators";
+import { lStorage } from "../host/lstorage";
+import { nonSerializableStore, postJsDosEvent } from "../non-serializable-store";
+
+const alphabet = "qwertyuiopasdfghjklzxcvbnm1234567890";
+declare const emulators: Emulators;
+export interface BundleConfig {
+    name?: string,
+    version?: string,
+    backend?: string,
+    render?: string,
+};
+
+export const BackendValues = <const>["dosbox", "dosboxX"];
+export type Backend = typeof BackendValues[number];
+
+export const RenderBackendValues = <const>["webgl", "canvas"];
+export type RenderBackend = typeof RenderBackendValues[number];
+
+export const RenderAspectValues = <const>["AsIs", "1/1", "5/4", "4/3", "16/10", "16/9", "Fit"];
+export type RenderAspect = typeof RenderAspectValues[number];
+export const FitConstant = 65535;
+
+export const ImageRenderingValues = <const>["pixelated", "smooth"];
+export type ImageRendering = typeof ImageRenderingValues[number];
+
+export interface EmulatorStats {
+    cyclesPerMs: number,
+    nonSkippableSleepPreSec: number,
+    sleepPerSec: number,
+    sleepTimePerSec: number,
+    framePerSec: number,
+    soundPerSec: number,
+    msgSentPerSec: number,
+    msgRecvPerSec: number,
+    netSent: number,
+    netRecv: number,
+    driveSent: number,
+    driveRecv: number,
+    driveRecvTime: number,
+    driveCacheHit: number,
+    driveCacheMiss: number,
+    driveCacheUsed: number,
+};
+
+const initialState: {
+    step:
+    "emu-init" | "emu-error" | "emu-ready" |
+    "bnd-load" | "bnd-error" | "bnd-config" | "bnd-ready" |
+    "bnd-play",
+    emuVersion: string,
+    worker: boolean,
+    backend: Backend,
+    backendLocked: boolean,
+    backendHardware: boolean,
+    renderBackend: RenderBackend,
+    renderAspect: RenderAspect,
+    volume: number,
+    mouseSensitivity: number,
+    mouseCapture: boolean,
+    paused: boolean,
+    error: null | undefined | string,
+    bundle: string | null,
+    config: BundleConfig,
+    stats: EmulatorStats,
+    ci: boolean,
+    network: {
+        server: "netherlands" | "newyork" | "singapore",
+        room: string,
+        ipx: "connecting" | "connected" | "disconnected" | "error",
+    },
+    imageRendering: ImageRendering,
+} = {
+    step: "emu-init",
+    emuVersion: "-",
+    error: null,
+    bundle: null,
+    config: {},
+    worker: lStorage.getItem("worker") !== "false",
+    backend: (lStorage.getItem("backend") ?? "dosbox") as Backend,
+    backendLocked: false,
+    backendHardware: (lStorage.getItem("backendHardware") !== "false"),
+    renderBackend: (lStorage.getItem("renderBackend") ?? "webgl") as RenderBackend,
+    renderAspect: (lStorage.getItem("renderAspect") ?? "AsIs") as RenderAspect,
+    volume: (Number.parseFloat(lStorage.getItem("volume") ?? "1.0")),
+    mouseSensitivity: (Number.parseFloat(lStorage.getItem("mouse_sensitivity") ?? "1.0")),
+    mouseCapture: false,
+    paused: false,
+    stats: {
+        cyclesPerMs: 0,
+        nonSkippableSleepPreSec: 0,
+        sleepPerSec: 0,
+        sleepTimePerSec: 0,
+        framePerSec: 0,
+        soundPerSec: 0,
+        msgSentPerSec: 0,
+        msgRecvPerSec: 0,
+        netRecv: 0,
+        netSent: 0,
+        driveSent: 0,
+        driveRecv: 0,
+        driveRecvTime: 0,
+        driveCacheHit: 0,
+        driveCacheMiss: 0,
+        driveCacheUsed: 0,
+    },
+    network: {
+        server: (lStorage.getItem("net.server") ?? "netherlands") as any,
+        room: randomRoom(),
+        ipx: "disconnected",
+    },
+    ci: false,
+    imageRendering: (lStorage.getItem("imageRendering") ?? "pixelated") as any,
+};
+
+const connectIpx = createAsyncThunk("dos/connectIpx",
+    async (payload: { room: string, address: string }, thunkApi) => {
+        const dos = (thunkApi.getState() as State).dos;
+        if (dos.network.ipx === "connected") {
+            throw new Error("Already connected");
+        }
+        if (dos.ci === false || !nonSerializableStore.ci) {
+            throw new Error("DOS is not started");
+        }
+
+        const canonicalAddress = payload.address.endsWith("/") ?
+            payload.address.substring(0, payload.address.length - 1) :
+            payload.address;
+
+        return nonSerializableStore.ci.networkConnect(0 /* NetworkType.NETWORK_DOSBOX_IPX */,
+            canonicalAddress + ":1900/ipx/" + payload.room.replaceAll("@", "_"));
+    });
+
+export const dosSlice = createSlice({
+    name: "dos",
+    initialState,
+    reducers: {
+        emuReady: (s, a: { payload: string }) => {
+            s.step = "emu-ready";
+            s.emuVersion = a.payload;
+        },
+        emuError: (s, a: { payload: string }) => {
+            s.step = "emu-error";
+            s.error = a.payload ?? "Unexpeceted error";
+        },
+        bndLoad: (s, a: { payload: string }) => {
+            s.step = "bnd-load";
+            s.bundle = a.payload;
+        },
+        bndError: (s, a: { payload: string }) => {
+            s.step = "bnd-error";
+            s.error = a.payload ?? "Unexpeceted error";
+        },
+        bndConfig: (s) => {
+            s.step = "bnd-config";
+        },
+        bndReady: (s, a: { payload: BundleConfig }) => {
+            s.step = "bnd-ready";
+            s.config = a.payload;
+        },
+        bndPlay: (s) => {
+            s.step = "bnd-play";
+            postJsDosEvent("bnd-play");
+        },
+        dosWorker: (s, a: { payload: boolean }) => {
+            s.worker = a.payload;
+            lStorage.setItem("worker", s.worker ? "true" : "false");
+        },
+        dosBackend: (s, a: { payload: Backend }) => {
+            s.backend = a.payload as Backend;
+        },
+        dosBackendLocked: (s, a: { payload: boolean }) => {
+            s.backendLocked = a.payload;
+        },
+        dosBackendHardware: (s, a: { payload: boolean }) => {
+            s.backendHardware = a.payload;
+            lStorage.setItem("backendHardware", s.backendHardware ? "true" : "false");
+        },
+        renderBackend: (s, a: { payload: RenderBackend }) => {
+            s.renderBackend = a.payload;
+            lStorage.setItem("renderBackend", s.renderBackend);
+        },
+        renderAspect: (s, a: { payload: RenderAspect }) => {
+            s.renderAspect = a.payload;
+            lStorage.setItem("renderAspect", s.renderAspect);
+        },
+        imageRendering: (s, a: { payload: ImageRendering }) => {
+            s.imageRendering = a.payload;
+            lStorage.setItem("imageRendering", s.imageRendering);
+        },
+        volume: (s, a: { payload: number }) => {
+            s.volume = a.payload;
+            lStorage.setItem("volume", s.volume + "");
+        },
+        mouseSensitivity: (s, a: { payload: number }) => {
+            s.mouseSensitivity = a.payload;
+            lStorage.setItem("mouse_sensitivity", s.mouseSensitivity + "");
+        },
+        mouseCapture: (s, a: { payload: boolean }) => {
+            s.mouseCapture = a.payload;
+        },
+        paused: (s, a: { payload: boolean }) => {
+            s.paused = a.payload;
+        },
+        stats: (s, a: { payload: EmulatorStats }) => {
+            s.stats = a.payload;
+        },
+        ci: (s, a: { payload: boolean }) => {
+            s.ci = a.payload;
+        },
+        disconnectIpx: (s) => {
+            s.network.ipx = "disconnected";
+            nonSerializableStore.ci?.networkDisconnect(0 /* IPX */);
+        },
+        setRoom: (s, a: { payload: string }) => {
+            s.network.room = a.payload;
+        },
+        setServer: (s, a: { payload: typeof initialState.network.server }) => {
+            s.network.server = a.payload;
+            lStorage.setItem("net.server", a.payload);
+        },
+    },
+    extraReducers: {
+        [connectIpx.fulfilled.type]: (state) => {
+            state.network.ipx = "connected";
+        },
+        [connectIpx.pending.type]: (state) => {
+            state.network.ipx = "connecting";
+        },
+        [connectIpx.rejected.type]: (state) => {
+            state.network.ipx = "error";
+        },
+    },
+});
+
+export const dosExtraActions = {
+    connectIpx,
+};
+
+export function initEmulators(store: ReturnType<typeof makeStore>, pathPrefix: string) {
+    store.dispatch(async (dispatch) => {
+        try {
+            await initEmulatorsJs(pathPrefix);
+            dispatch(dosSlice.actions.emuReady(emulators.version));
+        } catch (e) {
+            console.error("Unable to init emulators.js", e);
+            dispatch(dosSlice.actions.emuError((e as any).message));
+        }
+    });
+}
+
+function initEmulatorsJs(pathPrefix: string) {
+    const el = document.querySelector("#emulators.js");
+    if (el !== null) {
+        return Promise.resolve();
+    }
+
+    return new Promise<void>((resolve, reject) => {
+        const script = document.createElement("script");
+        script.async = true;
+        script.type = "text/javascript";
+        script.src = pathPrefix + "emulators.js";
+        script.onload = () => {
+            emulators.pathPrefix = pathPrefix;
+            resolve();
+        };
+        script.onerror = (err) => {
+            reject(new Error("Unable to add emulators.js. Probably you should set the " +
+                "'pathPrefix' option to point to the js-dos folder."));
+        };
+
+        document.head.appendChild(script);
+    });
+};
+
+function randomSymbol() {
+    return alphabet[Math.round(Math.random() * (alphabet.length - 1))];
+}
+
+function randomRoom() {
+    return randomSymbol() + randomSymbol() + randomSymbol();
+}

package/src/store/editor.ts

@@ -0,0 +1,59 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { DosConfig } from "emulators";
+import { Node } from "react-checkbox-tree";
+import { dosboxconf } from "../frame/editor/defaults";
+
+const initialState: {
+    // step: "empty" | "extract" | "ready" | "error",
+    configChanged: boolean,
+    bundleConfig: DosConfig | null,
+    errorMessage: string | null,
+    fs: Node[],
+} = {
+    // step: "empty",
+    configChanged: false,
+    bundleConfig: null,
+    errorMessage: null,
+    fs: [],
+};
+
+export const editorSlice = createSlice({
+    name: "editor",
+    initialState,
+    reducers: {
+        init: (s, a: { payload: DosConfig | null }) => {
+            if (a.payload === null) {
+                s.configChanged = true;
+                s.bundleConfig = {
+                    dosboxConf: dosboxconf[0].contents,
+                    jsdosConf: {
+                        version: "js-dos-v8",
+                    },
+                };
+            } else {
+                s.configChanged = false;
+                s.bundleConfig = a.payload;
+            }
+        },
+        dosboxConf: (s, a: { payload: string }) => {
+            s.configChanged = true;
+            s.bundleConfig!.dosboxConf = a.payload;
+        },
+        // empty: (s) => {
+        //     s.step = "empty";
+        // },
+        // extract: (s) => {
+        //     s.step = "extract";
+        // },
+        // ready: (s) => {
+        //     s.step = "ready";
+        // },
+        // config: (s, a: { payload: DosConfig | null }) => {
+        //     s.bundleConfig = a.payload;
+        // },
+        // error: (s, a: { payload: string }) => {
+        //     s.step = "error";
+        //     s.errorMessage = a.payload;
+        // },
+    },
+});

package/src/store/storage.ts

@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: {
+    recived: number,
+    total: number,
+    ready: boolean,
+} = {
+    recived: 0,
+    total: 0,
+    ready: false,
+};
+
+export const storageSlice = createSlice({
+    name: "storage",
+    initialState,
+    reducers: {
+        reset: (s) => {
+            s.recived = -1;
+            s.total = 0;
+            s.ready = false;
+        },
+        progress: (s, a: { payload: [number, number ] }) => {
+            s.recived = a.payload[0];
+            s.total = a.payload[1];
+        },
+        ready: (s) => {
+            s.ready = true;
+        },
+    },
+});

package/src/store/ui.ts

@@ -0,0 +1,183 @@
+import { Dispatch, createAction, createSlice } from "@reduxjs/toolkit";
+import { lStorage } from "../host/lstorage";
+import { nonSerializableStore } from "../non-serializable-store";
+import { Account } from "./auth";
+
+export const ThemeValues = <const>["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"];
+export type Theme = typeof ThemeValues[number];
+
+export type Frame = "none" | "account" | "settings" |
+    "editor-conf" | "editor-fs" | "network" |
+    "stats" | "host-cache" | "quick-save" | "image-rendering";
+
+const initialState: {
+    modal: "none" | "login",
+    frame: Frame,
+    frameXs: boolean,
+    window: "none" | "error" | "loading" | "prerun" | "run" | "select",
+    theme: Theme,
+    editor: boolean,
+    wideScreen: boolean,
+    fullScreen: boolean,
+    toast: string | null,
+    toastIntent: "none" | "error" | "success" | "panic",
+    toastTimeoutId: number,
+    background: string | null,
+    readOnlyWarning: boolean,
+    cloudSaves: boolean,
+} = {
+    modal: "none",
+    frame: "none",
+    frameXs: false,
+    window: "none",
+    theme: (lStorage.getItem("theme") ?? "dark") as Theme,
+    editor: false,
+    wideScreen: true,
+    fullScreen: false,
+    toast: null,
+    toastIntent: "none",
+    toastTimeoutId: 0,
+    background: null,
+    readOnlyWarning: false,
+    cloudSaves: true,
+};
+
+export const uiSlice = createSlice({
+    name: "js-dos v8s",
+    initialState,
+    reducers: {
+        theme: (state, a: { payload: Theme }) => {
+            lStorage.setItem("theme", a.payload);
+            state.theme = a.payload;
+        },
+        modalLogin: (state) => {
+            state.modal = "login";
+        },
+        modalNone: (state) => {
+            state.modal = "none";
+        },
+        frameNone: (state) => {
+            state.frame = "none";
+            state.frameXs = false;
+        },
+        frameAccount: (state) => {
+            toggleFrameIfNeeded(state, "account");
+            state.frameXs = false;
+        },
+        frameSettings: (state) => {
+            state.frame = "settings";
+            state.frameXs = false;
+        },
+        frameNetwork: (state) => {
+            state.frame = "network";
+            state.frameXs = false;
+        },
+        frameStats: (state) => {
+            state.frame = "stats";
+            state.frameXs = false;
+        },
+        frameConf: (state) => {
+            state.frame = "editor-conf";
+            state.frameXs = false;
+        },
+        frameFs: (state) => {
+            state.frame = "editor-fs";
+            state.frameXs = false;
+        },
+        frameHostCache: (state) => {
+            state.frame = "host-cache";
+            state.frameXs = false;
+        },
+        frameQuickSave: (state) => {
+            state.frame = "quick-save";
+            state.frameXs = true;
+        },
+        frameImageRendering: (state) => {
+            state.frame = "image-rendering";
+            state.frameXs = false;
+        },
+        windowSelect: (state) => {
+            state.window = "select";
+        },
+        background: (state, a: { payload: string }) => {
+            state.background = a.payload;
+        },
+        setEditor: (state, a: { payload: boolean }) => {
+            state.editor = a.payload;
+        },
+        setWideScreen: (state, a: { payload: boolean }) => {
+            state.wideScreen = a.payload;
+        },
+        setFullScreen: (state, a: { payload: boolean }) => {
+            state.fullScreen = a.payload;
+        },
+        showToast: (state, a: { payload: { message: string, intent?: typeof initialState.toastIntent } }) => {
+            if (state.toastTimeoutId !== 0) {
+                clearInterval(state.toastTimeoutId);
+            }
+            state.toast = a.payload.message;
+            state.toastIntent = a.payload.intent ?? "none";
+            if (a.payload.intent !== "panic") {
+                state.toastTimeoutId = setTimeout(() => {
+                    nonSerializableStore.dispatch!(uiSlice.actions.hideToast());
+                }, 1500);
+            }
+        },
+        hideToast: (state) => {
+            state.toast = null;
+            state.toastTimeoutId = 0;
+        },
+        readOnlyWarning: (state, a: { payload: boolean }) => {
+            state.readOnlyWarning = a.payload;
+        },
+        cloudSaves: (state, a: { payload: boolean }) => {
+            state.cloudSaves = a.payload;
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(createAction<string>("dos/bndLoad"), (s, a) => {
+                s.window = "loading";
+            })
+            .addCase(createAction<string>("editor/extract"), (s, a) => {
+                s.window = "loading";
+            })
+            .addCase(createAction<string>("editor/ready"), (s, a) => {
+                s.window = "prerun";
+            })
+            .addCase(createAction<string>("dos/bndReady"), (s, a) => {
+                s.window = "prerun";
+            })
+            .addCase(createAction<string>("dos/bndPlay"), (s, a) => {
+                s.window = "run";
+                s.frame = "none";
+            })
+            .addMatcher((action: { type: string }) => {
+                return action.type.startsWith("dos/") &&
+                    action.type.endsWith("Error");
+            }, (s, a) => {
+                s.window = "error";
+            });
+    },
+});
+
+function toggleFrameIfNeeded(
+    state: typeof initialState,
+    newFrame: typeof initialState.frame) {
+    if (state.frame === newFrame) {
+        state.frame = "none";
+    } else {
+        state.frame = newFrame;
+    }
+}
+
+export function dispatchLoginAction(account: Account | null, dispatch: Dispatch) {
+    if (account === null) {
+        dispatch(uiSlice.actions.modalLogin());
+    } else {
+        dispatch(uiSlice.actions.frameAccount());
+    }
+}

package/src/store.ts

@@ -0,0 +1,27 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { uiSlice } from "./store/ui";
+import { authSlice } from "./store/auth";
+import { dosSlice } from "./store/dos";
+import { i18nSlice } from "./i18n";
+import { storageSlice } from "./store/storage";
+import { editorSlice } from "./store/editor";
+import { nonSerializableStore } from "./non-serializable-store";
+
+export function makeStore() {
+    return configureStore({
+        reducer: {
+            i18n: i18nSlice.reducer,
+            auth: authSlice.reducer,
+            ui: uiSlice.reducer,
+            dos: dosSlice.reducer,
+            storage: storageSlice.reducer,
+            editor: editorSlice.reducer,
+        },
+    });
+};
+
+export const store = makeStore();
+
+export type State = ReturnType<typeof store.getState>;
+
+nonSerializableStore.dispatch = store.dispatch;